main_leaderboard, all: [728,90][970,90][320,50][468,60]


HTML Form Elements

In this chapter, you will find a detailed description of all HTML form elements.

It represents a section of the document that contains interactive controls for submitting information.

The HTML <form> Elements

In HTML, a <form> element may contain one or more of the following elements:

  1. <input>
  2. <select>
  3. <button>
  4. <label>
  5. <optgroup>
  6. <datalist>
  7. <legend>
  8. <textarea>
  9. <output>
  10. <fieldset>
  11. <option>

<input> Element:

<Input> is one of the most commonly used form elements.

It depends on the type attribute whether the input element is displayed in a different way.


<!DOCTYPE html> <html><body><br><label for="fname">Your first name:</label><br><input type="text" id="fname" name="fname"> </body></html>

In this chapter HTML Input Types, you will find a description of all the different values of the type attribute.

The <select> Element

The <select> element has a drop-down list generated by <select> element:


<!DOCTYPE html> <html><body><br><label for="cars">Pick a car:</label><br><select id="cars" name="cars"><br><option value="tesla">Tesla Truck</option><option value="toyota">Toyota</option><br><option value="bmw">BMW</option><option value="audi">Audi</option><br></select><br> </body></html>

An option that may be chosen is specified by the <option> element.

The drop-down list’s first item is always picked by default.

Add the selected attribute to the option to create a pre-selected option:


<!DOCTYPE html> <html><body><br><option value="Tesla" selected>Free Tesla Truck</option> </body></html>

Visible Values:

To set the number of viewable values, just use size attribute:


<!DOCTYPE html> <html><body><br><label for="cars">Select your car:</label><br><select id="cars" name="cars" size="3"><br><option value="tesla">Free Tesla Truck</option><option value="toyota">Toyota</option><br><option value="bmw">BMW</option><option value="audi">Audi</option><br></select> </body></html>

Permit multiple selections:

To provide the user the option of choosing more than one value, utilise the multiple property. see an example of HTML form elements below:


<!DOCTYPE html> <html><body><br><label for="cars">Choose Your car:</label><br><select id="cars" name="cars" size="4" multiple><br><option value="tesla">Tesla Truck</option><option value="toyota">Toyota</option><br><option value="bmw">BMW</option><option value="audi">Audi</option><br></select> </body></html>

A <button> Element:

An element with the <button> attribute specifies a button that can be clicked when it comes to HTML form elements:


<!DOCTYPE html> <html><body><br><button type="button" onclick="alert('Buy Tesla Truck')">Click Here</button> </body></html>

A browser will render the HTML code above as follows:

Note: It is always important to mention the type attribute for the button element when we talk about HTML form elements. The default button element may differ between browsers.

<datalist> Element:

<Input> elements can be associated with a list of predefined options by including the <datalist> element in HTML form elements.

When users input data, they will be presented with a drop-down list of predefined options.

List attributes of <input> elements should point to id attributes of <datalist> elements.


<!DOCTYPE html> <html><body><br><form action="/action-attribute-page.php"><br><input list="browsers"><datalist id="Tech Companies"><br><option value="Tesla"></option><option value="SpaceX"><br></option><option value="Google"></option><option value="Apple"><br></option><option value="IBM"></option></datalist><br></form> </body></html>

The <label> Element

In HTML, the <label> element specify labels for a variety of form elements.

It’s handy for screen-readers, because it reads out loud the label when the user focuses on the <input> element.

Users who have trouble clicking on tiny areas (like radio buttons or checkboxes) might also benefit from the <label> element since it toggles the radio button or checkbox when the user clicks its content.

To connect them, the for property of the <label> tag must match the id attribute of the <input> element.

The following example shows the working of <label> element:


<!DOCTYPE html> <html><body><br><form><br> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br><br><br> <br> <label for="password">Password:</label><br> <input type="password" id="password" name="password"><br><br><br> <br> <label for="remember-me">Remember me:</label><br> <input type="checkbox" id="remember-me" name="remember-me"><br><br><br> <br> <input type="submit" value="Submit"><br></form><br> </body></html>

<fieldset> and <legend> Elements:

When you use a <fieldset>, you can group relevant data in a form.

The <legend> element determines a <fieldset> caption.


<!DOCTYPE html> <html><body><br><form action="/action-attribute-page.php"><br><fieldset><legend>A person's personality:</legend><br><label for="fname">First name:</label><br><br><input type="text" id="fname" name="fname" value="Colin"><br><br><label for="lname">Last name:</label><br><input type="text" id="lname" name="lname" value="Smith"><br><br><input type="submit" value="Submit"><br></fieldset><br></form> </body></html>

A browser will render the HTML code above as follows:


First name:

Last name:

The <textarea> Element

