number input type indicates that the input field is used for entering numbers.
Advantages of using number input type: 1. Browsers which support HTML5, provides useful user interface enhancement by providing up and down arrow/tickers to increment and decrement the number. 2. You get a customized keyboard which is optimized for numeric inputs on mobile devices which supports number input type. 3. Using attributes like min, max and step, you can have more control. You can specify the minimum, maximum values the field takes and also you can specify the step for incrementing and decrementing the number using arrow marks. 4. Basic validation to check if the user entered numeric value or not.
Note: Browsers which do not support number input type, simply fall back to text input type, so you can go ahead and implement number input type in your projects without worrying. It’s a good practice to even validate the code at server-side, since browsers can be easily tricked and wrong entries can be made using form elements.
In this video, I’ll show you that there are no interface changes to tel type input fields. And there are no actual behavioural changes too.
Only advantages, as for now, with tel type input fields are: 1. Screen readers pickup these tel type input fields and hint the visually challenged people that they need to enter their telephone number in the input field. 2. Mobile device browsers which are optimized to work for HTML5, will show up a customized keyboard to the user to enter telephone number rather than the regular text based keyboard.
Here we have 2 input fields of type text and tel respectively. Both these have similar visual appearance, and behave much the same on our regular computer browsers.
Note: tel type input fields do not validate the user input to check if she entered a telephone number or a random text. Because a telephone number has a wide range of acceptance – like including a hyphen or the number of digits in a phone number vary etc..
Note: It doesn’t ping the entered URL to check if the URL is actually present or not. It simply checks to make sure the user entered information starts with http:// and ends with a dot followed by a valid TLD.
If viewed on a HTML5 compatible mobile browser, it pops up custom keyboard to facilitate the user to enter URL.
Note: If the user’s browser doesn’t yet support search type, it’ll simply fall back to text type.
Browser manufacturers may even decide to show recent query as suggested entries by default with these search type input fields. And more interface changes may be implemented.
If you’re building application with search field, make sure to implement search type input fields and get the advantages of latest updates to search type input fields.
Today lets build a dynamic suggested list input field using HTML5, jQuery, PHP and MySQL.
We have 55 company names in our database table – and the import file(.sql) can be downloaded at the end of this tutorial page. By using jQuery we pass user input to suggest.php file and the result is embedded into index.html file.
Here we have included jQuery library file before our script myScript.js We also have an input field of type text, with an id = suggest, name = company and list = myCompanies. And a datalist element is linked/associated with input field, by matching it’s id with the name of input field’s list attribute. The value for option tag will be filled by jQuery, using the results output by suggest.php file.
$sql = "SELECT name FROM table1 WHERE name like '$company%' ORDER BY name";
$res = $db->query($sql);
if(!$res)
echo mysqli_error($db);
else
while( $row = $res->fetch_object() )
echo"<option value="".$row->name."">";
?>
< ?php
$db = mysqli_connect('localhost', 'root', '', 'search');
$company = $_GET['company'];
$sql = "SELECT name FROM table1 WHERE name like '$company%' ORDER BY name";
$res = $db->query($sql);
if(!$res)
echo mysqli_error($db);
else
while( $row = $res->fetch_object() )
echo "<option value="".$row->name."">";
?>
Here we connect php file to database(search). Get the keyword entered by the user in the input field and form a sql query. By using query() method, we process it and finally format it the way we need it i.e., we wrap the company names inside option tag’s value attribute.
For every keyup event on the input field we trigger jQuery method $.get() and pass the user input keys to suggest.php file and the result is collected back by the callback function and the result set is stored in a variable called data.
Now we first make sure to clear out previous data present inside datalist element i.e., we clear the previous results by removing any option tags present inside datalist element. Now we fill the datalist element with the new data/result output from suggest.php file.
Since we’re using jQuery here, page does not reload and the suggested entries looks real and spontaneous.
Here is the list of company names I’ve taken for this tutorial
3M 7-Eleven Accenture Acer Adidas Adobe systems Amazon.com AMD AOL Apache Apple inc Appolo group Aricent Ask.com Asus AT&T Bank of America BBC BE Aerospace BMC Software Boeing Bosch Brewing Company Boston Acoustic CA Technologies Citrix Systems Cognizant Technolog Cognizant Technology Solutions Convergys Dell Delphi DHL Divx Inc eBay EMC Corporation Exelon Facebook Ford Motor Company Fox Entertainment Group GCI GoDaddy Goodrich Corporation Google Hawaiian Airlines Hewlett-Packard Honeywell IBM Intel Johnson & Johnson KFC McDonalds Microsoft Motorola Nvidia Red Hat Yahoo!
Video Tutorials: Dynamic Suggested List: HTML5 + jQuery + PHP + MySQL
Note: For any older browsers which do not support datalist element or list attribute, it will simply fall back to text type input field and it doesn’t produce any error.