HTML Forms And Elements And How to Use Them

Whenever dealing with user input, it is advisable to provide a structure so the process can be completed quickly and reliably, also limiting the amount of ‘free form’ input, which can be dangerous to allow in a public site. In HTML5, such a structure is achieved with the use of the form and input tags.

Every web developer is somewhat familiar with these tags and their use. But HTML5 has made them more powerful than ever and revisiting their properties could prove beneficial for your future projects.

Types, properties, names.

A form tag is composed of an opening tag, a body and a closing tag. We’re interested in the first two parts.

Parameters and methods.

Like most HTML tags, form admits several parameters that alter its behavior and allow it to fulfill more than one role. In the previous figure, only one parameter was present: the action parameter. This is no accident, as this is the only form parameter without a default value. You could omit every other parameter and the form would still do something.

The action parameter determines where do you want the form data to be sent as an HTTP request. Without it, your form would lose your collected data in a limbo of non-made requests.

Still, after knowing where to send your data, your form needs to know how to send it. Or, more precisely, what does my form want to get back from that request?

This behavior is the responsibility of the method parameter, which defaults to get and defines if the form wants only to get information back, or if it wants to leave something in the request’s destination.

Putting get as the value of the parameter or omitting it means that the form will send it’s input to the destination waiting for an action to be performed there while making the value post means that the form will try to perform an action in the destination and wait to get a confirmation. Remembering this is important, as you won’t be able to use post as your value on most external sites.

Now you have managed to get your data where you want it and told the destination what you want to get back. But you still haven’t got any data. That is the job of the input tag. And while there are still some parameters that you can add to your form tag, it would be better to bring them up as we manage our inputs.

Where do I type my name?

If you want to allow users to give you their precious information, you need to provide a place to put it. And if the form tag is the neat package, the input tag is the gift.

The input tag will create an interactive field where a user can put the required information. And as information can take many forms, so can the input tag. It can gather text, it can create a checkbox to pick one, more, or none, from a small set of options; it can create a file upload field, a color picker, range selector or even a phone field.

Many are the shapes this tag can take, and it’s almost a certainty that whatever data you need from the user, this tag can handle. A complete reference can be found in Mozilla’s site.

It would be impractical to list every option enabled by these types but here is a non-comprehensive list of some of the most common fields and parameters you’ll need:

Text. Basic field for text input. Accepts some self-explanatory attributes like minlength, maxlength and readonly; it can take a size attribute that defines the character length of the field, and it can also take some more advanced parameters like pattern, which takes a regular expression for matching the format of the text; or like spellcheck, to enable or disable spell checking for the field.

placeholder is a staple parameter for presenting the user with some example text or an instruction. No matter what you put here, this and every other filed need to be encoded before being sent. The type of encoding is defined by the form’s enctype parameter. Most times, the default enctype, urlencoded, is the one you will be using, but other values can be used for different purposes.

Password. This field is very similar to the text field, being able to take the same attributes. The main difference is that password will hide the text input.

Email. It is, basically, a text input that, by default, matches input for email format. If your form uses the parameter no-validate, there will be no format validation for this nor for any other format-validated fields.

Checkbox. Checkboxes are two-value fields that can be either selected or deselected. When presented alone, these fields can be managed just like any other field, with the benefit of having only two values. But, when part of the same group -i.e. when they have the same name- they open up more possibilities.

You still can select/deselect as many of them as you want but, when submitted, they’ll behave as a single field and will send their data in a name=id[&name=id…] format, where the existence of a certain name=id pair indicates that those boxes were checked.

Radio Buttons. They behave mostly the same as checkboxes, but only one of them, if in a group, can be selected at the same time.

Range. The range field creates a slider the user can use to select a quantity between a min and max parameters, which default to 0 and 100, respectively. The step parameter allows you to control by how much will the slider change the value while being dragged.

Url. Similar to the email field, this one is a text filed that validates the user input against a URL pattern. Still, a pattern can be provided to further your control over the field.

Tel. Do not be deceived by this field’s name, it is functionally a text input. The main difference is that some browsers — mostly mobile — will present a phone typing keyboard when activating this filed. This is due to the many different formats that phone numbers take around the world. Using a pattern to validate the input is recommended.

Date and time. Both date and time fields are very useful and very similar. They both create formatted selectors that are different for each browser, can define min and max parameters as well as value and step. They can’t, however, handle a placeholder. Unsupported browsers degrade the tag to a text input, so you should be careful while handling data coming from these fields.

