HTML Forms - Input Types

The previous chapter, HTML Forms — Basics, covered the very fundamental ideas of working with forms in HTML. We came across the <form> element, a listing of all the form control elements in HTML, and a couple of general, useful attributes of these form control elements.

If we focus solely on the <input> element, we'll see that there is quite a lot of information to explore in it. In this chapter, we shall tap into this information.

That is, in this chapter, we shall scratch the surface by considering some of the most commonly used types of <input> elements. The type of the element is given by its type attribute, as we shall find out.

In the next chapter, HTML Forms — Advanced Input Types, which is optional for this unit, we shall take it on from here and explore some more advanced input types, such as those for obtaining date/time, color, email, and so on. These aren't used that frequently in websites out there and likewise, we've omitted them from this chapter.

The <input> element, as we learnt in the previous chapter, is a means of representing a form control in HTML. It's not the only means but it won't be wrong to say that it's the most used one.

This is perhaps because a great number of form control types reside within the world of the <input> element.

The type of an <input> element is given by its type attribute. We have password input, radio buttons, checkboxes, file inputs — all behind the mere <input> element.

We saw the most generic value of type, "text", and one which is taken as the default in case type is omitted, in the previous chapter. The "text" type denotes a generic, single-line text box.

Besides "text", there are many other possible values for the type attribute. The most common ones, that we'll explore in this chapter, are as follows:

There are other, more advanced <input> types as well. The table below lists all these:

We shall explore these types in the next chapter, HTML Forms — Advanced Input Types.

Apart from representing actual inputs, where the user can enter given information, <input> can also be used to render buttons:

Buttons will be covered in detail in the chapter, HTML Forms — Buttons.

Let's begin with reviewing the most elementary type of an <input> element — a generic text box.

The "text" type of the <input> element is the most basic type that we can use for it. In fact, when we omit the type attribute from an <input>, this is the default.

The "text" type renders a single-line text box (also referred to as a text input, or input field).

Following is an illustration a text input:

What we mean by 'single-line' is that we can NOT have multiple lines of text in it. If we do try to enter a new line (by pressing the Enter key), we'll get nothing.

Let's see a concrete demonstration of this.

<input type="text"> is single-line!

Consider the following example of an <input> of type "text":

<form>
   <p>Try entering new lines here:</p>
   <input type="text" name="name">
</form>

Live Example

Open the linked example page and try entering a new line into the input by pressing the Enter key. (Pressing Enter is quite a standard way of entering a newline character while typing.)

What happens? Well, since the <input> is wrapped inside a <form>, pressing Enter dispatches the form data for submission. We don't get a newline.

Let's take the <input> out of a <form> — remember, this is valid HTML — and then repeat this experiment:

<p>Try entering new lines here:</p>
<input type="text" name="name">

Live Example

What happens now? This time, no form gets submitted because trivially we don't have one, but still the depression of the Enter key doesn't give a newline character in the text input field.

As a third case, let's try copy/pasting a value containing a newline character in it into the input field and then see its rendered value.

Go on and copy the following text:

Hello World!
This is a text file.

Open the link above and paste this text into the input field.

What happens? Well, the newline character after the text 'Hello World!' gets stripped away.

All in all, this simple experimentation confirms the fact that a single-line text input, rendered by an <input> element, can't ever have a newline character in it.

Like literally, never!

Moving on, following are a couple of quick review pointers for the features that we can have on a single-line text input, as we learnt in the previous chapter:

• The initial value via the value attribute.
• A temporary, placeholder value to explain the purpose of the input when it's empty via the placeholder attribute.
• Making the input required to be filled by a user via the required attribute.
• Disabling the input via the disabled Boolean attribute.

Besides these, we can leverage a couple more features of text inputs.

For example, using the minlength and maxlength attributes, we can constrain the length of the input to a given number of characters.

minlength is set to a number representing the minimum length; maxlength is set to a number representing the maximum length.

For example, a minlength of "10" means to have at least 10 characters in an input field. Similarly, a maxlength of "20" means to have at most 20 characters.

Not having a value as long as the minimum length triggers the browser to raise a warning dialogue. Going beyond the maximum length doesn't trigger a warning though; rather, the browser stops adding data to the input field when it reaches the given maximum limit.

The following code presents a simple example:

<form>
   <p>Your name (limit: 10 characters)</p>
   <input type="text" maxlength="10" name="name">
</form>

Live Example

Open the link above and try entering a value into the input that's longer than 10 characters — you'll notice nothing changing beyond the 10-character mark.

With the web being used more than ever before for carrying out ecommerce and online transactions, authentication and security have for long been hot topics for the web.

Without a doubt, passwords have played and still play a crucial role in this whole system of authentication.

