HTML Form Elements

❮ Prev Next ❯

HTML forms are used to collect user input. The form elements are used to create various types of input fields where users can enter data. Below are some commonly used HTML form elements:

The Input tag:

The inputelement with type attribute set to "text" is used to create a text input field. Users can enter any text data into this field. 

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

Radio Buttons:

The radio buttoninput element with type attribute set to "radio" is used to create a group of radio buttons. Users can select only one option from the group. 

<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male:</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female:</label>

Checkboxes:

The Checkboxes:input element with type attribute set to "checkbox" is used to create a checkbox. Users can select one or more checkboxes from a group. 

<label for="hobbies">Hobbies:</label>
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">Reading:</label>
<input type="checkbox" id="music" name="hobbies" value="music">
<label for="music">Music:</label>
<input type="checkbox" id="sport" name="hobbies" value="sport">
<label for="sport">Sport:</label>

Select Box

The Selectelement is used to create a dropdown list. Users can select one option from the list. 

<label for="Country">Select Country:</label>
<select for="country">
  <option value="">Choose Country</option>
  <option value="usa">USA</option>
  <option value="uk">Uk</option>
  <option value="canada">Canada</option>
  <option value="nigeria">Nigeria</option>
  <option value="india">India</option>
  <option value="china">China</option>
</select>

Textarea:

The Textareaelement is used to create a multi-line text input field. Users can enter any amount of text data into this field. 

<label for="comments">Comments:</label>
<textarea id="comments" placeholder="write comments here"></textarea>

These are some of the commonly used HTML form elements. There are many more form elements that can be used to create different types of input fields. now let learn about Form Input Types in the next chapter.

❮ Prev Next ❯