<Textarea> can be utilized to characterize multi-line input fields (a text area) in HTML form elements :


<!DOCTYPE html> <html><body><br><textarea name="Here's a message" rows="10" cols="30"> Popular electric vehicle manufacturer Tesla. </textarea><br> </body></html>

The rows property indicates the number of lines that will be displayed in a text area.

The visible width of a text section is determined by the cols attribute.

The following is how a browser will see the HTML code previously mentioned:

CSS can also be used to indicate the size of the text area:


<!DOCTYPE html> <html><body><br><textarea name="message" style="width:200px; height:600px;"><br>Popular electric vehicle manufacturer Tesla.<br></textarea> </body></html>

<output> Element:

An <output> element displays the outcome of a calculation (such as the result of a script).

Below is an example of HTML form elements:


<!DOCTYPE html> <html><body><br><form action="/action-attribute-page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)"><br>0<input type="range" id="a" name="a" value="50"><br>100 +<input type="number" id="b" name="b" value="50"><br>=<output name="x" for="a b"></output><br><br><br><br><input type="submit"><br></form><br> </body></html>

The <Checkbox> Element:

Multiple options can be checked by using the checkbox control.

The following is an example of how the checkbox element work:


<!DOCTYPE html> <html> <head> <title>Target _self attribute</title> <style> h2 { color: blue; } body { text-align:center; } </style> </head> <body> <h2>CHECK BOXES</h2> <form> Which cars do you own:<br> <input type="checkbox" id="tesla" name="tesla" value="tesla"> <label for="tesla">Tesla</label> <br> <input type="checkbox" id="bmw" name="bmw" value="bmw"> <label for="bmw">BMW</label> <br> <input type="checkbox" id="audi" name="audi" value="audi"> <label for="audi">Audi</label> </form> </body> </html>

Example of HTML Form

The following is an example of a standard registration form as it comes to HTML form elements:


<!DOCTYPE html> <html> <head> <title>Form in HTML</title> </head> <body> <h2>Registration form</h2> <form> <fieldset> <label>Name</label><br> <input type="text" name="name"><br> <label>Email</label><br> <input type="email" name="email"><br> <label>Password</label><br> <input type="password" name="pass"><br> <label>Re-enter Passowrd</label><br> <input type="password" name="pass"><br> <br><label>Select Gender</label><br> <input type="radio" id="gender" name="gender" value="male">Male <br> <input type="radio" id="gender" name="gender" value="female">Female <br> <br>Address<br> <textarea></textarea><br> <input type="submit" value="Submit"> </fieldset> </form> </body> </html>

CSS can also be applied to the the form here is how we can do that:


<!DOCTYPE html> <html> <head> <title>Form in HTML</title> <style> h2{ color: blue; } label{ color: crimson; } input{ color: darkolivegreen; } </style> </head> <body> <h2>Registration form</h2> <form> <fieldset> <legend>User Data Form</legend> <label>Name</label><br> <input type="text" name="name"><br> <label>Email</label><br> <input type="email" name="email"><br> <label>Password</label><br> <input type="password" name="pass"><br> <label>Re-enter Passowrd</label><br> <input type="password" name="pass"><br> <input type="submit" value="sign-up"> </fieldset> </form> </body> </html>

HTML Form Elements

<label>Provides a label for an <input> element in HTML form elements.
<fieldset>In a form, related elements are grouped together.
<form>Creates a HTML form to receive user input.
<legend>Adds a caption to a <fieldset>.
<select>Creates a drop-down list.
<optgroup>Drop-down list containing related options.
<option>Provides a drop-down list with an option.
<datalist>Provides a list of predefined input control options.
<output>Calculates the result.
<button>Sets a clickable button.
<input>Establishes an input control.
<textarea>An input control that supports multiple lines. (text area)

Check out our HTML Tag Reference for a more comprehensive listing of all the HTML tags.

Importance of HTML Form Elements

HTML form elements play a crucial role in facilitating interaction between users and web pages. The following are some reasons why they are important:

  • Data Collection: HTML forms enable collection of user input in a structured way, which can be used for diverse purposes such as surveys, feedback, and user registration.
  • User Interaction: Forms provide a platform for users to input data and make selections, allowing them to interact with web pages.
  • Validation: HTML form elements can be used to validate user input, ensuring that the data entered is accurate and in the correct format, leading to fewer errors and better user experience.
  • Accessibility: Form elements improve web page accessibility by providing labels and descriptions for input fields that can be read by assistive technologies such as screen readers.
  • Security: HTML forms can be used to submit sensitive information such as credit card details and passwords. Form elements can implement security measures like encryption and server-side validation to ensure that this data is handled securely.
If you find this article interesting, do share this valuable knowledge with your friends by clicking the links below.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *