网页设计之5种简单的XHTML网页表单_HTML/Xhtml_网页制作
| 网页设计之5中简单的XHTML网页表单。 技术1：标签三明治将输入框，选择框和文本框全部包含进 label 元素，并全部设置为块级元素。将单选按钮和多选框显示方式设置为 inline 以便于它们在同一行出现。如果你比较喜欢 label 网页设计之5中简单的XHTML网页表单。 技术1：标签三明治 将输入框，选择框和文本框全部包含进 label 元素，并全部设置为块级元素。将单选按钮和多选框显示方式设置为 inline 以便于它们在同一行出现。如果你比较喜欢 label 和单选按钮/多选框出现在不同行，可以选择不把它包含在 label 里面，或者使用硬换行处理。 每种情况都在下面展示了。 当这些看起来比较时髦的时候，W3C 事实上已经含蓄地展示了他们的 label 例子。 主要好处：简单 代码： label, input, select, textarea {display: block;}label {margin-bottom: 10px;}input[type="radio"], input[type="checkbox"] {display: inline;}<form> <fieldset><legend>Contact Form</legend><label for="name">Name</label><input id="name" name="name" size="20" /><label for="email">Email</label><input id="email" name="email" size="20" /><label for=" Choices"> Choices (radio) — <em>wrapped label</em></label><input name=" Choice" type="radio" /> Choice 1<input name=" Choice" type="radio" /> Choice 2<input name=" Choice" type="radio" /> Choice 3<label style="margin-bottom: 0pt;" for=" Choices2"> Choices (checkbox) — <em>non-wrapped label, margin reset</em></label><input name=" Choice2" type="checkbox" /> Choice 1<input name=" Choice2" type="checkbox" /> Choice 2<input name=" Choice2" type="checkbox" /> Choice 3<p style="height: 10px;"><!-- just to split the demo up --></p><label for=" Choices3"> Choices (checkbox) — <em>wrapped, hard line-break</em></label><input name=" Choice3" type="checkbox" /> Choice 1<input name=" Choice3" type="checkbox" /> Choice 2<input name=" Choice3" type="checkbox" /> Choice 3<label for="dropdown">Question</label><select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select><label for="message">Message<textarea cols="36" rows="12" name="message"></textarea></label><input type="submit" value="send it" /></fieldset></form> 运行结果： #expamle1 label,#expamle1 input,#expamle1 select,#expamle1 textarea {display: block;} #expamle1 label {margin-bottom: 10px;} #expamle1 input[type="radio"],#expamle1 input[type="checkbox"] {display: inline;} 技术2：懒人 许多开发者采用了这种不正统但是快速简单（用换行隔断标记）的方法。虽然能运行，但是对你的 css 能力有害，因为你不需要任何 css 去实现它。 主要好处：快速 代码： <form> <fieldset><legend>Contact Form</legend><label for="name">Name</label><input id="name" name="name" size="20" /> <label for="email">Email</label><input id="email" name="email" size="20" /> <label for=" Choices"> Choices (radio)</label><input name=" Choice" type="radio" /> Choice 1<input name=" Choice" type="radio" /> Choice 2<input name=" Choice" type="radio" /> Choice 3<label for=" Choices3"> Choices (checkbox)</label><input name=" Choice3" type="checkbox" /> Choice 1<input name=" Choice3" type="checkbox" /> Choice 2<input name=" Choice3" type="checkbox" /> Choice 3<label for="dropdown">Question</label><select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select><label for="message">Message</label><textarea cols="36" rows="12" name="message"></textarea><input type="submit" value="send it" /></fieldset></form> 运行结果： #p# 网页设计之5中简单的XHTML网页表单。 技术3：语义先生 web 标准的信条之一就是考虑数据类型和与之对应的代码。既然表单是一个连续的问题列表，那么有序列表用在这里就非常贴切。 主要好处： 结构化 代码： ol {list-style: none;padding-left: 0;}<form> <fieldset><legend>Contact Form</legend><ol> <li> <label for="name">Name</label><input id="name" name="name" size="20" /></li> <li> <label for="email">Email</label><input id="email" name="email" size="20" /></li> <li> <label for=" Choices"> Choices (radio)</label><input name=" Choice" type="radio" /> Choice 1<input name=" Choice" type="radio" /> Choice 2<input name=" Choice" type="radio" /> Choice 3</li> <li> <label for=" Choices3"> Choices (checkbox)</label><input name=" Choice3" type="checkbox" /> Choice 1<input name=" Choice3" type="checkbox" /> Choice 2<input name=" Choice3" type="checkbox" /> Choice 3</li> <li> <label for="dropdown">Question</label><select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select></li> <li> <label for="message">Message</label><textarea cols="36" rows="12" name="message"></textarea></li> <li><input type="submit" value="send it" /></li></ol></fieldset></form> 运行结果： #example3 ol { list-style: none; padding-left: 0; } 技术4：分而治之 假如你采取将横向表单，需要何种形式？很多情况（客户）会要求横向表单。我们可以依赖的是老伙伴 p，只需要把表单分割成多栏。利用标签三明治方法我们可以很容易的实现。 主要好处：空间的利用 代码： label, input, select, textarea {display: block;}label {margin-bottom: 10px;}input[type="radio"], input[type="checkbox"] {display: inline;}.form-column {width: 150px;height: 250px;padding-left: 20px;border-left: 1px solid #ccc;float: left;}<form> <fieldset><legend>Contact Form</legend><p class="form-column"><label for="name">Name</label><input id="name" name="name" size="20" /><label for="email">Email</label><input id="email" name="email" size="20" /><label for=" Choices"> Choices (radio)</label><input name=" Choice" type="radio" /> Choice 1<input name=" Choice" type="radio" /> Choice 2<input name=" Choice" type="radio" /> Choice 3</p><!-- /form-column --><p class="form-column"><label for=" Choices3"> Choices (radio)</label><input name=" Choice2" type="radio" /> Choice 1<input name=" Choice2" type="radio" /> Choice 2<input name=" Choice2" type="radio" /> Choice 3<label for=" Choices3"> Choices (checkbox)</label><input name=" Choice2" type="checkbox" /> Choice 1<input name=" Choice2" type="checkbox" /> Choice 2<input name=" Choice2" type="checkbox" /> Choice 3<label for="dropdown">Question</label><select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select><input type="submit" value="send it" /></p><!-- /form-column --></fieldset></form> 运行结果： #Example4 label,#Example4 input, #Example4 select, #Example4 textarea {display: block;} #Example4 label {margin-bottom: 10px;} #Example4 input[type="radio"], #Example4 input[type="checkbox"] {display: inline;} #Example4 .form-column { width: 150px; height: 250px; padding-left: 20px; border-left: 1px solid #ccc; float: left; } 技术5：老学究似的懒人 如果你不想纠缠与 CSS，非常匆忙，并且不打算做浏览器测试，你应该另外找个新工作。玩笑而已，这个是为你准备的。 主要好处：直观 代码： <form> <fieldset><legend>Contact Form</legend><table border="0"><tbody><tr><!-- column one --><td><label for="name">Name</label><input id="name" name="name" size="20" /> <label for="email">Email</label><input id="email" name="email" size="20" /> <label for=" Choices"> Choices (radio)</label><input name=" Choice" type="radio" /> Choice 1<input name=" Choice" type="radio" /> Choice 2<input name=" Choice" type="radio" /> Choice 3</td><!-- column two --><td><label for=" Choices3"> Choices (checkbox)</label><input name=" Choice3" type="checkbox" /> Choice 1<input name=" Choice3" type="checkbox" /> Choice 2<input name=" Choice3" type="checkbox" /> Choice 3<label for="dropdown">Question</label><select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select></td><!-- column three --><td><label for="message">Message</label><input type="submit" value="send it" /></td></tr></tbody></table></fieldset></form> 运行结果： |