Simple Form standardization example (1): Overall Layout

Form, whether in the production of the website or in the reconstruction of the website, we will frequently "meet". When the number of "meetings" increases, we will feel that it is even more confusing, there is a familiar "unfamiliar" that cannot be grasped more and more.

Next we will take you into the form world to familiarize yourself with, explore, and master his "temperament ".

For a simple form design diagram (part of the Yahoo registration page), how do we make the overall layout? In general, we can use the following three methods for layout:

1. Use table for Layout

This is the most commonly used method. Although we are talking about standardization everywhere and more about Div + CSS, we recommend using table to layout form. For standards, my personal alternative understanding is "more logical and more efficient ".

Why is it recommended? A table is used to display two-dimensional data. Using a table to deploy a form is his "Old row ". In addition, for complex forms, table can be more effective in layout and maintenance and modification, reflecting the efficiency and ease of use.

Before layout, review some table labels:

• Table: displays two-dimensional data.
• Summary: defines the purpose of a table.
• Caption: defines the table title, which is used at the beginning of the table only once.
• TR: a row in the table
• TH: the header cell, which defines the header information of a row or column.
• TD: Data Cell

The overall layout of the design diagram is as follows:

XHTML section:

<Form ID = "demoform" class = "democss" Action = ""> <Table Summary = "demonstration of table layout" 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> <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! Hong 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> <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> <th> <SPAN class = "required"> * </span> <label for = "Yid" accesskey = "Y"> Yahoo! ID: </label> </Th> <TD> <input type = "text" value = "" id = "Yid"> <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> <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; capitalizatio N matters! </Span> </TD> </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 label for Layout

Features: This method is more prominent in semantics for simple form la S.

The common solution is:

Add a div or P to the label, input, or other peripheral components, trigger the Div or P layout (you can use Holly hack to set height: 1%), and clear the left floating clear: left ;. Set label to float: Left; float to the right of input or other items.

The method for alignment is to fix the label width and use text-align to align left or right as needed.

If there are multiple lines of input or other lines on the right of the label, we can set padding-left: xpx for the Div or P, and then set margin-left:-xpx for the label,

Tips for setting the width: Use the unit em to set the width based on the maximum number of words marked. You do not have to test PX hard.

Of course, you can also stop using Div or P at the end of each line <br/>, and clear floating clear: left with a br setting;

Note:There is a small bug in IE, that is, the first line of input in Div or P or other IE bug with 3px, we can use only IE to recognize * HTML to define attributes to eliminate 3px bugs.

The overall layout of Figure 1 is as follows:

XHTML section:

<form id="demoform" class="democss" action=""><p><label for="fname" accesskey="F"><span class="required">*</span> First name:</label><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! Hong 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="yid" accesskey="Y"><span class="required">*</span> Yahoo! ID:</label><input type="text" value="" id="yid"> <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. Use DL, DT, and DD for Layout

This is a method of practice. Of course, the design diagram in Figure 1 can also be laid out in other ways. The layout with DL, DT, and DD is only for reference.

• DL: indicates the HTML custom list
• DT: indicates the HTML custom list group.
• DD: Description of the HTML custom list

Although DL, DT, and DD are not very good in semantics, the layout features of DL, DT, and DD can still be used for layout, and the effect is not bad ......

DT mainly includes the label part, and DD mainly includes input or other parts.

Note: like the label layout, the 3px bug of IE exists.

The overall layout of the design diagram is as follows:

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! Hong 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="yid" accesskey="Y">Yahoo! ID:</label></dt><dd><input type="text" value="" id="yid"> <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 DL, DT, and DD. If you are interested, you can try it out. Add its width attribute to dd. We can calculate that the DD width is 294px based on the relevant data. Adding this width attribute is theoretically correct, and there is no problem in the experiment in Firefox, but in IE6, it was terrible!

Additional reading:

• On web form design
• On web form design (continued)
• Discuss web form design again-should I use a drop-down box?
• CSS-based forms: modern solutions
• Easy-to-use forms
• Five tips for getting familiar with common forms
• Making forms with CSS and experiencing affinity