HTML Forms

Master interactive data collection interfaces capturing visitor information through structured input mechanisms

Form elements facilitate visitor data acquisition. Submitted information typically transmits to server-side processors for handling. These interactive components prove indispensable for dynamic websites enabling data transmission, authentication workflows, search functionality, and diverse user engagement scenarios.

The <form> Element

The HTML <form> element is used to create an HTML form for user input:

Syntax
<form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

Here are some examples:

Type	Description
<input type="text">	Displays a single-line text input field
<input type="radio">	Displays a radio button (for selecting one of many choices)
<input type="checkbox">	Displays a checkbox (for selecting zero or more of many choices)
<input type="submit">	Displays a submit button (for submitting the form)
<input type="button">	Displays a clickable button

Text Fields

The <input type="text"> defines a single-line input field for text input.

Example

<form>
  <label for="fname">First name:</label><br />
  <input type="text" id="fname" name="fname" /><br />
  <label for="lname">Last name:</label><br />
  <input type="text" id="lname" name="lname" />
</form>

Result:

Try it Yourself ›

Click the button below to open this example in our interactive editor:

Try it Yourself

The <label> Element

Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.

The <label> element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

Radio Buttons

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML" />
  <label for="html">HTML</label><br />
  <input type="radio" id="css" name="fav_language" value="CSS" />
  <label for="css">CSS</label><br />
  <input type="radio" id="javascript" name="fav_language" value="JavaScript" />
  <label for="javascript">JavaScript</label>
</form>

Result:

Choose your favorite Web language:

Checkboxes

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" />
  <label for="vehicle1"> I have a bike</label><br />
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car" />
  <label for="vehicle2"> I have a car</label><br />
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" />
  <label for="vehicle3"> I have a boat</label>
</form>

Result:

The Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.

Example

<form action="/action_page.php">
  <label for="fname">First name:</label><br />
  <input type="text" id="fname" name="fname" value="John" /><br />
  <label for="lname">Last name:</label><br />
  <input type="text" id="lname" name="lname" value="Doe" /><br /><br />
  <input type="submit" value="Submit" />
</form>

Result:

The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

Example
<form action="/action_page.php">
  <label for="fname">First name:</label><br />
  <input type="text" id="fname" value="John" /><br />
  <input type="submit" value="Submit" />
</form>

The example above will not submit the value of the input field, because the input field does not have a name attribute.

Complete Form Example

Here's a more complete example that demonstrates various form elements working together:

Example

<form action="/submit-form" method="post">
  <h3>Contact Information</h3>

  <label for="name">Full Name:</label><br />
  <input type="text" id="name" name="name" required /><br /><br />

  <label for="email">Email:</label><br />
  <input type="email" id="email" name="email" required /><br /><br />

  <label for="phone">Phone:</label><br />
  <input type="tel" id="phone" name="phone" /><br /><br />

  <p>Preferred Contact Method:</p>
  <input type="radio" id="contact-email" name="contact-method" value="email" />
  <label for="contact-email">Email</label><br />
  <input type="radio" id="contact-phone" name="contact-method" value="phone" />
  <label for="contact-phone">Phone</label><br /><br />

  <input type="checkbox" id="newsletter" name="newsletter" value="yes" />
  <label for="newsletter">Subscribe to newsletter</label><br /><br />

  <input type="submit" value="Submit Form" />
</form>

Analytics choices

HTML Forms

The <form> Element

Syntax

The <input> Element

Text Fields

Example

Result:

Try it Yourself ›

The <label> Element

Radio Buttons

Example

Result:

Checkboxes

Example

Result:

The Submit Button

Example

Result:

The Name Attribute for <input>

Example

Complete Form Example

Example

Result:

Contact Information

Try it Yourself ›

Test Your Knowledge