HTML Forms

Text Fields

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

Example. a form with input fields for text:

<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>

Note: The form itself is not visible. Also note that the default width of an input field is 20 characters.

Ahis is how the HTML code above will be displayed in a browser:

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. A form with radio buttons:

<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>

Buttons

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

The value attribute holds the button's caption.

In the following example triggers an action as defined through attribute onclick...

<p>Click the button to create an Input Button with a "Click me" text.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var x = document.createElement("INPUT");
  x.setAttribute("type", "button");
  x.setAttribute("value", "Click me");
  document.body.appendChild(x);
}
</script>
          

Checkboxes

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

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

Example A form with checkboxes:

<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>

This is how the HTML code above will be displayed in a browser:

The <select> Element

The <select> element defines a drop-down list.

Example

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

The <option> element defines an option that can be selected. By default, the first item in the drop-down list is selected. To define a pre-selected option, add the selected attribute to the option:

Example

<option value="fiat" selected>Fiat</option>

Visible Values

Use the size attribute to specify the number of visible values:

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

The rows attribute specifies the visible number of lines in a text area. The cols attribute specifies the visible width of a text area.

Example

<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

This will be displayed as:

The <button> Element

The <button> element defines a clickable button.

Example

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

This is how the HTML code above will be displayed in a browser:

Note: Always specify the type attribute for the button element. Different browsers may use different default types for the button element.

The <fieldset> and <legend> Elements

The <fieldset> element is used to group related data in a form. The <legend> element defines a caption for the <fieldset> element.

Example

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <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"/>
  </fieldset>
</form>

This is how the HTML code above will be displayed in a browser:

The <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input> element. Users will see a drop-down list of the pre-defined options as they input data. The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

Example

<form action="/action_page.php">
  <input list="browsers"/>
  <datalist id="browsers">
    <option value="Edge"/>
    <option value="Firefox"/>
    <option value="Chrome"/>
    <option value="Opera"/>
    <option value="Safari"/>
  </datalist>
</form>

And this is how the HTML code above will be displayed in a browser:

The <output> Element

The <output> element represents the result of a calculation (like one performed by a script).

Example

Perform a calculation and show the result in an <output> element:

<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50"/>
  100 +
  <input type="number" id="b" name="b" value="50"/>
  =
  <output name="x" for="a b"></output>
  <br/><br/>
  <input type="submit"/>
</form>

This is how the HTML code above will be displayed in a browser:

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 A form with a submit button:

<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>

This is how the HTML code above will be displayed in a browser:

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 This example will not submit the value of the First name input field:

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