Create forms with CSS and experience affinity

Last Update:2017-02-28 Source: Internet

Author: User

Tags interface reset

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Css

For forms, it is common. But when the Web Standard station, his layout is often forgotten, to the real use of the time found to be a headache, of course, I have encountered. I now want to introduce a method of making beautiful and specific affinity forms with <fieldset></label> tags.

Basic XHTML:

<form action= "" method= "Post" name= "Aplogin" id= "Aplogin" >
<fieldset>
<legend> User Login </legend>
<div>
<label for= "name" > Username </label>
<input type= "text" name= "name" id= "name" size= "a" maxlength= "a"/><br/>
</div>
<div>
<label for= "password" > Password </label>
<input type= "password" name= "password" id= "password" size= "a" maxlength= "/><br/>"
</div>
<div class= "Cookiechk" >
<label><input type= "checkbox" Name= "Cookieyn" id= "Cookieyn" value= "1"/> <a "#" href= "choose whether or not to record your information" > Remember Me </a></label>
<input name= "login791" type= "Submit" class= "Buttom" value= "Login"/>
</div>
<div class= "Forgotpass" ><a href= "#" > You forgot password?</a></div>
</fieldset>
</form>

Read the code, found that the label description text is in <label></label>, as long as the <label></label> tag floating left-aligned, FieldSet contains <div> clear floating, We can achieve the kind of layout that we are familiar with.

Here is the basic CSS:

FieldSet Label {
Float:left;
width:120px;
Text-align:right;
padding:4px;
margin:1px;
}

FieldSet Div {
Clear:left;
margin-bottom:2px;
}

Run Code Box

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/><title>form demo</title><style type=" text/css "></style></pead><body><div id= "Formwrapper" ><p> registered user login </p><form action= "" method= "Post" name= "Aplogin" id= "aplogin" ><fieldset><legend> User login </legend><div ><label for= "name" > Username </label><input type= "text" name= "name" id= "name" size= "maxlength=" "30" &GT;&LT;BR/></div><div><label for= "password" > Password </label><input type= "password" name= "Password" id= "password" size= "maxlength=/><br" "/></div><div class=" Cookiechk ">< Label><input type= "checkbox" Name= "Cookieyn" id= "Cookieyn" value= "1"/> <a "#" href= "choose whether or not to record your information" > Remember me </a></label><input name= "login791" type= "Submit" class= "Buttom" value= "Login" /></div><div class= "Forgotpass" ><a href= "#" > You forgot password?</a></div></fieldset> &LT;/FORM&GT;&LT;BR/><p> Unregistered Create account </p><form action= "" method= "Post" name= "Apform" id= "ApForm" > <fieldset><legend> User Registration </legend><p><strong> Your email address will not be posted, but must be filled in .</strong> Please read the terms of service carefully before you sign up. </p><div><label for= "name" > Username </label><input type= "text" name= "name" Id= "Name" value= "" size= "maxlength="/> * (up to 30 characters) <br/></div><div><label for= "Email" > e-mail </label><input type= "text" name= "email" id= "email" value= "" size= "" maxlength= "" "/> *<br Gt;</div><div><label for= "password" > Password </label><input type= "password" name= "password" id = "Password" size= "maxlength="/> * (up to 15 characters) <br/></div><div><label "for=" Password "> Duplicate password </label><input type=" password "name=" Confirm_password "id=" confirm_password "size=" "maxlength="/> *<br/></div><div><label for= "AgreeToTerms" > agree to Terms of service </label> <input type= "checkbox" Name= "Agreetoterms" id= "Agreetoterms" value= "1"/> <a "#" title = "Do you agree to terms of service" > look at the terms first? </a> *</div><div class= "Enter" > <input name= "create791" type= "Submit" class= "Buttom" value= "submitted"/ > <input name= "Submit" type= "reset" class= "buttom" value= "reset"/></div><p><strong>* When submitting your registration information, we think you have agreed to our terms of service. <br/> * These terms may be modified without your consent. </strong></p></fieldset></ Form></div></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

The design of the interactive part

Interaction design, affinity, user experience, what do these nouns often hang on the lips of a designer? We might as well try it out!

1. The design of the form content is reasonable, here is the interactive interface of the account login, of course, with both registered and new users, we design two choices.

2. Form interface design affinity, layout, color, font, text size, line of higher elements. I used the
Font: Arial, Helvetica, Sans-serif
Font Size: 12px 14px
Color: #666666 #1E7ACE #000000 light blue, gray, black to give users a stable sense of security

3. details of the content, such as recording user information, necessary reminders.

In this way to think about the needs of users, you can do the basic affinity, get a better user experience! To do better, you need to see MSN Google and other foreign large-scale interactive website is how to do!

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More