Form Elements

Learn about essential HTML form elements and understand how to build accessible and interactive forms.

Loading...
Form Elements

HTML form elements enable users to input and submit data, making websites interactive and dynamic.

From basic text boxes to progress bars and sliders, forms make websites more useful and interactive.

Common elements:

form

The <form> HTML element is used to create an HTML form for user input.

An HTML form consists of text fields, password fields, checkboxes, radio buttons, a submit button, etc.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <form action="/">
   <label for="firstname">First name:</label>
   <input type="text" id="firstname" name="firstname" />
 
   <label for="lastname">Last name:</label>
   <input type="text" id="lastname" name="lastname" />
 
   <label for="email">Email:</label>
   <input type="email" id="email" name="email" />
 
   <label for="contact">Contact:</label>
   <input type="text" id="contact" name="contact" />
 
   <input type="button" value="Submit" />
  </form>
 </body>
</html>

The <form> HTML element includes both opening (<form>) and closing (</form>) tags. Attributes for this element are accept-charset, action, autocomplete, enctype, method, name, novalidate, rel, and target.

input

The <input> HTML element is used to display an input field where the user can enter data.

The <label> element is used with the <input> element to define the title for it.

The <label> element's for attribute and the <input> element's id attribute link each other.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <label for="name">Name:</label>
  <input type="text" id="name" />
 </body>
</html>

The <input> HTML element does not contain a closing tag. Attributes for this element are accept, alt, autocomplete, autofocus, checked, dirname, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, name, pattern, placeholder, readonly, required, size, src, step, type, value, and width.

label

The <label> HTML element is used to define the title for all input types, meter, progress, select, and textarea HTML elements.

<label> element's for attribute and related HTML element's id attribute links each other.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <form action="/">
   <label for="firstname">First name:</label>
   <input type="text" id="firstname" name="firstname" />
 
   <label for="lastname">Last name:</label>
   <input type="text" id="lastname" name="lastname" />
 
   <label for="email">Email:</label>
   <input type="email" id="email" name="email" />
 
   <label for="contact">Contact:</label>
   <input type="text" id="contact" name="contact" />
 
   <input type="button" value="Submit" />
  </form>
 </body>
</html>

The <label> HTML element includes both opening (<label>) and closing (</label>) tags. Attributes for this element are for and form.

textarea

The <textarea> HTML element is used to define a multi-line text input control, often used in a form to collect inputs such as comments or reviews from users.

The <label> element is used with the <textarea> element to define the title for it.

The <label> element's for attribute and the <textarea> element's id attribute link each other.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <label for="product-review">Review of our product:</label>
  <textarea
   id="product-review"
   name="product-review"
   rows="4"
   cols="50"
  ></textarea>
 </body>
</html>

The <textarea> HTML element includes both opening (<textarea>) and closing (</textarea>) tags. Attributes for this element are autofocus, cols, dirname, disabled, form, maxlength, name, placeholder, readonly, required, rows, and wrap.

button

The <button> HTML element is used to create a clickable button in your web page.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <button type="button">Click me</button>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
 </body>
</html>

Always specify the type attribute for a <button> element to tell the browser what type of button it is.

Type attributes for the <button> element are button, submit, and reset.

The <button> HTML element includes both opening (<button>) and closing (</button>) tags.

datalist

The <datalist> HTML element provides an auto-complete feature on a form element.

It provides a list of predefined options for the users to select data.

Note: The <datalist> element should be used with an <input> element that contains a list attribute. The value of list attribute and the id of the datalist should be the same (this connects them).

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <label for="editor">Choose your code editor:</label>
  <input list="editors" name="editor" id="editor" />
 
  <datalist id="editors">
   <option value="Visual Studio Code"></option>
   <option value="Atom"></option>
   <option value="Sublime Text"></option>
   <option value="Notepad"></option>
   <option value="Vim"></option>
  </datalist>
 </body>
</html>

The <datalist> HTML element includes both opening (<datalist>) and closing (</datalist>) tags.

option

The <option> HTML element is used to define an option in a <select>, <optgroup> and <datalist> HTML elements.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <label for="languages">Choose your programming languages:</label>
 
  <select name="languages" id="languages">
   <optgroup label="programming">
    <option value="Java">Java</option>
    <option value="JavaScript">JavaScript</option>
    <option value="Php">PHP</option>
   </optgroup>
  </select>
 
  <select id="markup Languages">
   <option value="HTML">HTML</option>
   <option value="XHTML">XHTML</option>
   <option value="XML">XML</option>
  </select>
 
  <label for="browsers">Choose your browser:</label>
  <input list="browsers" name="browser" id="browser" />
 
  <datalist id="browsers">
   <option value="Chrome">Chrome</option>
   <option value="Opera">Opera</option>
   <option value="Safari">Safari</option>
  </datalist>
 </body>
