What Are Forms in HTML?
form element represents a user inputtable and actionable part of an HTML document.
Once a form's inputs are filled in a user can submit the form which triggers a request to the server. The server response to the request causes a new page load based on the response data.
Action & Method
Form element's inputs are a way of forming the request parameters which is being sent once a submit button click event occurs.
action attribute indicates a relative path or an absolute URL to which the request is sent once submitted. When
action is unprovided the current URL is used.
method attribute indicates an HTTP method of the request (
<form action="https://soundof.it/witcher_horses" method="post"> <label for="witcher_in">Witcher</label> <input id="witcher_in" name="witcher" type="text"> <label for="horse_in">Horse</label> <input id="horse_in" name="horse" type="text"> <input type="submit" value="Add horse"> </form>
The above form gets input from a user about a witcher and their horse and once submitted makes a POST request to
Names & Values
Generally, the values of form elements'
name attributes are sent to the server like
How the names and values are being sent in the request depends on the request's method. With
GET the name and values are being sent as URL parameters. With
PATCH the pairs constitute the request
Forms are built using many different elements. The most notable of those are:
Common Form Elements Attributes
The most common attributes of form elements are:
id- used for 1) connecting an element with its respective
label, and 2) targeting and element to apply CSS styles.
name- used for building keys of form parameters at form submission (
readonly- used for disabling user input at a given element (the element remains selectable and its value is included in the form parameters),
disabled- used for disabling 1) user input at a given element, 2) selectability of the element, and 3) inclusion of the element's value in form parameters
required- used for indicating the indispensability of providing a value at a given element before the form submission,
autofocus- used for indicating the one element to be focused once the page loads,
form- used for connecting an element with a form (using the form's
id) if the element is not nested within that form,
placeholder- used for providing a hint displayed to the user within the input.
Form elements that allow for collecting data are often accompanied by
label element represents a description of a given form element that is displayed to the user and is useful for assistive programs such as screen readers.
Furthermore, clicking on a label often focuses the bound element and/or selects (or toggles) its value.
label element is bound with a given input element when the label's
for attribute is equal to the element's
input element allows for collecting user data in many different forms. The most notable of those are:
The text type input collects a user's single-line textual input.
<form> <label for="witcher_name">Witcher name</label> <input id="witcher_name" name="wname" type="text"> ... </form>
The notable specific text input attributes are:
autocomplete- a string that informs a web browser about the semantic value of the text input field such as
current-password, etc. to autocomplete with data already available to the browsers,
minlength- a number with the minimum number of UTF-16 characters considered to be a valid input,
maxlength- a number with the maximum number of UTF-16 characters considered to be a valid input,
pattern- a regular expression value which must be matched for a user input to be considered valid.,
There are specific purpose inputs that might be considered variants to the text input. Such inputs are handled by user agents specifically and are often extended with specific behavior. Those inputs are:
password- informs the user agent that the input is dedicated to collecting a password and extends the input security for entering passwords through visual obscuring of the user input,
tel- informs the user agent that the input is dedicated to collecting a phone number and extends the text input with a telephone validation,
number- informs the user agent that the input is dedicated to collecting a number and extends the text input with a number validation,
url- informs the user agent that the input is dedicated to collecting an URL and extends the text input with an URL validation,
<form> <input type="email"> <input type="password"> <input type="submit"> ... </form>
Some of the specific purpose inputs apply
:invalid pseudo-classes on validations.
radio input type allows for selecting one and only one option out of two or more options that are typically displayed visually as small circles (highlighted when selected) accompanied with labels.
<form> <p>Choose your most favorite horse:</p> <div> <input type="radio" id="roach-id" name="horses" value="roach" checked> <label for="roach-id">Roach</label> </div> <div> <input type="radio" id="kelpie-id" name="horses" value="kelpie"> <label for="kelpie-id">Kelpie</label> </div> <div> <input type="radio" id="bucephalus-id" name="horses" value="bucephalus"> <label for="bucephalus-id">Bucephalus</label> </div> ... </form>
radio inputs are grouped using the
name attribute. In a given radio group only one radio input can be checked.
radio input in a given group is marked in DOM with the
checked attribute. The
checked attribute can also be used to mark the input selected by default.
value attribute's value is used when submitting data to a server.
radio input is styled with the operating system default styling unless
appearance: none property is used which allows for custom styling.
checkbox input collects yes or no data from a user regarding a specific matter. A
checkbox element is often displayed to the user as a square that allows being ticked or in other words a box that can be checked.
checkbox input can only apply
unchecked (yes or no) state to one specific value whereas a
radio input group can apply such a state to one value but from many miscellaneous values.
<form> <input type="checkbox" id="likes_horses_id" name="whether_likes_horses" value="does_like_horses" checked> <label for="likes_horses_id">Likes horses</label> ... </form>
value attribute is omitted the attribute gets
on value by default.
Once the form is submitted the pair
name=value is submitted provided the respective checkbox is checked. In the above example, it would be
whether_likes_horses=does_like_horses. If the checkbox is not checked no
name=value pair is submitted.
The presence or absence of the
checked attribute indicates whether a given checkbox is checked or not.
file type input collects a user-provided file or files stored on their device. Once collected, the file or files can be, for example, submitted to the server.
<form method="post" enctype="multipart/form-data"> <label for="horse_pictures_id">Upload your favorite horse pictures:</label> <input type="file" accept="image/jpeg" multiple id="horse_pictures_id" name="horse_pictures" > </form>
accept indicates the type of files accepted by the input.
The presence or absence of
multiple attribute indicates whether a given
file type input accepts multiple or only one file.
In certain circumstances, the
capture attribute can be used to control the user device's camera to be used for capturing an image or a video file when the input allows for such file types.
When a form includes a
file type input it often comes with the attribute
enctype with the value of
multipart/form-data which allows for entire files to be included in the collected data. When no
enctype attribute is present then the default value of
application/x-www-form-urlencoded is used.
submit type input is rendered by user agents as buttons and once a click event occurs the attempt is being made to send (submit) the collected form data to the URL indicated in the form's
action attribute using the method indicated in the form's
<form action="https://soundof.it/witcher_horses" method="post"> ... <input type="submit" value="Add horse"> </form>
value attribute allows for setting the text that is being displayed as the button's label.
button input collects a click event from a user.
value attribute includes the text displayed to the user.
<form> ... <input type="button" value="Click me please!" > ... </form>
In addition to the input type
button HTML includes also the newer
button element. The
button element's text, as opposed to the input type
button, is not included in the
value attribute but between the opening and closing tags.
textarea collects multi-line data from a user.
<form> <label for="comment">Provide your comment below:<label> <textarea id="comment" name="mycomment"> </form>
The most notable specific
textarea attributes are:
select input collects a user input through allowing the user to select a value from a list of selectable values.
<form> ... <label for="horses_id">Select a horse</label> <select id="horses_id" name="horse"> <option value="roach">Roach</option> <option value="kelpie">Kelpie</option> <option value="ihuarraquax"> Ihuarraquax </option> </select> </form>
value attribute is the value that is being sent to the server after submit.
One of the most notable
select element's attributes is
multiple which boolean value controls whether the
select element allows for multiple values to be selected at the same time.
It is possible to group options with the
button element collects a click event from a user just like the input of type
button when the
type attribute is set to
type attribute can also be set to
reset which equips it with the relevant functionality of respectively the input type
reset. The default type of the
button element is
button element, as opposed to the input type
reset, can include any phrasing content between its mandatory opening and closing tags.
<form> ... <button type="button" > Increase by 1 </button> ... </form>
button element can have the
value attribute which translates into
name in the form data.
name attribute does not translate into
name in the form data but is used to describe the button's functionality for assistive technologies.
Fieldsets & Legends
fieldset element groups several form elements. A
fieldset element is often captioned with a
<form> <fieldset> <legend> Horses </legend> <label for="owner_name_id">Owner's name</label> <input id="owner_name_id" name="owner_name" type="text"> <label for="horse_name_id">Horses' name</label> <input id="horse_name_id" name="horse_name" type="text"> <fieldset> ... </form>
disabled attribute is present on the
fieldset opening tag it disables all inputs nested within the fieldset element.