Working with HTML5 Forms

Forms are one of the most important means for collecting information on a website, as well as having users contact you, whether it be logging in to Twitter or filling out a contact form. There are several elements used in a website to collect and send information. This post will look at a handful of the most common ones, and how you can add them to your website.

If you're experiencing difficulty configuring your online forms, then seek professional assistance from a web development company such as Sunlight Media LLC.

The <form> Element

The <form> element is used whenever adding a form to a webpage, regardless of the elements you will use within it. You can think of it almost as a <div> for forms:

<form action="/registration" method="post"

...Form Content...

</form>

The <form> element has many different attributes that can be applied to it, two of the most common being action and method. action will be the URL address where the data in the form will be sent to, and the method attribute indicates the HTTP method used to send form data.

Text Fields & Input Types

Text Fields are used for collecting usernames, email addresses, or any instance when collecting text content. The most common element used for this is the <input> element, with a type attribute value of text:

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

This will create a standard text field for inputing a username.

The type attribute of the <input> element accepts many other different values, which may have different UI controls, especially on mobile. For example, when using a type value of of date, the <input> element will display a scrolling list of dates on a mobile device, and a type value of time will show a similar interface for selecting a time from a list of numbers, and a selector for AM or PM.

A small list of the available <input> types include: color, date, datetime, email, number, tel, time, url, and more.

<input type="date" name="dob">

<input type="time" name="delivery-time">

<input type="email" name="email-address">

<input type="url" name="website">

One alternative to using the <input> element for text data is using the <textarea> element. This is often used for longer passages of text, such as comments, messages, etc. By default the <textarea> element can be re-sized on the page, although you can set specific dimensions for it via CSS.

<textarea name="message">Add your message here</textarea>

textarea {

width: 600px;

height: 400px;

}

Radio Buttons

Radio buttons are an ideal choice when users should only select one possible option from multiple. They are technically an <input> element with a type attribute value of radio:

<input type="radio" name="food" value="Pizza"> Pizza

<input type="radio" name="food" value="Cheeseburger"> Cheeseburger

<input type="radio" name="food" value="Sushi"> Sushi

<input type="radio" name="food" value="Sandwich"> Sandwich

Each radio button will need a value for the name attribute (should be the same for each choice), and then a unique value for the value attribute. The actual text that should appear on the page should be typed outside of the <input> element.

If you would like to preselect one of the radio buttons, you can do so by adding the Boolean attribute of checked to the <input> element:

<input type="radio" name="food" value="Soup" checked> Soup

Check Boxes

Check boxes are almost identical to radio buttons, although a user can select multiple available choices instead of just one. They are also an <input> element, but with a type attribute value of checkbox:

<input type="checkbox" name="food" value="Pizza" checked> Pizza

<input type="checkbox" name="food" value="Cheeseburger"> Cheeseburger

<input type="checkbox" name="food" value="Sushi"> Sushi

<input type="checkbox" name="food" value="Sandwich"> Sandwich