Topics

HTML Forms

To capture user input, an HTML form is employed. The most common method of processing user input is to send it to a server.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Simple HTML Form</title>
</head>
<body>
    <form action="/examples/save.php" method="post">
        <label>Username: <input type="text" name="username"></label>
        <label>Password: <input type="password" name="userpass"></label>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

The <form> Element

The HTML <form> element is used to generate a user-input HTML form:

Text fields, checkboxes, radio buttons, submit buttons, and other input components are all present within the <form> element.

Syntax:

<form>
. form elements .
</form>

The <input> Element

The <input> element in HTML is the most commonly used form element. Depending on the type attribute, an <input> element can be presented in a variety of ways.

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

This chapter covers all of the different input types:

Text Fields

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

Example :

A form with input fields for text:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Simple HTML Form</title>
</head>
<body>
    <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>
</body>
</html>

The <label> Element

Many form elements have a label defined by the <label> tag.

When the user focuses on the input element, the screen-reader will read out loud the label, which is useful for screen-reader users.

The <label> element also aids users who have trouble clicking on small regions (such as radio buttons or checkboxes) since it toggles the radio button/checkbox when the user clicks the text within the <label> element.

To connect them, the for property of the <label> tag should be equal to the id attribute of the <input> element.

Radio Buttons

A radio button is defined with the <input type="radio">.

A user can select ONE of a limited number of options using radio buttons.

Select your preferred Web language:

Examples:

A form with radio buttons :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Simple HTML Form</title>
</head>
<body>
    <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>
</body>
</html>

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

Choose your favorite Web language:

HTML
CSS
JavaScript

Checkboxes

A checkbox is defined by the <input type="checkbox">.

Checkboxes allow a user to choose ZERO or MORE selections from a limited set of alternatives.

Examples:

A form with checkboxes :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Simple HTML Form</title>
</head>
<body>

<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>
</body>
</html>

The Submit Button

A button for submitting form data to a form-handler is defined by the <input type="submit">.

The form-handler is usually a server-side file that contains a script for processing input data.

The form's action element specifies the form's handler.

Examples:

A form with a submit button:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Simple HTML Form</title>
</head>
<body>

<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>
  
</body>
</html>

The Name Attribute for <input>

It's worth noting that in order to be submitted, each input field must have a name attribute.

The value of the input field will not be delivered at all if the name attribute is absent.

Example :

This example will not submit the value of the "First name" input field:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Simple HTML Form</title>
</head>
<body>

<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>
  
</body>
</html>