Module 6: Forms · Lesson 1 of 7
How to Make a Form in HTML: form, input and button
All lessons in Module 6
Goal: Make a form with a named text input and a button that sends it.
Quick review
Two questions from earlier modules to keep them fresh.
Learn
Whenever a page asks the visitor for something, such as a search term, an email address or an order, it uses a form. The basic version has three parts:
<form>wraps everything. Itsactionattribute is the address the data goes to.<input>is a box to type in. It is a void element and has no closing tag.- A
<button>inside the form sends it.
Watch the name attribute. On sending, each value travels as a name=value pair, such as city=Paris. An input with no name gets left out.
This preview doesn't actually send anything. It shows you the data that would go. The form element section of the HTML standard (opens in a new tab) lists every attribute a form accepts.
The short version
<form>wraps the controls, and itsactionis the address that receives the data.<input>is a void element. It has no closing tag and no content.- Every control travels as a
name=valuepair. Without aname, it is never sent. - Clicking a
<button>inside the form sends it. So does pressing Enter in a text box.
Example
<form action="/weather">
<input type="text" name="city">
<button>Check weather</button>
</form>Your task
Put a recipe search box below the heading:
- A
<form>withaction="/search". - Inside it, an
<input>withtype="text"andname="dish". - After the input, a
<button>that saysSearch.
To test it, type pancakes and click Search. You should see dish=pancakes in the preview.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<form action="/search">
</form>
<input type="text" name="dish">
<button>Search</button>Right
<form action="/search">
<input type="text" name="dish">
<button>Search</button>
</form>Controls placed after the closing form tag belong to no form, so the button sends nothing and the input's value goes nowhere.
Wrong
<form action="/search">
<input type="text" id="dish">
<button>Search</button>
</form>Right
<form action="/search">
<input type="text" id="dish" name="dish">
<button>Search</button>
</form>An id is for labels, links and CSS; the value is sent only when the input has a name attribute.
Go deeper
Submitting a GET form sets off a few steps. The browser collects every named control and makes the values URL-safe with percent-encoding (opens in a new tab) (a space becomes +, an & becomes %26). Then it joins the pairs with &. A search for apple pie in your form loads /search?dish=apple+pie. Search engines and shops use GET for their search boxes for this reason: every results page gets an address you can bookmark.
Keyboard support comes built in. Pressing Enter in a single-line text box submits the form, so visitors rarely reach for the mouse. A form with no action sends its data to the address of the current page.
For site search, the HTML Living Standard now has a <search> element. A search form wrapped in it is announced to assistive technology as the search area, much like <nav> marks navigation.
Keep name values short, lowercase and stable, like dish or email. The server code that reads them expects those exact names, and renaming one later breaks it.
Frequently asked questions
How do I make a form in HTML?
Wrap your fields in a <form> element whose action attribute points at the address that should receive the data. Inside it, add one <input> with a name for each answer you need, then a <button> at the end. On a click, the browser sends every named value as name=value. If you want ready-made fields with the right attributes, a free HTML input generator (opens in a new tab) can write the markup.
What is the difference between GET and POST in an HTML form?
They send the data different ways, chosen with the method attribute. GET is the default and puts the data in the address, like /search?dish=pancakes, which is great for searches people bookmark or share. method="post" puts it in the body of the request, a better fit for sign-ups, orders and passwords. Neither encrypts anything. Encryption comes from HTTPS (opens in a new tab).
Does an HTML form work without a server?
Only halfway. HTML builds the form and sends the data, but something at the action address has to receive it: a server script, a website platform, or a form service that emails you the answers. With no receiver, the browser sends the data and then shows an error page. This course's preview displays the sent data for you. Next, give every field a visible caption, as in the lesson on labels.