Forms in HTML

What Are Forms in HTML?

The 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.

The form's 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.

The method attribute indicates an HTTP method of the request (POST, PUT, PATCH, GET, etc.).

<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 https://soundof.it/witcher_horses URL.

Names & Values

Generally, the values of form elements' name attributes are sent to the server like name=value.

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 POST, PUT and PATCH the pairs constitute the request body.

Form Elements

Forms are built using many different elements. The most notable of those are:

label,
input,
textarea,
select,
button, and
fieldset.

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 (name=value),
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.

Labels

Form elements that allow for collecting data are often accompanied by labels. The 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.

A label element is bound with a given input element when the label's for attribute is equal to the element's id attribute.

Inputs

Intro

The input element allows for collecting user data in many different forms. The most notable of those are:

text,
radio,
checkbox,
file,
button, and
submit.

Text Inputs

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 user, email, new-password, 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:

email - informs the user agent that the input is dedicated to collecting an email address and extends input with email address validation,
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 :valid or :invalid pseudo-classes on validations.

Radios

The 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.

A selected 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.

The value attribute's value is used when submitting data to a server.

The radio input is styled with the operating system default styling unless appearance: none property is used which allows for custom styling.

Checkboxes

The 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.

A checkbox input can only apply checked or 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>

If the 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 Inputs

The 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>

The attribute 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 Inputs

The 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 method attribute.

<form action="https://soundof.it/witcher_horses" method="post">
  ...
  <input type="submit" value="Add horse">
</form>

The value attribute allows for setting the text that is being displayed as the button's label.

Button Inputs

The button input collects a click event from a user.

The click event should be associated with a JavaScript event handler function with the desired functionality.

The 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.

Textareas

The 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:

autocomplete,
minlength,
maxlength.

Selects

The 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>

The option 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 optgroup attribute.

Buttons

The button element collects a click event from a user just like the input of type button when the button's type attribute is set to button.

The button's type attribute can also be set to submit or reset which equips it with the relevant functionality of respectively the input type submit or reset. The default type of the button element is submit.

The button element, as opposed to the input type button, submit or reset, can include any phrasing content between its mandatory opening and closing tags.

<form>
  ...
  <button
    type="button"
  >
    Increase by 1
  </button>
  ...
</form>

The button element can have the value attribute which translates into name in the form data.

Conversely, the button element 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

The fieldset element groups several form elements. A fieldset element is often captioned with a legend element.

<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>

When the disabled attribute is present on the fieldset opening tag it disables all inputs nested within the fieldset element.