Simple HTML5 to create a search box

With the popularity of HTML5, more and more new features are used by more Coder. HTML5 has added a lot of humanized tags and attributes, and the new form attributes will be introduced immediately.

Instance image:

The Code is as follows:

<Input type = "text" placeholder = "Enter and press enter to search" autofocus x-webkit-speech>

Awesome? Yes!

A few short codes can achieve the perfect Interaction Effect of the original multi-line JavaScript code. This is a little like HTML5!

PlaceholderIt is to set the initial value, and the color of the initial value is gray. When the input content changes, this value disappears. Its responsibility is to give an affinity indication, which is very loving.

AutofocusAs the name implies: automatic focus. when entering the current page, this input will automatically obtain the focus, and you can directly enter something to search after opening the page. When autofocus appears more than twice, the browser selects the last input focus with the autofocus attribute.

X-webkit-speechThis probably doesn't have to be explained. It's no good to install the voice recognition tool unique to webkit browsers (such as Chrome) on the input, google also installed the tool in its search box.

Well, don't worry. There is actually more things we need to study in a simple box.