日期:2013-10-06  浏览次数:21152 次

 如下: HTML代码
 

思路:这个表单比较特殊,左边为文字左边为输入框,同样我们可以有浮动的方法去实现,把文字加上lable标签,并不是由于我们要定义款式而加入lable,而是这样写是标准的写法之一。在用br即产生的换行也可以用来定义清除左浮动。总结一下,也就是一个lable定义它左浮动,另一个input是行内元素因此会紧跟在浮动元素之后,在后面加入一个br来清除浮动,清除的目的也就是不影响下一组的左右浮动。

以上的表单较为简单所以用款式也免强用可以,但对于复杂的表单我还是建议使用表格。

补充网摘:
为表单规划
http://www.5dlog.com/article.asp?id=126
在对表单规划进行设计时,常常让人忍不住想使用Table,如今quirksmode教给我们使用Tableless forms。

其实很简单,原理就是让<label>和<input>(包括其它的form元素,如:<select>, <textarea>)的display属性为block再浮动到左侧,行末有<br />担任清除浮动。有固定的宽度,并且文字又对齐,这样漂亮的规划就出来了!

HTML部分:

<form>
<label for="name">Name</label>
<input id="name" name="name"><br />
<label for="address">Address</label>
<input id="address" name="address"><br />
<label for="city">City</label>
<input id="city" name="city"><br />
</form>


CSS部分:
 
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {
clear: left;
}

我在用的时候喜欢把行末的<br />加上class="clear",由于这样<label>中要是想用到<br />就不会出问题了。