XHTML/CSS 网页表单:5种简单技术

技术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 
	<div style="height: 10px;">
		<!-- just to split the demo up -->
	</div>
	<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>

运行结果

Contact Form

Choice 1

Choice 2

Choice 3

Choice 1

Choice 2

Choice 3

Choice 1

Choice 2

Choice 3

技术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>

运行结果

Contact Form

Choice 1

Choice 2

Choice 3

Choice 1

Choice 2

Choice 3


技术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>

运行结果:

Contact Form1. 2. 3. Choice 1 Choice 2

Choice 3
4.
Choice 1 Choice 2

Choice 3
5.

6.
7.

技术4:分而治之

假如你采取将横向表单,需要何种形式?很多情况(客户)会要求横向表单。我们可以依赖的是老伙伴 div,只需要把表单分割成多栏。利用标签三明治方法我们可以很容易的实现。

主要好处:空间的利用

代码:

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> 
<div 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
</div> 
<!-- /form-column --> 
<div 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" />
</div> 
<!-- /form-column --> 
</fieldset> </form>

运行结果:

Contact Form

Name
Email

Choice 1

Choice 2

Choice 3

Choice 1

Choice 2

Choice 3

Choice 1

Choice 2

Choice 3


Question

技术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>

运行结果:

Contact Form

Choice 1

Choice 2

Choice 3

Choice 1

Choice 2

Choice 3

原文地址:http://trif3cta.com/blog/entry/xhtml-css-web-forms-5-simple-techniques/