HTML Forms

Imagine visiting a doctor's office for the first time. The receptionist hands you a clipboard containing a blank paper form with boxes to write down your name, address, and medical history. You fill in the boxes and return the clipboard to the receptionist. HTML forms are those digital clipboards. They allow your website visitors to type in data, select options, and submit information directly to your server. Forms are essential for handling search queries, user feedback, accounts, and interactive calculators.

In this page:

The form Element
Text Inputs and Labels
Selection Buttons (Radio and Checkboxes)
Dropdown Selection Menus (select)
The Submit Action Button
Form Validation Attributes
Fieldset and Legend
The enctype Attribute
The autocomplete Attribute
The novalidate Attribute
The datalist Element
GET vs POST Explained

Syntax

markup

<form action="url" method="post">
  <label for="id">Label</label>
  <input type="text" id="id" name="name">
  <button type="submit">Submit</button>
</form>

The form Element

The form tag is the container that groups all your input fields, buttons, and selection menus together. It tells the browser that the data entered inside this container should be packaged and sent to a server.

Note:

Always group your input fields inside a form element to ensure the data submits successfully.
Accepted attributes:
action — URL that processes the form
method — get | post | dialog
enctype — application/x-www-form-urlencoded | multipart/form-data | text/plain
target — _self | _blank | _parent | _top
autocomplete — on | off
novalidate — boolean

Warning: Placing input fields outside of a form container can prevent the data from packaging and submitting correctly.

Example: The form Element

markup

<form action="/submit" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
</form>

Text Inputs and Labels

The input tag defines an input field where users can enter data, and the label tag provides a clear text description for that field. Linking your labels to your inputs makes your forms highly accessible and easy to click.

Note:

Link your labels to your inputs by matching the label's for attribute with the input's id attribute.
Accepted attributes:
input type — text | password | email | number | search | tel | url
name — key used when submitting
id — must match the label for attribute
label for — id of the associated control
placeholder / required / value

Warning: Failing to link your labels to your inputs makes your forms difficult to navigate for screen-reader users.

Example: Text Inputs and Labels

markup

<form action="/submit" method="post">
  <label for="email">Email:</label>
  <input type="text" id="email" name="email">
</form>

Selection Buttons (Radio and Checkboxes)

Radio buttons are used when you want users to select exactly one option from a list, while checkboxes allow users to select multiple options at the same time.

Note:

To group radio buttons together, make sure they all share the exact same name attribute.
Accepted attributes:
type — radio | checkbox
name — radios with the same name form one group
value — data sent when selected
checked — boolean; preselects
required / disabled — booleans

Warning: If you forget to give your radio buttons the same name, users will be able to select multiple options, which defeats the purpose.

Example: Selection Buttons (Radio and Checkboxes)

markup

<form action="/submit" method="post">
  <input type="radio" id="plan-basic" name="plan" value="basic">
  <label for="plan-basic">Basic</label>

  <input type="radio" id="plan-pro" name="plan" value="pro">
  <label for="plan-pro">Pro</label>

  <input type="checkbox" id="newsletter" name="newsletter">
  <label for="newsletter">Subscribe</label>
</form>

Dropdown Selection Menus (select)

The select element is used to create a clean, compact dropdown menu. It is perfect for displaying lists of options (like countries or file types) without cluttering your page layout.

Note:

Add a disabled selected option at the top of your list to act as a placeholder instruction.
Accepted attributes:
select name — key submitted
select multiple — boolean; allow more than one selection
select size — number of visible rows
option value — data sent
option selected — boolean; preselected
option disabled — boolean

Warning: Make sure you include the value attribute on every option tag, as that is the data that gets sent to your server.

Example: Dropdown Selection Menus (select)

markup

<form action="/submit" method="post">
  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="us">United States</option>
    <option value="in">India</option>
  </select>
</form>

The Submit Action Button

An HTML form is incomplete without a button to trigger data submission. Setting your button's type attribute to submit instructs the browser to package all the form data and send it directly to your server.

Note:

Use a clear button label (like Submit or Upload) to let users know exactly what clicking the button will do.
Accepted attributes:
type — submit
value — button label (on input type=submit)
formaction / formmethod / formenctype / formtarget / formnovalidate — per-button overrides

Warning: If you do not specify a type attribute, some browsers will treat the button as a submit button by default, which can cause unexpected submissions.

Example: The Submit Action Button

markup

<form action="/submit" method="post">
  <button type="submit">Submit</button>
</form>

Form Validation Attributes

HTML5 brought built-in form validation. You can make fields required, set minimum and maximum lengths, and even validate against patterns without writing any JavaScript.

Note:

Use the pattern attribute with a regex to validate custom formats like product codes.
Accepted attributes:
required — boolean
minlength / maxlength — integer text length
min / max — number, date or time bounds
step — number | any
pattern — regular expression

Warning:

