Form Input Type – search: HTML5


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

form-input-search-type-html5

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< !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.

Leave a Reply

Your email address will not be published. Required fields are marked *