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