CSS is commonly used for forms. 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 would now like 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;
}
Browse Model
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!