</html>

The <option> HTML element includes both opening (<option>) and closing (</option>) tags. Attributes for this element are disabled, label, selected, and value.

select

The <select> HTML element is used to create a drop-down list.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <label for="browsers">Choose your browser:</label>
  <select name="browser" id="browsers">
   <option value="Chrome">Chrome</option>
   <option value="Opera">Opera</option>
   <option value="Safari">Safari</option>
  </select>
 </body>
</html>

The id attribute is needed to link the drop-down list with a label.

The name attribute is needed to submit the data from the drop-down list.

If you do not include a name attribute, then no data will be submitted.

The <option> elements inside the <select> element provide the options in the drop-down list.

The <select> HTML element includes both opening (<select>) and closing (</select>) tags. Attributes for this element are autofocus, disabled, form, multiple, name, required, and size.

optgroup

The <optgroup> HTML element is used to group related options in a <select> HTML element.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
   <label for="languages">Languages</label>
 
   <select name="languages" id="languages">
    <optgroup label="Programming">
     <option value="Java">Java</option>
     <option value="JavaScript">JavaScript</option>
     <option value="Php">PHP</option>
    </optgroup>
 
    <optgroup label="Markup">
     <option value="HTML">HTML</option>
     <option value="XHTML">XHTML</option>
     <option value="XML">XML</option>
    </optgroup>
   </select>
 </body>
</html>

The <optgroup> HTML element includes both opening (<optgroup>) and closing (</optgroup>) tags. Attributes for this element are disabled and label.

fieldset

The <fieldset> HTML element is used to group related elements in a form.

The <legend> HTML element is used with <fieldset> to define a title for the <fieldset> element.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
   <form action="/">
    <fieldset>
     <legend>Personal details:</legend>
     <label for="firstname">First name:</label>
     <input type="text" id="firstname" name="firstname" />
 
     <label for="lastname">Last name:</label>
     <input type="text" id="lastname" name="lastname" />
 
     <label for="email">Email:</label>
     <input type="email" id="email" name="email" />
 
     <label for="contact">Contact:</label>
     <input type="text" id="contact" name="contact" />
 
     <input type="button" value="Submit" />
    </fieldset>
  </form>
 </body>
</html>

The <fieldset> element draws a box around the related elements. It includes both opening (<fieldset>) and closing (</fieldset>) tags.

Attributes for this element are disabled, form, and name.

legend

The <legend> HTML element is used with <fieldset> to define a title for the <fieldset> element.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <form action="/">
   <fieldset>
    <legend>Personal details:</legend>
    <label for="firstname">First name:</label>
    <input type="text" id="firstname" name="firstname" />
 
    <label for="lastname">Last name:</label>
    <input type="text" id="lastname" name="lastname" />
 
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" />
 
    <label for="contact">Contact:</label>
    <input type="text" id="contact" name="contact" />
 
    <input type="button" value="Submit" />
   </fieldset>
  </form>
 </body>
</html>

The <legend> HTML element includes both opening (<legend>) and closing (</legend>) tags.

output

The <output> HTML element is used to represent the result of a calculation performed by a script.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <form oninput="result.value=parseInt(x.value)+parseInt(y.value)">
   <input type="number" id="x" value="" />
   +<input type="number" id="y" value="" />
   <output name="result" for="x y"></output>
  </form>
 </body>
</html>

The HTML element includes both opening (<output>) and closing (</output>) tags. Attributes for this element are for, form, and name.

meter

The <meter> HTML element is used to measure data within a given range.

It is also known as a gause.

It should be used to display disk usage, voting population, the relevance of a query result, etc.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <label for="disk">Disk usage:</label>
  <meter id="disk" value="30" min="0" max="100">30%</meter>
 </body>
</html>

The <meter> HTML element includes both opening (<meter>) and closing (</meter>) tags. Attributes for this element are form, high, low, max, min, optimum, and value.

progress

The <progress> HTML element is used to represent the progress of a task.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <label for="file">Downloading</label>
  <progress id="file" value="50" max="100">50%</progress>
 </body>
</html>

<label> element is used with <progress> element to display its title.

The <progress> HTML element includes both opening (<progress>) and closing (</progress>) tags. Attributes for this element are max and value.