Domineering HTML5-powerful form

Source: Internet
Author: User

I learned about html5 today and found that it is really powerful. I don't want to talk about the new canvas, communication, local storage, and other days bombing functions. Even forms are exceptionally easy to use, I can't help posting a blog to share with you. Forgive me for being a title party, And my post on html5 learning history will be titled "domineering HTML 5.

In the past, the form in html4 was very simple. One form corresponds to one action and only one url can be uploaded. If you want to upload multiple forms, you can use javaScript + ajax. However, the code is very cool. In addition, form verification should be written in js. Of course, it may be very simple to use the front-end framework. This is just a single sentence, but it cannot avoid problems such as slow loading of browsers. Therefore, the previous HTML 4 form is very dependent on js in actual use, which is not very convenient to use. Now, html5 tells us that we don't need to rely on js that much, and we can solve all kinds of problems on our own.

First, we will introduce the new attributes related to form:

1. form attributes.

The form attribute of html4 must be written in the form, but in html5, the attribute can be declared anywhere, so that the form can be managed in a unified manner, it is as convenient as adding a style sheet. Use:

 

3. placeholder attributes

The text box does not contain the prompt text. The property value is the prompt content.

4. autofocus

The input box automatically obtains the focus.

5. Attributes added to input: 

The input tag adds a large number of types for automatic verification. Such as email, url, numble, null...

I don't need to use js to write and submit for verification, which is much more convenient. I like this feature most. If I think it gives verification error information

If it is not user-friendly, you can modify it in js, which is roughly the same as modifying the UI framework.

Here are two images:


<喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + pgltzybzcm9 "http://www.2cto.com/uploadfile/Collfiles/20140427/20140427092135119.png" alt = "Z? Http://www.bkjia.com/kf/qianduan/css/ "target =" _ blank "class =" keylink "> html5 in the major Browser display effect is not very good, the author tested ie11, Firefox, chrome the best effect, basically, it can be displayed that ie11 and Firefox are slightly different. I hope all major browsers can adapt to all html5 functions as soon as possible. That is definitely the gospel of front-end programmers.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.