Learn with us

HTML provides a variety of form elements that allow users to input and select different types of data. Here are some commonly used form elements with examples:

1. Text Input:
   The <input> element with type="text" creates a single-line text input field.

<input type="text" name="username" placeholder="Enter your username">

This creates a text input field where users can enter their username.

2. Password Input:
   The <input> element with type="password" creates a password input field, where the entered text is masked for security.

<input type="password" name="password" placeholder="Enter your password">

This creates a password input field where users can enter their password.

3. Checkbox:
   The <input> element with type="checkbox" allows users to select multiple options from a list.

<input type="checkbox" name="fruits" value="apple">
<label for="fruits">Apple</label>

<input type="checkbox" name="fruits" value="orange">
<label for="fruits">Orange</label>

This creates two checkboxes where users can select either or both options (apple and orange).

4. Radio Button:
   The <input> element with type="radio" allows users to select a single option from a list.

<input type="radio" name="gender" value="male">
<label for="gender">Male</label>

<input type="radio" name="gender" value="female">
<label for="gender">Female</label>

This creates two radio buttons where users can select either the male or female option.

5. Select Dropdown:
   The <select> element creates a dropdown menu for users to select an option from a list.

<select name="country">
  <option value="usa">USA</option>
  <option value="canada">Canada</option>
  <option value="uk">UK</option>
</select>

This creates a dropdown menu where users can select their country from the available options.

6. Textarea:
   The <textarea> element creates a multi-line text input field for users to enter larger blocks of text.

<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

This creates a textarea where users can enter their message with four visible rows and a width of 50 characters.

7. Submit Button:
   The <input> element with type="submit" creates a button to submit the form data.

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

This creates a submit button with the label “Submit” that users can click to submit the form.

These are just a few examples of HTML form elements. There are additional elements like file input (<input type="file">), range input (<input type="range">), date input (<input type="date">), and more, each with their own specific use cases. You can combine these elements and customize them to create interactive and user-friendly forms.