Much of the content in this page was adapted from Nathan Bean’s CIS 400 course at K-State, with the author’s permission. That content is licensed under a Creative Commons BY-NC-SA license.
One of the earliest (and still widely used) mechanisms for transferring data from a browser (client) to the server is a form. The <form> is a specific HTML element that contains input fields and buttons the user can interact with.
The <input> Element
Perhaps the most important - and versatile - of these is the <input> element. By setting its type attribute, we can represent a wide range of possible inputs, as is demonstrated by this table adapted from a similar one on the MDN Web Docs:
| Type | Description | Basic Examples |
|---|---|---|
| button | A push button with no default behavior displaying the value of the value attribute, empty by default. | <input type="button" name="button" value="Button" /> |
| checkbox | A check box allowing single values to be selected/deselected. | <input type="checkbox" name="checkbox" /><label for="checkbox" style="display: inline">Checkbox</label> |
| color | A control for specifying a color; opening a color picker when active in supporting browsers. | <input type="color" name="color" style="width: 40px; height: 40px;" /> |
| date | A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers. | <input type="date" name="date"/> |
| datetime-local | A control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers. | <input type="datetime-local" name="datetime-local"/> |
A field for editing an email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. |
<input type="email" name="email"/> |
|
| file | A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select. | <input type="file" accept="image/*, text/*" name="file"/> |
| hidden | A control that is not displayed but whose value is submitted to the server. There is an example in the next column, but it’s hidden! | <input id="hidden_id" name="hidden_id" type="hidden" value="f0e1d2c3b4"> ← It’s here! |
| image | A graphical submit button. Displays an image defined by the src attribute. The alt attribute displays if the image src is missing. |
<input type="image" name="image" style="height: 40px;" src="..." alt="Submit"/> |
| month | A control for entering a month and year, with no time zone. | <input type="month" name="month"/> |
| number | A control for entering a number. Displays a spinner and adds default validation when supported. Displays a numeric keypad in some devices with dynamic keypads. | <input type="number" name="number"/> |
| password | A single-line text field whose value is obscured. Will alert user if site is not secure. | <input type="password" name="password"/> |
| radio | A radio button, allowing a single value to be selected out of multiple choices with the same name value. | <input type="radio" name="radio"/> <label style="display: inline" for="radio">Radio</label> |
| range | A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction with min and max to define the range of acceptable values. | <input type="range" name="range" min="0" max="25"/> |
| reset | A button that resets the contents of the form to default values. Not recommended. | <input type="reset" name="reset"/> |
| search | A single-line text field for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads. | <input type="search" name="search"/> |
| submit | A button that submits the form. | <input type="submit" name="submit"/> |
| tel | A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads. | <input type="tel" name="tel"/> |
| text | The default value. A single-line text field. Line-breaks are automatically removed from the input value. | <input type="text" name="text"/> |
| time | A control for entering a time value with no time zone. | <input type="time" name="time"/> |
| url | A field for entering a URL. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. |
<input type="url" name="url"/> |
| week | A control for entering a date consisting of a week-year number and a week number with no time zone. | <input type="week" name="week"/> |
Regardless of the type, the <input> element also has a name and value property. The name is similar to a variable name, in that it is used to identify the input’s value when we serialize the form (more about that later), and the value is the value the input currently is (this starts as the value you specify in the HTML, but it changes when the user edits it).
The <textarea> Element
The <textarea> element represents a multi-line text input. Similar to terminal programs, this is represented by columns and rows, the numbers of which are set by the cols and rows attributes, respectively. Thus:
<textarea cols=40 rows=5></textarea>Would look like:
As with inputs, a <textarea> has a name and value attribute.
The <select> Element
The <select> element, along with <option> and <optgroup> make drop-down selection boxes. The <select> takes a name attribute, while each <option> provides a different value. The <options> can further be nested in <optgroup>s with their own labels. The <select> also has a multiple attribute (to allow selecting multiple options), and size which determines how many options should be displayed at once (with scrolling if more are available).
For example:
<select id="dino-select">
<optgroup label="Theropods">
<option>Tyrannosaurus</option>
<option>Velociraptor</option>
<option>Deinonychus</option>
</optgroup>
<optgroup label="Sauropods">
<option>Diplodocus</option>
<option>Saltasaurus</option>
<option>Apatosaurus</option>
</optgroup>
</select>Displays as:
The <label> Element
A <label> element represents a caption for an element in the form. It can be tied to a specific input using its for attribute, by setting its value to the id attribute of the associated input. This allows screen readers to identify the label as belonging to the input, and also allows browsers to give focus or activate the input element when the label is clicked.
For example, if you create a checkbox with a label:
<fieldset style="display:flex; align-items:center;">
<input type="checkbox" id="example"/>
<label for="example">Is Checked</label>
</fieldset>Clicking the label will toggle the checkbox!
The <fieldset> Element
The <fieldset> element is used to group related form parts together, which can be captioned with a <legend>. It also has a for attribute which can be set to the id of a form on the page to associate with, so that the fieldset will be serialized with the form (this is not necessary if the fieldset is inside the form). Setting the fieldset’s disabled attribute will also disable all elements inside of it.
For example:
<fieldset>
<legend>Who is your favorite muppet?</legend>
<input type="radio" name="muppet" id="kermit">
<label for="kermit">Kermit</label>
</input>
<input type="radio" name="muppet" id="animal">
<label for="animal">Animal</label>
</input>
<input type="radio" name="muppet" id="piggy">
<label for="piggy">Miss Piggy</label>
</input>
<input type="radio" name="muppet" id="gonzo">
<label for="gonzo">Gonzo</label>
</input>
</fieldset>Would render:
The <form> Element
Finally, the <form> element wraps around all the <input>, <textarea>, and <select> elements, and gathers them along with any contained within associated <fieldset>s to submit in a serialized form. This is done when an <input type="submit"> is clicked within the form, when the enter key is pressed and the form has focus, or by calling the submit() method on the form with JavaScript.
There are a couple of special attributes we should know for the <form> element:
action- the URL this form should be submitted to. Defaults to the URL the form was served from.enctype- the encoding strategy used, discussed in the next section. Possible values are:application/x-www-form-urlencoded- the defaultmultipart/form-data- must be used to submit filestext/plain- useful for debugging
method- the HTTP method to submit the form using, most often GET or POST
When the form is submitted, the form is serialized using the enctype, and submitted using the HTTP method to the URL specified by the action attribute. Let’s take a deeper look at this process next.