How to create an XHTML form

First of all, the work of this dish-a registration form that mimics Zhaopin. Although no style looks ugly, the basic elements of the form already exist.

Next, go to the text and start introducing the form elements

Form Label:

When you create a form, the first step is the form label. Then add all the form elements you want in the form. Although it is not possible to create a form that can be viewed without a form, it is necessary to use a form when it comes to submitting data.

method is in advance, there are get and post Two, compared to post is more safe and reliable, because the get method will be the user fill the information attached to the access address, Post-specific reasons will be explained in more detail.

text input box:

Where: type is the setting type,placeholder is the setting hint,size is set length (CSS can also be used to make more detailed changes to its style).

Effect:

Password entry box:

Similar to the text input box, except that the type is changed to password, except that when entered in the Password input box, the input is hidden.

Effect:

Radio Box :

The single box input type is radio, here the input label is wrapped up with a label label, this is to add the words "male" and "female" in the back. To make the two-box selection only one at a time, you need to make the name attribute in the two input tags consistent, and thechecked property is the default selection of the radio box where it is set.

Effect:

check box:

The check box type is a checkbox, which is wrapped in a lable label to add the typeface afterwards. The checked attribute is ibid.

Effect:

Drop-down box:

This is different from before, instead of using the input tag, the option tag is wrapped under the Select tab, the option tag is filled with optional content, and the Value property is set to the specific operation data, which is not explained here.

Effect:

Multi-line text input box:

TEXTAREA tags, you can set the width by rows, columns cols, or you can use CSS to make more detailed changes to the style.

Effect:

Button:

Three different button properties

Can also be written as:

After adding the onclick attribute to the button , call the JavaScript function to manipulate the Web page, which we'll talk about later.

Note: As a front-end learner, the button should be the object we need to focus on. The browser comes with a button style that doesn't look good, how to make a better looking, more cool button post I'll share with you.

A little trick to improve the user experience:

Many users in the registration I believe are some impatient mentality (how so many to fill!!) , we want the user to be able to activate the right control on the left by clicking on the text such as "User name" and "password".

The procedure is as follows:

Add a for property to the text label on the left , so that the value in the For property matches the ID value of the input control on the right. This allows the user to be in a hurry without adding extra annoyance because of a click Error:)

Thank you for your visit, hope to help you.