HTML5 Web Forms 2.0

HTML forms are components of a web page that contain certain controls, such as labels, text fields, password fields, hidden fields (used by web developers), radio buttons, checkboxes, fieldsets, legends, reset buttons, and submit buttons. Users interact with these forms and provide all the necessary information so that it may be sent to the server for further processing. In many cases, client-side scripting (typically using Javascript) may be used for effects and simple validation, although as your will see in a short while HTML5 reduces this need considerably.

HTML5_webforms

Support for HTML5 form elements among the major browsers is pretty widespread although there are differences in feature support and display characteristics. During this tutorial we will begin taking a look at the main elements that make up a HTML5 web forms and discuss in detail newly added attributes that make using HTML easier than ever before.

Without further ado, let’s begin.

2. Web Forms 2.0

HTML5 Web Forms 2.0 builds upon all of the features that were in HTML4 and adds 13 new values for the input field as well as many new attributes that will make developing web-based forms easier than ever. Best of all, many of this features do not require any additional development knowledge like Javascript.

2.1 Client Contact Form

webforms

For the purpose of this brief introduction into web forms 2.0, we will create our client contact form.

All forms start and end with the <form> element, inside which all controls are placed. By and large, the input element is used the most, although as you will see shortly, each different style is controlled by the type attribute. The <label> element is used to provide a details about the input element it is tied to.

2.1.1 Simple Form Example

Let’s look at our simple form example to show you some of the basic elements and attributes that HTML5 provides.

<form action="#">
   <label for="fname">First Name: </label>
   <input id="fname" required autofocus type="text" name="firstName" placeholder="First Name" size="20" maxlength="30" />
</form>

>Note

Many of the new HTML5 elements may fall back to regular input text field. This may or may not make sense. For example, if you were planning on using the <range> component for the user to interact with and a textbox gets displayed, it may not make much sense. A good approach would be to use a tool like Modernizr which detects in real-time what features your browser does or does not have and provides a very nice way of you to conditionally load additional resources at runtime.

2.1.2 Label Element

Looking deeper at the <label> element, we notice the attribute “for” with a value of “fname”. What this does is tie the label to the first input field which has an id of “fname”. There is an alternate way of tying a label element to an input element. You can do so by putting the <label></label> around the input element as shown below.

<label>First Name: <input id="fname" required autofocus type="text" name="firstName" placeholder="First Name" size="20" maxlength="30" /></label>

Although this form may not look like much, it is actually doing quite a bit of work for us. Let’s details each of the patterns and functionality in more detail.

2.1.3 Input Element (Text)

Looking at our <input> element, we notice many different attributes. Prior to HTML5, we would have had to use some Javascript to get the same functionality. Now, with HTML5 all this is in the past.

REQUIRED

The required attribute marks any control as having to be filled in prior to form submission. This was something that was always done via Javascript validations in the past. Now this pattern is being moved to the markup language thus alleviating the need for a developer to code. Omitting a required field will cause a popup alert to be displayed.

<input id="fname" required autofocus type="text" name="firstName" placeholder="First Name" size="20" maxlength="30" />

fname_validation

AUTOFOCUS

The autofocus attribute causes that field to have focus upon document loading. This is a simple one-step pattern in Javascript. Now replaced by HTML5 markup.

<input id="fname" required autofocus type="text" name="firstName" placeholder="First Name" size="20" maxlength="30" />

PLACEHOLDER

The placeholder attribute places some text inside an input area, usually using a light shade of gray color, so the user has a good indication of what type of data, or data pattern, the input field is expecting. Users should consider this a type of “hint” or “insight” into what to type in the field. The text will disappear as soon as text is typed into the field. If for whatever reason the text is removed from the field, the placeholder text will reappear like before. As you can see from the form below, using placeholders makes the form more user-friendly as the user now has a better idea of how best to fill in the form. Browsers that do not support this attribute will simply not display anything in the text box.

<input id="fname" required autofocus type="text" name="firstName" 
placeholder="First Name" size="20" maxlength="30" />

fname_placeholder

MAXLENGTH

The maxlength attribute can be used to specify the maximum length of an input or textbox and is useful when you want to constrain the length of information that the user may provide. For example, if you wanted to limit the first name of the customer to 30 characters, you can use the following.

<input type="text" name="firstName" size="20" maxlength="30" />

SIZE

The size attribute can be used to specify the visible length of an input field. For example, if you wanted to limit the visible length of the first name of the customer to 20 characters, you can use the following. This does not restrict the field to 20 characters though, it only shows 20 characters in the field. The value may contain up to maxlength characters.

<input type="text" name="firstName" size="20" maxlength="30" />

NAME

The name attribute defines the name of the control. This name attribute may be referenced via Javascript, or when the form gets submitted. This name will get submitted along with the value associated with the control.

<input type="text" name="firstName" size="20" maxlength="30" />

AUTOCOMPLETE

Many browsers come equipped to provide auto-complete or form completion capability. However, there are instances where you do not want certain fields to automatically remember personal details and fill in the field for you. Think of this scenario where you go to some website to purchase items. You enter all your personal information including your username, credit card number and CVV (Card Verification Value). I think it’s fine for your browser to autocomplete your name and address, but I don’t think you would want it to retain your username, credit card account number or CVV. As a web developer, you should set those fields to have feature turned off by doing autocomplete=”off”.

