A web form consists of number of input fields grouped in a <form> tag. HTML allows a number of different styles of fields, ranging from simple on/off checkboxes to drop-down menus and fields for text input.

A lot of field types use the <input> tag. This tag's type attribute is used to select the field's style. These are some commonly used <input> types.

textA single-line text field
passwordSame as text but hides the text that is typed
checkboxAn on/off switch
radioPart of) a multiple-choice field
fileAllows the user to choose a file from their computer

It is not necessary that form fields to appear in a <form> tag. You can put them anywhere in a page. These fields cannot be submitted. Only a form as a whole can be submitted. We often do not want to submit our fields normally anyway when responding to input with JavaScript.

The fields created with this HTML code look like below.

Type FiledsDescription
Text<input type="text" value="abc">(text)
Password<input type="password" value="abc">(password)
Checkbox<input type="checkbox" checked>(checkbox)
Radio<input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice"checked> <input type="radio" value="C" name="choice">(radio)
Multiline Text<textarea>
File<input type="file">(file)

The JavaScript interface for such elements differs with the type of the element.

Multiline text fields have their own tag, <textarea>. The <textarea> requires a matching </textarea> closing tag and uses the text between those two, instead of using its value attribute, as starting text.


The <select> tag is used to create a field that allows the user to select from a number of predefined options.


Whenever the value of a form field changes, it fires a "change" event.

Related Tutorial
Follow Us #