New Form Elements and Attributes

The <placeholder> Attribute HTML5 enables us to help out our web users when filling out a form. One way is by using the placeholder attribute: <form> Name: <input type="text" size="30" name="fullname" placeholder="John Smith"><br> Phone: <input type="text" size="20" name="phone" placeholder="xxx-xxx-xxxx"><br> <input type="submit" value="Submit"> </form> Someone filling out the form might be uncertain whether a full name or just a first name is expected. Likewise, phone numbers come in many formats. By providing the user with visual samples, we are making their task easier. Chrome 25.0 Placeholders – also known as watermarks – appear as faded text. Once the user clicks on the field and begins typing, the content disappears. If the field is left blank, the placeholder text is ignored and not submitted with the form. Browsers that do not support this feature, such as IE9, will provide blank fields and disregard the placeholders.

The <autofocus> Attribute By adding the autofocus attribute to one of the form's fields, we can make the browser load the page with the cursor on that field: <form> Name: <input type="text" size="30" name="fullname" placeholder="John Smith" autofocus><br> Phone: <input type="text" size="20" name="phone" placeholder="xxx-xxx-xxxx"><br> <input type="submit" value="Submit"> </form> Now the first field in our form gets immediate focus, allowing the user to begin typing. Without this feature, the user would have to click on the field or press the [Tab] key before typing. Chrome 25.0 To web designers, the new placeholder and autofocus attributes in HTML5 are very welcome. Previously, these features could be implemented only by using JavaScript, which often resulted in quirky or inconsistent behavior. Have you ever clicked on a web form and begun typing, only to have the cursor suddenly jump to some other field? This annoyance was due to JavaScript running after the page was loaded, and will likely become a thing of the past with the new autofocus feature in HTML5.

The <required> Attribute The required attribute allows us to specify which fields in a form must be completed and which can be left blank: <form> Name: <input type="text" size="30" name="fullname" placeholder="John Smith" required><br> Phone: <input type="text" size="20" name="phone" placeholder="xxx-xxx-xxxx"><br> <input type="submit" value="Submit"> </form> The form now requires that the user enter something into the Name field before the form can be submitted. Do you see the problem? There is no way for the user to know which fields are required and which aren't. Let's help them out: Chrome 25.0 <form> Name*: <input type="text" size="30" name="fullname" placeholder="John Smith" required><br> Phone: <input type="text" size="20" name="phone" placeholder="xxx-xxx-xxxx"><br> * Indicates required field.<br> <input type="submit" value="Submit"> </form>

The <required> Attribute Now the user has a clear understanding of the minimum requirements to submit the form. So what happens when the form is submitted with a required field left blank? Browsers that support the required attribute will stop the user in their tracks: Chrome 25.0 Firefox 19.0 Chrome 25.0 Internet Explorer added support for the required attribute only in version 10.0, so users with IE9 or earlier will not see this feature work (i.e. the browser will allow the form to be submitted with blank data.)

The <spellcheck> Attribute With HTML5, we can override the browser's default spellchecking behavior: Favorite Movie: <input type="text" size="40" name="movie" spellcheck="true"> Chrome 25.0 Most browsers enable spellchecking by default. By adding the above line, we are explicitly requesting that the spellcheck feature be activated. We may also switch the feature off for a field. Perhaps we expect users to enter unusual data and don't want to annoy them with the red squiggly lines: Favorite Movie: <input type="text" size="40" name="movie" spellcheck="false"> Chrome 25.0 Beginning with version 10.0, Internet Explorer now supports the spellcheck attribute.

The <autocomplete> Attribute Many browsers look for identical field names in forms and automatically offer to populate them with data the user entered on prior web forms. This can be a time saver, as users don't have to retype their name, address, phone number, email, etc. each time they encounter a new web form. This feature, however, can be a security risk for some fields. Examples include social security number, DOB, credit card number, and password. We can switch the autocomplete feature on or off at the form level, the field level, or both: <form autocomplete="false"> Credit Card Number: <input type="text" size="40" name="cc" autocomplete="false"> <form autocomplete="false"> Name: <input type="text" size="30" name="name" autocomplete="true"> DOB: <input type="text" size="30" name="dob"> Credit Card Number: <input type="text" size="40" name="cc"> </form> The final example disables autocomplete on the entire form except for the field specified.

The <datalist> Element The datalist element is new to HTML5 and allows us to make a list of suggestions for completing a text box, while still allowing users to type in their own answer: Car Brand: <input type="text" name="car" list="brands"> <datalist id="brands"> <option value="Ford"> <option value="General Motors"> <option value="Chrysler"> <option value="Toyota"> <option value="Nissan"> <option value="Honda"> </datalist> Firefox 19.0 The list attribute of the input element must match the id attribute of the datalist element. As the user begins typing, the list of suggestions will be reduced to those pre-defined options that still have a match to the characters typed. Browsers that don't support the datalist element (such as IE9 and earlier) will simply disregard the suggestions and offer a blank text box to the user.

The <progress> Element The progress element is also new to HTML5 and allows us to show a "percentage of completion" bar for anything that has a start and a finish: Upload progress: <progress value="58" max="100">58%</progress> Firefox 19.0 Internet Explorer 9.0 When we declare the value and max attributes, the browser can calculate the percentage and display the progress bar accordingly. Browsers that support the progress element will ignore any text between the opening and closing tags. Those that do not support the element (IE9 and earlier) will ignore the tags and display only the text between them. In this way, we have a clever fallback for older browsers. Modifying the percentage of completion and thus moving the progress bar along is accomplished via JavaScript, which we will not cover in this course.