Lesson 8

Building Forms

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 type attribute to determine what type of information is to be captured within the specific control. The most popular type attribute 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
iOS Date Input Type
Fig. 8.01 The date input type within iOS.
iOS Time Input Type
Fig. 8.02 The time input type within iOS.
iOS Email Input Type
Fig. 8.03 The email input type within iOS.
iOS URL Input Type
Fig. 8.04 The url input type within iOS.
iOS Number Input Type
Fig. 8.05 The number input type within iOS.
iOS Date Tel Type
Fig. 8.06 The tel input type within iOS.

Textarea

Another element used to capture text based data is the textarea element. The textarea element differs from the text input 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 of checkbox 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

Drop Down Lists

Drop down lists are a perfect way to provide users with a long list of options in a usable manner. Outputting every state within the country on a page with radio buttons would create a rather cluttered and daunting list. Drop down menus provide the perfect venue for a long list of options.

To create a drop down menu the select and option elements are used. The select element will wrap all of the different menu options marked up using the option element. Then you can apply the name attribute to the select element.

Each individual option within the menu needs to be coded using the option element. The option element will wrap the text to be included within the menu. Additionally, the option element will include the value attribute, specific to each individual option.

As with the checked Boolean attribute with radio buttons and checkboxes, drop down menus can use the selected Boolean attribute to preselect an option for users.

<select name="day">
  <option value="Friday" selected>Friday</option>
  <option value="Saturday">Saturday</option>
  <option value="Sunday">Sunday</option>
</select>

Multiple Selections

Using the standard drop down list and adding the Boolean attribute multiple to the select element allows a user to choose more than one option from the menu. Additionally, using the selected Boolean attribute on more than one option element within the menu will preselect multiple options.

The height and width of the select element can be controlled using CSS and should be adjusted appropriately to allow for multiple selections. It may also be worth mentioning to users that to choose multiple options they will need to hold down the shift key while clicking to make their selections.

<select name="day" multiple>
  <option value="Friday" selected>Friday</option>
  <option value="Saturday">Saturday</option>
  <option value="Sunday">Sunday</option>
</select>

Multiple Selections Demo

Form Buttons

After a user inputs the requested information, buttons allow them to put that information into action. Most commonly, a submit button is used to process the data. A reset button is often used to clear data.

Submit Button

Users click the submit button to process data after filling out a form. The submit button uses the input element with a type attribute of either submit or image. The submit attribute value is the most common as it is simple to use and provides the most control. The image attribute value is used specifically to set an image as a submit button, however with the use of CSS the need to use an image has greatly diminished.

To determine the verbiage to be used within the button, the value attribute is used. Using CSS properties such as background, border-radius, box-shadow, and others, the button can then be styled to any specific desire.

<input type="submit" name="submit" value="Submit Form">

Submit Button Demo

Reset Button

To take the complete opposite action from submitting a form, users may also reset a form using the reset button. The reset button code works just like that of the submit button, however it uses the reset value for the type attribute.

Reset buttons are becoming less and less popular because they offer a very strong action, often undesired by both websites and users. Users may spend quite a bit of time filling out a form only to click the reset button accidentally thinking it was the submit button. Chances of a user filling out the form again thereafter are small. Before using a reset button think of any potential consequences.

<input type="reset" name="reset" value="Reset Form">

Reset Button Demo

Other Inputs

Outside all other previously stated choices the input element does have a few other use cases. Two of which include passing hidden data and attaching filings during form processing.

Hidden Input

Hidden inputs provide a way to pass data to the server without displaying it to users. Hidden inputs are typically used for tracking codes, keys, or other information not pertinent to the users but helpful to the website overall. This information is not displayed on the page, however it could be seen by viewing the source code of a page. That said, it should not be used for sensitive or secure information.

To create a hidden input you use the hidden value for the type attribute. Additionally, you pass along the appropriate name and value.

<input type="hidden" name="tracking_code" value="abc_123">

File Input

To allow users to add a file to a form, much like that of attaching a file to an email, the file value for the type attribute is used. The file input is most commonly seen to upload pictures or files to social networks or applications.

Unfortunately, stylizing the file input is a tough task with CSS. Each browser has its own default rendering of how the input should look and doesn’t provide much control to override the default styling. JavaScript and other solutions can be built to allow for file input, but they are slightly more difficult to construct.

<input type="file" name="file">

File Input Demo

Organizing Form Elements

Knowing how to capture data with inputs is half the battle. Organizing form elements and controls into a usable manner is the other half. Forms are not worth much unless users understand what is asked of them and how to provide the requested information. Using labels, fieldsets, and legends we can better organize forms and guide users to completing the end task.

Label

Labels provide captions, or headings, for form elements. Created using the label element, labels should include descriptive text, of which describes the input or control it pertains to. Labels should include a for attribute. The value of the for attribute should be the same as the value of the id attribute included within the form element the label corresponds to. Matching up the for and id values ties the two elements together, allowing users to click on the label to get focused within the proper form element.

<label for="username">Username</label>
<input type="text" name="username" id="username">

Label Demo

When using labels with radio buttons or checkboxes the input element can be wrapped within the label element. Doing so allows omission of the for and id attributes.

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

Label Radio Button & Checkbox Demo

Fieldset

