HTML Elements

Inputs

HTML user <input>s are used to create interactive elements in web-based forms. Their job is to accept data from the user by using various types of built-in types. We have over 20 different input types at our disposal, which gives us a lot of options, but also at the same time makes <input> one of the most complex elements to use correctly.

We usually use <input> elements inside a <form>, which makes it possible to validate input data client side.

Common attributes

Every type of <input> has their own set of attributes, but they do share some commonly used attributes.

Labels

The HTML <label> element should be used to describe each and every visible <input>. The for attribute specifies which <input> the label is describing, which requires the <input> to have a matching id attribute.

An alternative is to nest the input element inside the label, which makes the association between <input> and <label> implicit. What method we use, it mostly a matter of taste, but we should try to be consistent once we have made our choice.

Labels help people who use assistive technologies because they can tell the user what a particular user input is meant for.

Code example

Copy
<label for="age">Age (years):</label>
<input type="number" name="age" id="age" required>

which produces (give some styling)

Age (years):

Common types

Checkbox

Checkboxes should be used to toggle an option on or off. Toggling it on is usually considered a positive action and should be reflected as a positive/true value on the state.

Copy
<label for="displayEmptyColumns">Display empty columns:</label>
<input type="checkbox" name="displayEmptyColumns" id="displayEmptyColumns">

which produces (give some styling)

Display empty columns:

Date

Date <input>s are used to create input fields where the user can enter a date, either by picking it from a native browser date picker or typing it in. The browser will automatically validate the input and check that a valid date has been entered

Copy
<label for="startDate">Start date:</label>
<input type="date" name="startDate" id="startDate">

which produces (give some styling)

Start date:

File

The file input type is used for file selection. These files can then be uploaded to a server when the form is submitted, but can also be passed to JavaScript functions for custom handling.

Copy
<label for="license">License:</label>
<input type="file" name="license" id="license"
       accept="image/png, image/jpeg">

which produces (give some styling)

License:

Number

The number input type allows users to enter a number. The browser will automatically check that a valid number has been entered.

Copy
<label for="sabers">Sabers (1-4):</label>
<input type="sabers" name="sabers" id="sabers"
       min="1" max="4" value="1" required>

which produces (give some styling)

Sabers (1-4):

Password

The password input type is a text field where user input is visually obscured such that it cannot easily be read. It is important to remember that the value stored is not safe or encrypted in any way. Password fields are mostly used to hide the password from curious people sitting nearby.

Copy
<label for="password">Password (8-64 characters):</label>
<input type="password" name="password" id="password"
       minlength="8" maxlength="64" required>

which produces (give some styling)

Password (8-64 characters):

Radio

We can use radio input type elements when we want to allow the user to select a single option from a choice of several. We group radio buttons together by giving them the same name. The browser will then ensure that only a single radio is selected from the radio group.

We should avoid using radio buttons when only a single option is available, and instead use checkboxes.

Copy
<div>
  Please select preferred shipping method:

  <label>
    <input type="radio" name="shippingMethod"
           value="dhl" checked>
    DHL
  </label>
  <label>
    <input type="radio" name="shippingMethod"
           value="singapore-post">
    Singapore Post
  </label>
</div>

which produces (give some styling)

Please select preferred shipping method:DHLSingapore Post

Text

The text is the default input type and is in many ways the most generic type. It provides almost no browser validation, except for length checks and limits. We use the text type when the user input data cannot be limited to one of the other types.

Copy
<label for="name">Name (1-128 characters):</label>
<input type="text" name="name" id="name"
       minlength="1" maxlength="128" required>

which produces (give some styling)

Name (1-128 characters):

<form action="/api/users" method="post">
  
  <input type="submit" value="Register account">
</form>