Web standards solutions for web forms

Author：Eve Cole Update Time：2009-05-31 00:37:30

After entering eYou.com, I immediately had to convert the new version of the email interface into XHTML+CSS. Fortunately, my basic skills are still solid enough, so I did it in an orderly manner. Of course, you will encounter new problems. For example, when you usually make web pages, you rarely use forms because you have no experience with programs. Fortunately, the world still has Google, which allows me to easily cope with new challenges. Write down some experiences and share them with everyone.

Based on accessibility considerations, the standard way of writing a form should include fieldset and legend (description) in <form> and </form> to allow users to understand the summary of the form field. The simple structure is as follows:

The following is the quoted content:
<form>
<fieldset>
<legend></legend>
...
</fieldset>
</form>

In some cases, you may not want fieldset and legend to affect the aesthetics of your design. It is easy to handle. Just set the border of fieldset to 0 and the display of legend to none in CSS.

In most cases, the layout of the form is divided into two columns, with the label on the left and the input box (input type="text"...) on the right. With such a simple two column layout, I strongly recommend against using tables. Reference http://stylephreak.frogrun.com/uploads/source/cssform.php and http://www.aplus.co.yu/css/forms/?css=1 (two definitely valuable references, you already You don’t need to read further), we found that the common solution for Web standards is to add a div around the label and input type="text"..., and set the display of the div to block. Set the label to float: left; (this is also the reason why the div is set to display: block;) and then the label can be placed on the same line as the input box. A little trick to align labels is to fix the width of the label and then use text-align to align it to the left or right as needed. A tip for setting the width is to use the em unit to set the width based on the maximum word count of the tag, without having to laboriously test px.

To make my explanation easier to understand, I simply write some code:

The following is the quoted content:

XHTML: (partial)

<form>
<fieldset>
<legend>Form instance</lengend>
<div><label for="name">Name:</label><input type="text" id="name" /></div>
<div><label for="etc">Others, etc.:</label><input type="text" id="etc" /></div>
<div class="submit"><input type="submit" value="Submit" /></div>
</fieldset>
</form>
CSS: (partial)

body {/*It has nothing to do with the form, set the display effect of the page*/
width: 400px;
margin: 20px auto;
font: 14px/1.5 Serif;
}
fieldset {
border: none;
border-top: 1px solid #ccc;
}
legend {
padding: 2px;
border: 1px solid #ddd;
background: #ececed;
}
div {
display: block;
padding: 5px 0;
}
label {
float: left;
width: 6em;
text-align: right;
}
.submit {
margin-left: 6em;
}
.submit input {
padding: 2px;
border: 1px solid #ccc;
background: #ececec;
}