css| Standard | Web page
Form whether in the production of the site, or in the reconstruction of the site, we will frequently "meet", when the "meet" the number of times, but feel that he is more confusing, a familiar "strange", more and more can not grasp him.
Below we will take you into the form of the world, together to understand, explore, master his "temperament."
For the simple form of the design (such as figure one, Yahoo registered part of the page), how do we do the overall layout? Generally we can use the following 3 ways to do the layout:
1, use table to layout
This is the most commonly used method, although now everywhere talk about standardization, and even more in the said Div+css, but Yiwen fly or recommend you use table to layout form. For the standard, the individual's alternative understanding "is more logical, more efficient and quicker".
Why do you recommend that you use it? Table is used to display two-dimensional data, with a table layout form can be said to be his "old line." Another important point is that the complexity of the form,table can be more efficient layout and maintenance changes, reflecting the efficiency and ease of use.
Before layout, review some of the tabs on the table:
Table: Displaying two-dimensional data
Summary: Defining the purpose of a table
Caption: Defines the title of the table, used at the beginning of the table, only once
TR: a row in a table
Th: Header cell, defining a row or column of header information
TD: Data Cells
Here's a concrete layout for the Tuyi design:
<form id= "Demoform" class= "DemoCSS" "action=" ">
<table summary= "Demo for layout using table" id= "Demo" >
<caption>
Registration Example Form
</caption>
<tr>
<th><span class= "Required" >*</span> <label for= "fname" accesskey= "F" >first Name:</label ></th>
<td><input type= "text" id= "fname" value= ""/></td>
</tr>
<tr>
<th><span class= "Required" >*</span> <label for= "lname" accesskey= "L" >last Name:</label ></th>
<td><input type= "text" id= "lname" value= ""/></td>
</tr>
<tr>
<th><span class= "Required" >*</span> <label for= "content" accesskey= "C" >preferred content: </label></th>
<td>
<select name= "Content" id= "Content" >
<option value= "Us" selected= "selected" >yahoo! u.s.</option>
<option value= "E1" >yahoo! U.S. In spanish</option>
<option value= "B5" >yahoo! U.S. In chinese</option>
<option value= "cn" >yahoo! china</option>
<option value= "UK" >yahoo! United kingdom</option>
<option value= "AR" >yahoo! argentina</option>
<option value= "AA" >yahoo! asia</option>
<option value= "au" >yahoo! australia</option>
<option value= "BR" >yahoo! brazil</option>
<option value= "Ca" >yahoo! Canada in English</option>
<option value= "CF" >yahoo! Canada in French</option>
<option value= "FR" >yahoo! france</option>
<option value= "de" >yahoo! germany</option>
<option value= "HK" >yahoo!-kong</option>
<option value= "in" >yahoo! india</option>
<option value= "It" >yahoo! italy</option>
<option value= "KR" >yahoo! korea</option>
<option value= "MX" >yahoo! mexico</option>
<option value= "SG" >yahoo! singapore</option>
<option value= "es" >yahoo! spain</option>
<option value= "TW" >yahoo! taiwan</option>
</select>
</td>
</tr>
<tr>
<th><span class= "Required" >*</span> <label for= "Sex" accesskey= "G" >Gender:</label> </th>
<td>
<select name= "Sex" id= "sex" >
<option value= "" >[select] </option>
<option value= "M" >Male</option>
<option value= "F" >Female</option>
</select>
</td>
</tr>
<tr>
<th><span class= Required >*</span> <label for= accesskey= Y >yahoo! id:</label> </th>
<td><input type= text value= id= > <span class= B > @yahoo. com</span><br/>
<span class= "Explain" >id may consist of a-Z, 0-9, underscores, and a single dot (.) </span></td>
</tr>
<tr>
<th><span class= "Required" >*</span> <label for= "PW" accesskey= "P" >Password:</label> </th>
<td>
<input type= "Password" value= "id=" PW "/><br/>
<span class= "Explain" >six characters or more; Capitalization matters!</span>
</td>
</tr>
<tr>
<th><span class= "Required" >*</span> <label for= "pw2" accesskey= "R" >re-type password:</ Label></th>
<td><input type= "Password" value= "id=" Pw2 "/></td>"
</tr>
<tr>
<th></th>
<td><input type= "Submit" value= "submit" class= "Submit"/> <input type= "reset" value= "reset" class= " Submit "/></td>
</tr>
</table>
</form>
CSS section:
* {
margin:0;
padding:0;
}
Table {
Border-collapse:collapse;
}
Input,select {
Font-family:arial, Helvetica, Sans-serif;
font-size:12px;
}
. Required {
Font:0.8em Verdana!important;
Color: #f68622;
}
. Explain {
Color: #808080;
}
. b {
Font-weight:bold;
font-size:12px;
}
. DemoCSS table{
font:11px/12px Arial, Helvetica, Sans-serif;
Color: #333;
width:420px;
}
. DemoCSS Caption {
Display:none;
}
. democss th {
Font-weight:normal;
Text-align:right;
Vertical-align:top;
padding:4px;
padding-top:8px;
width:110px
}
. democss TD {
Text-align:left;
padding:4px;
width:294px;
}
. democss Input {
width:180px;
}
. democss Select#content {
width:185px;
}
. democss Input.submit {
width:70px;
}
2, use the label to layout
Features: For a simple form layout, this method is more prominent in semantic representation.
The usual solutions are:
Adds a DIV or p to the label and input or other perimeter, triggers the div or P to layout (you can use Holly hack to set height:1%), and clears the left float clear:left;. Set the label to Float:left; float on input or other right.
The method to align the label is to fix the width of the label, and then use Text-align to align left or right as needed.
If there is more than one line of input or other on the right side of the label, we can set padding-left:xpx on the DIV or P, and then set the MARGIN-LEFT:-XPX on the label.
Set the width of a small trick, using the unit EM according to the maximum number of words to set the width, do not have to hard test px.
Of course you can also use the <BR/> at the end of each line without div or P, and a BR setting clears the floating clear:left;
Note: The use of the secondary method in IE, there is a small bug, that is, Div or p in the first line of input or other 3px ie bug, we can use only IE talent Other * HTML to define attributes to eliminate 3px bugs.
Here's a concrete layout for the Tuyi design:
XHTML section:
<form id= "Demoform" class= "DemoCSS" "action=" ">
<p>
<label for= "fname" accesskey= "F" ><span class= "required" >*</span> a
<input type= "text" id= "fname" value= ""/>
</p>
<p>
<label for= "lname" accesskey= "L" ><span class= "required" >*</span> last name:</label>
<input type= "text" id= "lname" value= ""/>
</p>
<p>
<label for= "Content" accesskey= "C" ><span class= "required" >*</span> preferred Content:</label >
<select name= "Content" id= "Content" >
<option value= "Us" selected= "selected" >yahoo! u.s.</option>
<option value= "E1" >yahoo! U.S. In spanish</option>
<option value= "B5" >yahoo! U.S. In chinese</option>
<option value= "cn" >yahoo! china</option>
<option value= "UK" >yahoo! United kingdom</option>
<option value= "AR" >yahoo! argentina</option>
<option value= "AA" >yahoo! asia</option>
<option value= "au" >yahoo! australia</option>
<option value= "BR" >yahoo! brazil</option>
<option value= "Ca" >yahoo! Canada in English</option>
<option value= "CF" >yahoo! Canada in French</option>
<option value= "FR" >yahoo! france</option>
<option value= "de" >yahoo! germany</option>
<option value= "HK" >yahoo!-kong</option>
<option value= "in" >yahoo! india</option>
<option value= "It" >yahoo! italy</option>
<option value= "KR" >yahoo! korea</option>
<option value= "MX" >yahoo! mexico</option>
<option value= "SG" >yahoo! singapore</option>
<option value= "es" >yahoo! spain</option>
<option value= "TW" >yahoo! taiwan</option>
</select>
</p>
<p>
<label for= "Sex" accesskey= "G" ><span class= "required" >*</span> gender:</label>
<select name= "Sex" id= "sex" >
<option value= "" >[select] </option>
<option value= "M" >Male</option>
<option value= "F" >Female</option>
</select>
</p>
<p>
<label for= accesskey= Y ><span class= required >*</span> Yahoo! Id:</label>
<input type= text value= id= > <span class= B > @yahoo. com</span><br/>
<span class= "Explain" >id may consist of a-Z, 0-9, underscores, and a single dot (.) </span>
</p>
<p>
<label for= "PW" accesskey= "P" ><span class= "required" >*</span> password:</label>
<input type= "Password" value= "id=" PW "/><br/>
<span class= "Explain" >six characters or more; Capitalization matters!</span>
</p>
<p>
<label for= "pw2" accesskey= "R" ><span class= "required" >*</span> re-type password:</label>
<input type= "Password" value= "id=" Pw2 "/>"
</p>
<div id= "Submit" >
<input type= "Submit" value= "submit" class= "Submit"/> <input type= "reset" value= "reset" class= "Submit"/>
</div>
</form>
CSS section:
* {
margin:0;
padding:0;
}
Input,select {
Font-family:arial, Helvetica, Sans-serif;
font-size:12px;
}
. Required {
Font:0.8em Verdana!important;
Color: #f68622;
}
. Explain {
Color: #808080;
}
. b {
Font-weight:bold;
font-size:12px;
}
. democss {
font:11px/12px Arial, Helvetica, Sans-serif;
Color: #333;
}
. democss P {
width:298px;
Clear:left;
padding:4px;
padding-left:122px;
Text-align:left;
height:1%;
}
. democss Label {
Float:left;
Margin-left: -122px;
width:110px;
padding:4px 4px 0;
Text-align:right;
}
. democss Input {
width:180px;
}
. democss Select#content {
width:185px;
}
. democss Input.submit {
width:70px;
}
Div#submit {
width:298px;
Text-align:left;
padding:4px;
padding-left:122px;
}
* HTML. DEMOCSS input,* HTML. DemoCSS select{
Margin-left: -3px;
}
* HTML Div#submit input{
margin-left:0px;
}
3, using DL, DT, DD to layout
This is a play, practice method, of course, diagram one of the design can also be used in other more ways to layout, with DL, DT, DD to layout only for a comment.
DL: Represents an HTML custom list
DT: Represents an HTML custom list group
Dd:html Custom List Description
Although the DL, DT, DD in the semantic and not very good performance Map, but the DL, DT, DD layout features can still be used to map a layout, and the effect is good, hehe ...
DT mainly puts the label portion, DD mainly puts input or other.
Note: As with the label layout, there is an IE 3px BUG.
Here's a concrete layout for the Tuyi design:
XHTML section:
<form id= "Demoform" class= "DemoCSS" "action=" ">
<dl>
<dt><span class= "Required" >*</span> <label for= "fname" accesskey= "F" >first Name:</label ></dt>
<dd><input type= "text" id= "fname" value= ""/></dd>
<dt><span class= "Required" >*</span> <label for= "lname" accesskey= "L" >last Name:</label ></dt>
<dd><input type= "text" id= "lname" value= ""/></dd>
<dt><span class= "Required" >*</span> <label for= "content" accesskey= "C" >preferred content: </label></dt>
<dd><select name= "Content" id= "Content" >
<option value= "Us" selected= "selected" >yahoo! u.s.</option>
<option value= "E1" >yahoo! U.S. In spanish</option>
<option value= "B5" >yahoo! U.S. In chinese</option>
<option value= "cn" >yahoo! china</option>
<option value= "UK" >yahoo! United kingdom</option>
<option value= "AR" >yahoo! argentina</option>
<option value= "AA" >yahoo! asia</option>
<option value= "au" >yahoo! australia</option>
<option value= "BR" >yahoo! brazil</option>
<option value= "Ca" >yahoo! Canada in English</option>
<option value= "CF" >yahoo! Canada in French</option>
<option value= "FR" >yahoo! france</option>
<option value= "de" >yahoo! germany</option>
<option value= "HK" >yahoo!-kong</option>
<option value= "in" >yahoo! india</option>
<option value= "It" >yahoo! italy</option>
<option value= "KR" >yahoo! korea</option>
<option value= "MX" >yahoo! mexico</option>
<option value= "SG" >yahoo! singapore</option>
<option value= "es" >yahoo! spain</option>
<option value= "TW" >yahoo! taiwan</option>
</select>
</dd>
<dt><span class= "Required" >*</span> <label for= "Sex" accesskey= "G" >Gender:</label> </dt>
<dd><select name= "Sex" id= "sex" >
<option value= "" >[select] </option>
<option value= "M" >Male</option>
<option value= "F" >Female</option>
</select>
</dd>
<dt><span class= Required >*</span> <label for= accesskey= Y >yahoo! id:</label> </dt>
<dd><input type= text value= id= > <span class= B > @yahoo. com</span><br/>
<span class= "Explain" >id may consist of a-Z, 0-9, underscores, and a single dot (.) </span></dd>
<dt><span class= "Required" >*</span> <label for= "PW" accesskey= "P" >Password:</label> </dt>
<dd><input type= "Password" value= "id=" PW "/><br/>
<span class= "Explain" >six characters or more; Capitalization matters!</span>
</dd>
<dt><span class= "Required" >*</span> <label for= "pw2" accesskey= "R" >re-type password:</ Label></dt>
<dd><input type= "Password" value= "id=" Pw2 "/></dd>"
</dl>
<div id= "Submit" >
<input type= "Submit" value= "submit" class= "Submit"/> <input type= "reset" value= "reset" class= "Submit"/>
</div>
</form>
CSS section:
* {
margin:0;
padding:0;
}
Input,select {
Font-family:arial, Helvetica, Sans-serif;
font-size:12px;
}
. Required {
Font:0.8em Verdana!important;
Color: #f68622;
}
. Explain {
Color: #808080;
}
. b {
Font-weight:bold;
font-size:12px;
}
. democss {
font:11px/12px Arial, Helvetica, Sans-serif;
Color: #333;
}
. democss DL {
width:420px;
}
. DEMOCSS DT {
width:110px;
Float:left;
padding:4px;
padding-top:8px;
Text-align:right;
}
. DemoCSS dd{
margin:0 0 0 118px;
padding:4px;
Text-align:left;
}
. democss Input {
width:180px;
}
. democss Select#content {
width:185px;
}
. democss Input.submit {
width:70px;
}
Div#submit {
width:298px;
Text-align:left;
padding:4px;
padding-left:122px;
}
* HTML. DEMOCSS input,* HTML. DemoCSS select{
Margin-left: -3px;
}
* HTML Div#submit input{
margin-left:0px;
}
There seems to be a small bug in the layout of the DL,DT,DD, and interested friends can experiment. To the DD to add his width properties, we can calculate the dd width of 294px according to the relevant data, add the width of this property in theory is no problem, under the FF experiment is no problem, but under the IE6, it is miserable!
