Comments: At present, with IE 9 and a large number of browsers gradually supporting the HTML 5 standard, HTML5 is growing faster and faster, and to some extent, it forms a competition with FLASH HTML5 in the page structure, multimedia Processing is significantly different from HTML in the past. In this tutorial, We will guide you through HTML5, CSS3, and PHP to design a simple form submission webpage that complies with the HTML5 standard, you can learn the basic elements of the HTML5 new form page. Readers of this article learn HTML, CSS, and PHP.
Form Design Sketch
Because this article is not an article that teaches photoshop to create, we just design the sketch of the design form and then use HTML5, CSS3, and PHP to implement it. the sketch of the form we want to design is shown in:
▲
We can see that in this design sketch, the expected effect is: when the user enters the NAME, the NAME field text box will be displayed in the form of focus, the email input box is a rounded border input box. The text field of the message shows a background map. The submit button is a custom button.
Start designing
Next, we will design the form. This article uses php, so you can use any PHP programming tool to create an index. php file first, and then write a form that complies with the HTML5 standard.
1) about DOCTYPE
In HTML5, The DOCTYPE declaration will become very simple. The Code is as follows:
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Contact Form </title>
</Head>
<Body>
</Body>
</Html>
Have you seen it? In HTML5, the type declaration of the page header only needs one sentence:
You can, and compare the previous HTML4, You need to declare it in a more troublesome way, as shown below:
The Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.
Next, let's design the structure of the page form. Let's take a look at the structure of the form, for example:
We can see that we are divided into the Header area, the Main Body form Main area, and the Footer area is the bottom area of the form. In HTML5, the implementation is actually very simple. The following code:
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Contact Form </title>
</Head>
<Body>
<Header class = "body">
</Header>
<Section class = "body">
</Section>
<Footer class = "body">
</Footer>
</Body>
</Html>
We can see that there is no traditional div here. Instead, the header, footer, and section of the new tag elements in HTML5 specify the header area of the page, section specifies the main area of the page, and the footer part specifies the end area of the page. Compared with div, the footer part has a clearer meaning and better matches the usage habits in terms of semantics. At the same time, the css class body is specified for them to unify their style.
Form part design
Next, let's take a look at the design of the Form. First, let's look at the code below:
The Code is as follows:
<Form>
<Label> Name </label>
<Input name = "name" placeholder = "Type Here">
<Label> Email </label>
<Input name = "email" type = "email" placeholder = "Type Here">
<Label> Message </label>
<Textarea name = "message" placeholder = "Type Here"> </textarea>
<Input id = "submit" name = "submit" type = "submit" value = "Submit">
</Form>
In HTML5, the input tag is different from that in html4. In HTML5, the input tag also has attributes such as name and id. The biggest difference is that many types are added to the type attribute in HTML5 to meet user needs. Unfortunately, currently, not all browsers support these new type attributes. Therefore, this article only describes the new type attributes supported by most browsers, such as the type = email mentioned in the above example, it is a text box that only allows users to input emails. Even if some browsers do not support the email text box, it does not matter, because it will be recognized as a traditional text box of type = text, in iOS, when you encounter the type = email attribute, the keyboard layout that facilitates the input of email is displayed, as shown in:
▲
In the type = email tag, pay attention to the placeholder attribute, which is set to "type here", meaning that when the user does not enter content in this email box, the text prompted to the user is automatically displayed. It serves as a reminder, which is better than writing in a lot of javascript, such:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
