HTML Tutorial / Form Structure and GET vs. POST

A form groups controls whose values users submit. To understand where the data goes, distinguish the controls' name attributes, the destination in action, and the request method in method. HTML can build the input interface, but saving or searching data requires a server-side handler.

Build a small search form

The example accepts a search term. Replace /search with a real endpoint before using it on a site.

<form action="/search" method="get">
  <label for="keyword">Search term</label>
  <input id="keyword" name="q" type="search">
  <button type="submit">Search</button>
</form>

The label's for matches the input's id, giving the field a name. name="q" identifies the value in the submitted data. Entering “HTML” typically produces a URL containing ?q=HTML. An id without a name can still connect a label, but the field's value is normally not included in the submission.

action names the destination; method chooses how the browser sends the values. If both are omitted, the form submits to the current URL using GET by default. Try a term with spaces or non-ASCII letters: the address bar may show an encoded representation of those characters. That is a transport format, not a sign that the input disappeared.

Choose GET or POST

GET places the form data in the URL query string. It suits searches and filters that users may bookmark or share. Do not use it to send passwords or other sensitive values because the data is visible in the URL. POST sends form data in the request body and is commonly used for operations that change server state, such as creating an account or submitting a message. POST does not encrypt data by itself; sensitive submissions need HTTPS and appropriate server handling.

<form action="/contact" method="post">
  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>
  <button type="submit">Send</button>
</form>

/contact is an illustrative path. Without a server at that address, the request may lead to an error page. A path beginning with / is relative to the site's root, so it is not a working handler when you simply open a local file. To inspect GET without a server, set the first example's action="" and observe the URL after submission. A local file URL may display differently across browsers. Do not submit personal information to an example endpoint.

Why might a field be missing from submitted data?

A disabled control cannot be edited and is not submitted. If you need an uneditable value to be submitted, check whether that control type supports readonly. Only checked checkboxes and radio buttons contribute their values. A file upload requires additional form settings and server processing; adding a file input to this example alone is not enough.

If the result is unexpected, first check each control's name, then whether a selectable control is checked, then whether the URL and method match the server. A browser's Network panel can show the request even when the server responds with an error. A correct request does not imply that the server saved the value. See the MDN form reference for submission details.