Never rely on browser validation alone.
Always validate data on your server too.

Example: Form Validation Attributes

markup

<form action="/submit" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required minlength="3" maxlength="10" pattern="[A-Za-z]+">
</form>

Fieldset and Legend

The fieldset element groups related form fields together. The legend element gives that group a visible title. This is especially important for accessibility and long forms.

Note:

Use fieldset to group related fields like shipping address separately from billing address.
Accepted attributes:
fieldset disabled — boolean; disables all contained controls
fieldset form — id of an associated form
fieldset name — name of the group
legend — first child; only global attributes

Warning: Skipping fieldset on complex forms makes them confusing for screen reader users.

Example: Fieldset and Legend

markup

<form action="/submit" method="post">
  <fieldset>
    <legend>Shipping Address</legend>
    <label for="street">Street:</label>
    <input type="text" id="street" name="street">
  </fieldset>
</form>

The enctype Attribute

The enctype attribute tells the browser how to package form data before sending it. For file uploads you need multipart/form-data, otherwise the browser sends only the file name as plain text instead of the actual file.

Note:

Always set enctype to multipart/form-data on any form that includes a file input.
Accepted values:
application/x-www-form-urlencoded — default
multipart/form-data — required for file uploads
text/plain — plain text, mainly debugging

Warning: Forgetting enctype on a form with a file upload is one of the most common bugs — the file field silently fails to upload anything useful.

Example: The enctype Attribute

markup

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="document">Document:</label>
  <input type="file" id="document" name="document">
</form>

The autocomplete Attribute

The autocomplete attribute controls whether the browser can suggest previously entered values for a field. It can be set on the whole form or on individual inputs, and browsers use it to speed up repetitive typing for returning visitors.

Note:

Use specific values like autocomplete="email" or autocomplete="tel" so browsers can fill fields intelligently, not just from raw history.
Accepted values:
on — allow browser autofill
off — disable autofill
name | email | username | new-password | current-password | tel | street-address | postal-code | cc-number — specific autofill tokens

Warning: Turning off autocomplete on sensitive fields like passwords does not guarantee privacy — some browsers ignore the setting entirely.

Example: The autocomplete Attribute

markup

<form action="/submit" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="email">

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" autocomplete="off">
</form>

The novalidate Attribute

By default browsers block form submission if built-in validation rules like required or pattern are not satisfied.

Adding novalidate to the form tag turns off that automatic checking, which is useful when you want to handle validation yourself in JavaScript.

Note:

Use novalidate together with your own custom error messages when the default browser validation popups do not match your site design.
Accepted values:
novalidate — boolean attribute on form
Disables built-in constraint validation on submit
Per-button alternative: formnovalidate

Warning: If you use novalidate, you take on full responsibility for validating data — the browser will not stop bad input from being submitted.

Example: The novalidate Attribute

markup

<form action="/submit" method="post" novalidate>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
</form>

The datalist Element

A datalist provides a list of suggested values for an input without forcing the user to pick only from that list, unlike a select dropdown. Users can still type their own value, but they see suggestions as they type.

Note:

datalist is great for things like country names or product categories where you want to guide input without being too restrictive.
Accepted attributes:
datalist id — referenced by the input list attribute
input list — id of the datalist
option value — suggested value
option label — optional display text

Warning: datalist styling cannot be customized much — it uses the browser's native suggestion popup, which looks different in every browser.

Example: The datalist Element

markup

<form action="/submit" method="post">
  <label for="country">Country:</label>
  <input list="countries" id="country" name="country">
  <datalist id="countries">
    <option value="India">
    <option value="United States">
  </datalist>
</form>

GET vs POST Explained

GET and POST are the two most common ways a form sends data. GET appends the data to the URL as a query string, making it visible and bookmarkable, which is perfect for searches.

POST sends data invisibly in the request body, making it better for anything sensitive like passwords or anything large like file uploads.

Note:

Use GET for search forms and filters where sharing the URL should reproduce the same results, and POST for anything that changes data like signups or purchases.
Accepted values:
method — get | post | dialog
get — data appended to URL query string
post — data sent in the request body

Warning: Never use GET for forms containing passwords or personal data — the values end up visible in the browser history and server logs.

Example: GET vs POST Explained

markup

<form action="/search" method="get">
  <label for="q">Search:</label>
  <input type="text" id="q" name="q">
</form>

<form action="/signup" method="post">
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
</form>

Live Example

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson HTML Heading Groups Next Lesson → HTML Form Attributes

HTML Forms

The form Element

Text Inputs and Labels

Selection Buttons (Radio and Checkboxes)

Dropdown Selection Menus (select)

The Submit Action Button

Form Validation Attributes

Fieldset and Legend

The enctype Attribute

The autocomplete Attribute

The novalidate Attribute

The datalist Element

GET vs POST Explained

Chapter Quiz — Complete all 7 topics to unlock

Login to run this code