HTML Form Elements

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

HTML Form Elements

The HTML <form> Elements

The HTML <form> element consists of one or more of the following form elements:

  • <input>
  • <label>
  • <select>
  • <textarea>
  • <button>
  • <fieldset>
  • <legend>
  • <datalist>
  • <output>
  • <option>
  • <optgroup>

The <input> Element

One of the commonly used form element is the <input> element.

The <input> element can be shown in various ways, depending on the type attribute.

Example

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

				
			

Output:

The <form> Element

The HTML <form> element creates an HTML form for user input:

<form>

….

form elements

</form>

The <form> element consists of different types of input elements, like: text fields, checkboxes, radio buttons, submit buttons, etc.

The <input> Element

The HTML <input> element is used commonly as form element.

An <input> element is shown in many ways, depending on the type attribute.

Text Fields

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

Example

				
					<form>
  <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">
</form>

				
			

Output:




Radio Buttons

The <input type=”radio”> specifies a radio button.

Radio allows the user to select ONE of a limited number of choices.

Example

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

				
			

Output:



Checkboxes

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

Checkboxes allows the user to select ZERO or MORE options of a limited number of choices.

Example

				
					<form action="/action_page.php">
  <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><br><br>
  <input type="submit" value="Submit">
</form> 

				
			

Output:





The Name Attribute for <input>

If the name attribute is removed, the value of the input field can 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><br>
  <input type="submit" value="Submit">
</form> 

				
			

Output:


The Submit Button

The <input type=”submit”> specifies a button used for submitting the form data

The form-handler is used in the form’s action attribute.

				
					<input type="submit" value="Submit">
				
			

Output: