DEV Community

Cover image for HTML Form - Elements
Mahalakshmi C
Mahalakshmi C

Posted on

HTML Form - Elements

#html #beginners
  • HTML provides several form elements that allow users to enter, select, and submit data.
  • Each form element has a specific purpose, such as collecting text, selecting an option, uploading a file, or submitting a form.

The most commonly used HTML form elements are:
input

  • label
  • textarea
  • select
  • option
  • optgroup
  • button
  • fieldset
  • legend
  • datalist

The <label> element provides a description for a form field. It helps users understand what information they need to enter and also improves accessibility.

<label for="name">Name:</label>
<input type="text" id="name">
Enter fullscreen mode Exit fullscreen mode

textarea

The <textarea> element creates a multi-line text box for entering long text.

Used For

  • Comments
  • Feedback
  • Address
  • Messages 
<textarea rows="4" cols="30"></textarea>
Enter fullscreen mode Exit fullscreen mode

select

The <select> element creates a drop-down list from which users can choose one or more options.

option

  • The <option> element defines each item inside a <select> drop-down list.

optgroup

  • The <optgroup> element groups related options inside a drop-down list, making long lists easier to organize. 
<select>
<optgroup label="Frontend">
<option>HTML</option>
<option>CSS</option>
</optgroup>
<optgroup label="Backend">
<option>Python</option>
<option>Java</option>
</optgroup>
</select>
Enter fullscreen mode Exit fullscreen mode

button
The element creates a clickable button. It can be used to submit a form, reset a form, or perform other actions using JavaScript.

<button type="submit">Submit</button>

fieldset
The <fieldset> element groups related form fields together by drawing a border around them. It helps organize forms into sections.

legend
The <legend> element provides a title or caption for a <fieldset>.

<fieldset>
<legend>Personal Information</legend>
<input type="text">
<input type="email">
</fieldset>

datalist
The <datalist> element provides a list of suggested values for an field. Users can either choose one of the suggestions or type their own value.

<label>Choose a Browser:</label>
<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
</datalist>

Example

Top comments (0)