<input id="credit_card" required autocomplete="off" type="text" name="credit_card" placeholder="Enter Credit Card Number" size="20" maxlength="20" />

PATTERN

The pattern attribute allows you to declare certain data pattern using Regular Expressions (regex) that the value is checked against. This pattern allows only numbers matching the 5 digits + dash + 4 digits of the zip code.

<input type="text" required id="zipcode" pattern="d{5}(-d{4})" placeholder="99999-9999" title="The zip code must have only 9 digits in the format 99999-9999..."/>

MIN, MAX and STEP (SPINNER)

Using min, max and step on a number input control creates a “spinner” control. The min allows you to specify the minimum value. The max allows the user to specify the maximum value and step allocates the increment/decrement stepping value. This spinner widget allows the user to manipulate the underlying numeric value using only the up and down arrow keys.

<input type="number" min="0" max="20" step="1" value="0" />

RANGE (SLIDER)

The range input control allows the user to easily interact with the user control. Used for rather imprecise control or when the exact value is less important. In my example, my range goes from (0 ~ 100), stepping by 10. For my control, the default value is set to 50 (midpoint).

<input type="range" name="feelgood" step="10" value="50" />
<output name="fgValue" for="range">50</output>

TITLE

The title attribute allows you to specify element details that would appear in a tooltip. When used together with a pattern attribute validation, the message will appear as part of the tooltip error message.

<input type="text" required id="zipcode" pattern="d{5}(-d{4})" placeholder="99999-9999" title="The zip code must have only 9 digits in the format 99999-9999..."/>

zipcode_validation

LIST (datalist)

Think of datalist like a “combobox” control where the user has the ability to type values from a predefined list or choose to click on the dropdown box icon “V” on the far right of the control.

<input id="state" type="text" name="city" list="stateList" placeholder="State" />
  <datalist id="stateList">
    <option value="Connecticut"/>
    <option value="Delaware"/>
    <option value="Maine"/>
    <option value="Maryland"/>
    <option value="Massachusetts"/>
    <option value="New Hamshire"/>
    <option value="New Jersey"/>
    <option value="New York"/>
    <option value="Pennsylvania"/>
    <option value="Rhode Island"/>
    <option value="Vermont"/>
  </datalist>

state_validate

3. Full Program Listing

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Customer Contact Information</title>
</head>
<body>
  <form action="#" oninput="fgValue.value=feelgood.value">
    <table>
      <tr>
        <td width="120"><label for="fname">First Name: </label></td>
        <td width="400"><input id="fname" required type="text" name="firstName" placeholder="First Name" size="20" maxlength="30" /></td>
      </tr>
      <tr>
        <td><label for="lname">Last Name: </label></td>
        <td><input id="lname" required type="text" name="lastName" placeholder="Last Name" size="30" maxlength="50" /></td>
      </tr>
      <tr>
        <td><label for="address1">Address #1: </label></td>
        <td><input id="address1" type="text" name="lastName" placeholder="Address" size="50" maxlength="50" /></td>
      </tr>
      <tr>
        <td><label for="address2">Address #2: </label></td>
        <td><input id="address2" type="text" name="lastName" placeholder="Additional Address" size="50" maxlength="50" /></td>
      </tr>
      <tr>
        <td><label for="city">City: </label></td>
        <td>
          <input id="city" type="text" name="city" placeholder="City" size="20" maxlength="40" />
          
        </td>
      </tr>
      <tr>
        <td><label for="state">State: </label></td>
        <td><input id="state" type="text" name="city" list="stateList" placeholder="State"/>
          <datalist id="stateList">
            <option value="Connecticut"/>
            <option value="Delaware"/>
            <option value="Maine"/>
            <option value="Maryland"/>
            <option value="Massachusetts"/>
            <option value="New Hamshire"/>
            <option value="New Jersey"/>
            <option value="New York"/>
            <option value="Pennsylvania"/>
            <option value="Rhode Island"/>
            <option value="Vermont"/>
          </datalist></td>
      </tr>
      <tr>
        <td><label for="zipcode">Zip Code: </label></td>
        <td><input type="text" required id="zipcode" pattern="d{5}(-d{4})" placeholder="99999-9999" title="The zip code must have only 9 digits in the format 99999-9999..."/></td>
      </tr>
      <tr>
        <td><label for="birthdate">Birthdate: </label></td>
        <td><input id="birthdate" type="date" min="1970-01-01" /> (min date: Jan-01-1970)</td>
      </tr>
      <tr>
        <td><label for="children">Children: </label></td>
        <td><input type="number" min="0" max="20" value="0" step="1" /> (range: 0 ~ 20)</td>
      </tr>
      <tr>
        <td><label for="feelgood">Feel Good Range: </label></td>
        <td><input type="range" name="feelgood" step="10" value="50" />
        <output name="fgValue" for="range">50</output></td>
      </tr>
      <tr>
        <td><label for="favcolor">Favorite Color: </label></td>
        <td><input type="color" name="favcolor" /></td>
      </tr>
    </table>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>