Fieldsets group form controls and labels into organized sections. Much like a div or other structural element, the fieldset is a block level element that wraps related elements, however specifically within a form for better organization. Fieldsets by default also include a border outline that can be modified using CSS.

<fieldset>
  <label for="username">Username</label>
  <input type="text" name="username" id="username">
  <label for="password">Password</label>
  <input type="text" name="password" id="password">
</fieldset>

Fieldset Demo

Legend

A legend provides a caption, or heading, for a fieldset. The legend element wraps text describing the controls that fall within the fieldset. The HTML code should include the legend directly after the opening fieldset tag. The legend itself will appear on the page within the top left part of the fieldset border. The appearance of the legend on a page may be changed with CSS.

<fieldset>
  <legend>Login</legend>
  <label for="username">Username</label>
  <input type="text" name="username" id="username">
  <label for="password">Password</label>
  <input type="text" name="password" id="password">
</fieldset>

Legend Demo

Login

Form & Input Attributes

To accommodate all of the different form, input, and control elements there are a number of attributes and corresponding values. These attributes and values serve a lot of different functions including the ability to disable controls, add form validation, and so forth. Below are some of the more popular and useful attributes.

Disabled

The disabled Boolean attribute turns off an element or control so that it is not available for interaction or input. Elements that are disabled will not send any values to the server for form processing.

Applying the disabled Boolean attribute to a fieldset will disable all of the controls within the fieldset. If the type attribute has a hidden value, the disabled Boolean attribute is disregarded.

<label for="username">Username</label>
<input type="text" name="username" id="username" disabled>

Disabled Demo

Placeholder

The placeholder HTML5 attribute provides a tip within the control of an input and disappears once the control is clicked in, or gains focus. The placeholder attribute only applies to inputs with a type attribute value of text, email, search, tel, or url.

The main difference between the placeholder and value attributes is that the value text stays in place during focus unless manually deleted by a user. This is great for pre-populating data, such as personal information for a user, but not for providing suggestions. The difference between the two attributes can be seen below.

<label for="username">Username placeholder</label>
<input type="text" name="username" id="username" placeholder="Holder">

Placeholder Demo

Required

The required HTML5 attribute enforces that an element or control contain a value upon being submitted to the server. Should an element or control not have a value an error message will be displayed requesting a user complete the required field. Currently error message styles are controlled by the browser and are unable to be styled with CSS. Elements, on the other hand, can be styled using the :optional and :required CSS pseudo-classes.

Validation also occurs specific to a control’s type. For example, an input with a type attribute value of email will require that not only a value exist within the input, but that it also includes a valid email format.

<label for="name">Name</label>
<input type="text" name="name" id="name" required>

Required Demo

Additional Attributes

Other form and input attributes include, but are not limited to the following. Please feel free to research and look into these attributes as necessary.

  • accept
  • autocomplete
  • autofocus
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • max
  • maxlength
  • min
  • pattern
  • readonly
  • selectionDirection
  • step

Login Form Example

HTML
<form>
  <label for="login_username">Username</label>
  <input type="text" name="login_username" id="login_username">
  <label for="login_password">Password</label>
  <input type="password" name="login_password" id="login_password">
  <fieldset>
    <input type="submit" name="login_submit" id="login_submit" value="Login">
    <label><input type="checkbox" name="login_remember" id="login_remember"> Stay signed in</label>
  </fieldset>
</form>
CSS
form {
  background: linear-gradient(top, #fff, #f8f8f8);
  border: 1px solid #d0d2d5;
  border-bottom: 1px solid #bebfc2;
  border-radius: 4px;
  margin: 0 0 20px 0;
  padding: 20px;
  width: 212px;
}
label {
  color: #404853;
  display: block;
  font-weight: bold;
}
input {
  background: #fff;
  border: 1px solid #c6c9cc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 #fff;
  color: #555;
  font: 13px/20px 'Droid Sans', Arial, 'Helvetica Neue', 'Lucida Grande', sans-serif;
  margin: 0 0 20px 0;
  padding: 5px;
  width: 200px;
}
fieldset {
  background: linear-gradient(top, #ebeced, #dedfe0);
  border: none;
  border-top: 1px solid #d0d2d5;
  border-radius: 0 0 4px 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  margin: 5px 0 -20px -20px;
  padding: 18px 20px;
  width: 212px
}
fieldset input {
  margin: 0;
  width: auto;
}
#login_submit {
  background: linear-gradient(top, #687587, #404853);
  border: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.75);
  color: #fff;
  font-weight: bold;
  float: left;
  padding: 5px 10px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
}
#login_submit:hover {
  background: linear-gradient(top, #5a6675, #333942);
}
#login_submit:active {
  background: #333942;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.75);
}
fieldset label {
  color: #888;
  cursor: pointer;
  float: left;
  font-size: 12px;
  font-weight: normal;
  margin: 5px 0 0 20px;
}
fieldset label input {
  margin: -2px 2px 0 0;
  padding: 0;
}

Demo

Resources & Links

Complete! Any questions?

Please feel free to contact me on Twitter if you have any questions. Also, if you enjoyed this lesson please share it with your friends.

An Advanced Guide to HTML & CSS

An Advanced Guide to HTML & CSS

An Advanced Guide to HTML & CSS takes a deeper look at front-end design & development, teaching the latest for any designer looking to round out their skills.

View the Advanced Guide to HTML & CSS