Using Form Element Properties
HTML5 introduces several form input types. Traditionally, coders were left with only 10 form input type properties to retrieve user input. HTML5 offers 13 new input type values to format data. The formatted elements make it more convenient to code for common input values, such as dates, email, telephone numbers and URLs.
The placeholder tag property provides developers with a way to prompt users for input. Let’s say you have a form element, and you want users to type an email address as the user name to open a secured area of your website. In older versions of HTML, website developers were forced to type instructions next to the form element. With the placeholder text, the input form element looks like this:
The placeholder text is removed whenever a user clicks on the text box to set its focus. You also can set the placeholder property for the textarea tag element. If the user does not type a value, the placeholder text is reset in the text box. The placeholder text remains grayed out to make it distinguishable from other text in the form. A look at the code in Visual Studio 2008 shows how the placeholder property embeds in your input tag elements:
<div>
<br />
<span>User Name:</span>
<input type=”text” placeholder=email@domain.com id=”username” />
</div>
Additionally, when the user clicks the “Submit” button on the form, the placeholder text does not produce a populated POST response, which means that when you use form validation, the text box data is picked up as a blank string. Without a form POST response, it makes it more convenient to detect form values with no input.
Several options are available to coders for form validation, including picking up on a blank element, returning the user to the page and highlighting the text box that was not filled. You also can use Javascript to detect blank text boxes. However, JavaScript client-side code is not as reliable as server-side code.
Important Tags for HTML5 Developers and Browser Support
From a developer’s point of view, the most useful tags are the HTML5 elements that reduce coding and make website development more convenient without adding bugs. Of course, a reader’s browser must support the new tags, but new versions of popular browsers continue to add support for important HTML5 tag elements. However, be careful before using and implementing HTML5 for such things as an evaluation of your website readers and their associated browsers. Google Analytics, for example, shows you where your visitors are coming from and the browser versions. If you find most of your visitors use Internet Explorer 6, you may introduce rendering problems for your readers if you implement HTML5 encoding.
JavaScript provides a way for you to verify placeholder support. New versions of Internet Explorer, 8 and 9, Google Chrome and Firefox 4.0 support new HTML5 tags, including the placeholder property. To avoid poor rendering or bugs on your site, use the following JavaScript function to test for placeholder support:
<script type=”text/javascript”>
function supportsPlaceholderProperty() {
var test = document.createElement(‘input’);
return (‘placeholder’ in test);
}
</script>
The test is a workaround for website owners to avoid the perils of using newer code with older browsers. The code checks for placeholder support, and you can use it to prompt users with preset text box input. For example, if your reader’s browser does not support HTML5 properties, you can use JavaScript to pre-populate a text box value. Because users are forced to delete the text you enter into the text box, using pre-populated values is not as convenient. If users do not type a value into the text box, you must “scrub” your data and detect that a value was not entered by the user. Setting a default value, such as “email@domain.com,” means this value is sent to the POST processing page. The following code uses a preset text box value only if the placeholder property is not supported:
<script type=”text/javascript”>
function suportsPlaceholderProperty() {
var test = document.createElement(‘input’);
return (‘placeholder’ in test);
}
if (supportsPlaceholderProperty() == false) {
document.getElementById(“username”).value = “type entry here”;
}
</script>
Not all browsers support the placeholder text, but browsers that don’t support the property won’t break if you add it to the pages. If a browser does not support the property, it just does not show up in the text box. Firefox 3.7+, Opera 11.0+, Safari 4.0+ and Chrome 4.0+ support the placeholder text property. Internet Explorer does not support the property and most of the new HTML5 tags.
For mobile phones, Blackberry’s 5.0 version supports the placeholder text. iPhone’s Safari supports the placeholder text, but Android browsers do not. However, new tablet browsers such as the Motorola Xoom show the placeholder text in the input box.
Placeholder and CSS Design Tricks for the Property
Webkit is an engine used in Chrome, Safari and now Firefox to render CSS components. The latest browser versions have Webkit installed, so users are able to see the placeholder text.
Mozilla Firefox and Google Chrome support CSS styles for the placeholder property. Firefox 4.x and Chrome 9 and 10 support some CSS styling for the placeholder text, and Safari version 5.x supports most HTML5 properties. Opera recently announced support for some CSS design for HTML5 tags. Developers commonly change the input text font color. Font color and size are supported across most common browsers, but be careful with background colors or borders. Chrome, for example, does not yet support these CSS styles.
Additionally, Chrome and Firefox, which support most HTML5 coding, use different CSS style commands. Chrome uses the Webkit command “input::-webkit-input-placeholder,” and Firefox uses slightly different CSS code with “input:-moz-placeholder.” Using Visual Studio and Chrome, here is an example of changing all placeholder text to a red font:
<style type=”text/css”>
.style1
{
Font-family: Arial, Helvetica;
}
input::-webkit-input-placeholder
{
Color: red;
}
</style>
Switch this code with the Firefox version, and the results are the same. Since HTML5 remains in draft, this code can change, and it’s why browsers do not have unified code to accept one form of the CSS styles. Without unified code, it also makes it difficult for developers to code for websites that receive global traffic. However, you can implement CSS styles in internal Web browser-based company applications without the hassle of browser version support. The company must have Firefox or Chrome installed on each client computer, and the versions must be updated to the latest release.
You can also bold, italicize or set the placeholder text to all capital letters. The CSS tricks used on the placeholder property are limited to font styles, since the text is located within a text box control on the Form.
Some Additionally Useful HTML5 Form Elements Useful for Better Form Design
Several new HTML5 elements are added to the new protocol. In a typical browser, some of the new input elements display just like text boxes. The advantage of these input elements is the way a mobile device treats the text boxes. For instance, when an iPhone user clicks the “email” input type, a prompt window is shown with the email characters. No validation is offered for these text boxes, so you must validate the input in the process pages. Here is a rundown on some of the new input type text boxes added to the new language:
Tel: The input “tel” property sets the input to receive input in the “000-000-000” format. When the user presses the text box on a cellular device, the numbers show up in the keypad interface. In a normal browser, the “tel” input text box looks like a regular text box.
Email: The email prompt displays email-specific buttons such as the “@” symbol. Some phones such as the iPhone and Android-based phones display the “.com” button to make it easier to enter domain names. Again, this input text box looks like a regular text box in a typical desktop browser.
URL: The URL input type helps mobile phone developers and regular website developers. The input property lets you set up a “search” phrase. Similar to a Web browser’s cache that displays a prompted “guess” for a specific URL as you type letters into the navigation bar, the URL text box displays a list of URLs programmed into the “datalist” tags. Below is an example of coding that helps users find a familiar URL from a list of preset options:
<input type="url" name="location" list="urls">
<datalist id="urls">
<option label="The First URL Description" value="http://1stURL.com">
<option label="The Second URL Description" value="http://secondURL.com">
</datalist>
The Google search text box is a good example of how this new HTML5 tag works. The user types in a URL, and the text box tries to “guess” the URL intended. The “guess” is dependent on what the user types into the text box, and a matching URL is snow in a drop-down. In the above example, if the user types “1st” in the text box, then the first URL shows up with its description in the drop-down box.
Color: The color input tag is useful for graphical themes or websites that offer color customizations. When the user clicks this tag, a color-picker tool opens. The user is prompted for a color, and the color chosen automatically transitions to the 6-digit hexadecimal code for HTML.
Search: The search input is a way for webmasters to blend a search engine with a search text box located on the local website. This input tag is only compatible with Chrome and Safari at this time. If a webmaster has the Google customized search text box in their website, this input property replaces the functions used to customize a search term for your website. The term entered by the user is searched on your local domain only.
Date: With the “Date” input text box, you can automatically display a calendar when the user sets focus to the text box. The user chooses a calendar date from a graphical popup, and the date chosen populates the input text box.
Implement HTML5 Coding Now or Wait?
The decision to get started with HTML5 coding is dependent on your website traffic. For instance, Google Analytics gives you a breakdown of traffic and visitors’ browsers. If you have a customized section for mobile devices, the use of HTML5 tags greatly enhances form input for users who sign up or enter information on their phones. Using HTML5 cuts down on input errors and strengthens data integrity from mobile phone users.
The downside of implementing HTML5 is that the W3C still lists the new protocol structures in draft mode, which means that updates to the code and its rules can change at any time. Any webmaster can provide input for new HTML5 coding structures, so it’s possible that the changes you implement will have incorrect format in the future, leading to edits on the website when the W3C finalizes the rules. The other issue is browser compatibility. All HTML5 tags are not supported by all browsers, especially by older browsers. Some of your users are alienated from the new code changes if they do not have a newer browser installed.
Commented by: Viktor J, 17 October, 2011
Thanks for the article David - lots of useful info.
Commented by: Dennis, 10 December, 2011
I think you should take an Html4 crash course before you start teaching others about Html5..
Start with forms, that'll teach you how to use label's and the for attribute.