At its core, a password is a sequence of characters — typically, lowercase and uppercase letters, digits, and symbols — representing a sensitive credential for authenticating one into a given system.

As we know, HTML forms are pervasive in their use throughout the web because...well...if we need to be able to perform transactions online, we need the input of users, right? We need them to log in to their accounts, select things to buy, enter payment information, and so on.

This means that at one point or another, we ought to deal with passwords on the web.

The <input> element fortunately has a dedicated type for rendering a password input field. It is behind the type "password".

A password input is similar in all regards to an ordinary text input (the one we saw above) except for the way it's rendered.

In particular, a password input renders its data using • (bullet) symbols. This is to hide the password data from other people while it is entered into the input field.

Let's create a password input:

<form>
   <p>A password field</p>
   <input type="password" name="password">
</form>

Live Example

Enter the text 'Hello' into the password input and then submit the form (by pressing Enter); the query string of the URL in the address bar should read ?password=Hello.

When entering data into a form, we often come across a situation where we have to select one of multiple choices. There are two ways to lay out such an input in a form: <select> or <input>.

We'll explore the <select> element in detail in the chapter, HTML Forms — Selection Menus. For now, we're concerned with the latter, that is, using <input>.

The "radio" type of the <input> element is used to create a radio button control.

For instance, if we want the user to input his/her gender, we might have three radio buttons for the 'gender' input: one for male, one for female, and one for other.

The conventional visual styling associated with a radio button on the web is a hollow circle which gets filled up once the button is selected.

Customarily, a radio button is accompanied by some label text describing what the radio stands for. For instance, if a radio button represents the 'male' option for a gender input, we'd have it as follows:

A radio button is never ever created as a standalone entity in a form (unlike a checkbox, as we shall find out soon in this chapter); it's always a part of a set of related radios. The name attribute relates multiple radios with one another.

At any given instant, in a set of related radios, we can only have one radio selected. Selecting another radio will get the previous one deselected and the new one selected.

Creating a radio button is not difficult at all but a little more work to do as compared to creating a text or password input.

There are two steps involved:

• Give a name to the radio button. This is absolutely crucial because multiple radios are associated with the same input via their name attribute. (We'll see what this means below.)
• Give a value to the radio. This represents the value sent to the server for the underlying input when the form is submitted.
• Give a labeling text for the radio. This is extremely important because there's no other way to explain the purpose of a radio besides having accompanying text (for e.g. we can't use placeholder for a radio button).

Time for an example.

In the code below, we create a gender input consisting of three options, each denoted as a radio button: male, female, and other:

<form>
   <p>Gender</p>
   <input type="radio" name="gender" value="male"> Male
   <input type="radio" name="gender" value="female"> Female
   <input type="radio" name="gender" value="other"> Other
</form>

Live Example

The name of the input, "gender", must be the same throughout all the radio buttons. The browser uses the name attribute in determining related radio buttons. The value of each radio is the corresponding gender, in lowercase.

As this example showcases, the value attribute of a radio is really not its initial value but rather its current value. There's no way for us to change the value of a radio in a form unlike how we can change the value of a text input; hence, value is the current, final value.

As stated earlier, multiple radios are related to one another via their name attribute.

Let's try messing up with the code snippet above and see how name affect the relationship of the radios:

<form>
   <p>Gender</p>
   <input type="radio" name="gender" value="male"> Male
   <input type="radio" name="gender" value="female"> Female
   <input type="radio" name="random" value="other"> Other
</form>

