xHtml - Part 2

number Input Type: HTML5

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.

HTML file
index.html

< !DOCTYPE html>
<html>
<head>
<title>number Input Type: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="no">Number: </label>
 <input name="no" type="number" value="5" min="2.0" max="10.0" step="0.2" />
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have a number input type, with minimum allowed value of 2.0 and a maximum allowed value of 10.0 and a step of 0.2 (fraction).

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

Form Input Type – number: HTML5

[youtube https://www.youtube.com/watch?v=rIiIfqS8190]

YouTube Link: https://www.youtube.com/watch?v=rIiIfqS8190 [Watch the Video In Full Screen.]

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.

Tel Input Type: HTML5

Lets look at tel Input Type of HTML5 forms.

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.

HTML file
index.html

< !DOCTYPE html>
<html>
<head>
<title>tel Input Field: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label>Text:</label>
<input type="text"/><br />
<label>Tel:</label>
<input type="tel"/><br />
<input type="submit"/>
</form>
 
 
</body>
</html>

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.

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

Form Input Type – tel: HTML5

[youtube https://www.youtube.com/watch?v=AcnNuyqLY44]

YouTube Link: https://www.youtube.com/watch?v=AcnNuyqLY44 [Watch the Video In Full Screen.]

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..

URL Input Type: HTML5

Lets look at URL Input Type of HTML5 forms.

In this video, we illustrate how you can implement simple URL validation using url input type.

Source Code: HTML file

index.html

<!DOCTYPE html>
<html>
<head>
<title>URL Input Type: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
 <label for="uri">URL: </label>
<input type="url"/>
<input type="submit"/>
</form>
 
</body>
</html>

Simple url type input field checks for the presence of http:// followed by some domain name, dot and a valid TLD(Top Level Domain) name.

Video Tutorial: Form Input Type – url: HTML5

[youtube https://www.youtube.com/watch?v=BnVK7jecJ0o]

YouTube Link: https://www.youtube.com/watch?v=BnVK7jecJ0o [Watch the Video In Full Screen.]

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.

Email Input Type: HTML5

Lets look at email input type of HTML5 forms.

In this video, we illustrate how you can implement simple email validation using email input type.

HTML file
index.html

< !DOCTYPE html>
<html>
<head>
<title>Email input type: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="mail">Email: </label>
 <input type="email"/><br />
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have an input field of type email. We haven’t implemented complicated JavaScript to check if the entered text actually contains a @ symbol and a valid TLD. email input type checks for all these small requirements to pass it as an email address.

Form Input Type – email: HTML5

[youtube https://www.youtube.com/watch?v=nxMBsVw8LXw]

YouTube Link: https://www.youtube.com/watch?v=nxMBsVw8LXw [Watch the Video In Full Screen.]

Note:
It doesn’t validate the email address completely. Infact, it doesn’t check if the entered email address is actually a real email address or a dummy one. It simply checks for minimal thing in the entered text to determine if it is an email address or not – like @ symbol and a valid TLD(Top Level Domain) extension.

Also on mobile devices, when it encounters these email input type, user is prompted with keypad that aids in entering email address – like the @ symbol present on the same screen and need not to navigate to special symbols section on the keypad.

Form Input Type – search: HTML5

HTML5 introduces many new input types, and search is one of them.

In this video I’m illustrating simple interface change that search type input fields bring, compared to the usual text type input fields.

HTML file
index.html

< !DOCTYPE html>
<html>
<head>
<title>Form Input Type - search: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="srch">Search: </label>
 <input type="search" name="srch" /><br />
<label for="txt">Text: </label>
 <input type="text" name="txt"/><br />
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have 2 input fields, with type search and text respectively. This is to show a simple interface change between the two.

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

Form Input Type – search: HTML5

[youtube https://www.youtube.com/watch?v=er7nOfllI1Q]

YouTube Link: https://www.youtube.com/watch?v=er7nOfllI1Q [Watch the Video In Full Screen.]

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.