Using HTML+CSS to design a simple user registration page "Example"

This article will give novice white to introduce how to use HTML and CSS to make a simple registration page. In the process of developing the Web site, if the content requirements of the site is a perfect information station, then must be inseparable from the user registration of this feature. This user registration interface may be difficult for beginners who are just getting started.

Then we will pass the specific HTMLCSS code example, detailed to the small white people, the user Registration function interface implementation method.

A simple example of user registration page HTML code is as follows:

<form> <div style= "width:500px;float:left;margin:0 20px; " > <div style= "font-size:28px;" > New User Registration Interface </div> <br/> <span class= "P" >*</span> <label for= "username" cla ss= "L" > Username:</label> <div style= "height:35px;width:300px;position:relative;display:inline;" > <input id= "username" type= "text" style= "height:30px;width:250px;padding-right:50px;" > <span style= "position:absolute;right:18px;top:2px;height:16px;width:16px;display:inline-block;" >&lt ;/span> </div> <br/><br/> <span class= "C" >*</span> <label For= "Login_password" class= "L" > Login password:</label> <div class= "D" > <input id= "login_passwor         D "type=" text "class=" I "> </div> <br/><br/> <span class=" C ">*</span> <label for= "Confirm_password" class= "L" > Confirm password: </laBel> <div class= "D" > <input id= "Confirm_password" type= "text" class= "I" > </div > <br/><br/> <input type= "Submit" value= "Click to register" style= "Margin-left:100px;height:30px;width: 150px;background-color: #1094f2; Color: #fff; Display:inline-block; " /> </div></form>

The STYLE.CSS code example is as follows:

. p{    color:red;    margin-left:20px;    Display:inline-block;}. c{    color:red;    margin-left:4px;    Display:inline-block;}. l{    font-size:18px;}. d{    height:35px;    width:300px;    Display:inline;}. i{    height:30px;    width:300px;}

The above code we access through the browser such as:

, this is a very simple sign-up page that leverages HTML and CSS design. We can see from the above code that the implementation of the registration page is mainly using the form tag in HTML, then this tag is used to make the form. And there are several kinds of elements in the form. such as text fields, checkboxes, radio boxes, submit registration buttons, etc., that is, important input tag elements! This element tag specifies the input fields in which the user can enter data.

There is also a label label element that appears in the preceding code. This tag is the tag that defines the label for the INPUT element. In fact, as long as you master the relevant elements in the form tag, you can make different requirements of the registration interface. For example, you can add the mailbox registration key, the Verification Code registration item, the address registration item and so on.

Then set the CSS style properties for the corresponding elements, you can create a simple HTML user registration page.