Notice the mess-up we do here? (Hint: It's quite apparent.)

Live Example

Open the link above and select all of the radios, one by one. What happens when you select the radio for 'Other'?

Well, this has a strange consequence. Instead of the previous radio being deselected and the one for 'Other' being selected, we only get the latter — the deselection doesn't happen. This is simply because we've messed up the name of the radio representing the 'Other' option.

Here's how the browser views these radio sets:

The one for "gender" is a separate set while the one for "random" is a separate set.

It's utmost important to keep in mind that the radio deselection-and-selection behavior is confined to a set of related radios. It doesn't go beyond the set into a different one.

<form>
   <p>Your favorite technology:</p>
   <input type="radio" name="favorite_tech" value="HTML"> HTML
   <input type="radio" name="favorite_tech" value="CSS"> CSS 
   <input type="radio" name="favorite_tech" value="JavaScript"> JavaScript
</form>

Besides radio buttons, the <input> element can also be used to create checkboxes. This is done via the type "checkbox".

Akin to a radio button:

However, unlike a radio, multiple checkboxes belonging to the same set can be selected at a time.

A checkbox is conventionally associated with a visual styling of a hollow square which is filled with a check icon when the checkbox is selected.

As with a radio, a checkbox is accompanied by some label text describing what the checkbox stands for. For instance, if we have a checkbox for accepting to receive a weekly newsletter, we'd have something as follows:

Checkboxes are typically used when we want to:

• Have an input with two values: on and off (sometimes also referred to as a binary input).
• Be able to select multiple choices in a given list of choices.

When there are multiple checkboxes selected in a given set of related checkboxes, the browser sends each name-value pair separately to the server.

Let's consider an example for each of these two cases to understand them better...

Yes or no

In the first example, we'll demonstrate the simpler usage of checkboxes, that is, in presenting the user with a yes/no choice.

The example we'll try to replicate is the one we saw in the illustration above, i.e. have an input to specify whether we wish to subscribe to a weekly newsletter or not.

<form>
   <input type="checkbox" name="subscribe" value="true"> Subscribe to newsletter
</form>

Live Example

When the checkbox is selected, it clearly means we wish to subscribe to the newsletter. But when it's not selected, we don't give our consent to the subscription.

As this example demonstrates, when a checkbox denotes a yes/no input, it typically doesn't have a label text line preceding it (for example, the 'Gender' line we had in the examples in the previous section).

Multiple choices, possibly multiple selections

In the second example, we'll lay out a set of multiple checkboxes for getting to know some programming languages that the user knows.

In this example, our goal is also to see that when we have multiple, selected checkboxes, how are their values dispatched to the server.

Consider the following HTML:

<form>
   <p>Which languages do you know?</p>
   <input type="checkbox" name="languages" value="HTML"> HTML
   <input type="checkbox" name="languages" value="CSS"> CSS
   <input type="checkbox" name="languages" value="JavaScript"> JavaScript
   <br><br>
   <button>Submit</button>
</form>

Live Example

When we select the 'HTML' and 'CSS' checkboxes and press the submit button, the query string of the URL reads as follows: ?languages=HTML&languages=CSS. Both the checkboxes are dispatched separately.

An important thing to note here is the name of checkboxes. We've chosen 'languages' (plural) instead of 'language' (singular) because a set of multiple checkboxes can be potentially comprised of multiple values (that is, we can have multiple choices selected).

How many times have you uploaded an image for your profile on a social media website? Or how many times have you uploaded a document to your cloud drive?

Whatever the answer be, in either case, you've used the browser's capability of allowing the user to upload a file using an HTML file input and then sending the file data to the server.

A file input is given by the type "file".

Typically, a file input is rendered with a browse button followed by some text depicting the name of the selected file(s), as illustrated below:

If we have a file input in a form, we need to have additional things set up on the <form> element. This is because a file input involves file data transfer to the server which requires a whole protocol to be followed.

Part of this protocol requires us to do the following:

• Set the method attribute of the <form> to "POST". Sending file data is exceptionally challenging, if not completely impossible, as part of the URL — there is just a lot of information to send. This is why we use the HTTP POST method when dealing with file data.
• Set the enctype attribute to "multipart/form-data". This sets the encoding type for the form data. Sending file data within the payload of an HTTP POST request requires multiple parts, some dealing with ordinary inputs (text inputs, password inputs, radios, checkboxes, etc.) while others dealing with file data.

Understanding both method="POST" and enctype="multipart/form-data" to the core is out of the scope of this course, let alone this chapter. They both require us to dive deep into the mechanics of HTTP, understanding such things as POST requests, request payloads, and so on.

For now, we shouldn't worry much about the details of how these attributes work, for we'll get the hang of these once we cover HTTP in a future course (I've planned on having a course on HTTP as well!)

Anyways, let's consider an example:

In the following HTML, we set up a file <input> to get the user to upload his/her CV:

<form method="POST" enctype="multipart/form-data">
   <p>CV (Upload a PDF.)</p>
   <input type="file" name="cv">
</form>

Live Example

Think of this form as the last step in an online job application portal. In that sense, it's not that much contrived.

The last type that we ought to cover before wrapping up this chapter (quite a long one) is that of a hidden input. It's given by the type value "hidden".

As per the naivety of the name,

If a hidden input is not displayed, when might we ever want to use it?

Well, probably to your initial surprise, hidden inputs are quite common in all but the simplest of web applications.

They usually contain authentication tokens and/or other ancillary information in a form, necessary for the server to know but not at all for the user. Likewise, they're hidden from the user.

Because a hidden input is hidden and so there's no way of interacting with it, its utmost important for us to specify its value using the value attribute. There's no point of having a value-less hidden input!

In the following code, we create a hidden input for holding onto a CSRF token. The token has been represented by the text somerandomvalue because it's customarily generated by the server:

<form>
   <input type="hidden" name="csrf_token" value="somerandomvalue">
</form>

We don't present an example page for this code because...well...there's nothing to see.