Shulou(Shulou.com)06/03 Report--

This article is about how to use HTML 5 to create a connotation search box, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

With the popularity of HTML5, more and more new features are used by more and more Coder. HTML5 has added a lot of user-friendly tags and attributes, and the new form properties are introduced immediately.

Example picture:

The code is as follows:

Awesome? Yes!

A few short codes can achieve the interactive effect that can only be achieved by multi-line JS. This is a bit of a favor for HTML5 to get a peek.

Placeholder is to set the initial value, and the color of the initial value is gray, when the content of the input changes, this value disappears, its job is to give people an affinity indication, very loving.

Autofocus, as the name implies: autofocus, when you enter the current page, the input will automatically get focus, and you can directly enter something to search after opening the page. When autofocus appears more than twice, the browser will select * an input focus with the autofocus attribute.

X-webkit-speech, which probably doesn't need to be explained, is a speech recognition tool unique to webkit core browsers (such as Chrome), which is perfect for input. In other words, Google also adds this tool to its own search box.

All right, forget it, it's a simple little frame, there's actually more we need to study. For example, this simple CSS3 makes search more loving. The search box I wrote before has a love experience. Simplicity is beauty!

The above is how to use HTML 5 to create a connotation search box, the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.