Though forms (sections of a Web site where users can input specific data, like names, addresses, etc.) were part of the earliest elements available in HTML, they lacked many useful features before HTML5. To make up for this, third party developers created Web form software that make basic HTML forms seem nearly obsolete. HTML5 breathed new life into forms, though, with new form elements, input types and attributes for existing elements.
Without distinguishing between old and new syntax, let's examine the overall approach to creating a form for your Web page using HTML5. Here some recommended steps to get started:
- Establish a form block using the <form> tags.
- Designate a block of fields within the form using the <fieldset> tags.
- Lay out each field in the field set using <label> tags. Use the "for" attribute for each label, as you would the id attribute, to identify that label for use in other portions of your code. Example: <label for="name"></label>
- Within each label tag, add the field name as you want it displayed plus the <input /> tag for the field itself.
- Use the type attribute within the input tag (<input type="">) that prompts the browser to validate the user's input based on that type. This eliminates the need for additional code to handle validation and prompt for re-entry. HTML5 includes the following input types: date, time, datetime, datetime-local, month, week, number, e-mail, tel, url, range, color and search. You can also use the pattern attribute with a regular expression to create a custom validation pattern.
- Indicate required fields by adding the required attribute for an input element.
- Use the autofocus attribute to set a particular input element as the first element in the form. This is where a Web browser will automatically place the user's cursor after loading the form.
- Use the placeholder attribute if desired to add text hints about what to enter in a given field.
- Set CSS styles for ":required" and ":invalid" so the user has a visual cue to missing information or input that won't validate for a given input type.
Check an up-to-date HTML5 reference guide for a complete list of form elements and their attributes. Also, note that support for some form fields varies between Web browsers. Be sure to test your form in each type of browser you want your Web site to support.
While HTML form elements have more features in version 5, the next element type is completely new in HTML5.