Home arrow HTML arrow Page 3 - HTML5 Form Elements: A Second Look
HTML

HTML5 Form Elements: A Second Look


In this second part of a two part series, you will learn how to use the HTML5 form elements: number, search, and required.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
June 15, 2011
TABLE OF CONTENTS:
  1. · HTML5 Form Elements: A Second Look
  2. · HTML5 number and range attributes
  3. · HTML5 search and required attributes

print this article
SEARCH DEVARTICLES

HTML5 Form Elements: A Second Look - HTML5 search and required attributes
(Page 3 of 3 )

In search of something: using the “search” attribute

If there’s anything that can be found in every website today it is a search form. So, if you’re planning to add one to your own web page, you should take a close look at the “search” attribute, which permits you to build this common interfacing element with some nifty touches, plus an enhanced behavior.

To better understand the inner workings of “search”, please check the next code sample, which renders a basic search form using the pertaining attribute:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example using the 'search' input attribute</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background-color: #fff;
    font: normal 0.9em Arial, Helvetica, sans-serif;
    color: #000;
}
h2 {
    margin: 0 0 10px 0;
    font-size: 2em;
    color: #666; 
}
p {
    margin: 0 0 15px 0;
    line-height: 1.3em;
}
/* main wrapper */
#wrapper {
    width: 780px;
    margin: 0 auto;
    background-color: #fff;
}
/* header, main and footer elements */
#header, #main, #footer {
    padding: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h2>Header section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="main">
        <h2>Sample form</h2>
        <form action="processform.php" method="get">
            <fieldset>
                <input name="query" type="search">
                <input type="submit" name="search" value="Search" />
            </fieldset>
        </form>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html>

Not that I want to sound like I’m spoiling the party here, trust me, but if you try out the above code snippet in Internet Explorer or Firefox, you’ll be confronted with a plain and boring text box, similar to the hundreds that you’ve probably seen before. However, things will be slightly different when the example is tested with Safari or Google Chrome, as the former will display the box decorated with rounded corners along with a clickeable (X) button inside, while that the latter will show only the mentioned button.

To see more clearly the result produced by the “search” attribute when visualized in Chrome, take a peek at the following screen shot, which will hopefully be quite illustrative:

That looks pretty engaging, right? And contrary to what you may have thought in the first place, using the “search” attribute is truly a breeze. Therefore, be bold and start including it into your web pages right now! And fear not, as your carefully-crafted web page layout will keep its pristine elegance untouched.

So far, so good. Now that you grasped the driving logic that stands behind the “search” attribute, it’s time to move on and continue exploring a few others included with HTML5. Precisely, in the coming section I’ll be demonstrating how to use the “required” attribute, which not surprisingly comes in handy for specifying that a given form field can’t be left blank.

Specifying mandatory fields: working with the “required” attribute

In reality, the existence of the “required” attribute comes from long ago and it has remained forgotten in a dark corner literally for years. However, with the release of HTML5, it has gained a discrete popularity, as some browsers like Firefox 4 and Chrome won’t let you submit a form until you populate a required field with some data. Moreover, they’ll display a tooltip informing you that the field in question can’t be left blank, in this way implementing a basic client-side validation that will remain functional even if JavaScript has been disabled.  

As you may have guessed, the use of the “required” attribute is self-explanatory. Anyway, if you want to see for yourself its functionality, the following example will be more than enough to satisfy your curiosity:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example using the 'required' input attribute</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background-color: #fff;
    font: normal 0.9em Arial, Helvetica, sans-serif;
    color: #000;
}
h2 {
    margin: 0 0 10px 0;
    font-size: 2em;
    color: #666; 
}
p {
    margin: 0 0 15px 0;
    line-height: 1.3em;
}
/* main wrapper */
#wrapper {
    width: 780px;
    margin: 0 auto;
    background-color: #fff;
}
/* header, main and footer elements */
#header, #main, #footer {
    padding: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h2>Header section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="main">
        <h2>Sample form</h2>
        <form action="processform.php" method="get">
            <fieldset>
                <input name="query" required>
                <input type="submit" name="search" value="Search" />
            </fieldset>
        </form>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html>

As it was just mentioned, if you test the above code snippet with Chrome or Firefox 4, and attempt to submit the form by leaving deliberately its required field empty, not only the form won’t be submitted at all, but you’ll be confronted with a message telling you that you need to enter something in the field. Make sure to give the example a try and you’ll see that it works like a charm, indeed.

In summary: does this mean that we can get rid of client-side validation right now and let browsers do the hard work for us? Well, that’s really premature. Nevertheless, it seems that some browser vendors (at least the most relevant ones) will continue adding more thorough validation to some input elements, like “email”, “url” and so forth.

Who knows? Maybe someday we’ll come to a point where we’ll be using JavaScript for performing all sort of clever things, but validating user input. As usual, only time will tell.  

Closing thoughts

That’s all for now. Over the course of this two-part tutorial, I attempted to provide you with a quick overview of the new input attributes that come bundled with HTML5. Even when admittedly some of them are completely ignored by most modern browsers (or the support is half-backed), this is not a good excuse for not taking the big plunge and start using them when coding your own HTML5 documents.

As I said before, the attributes won’t break down dramatically your designs, as the worst damage that they can cause is to display a text box instead of a more featured form control. After all,  this is something that you can live with, right?. Thus, be adventurous and give them a try. You won’t regret, believe me.

See you in the next web design tutorial!  

 


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials