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.
| Fields | Description |
|---|---|
| text | A single-line text field |
| password | Same as text but hides the text that is typed |
| checkbox | An on/off switch |
| radio | Part of) a multiple-choice field |
| file | Allows 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 Fileds | Description |
|---|---|
| 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> |
| Select | <select><option>A</option>....n</select> |
| 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.
<textarea> one two three </textarea>
The <select> tag is used to create a field that allows the user to select from a number of predefined options.
<select> <option>Chocolate</option> <option>Icecream</option> <option>Pizza</option> </select>
Whenever the value of a form field changes, it fires a "change" event.
