Building Forms - Part 1

Forms are an essential part of the internet as they provide a way for websites to capture information about users, process requests, and give controls for nearly every use of an application imagined. By providing controls, or fields, forms can request a small amount of information, often a search query or username and password, or a large amount of information, perhaps shipping and billing information or a job application.

Knowing how to build forms is necessary to acquire user input. In this lesson we’ll discuss how to use HTML to markup a form, which elements are available to capture different types of data, and how to style forms with CSS. We won’t get too deep into how information from a form is processed and handled on the backend of a website. Form processing is a deeper topic, outside the realm of this lesson.

Initializing a Form

To begin a form on a page the form element must be used. The form element signifies where on the page control elements will appear. Additionally, the form element will wrap all of the elements included within the form, much like that of a div element.

<form action="#" method="foo">
  ...
</form>

A handful of different attributes can be applied to the form element, two of which, action and method, are most often seen. The action attribute is the URI where information included within the form will be sent to be processed by the server. The method attribute is the HTTP method browsers use to submit the form data. Both of these form attributes revolve around submitting and processing data.

Text Fields & Textareas

When it comes to text controls within forms there are a few different elements available to obtain data. Text fields and textareas are specifically used to gather text or string based data. This may include data containing passages of text content, passwords, telephone numbers, and so forth.

Text Fields

One of the primary elements used to obtain text from users is the input element. The input element uses the typeattribute to determine what type of information is to be captured within the specific control. The most popular typeattribute value is text, which denotes a single line text input.

Along with setting a type attribute it is also best practice to give an input a name attribute as well. The name attribute is used as the name of the control and is submitted along with the input’s data to the server.

<input type="text" name="sample_text_field">

Text Input Demo

Please note the input element is self enclosed, meaning there is only one tag and it does not wrap any other content.

Originally, the only two text based type attribute values were text and password, for password inputs, however HTML5 has brought along a handful of new type attribute values and form updates. These values were added to provide better semantical context around an input as well as help provide better controls for users. Should a browser not understand one of these HTML5 type attribute values, it will automatically fall back to the text attribute value. Below is a list of the new HTML5 input types.

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Fig. 8.01The date input type within iOS.

Fig. 8.02The time input type within iOS.

Fig. 8.03The email input type within iOS.

Fig. 8.04The url input type within iOS.

Fig. 8.05The number input type within iOS.

Fig. 8.06The tel input type within iOS.

Textarea

Another element used to capture text based data is the textarea element. The textarea element differs from the textinput in that it is for larger passages of text spanning multiple columns. The textarea also has start and end tags which can wrap plain text. Since the textarea element only accepts one type of value the type attribute doesn’t apply here, however the name attribute is still in effect.

<textarea name="sample_textarea">Sample textarea</textarea>

Textarea Demo

The textarea element does have two sizing attributes, cols for width and rows for height. These, however, are pretty old school attributes, and in their place the width and height properties within CSS should be used.

Multiple Choice Inputs & Menus

Apart from text based input controls HTML also allows users to select data using multiple choice and drop down lists. These form controls come in a few different options and elements, each of which have their own benefits.

Radio Buttons

Radio buttons are a quick and easy way to show a small list of options and allow users to make a quick decision. Radio buttons only allow users to select one option, as opposed to selecting multiple options.

To build a radio button the input element is used with a type attribute value of radio. Each radio button option should have the same name attribute value so that all of the buttons correspond to one another. With text inputs the value of the input was determined by what a user typed in, with radio buttons a user is simply making a selection so we have to define the input value. Using the value attribute we can set specific values for each input.

Additionally, to preselect a radio button for users the Boolean attribute checked may be used.

<input type="radio" name="day" value="Friday" checked> Friday
<input type="radio" name="day" value="Saturday"> Saturday
<input type="radio" name="day" value="Sunday"> Sunday

Radio Buttons Demo

 Friday  Saturday  Sunday

Checkboxes

Checkboxes are very similar to that of radio buttons. They use the same attributes and patterns, with the exception ofcheckbox as the type attribute value. The difference between the two is that a checkbox allows you to select multiple values and tie them all to one control name, while radio buttons limit you to one value.

<input type="checkbox" name="day" value="Friday" checked> Friday
<input type="checkbox" name="day" value="Saturday"> Saturday
<input type="checkbox" name="day" value="Sunday"> Sunday

Checkboxes Demo

 Friday  Saturday  Sunday