File. A more complex field used primarily to upload files from the user’s computer, but can also be used to capture new media from a device camera. It’s parameters are accept, which takes a string with unique file type specifiers, comma-separated if there are several; capture, which defines if a backward-facing camera/microphone should be used, or a front-facing one, with the values user and environment respectively; multiple is a boolean parameter that defines if a user can upload just one or multiple files; and files, the last parameter, is defined when the user selects a file, contains a list of paths to all files to be uploaded, and can only hold one path unless the multiple parameter is present.

Remember, any form that contains this field must use the multipart/form-data value in its enctype parameter to function correctly.

The special buttons. An input of type button won’t do anything by itself when included in an HTML file, inside or outside a form, unless a behavior for it is defined with javascript. However, the special types of button reset and submit will have a default behavior when they are part of a form. The reset button will clear the fields to their default state, and the submit button will trigger the submission of the form as defined by the form’s parameters.

The target parameter of a form will determine where the response to the form will be displayed. The default value is _self, which will display the response in the same window and tab, as they are the current browsing context. Other options include _blank, to display the response in a new browser/tab, depending on the browser; and framename, to display it inside a named iframe element within the page the form was in.

Method, enctype, action, and target are form parameters that can be overridden by parameters of format form[parameter] in this field.

What is this button for?

So far, we have shown some of the many types of input HTML5 has access to. Something, nevertheless, seems odd. Some of our fields have formats and placeholders which can explain their purpose but, still, there are no names, no visible identifiers for the user to read.

We could add some text beside them and that would be enough, right? Yes, but HTML offers us a tag with a couple more uses for this task: the label tag.

While the label tag can appear humble and similar to any other plain text tag, it has some neat utilities packed in which can make your form more accessible.

First, a parameter for defined as the same value of the parameter id of an input field will associate the label to said field, which means that clicking the label will make the browser focus the input it is related to.

This, for example, will make it easier to click in a small checkbox or radio button. Secondly, a label’s content will be read out loud when a screen reader user focuses on the associated input. The benefit of this is self-explanatory.

A few things before GETting to work.

By this point, you should have all the information you need to build semantically correct forms, modify their behavior, construct many kinds of inputs with their own parameters and options. Still, there are a few things you should remember while building your forms.

While HTML5 can validate many kinds of inputs by format and file type, be aware that these validations are not bulletproof. Thew allow you some control over the input your user can give you, but they are not enough to dissuade malicious users. Think of them more like a convenience for the average user of your site and not as a security system.

The tools of your trade, developer, are many and each of them has its own purpose, characteristics, and limitations. Knowing the meaning of what you type is the difference between capability and mastery.

Appendix: Code shown.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="./style.css">
    <title>Forms, labels, and inputs.</title>
</head>
<body>
    <div class="main">
        <h1>Forms, labels and inputs.</h1>

        <form action="#" method="get">

            <input type="text" name="name" placeholder="Name" required>
            
            <input type="password" name="pwd" placeholder="***" required>
            
            <input type="email" name="email" placeholder="[email protected]" required>

            <input type="checkbox" name="checkbox" id="checkbox-1" value="1">

            <input type="checkbox" name="checkbox" id="checkbox-2" value="2">

            <div class="radio-group">
                <label for="radio-1">Option 1</label>
                <input type="radio" name="radio" id="radio-1" value="1">
            </div>

            <div class="radio-group">
                <label for="radio-2">Option 2</label>
                <input type="radio" name="radio" id="radio-2" value="2">
            </div>
            
            <input type="range" name="range" min="0" max="100" step="2">

            <input type="url" name="url" placeholder="https://www.example.com">
            
            <input type="tel" name="phone" pattern="[0-9]{2}-[0-9]{4}-[0-9]{4}"
                placeholder="##-####-####">
            
            <input type="date" name="date" min="2020-01-01" 
                   max="2020-12-31" value="2020-04-15">
            
            <input type="time" name="time" min="09:00" max="18:00" placeholder="17:00">
            
            <input type="file" name="file" accept="image/png, image/jpeg">
            
            <input type="reset" name="reset">
            
            <input type="submit" value="Submit" name="submit">
            
        </form>
    </div>
</body>
</html>

Disclaimer: Some CSS was used to make it look better.

Previously published at https://medium.com/@danielchincoya/forms-labels-and-inputs-what-are-they-for-and-how-to-use-them-d5cd180b1de9