第七章--表单和数据表格

第七章 对表单和数据表格应用样式
表单是现代web应用程序中越来越重要的部分。 表单能完成系统交互，注册预定和复杂的各种活动。 表单可能很复杂跨越多个页面。过去用表格布局表单，但是在本章中讲的是用CSS布局复杂的表单。
7.1 对数据表格应用样式
花几分钟就时间设计数据表格可以大大改进可理解性和阅读信息的速度。


7.1.1表格的特有元素 
如果数据表


对于视力没有问题的人来说都难以阅读，那么对于那些必须使用辅助技术的人来说是多么混杂。 


1.caption和summary
  第一个元素是表格的caption， 用作表格的标题，尽管这不是必须有的元素，但是尽可能使用caption总是最好的。另一个有用的是表格的summary。 summary可以用作表格的标签，来描述表格的内容，与alt属性相似，summary应该总结表格中的数据，编写出色的summary可以减少用户阅读表格内容的需要。


<table class="cal" summary="A calender style data pinker">
<caption>
<a href="cal.php?mouth=dec08" rel="prev">&lt</a>January 2013
</caption>
</table>


2.thead, tbody和tfoot
利用thead，tbody和tfoot可以将表格划分为几个逻辑部分。 可以将所有的标题放在thead中，这样就能够对特殊的区域单独的应用样式。    如果使用thead和tfoot就必须使用tbody元素。 一个表格中 只允许有一个thead和一个tfoot 但是tbody可以又多个，可以将更复杂的表格划分成更容易管理的几个部分。


行标题和列标题应该使用th而不是td标记，但是某些内容即时标题又是数据，那么他任然用该使用td. 表格标题可以设置为col<列>或row<行>的csope属性，定义他们是行标题还是列标题。  还可以设置rowgroup和colgroup， 表示他们与多行或多列相关。
<thead>
<tr>
<th scope="col">Sun</th>
<th scope="col">Mon</th>
<th scope="col">Tue</th>
<th scope="col">Wen</th>
<th scope="col">Tur</th>
<th scope="col">Fri</th>
<th scope="col">Sat</th>
</tr>
</thead>


3.col和colgroup
虽然利用样式可以对整行应用样式，但是很难对整列应用样式。 为了解决这个问题，W3C引入了colgroup和col元素。 colgroup能够使用col对一个或多个列进行分组。 不过支持col和colgroup的浏览器并不多。
<colgroup>
<col id="sun"/>
<col id="mon"/>
<col id="tue"/>
<col id="wen"/>
<col id="tur"/>
<col id="fir"/>
<col id="sat"/>
</colgroup>


7.1.2 数据表格标记


将这些HTML元素和属性组合在一起， 就可以创建出像图这样的日历表的基本轮廓。
<table class="cal" summary="A calender style date picker">
<caption>
<a href="#" rel="prve">&lt;</a> January 2008<a href="#" rel="next">&gt;</a>
</caption>


<colgroup>/*对列进行分组*/
<col id="sun"/>
<col id="mon"/>
<col id="tue"/>
<col id="wen"/>
<col id="tur"/>
<col id="fir"/>
<col id="sat"/>
</colgroup>


<thead>/*表格逻辑头部*/
<tr>
<th scope="col">Sun</th>
<th scope="col">Mon</th>
<th scope="col">Tue</th>
<th scope="col">Wen</th>
<th scope="col">Tur</th>
<th scope="col">Fri</th>
<th scope="col">Sat</th>
</tr>
</thead>


<tbody>
<tr>
<td class="null"  >30</td>
<td class="null"  >31</td>
<td><a href="#">1</a></td>
<td><a href="#">2</a></td>
<td><a href="#">3</a></td>
<td><a href="#">4</a></td>
<td><a href="#">5</a></td>
</tr>


</tbody>






















7.1.3 对表格应用样式
CSS规范有两个表格边盒模型：单独的和叠加的。  在单独模型中，在各个单元格周围有边框，而在叠加模型中，单元格共享边框。 大多数浏览器默认采用单独模型， 但是叠加模型更有用。
因此，先把表格的border-collapse的属性值设置为collapse。 利用双边框创建斜面效果。 然后让所有文本居中，删除默认的内边距和外边距。 


css的border-spacing属性可以控制单元格之间的距离。 可惜IE7和更低的版本不理解这个属性。 具体示例见下面链接：
<--按住Ctrl键点击浏览-->
D:\asp1\cssexample\对表格应用样式--日历.html




7.2 简单的表单布局


简短的表单最容易填写。用户只需要顺着往下填就能完成表单的内容；


7.2.1有用的表单元素
HTML提供了许多有用的元素，可以帮助在表单中添加结构和含义。   其中一个是fieldset元素。 fieldset用来对相关的信息进行分组。  大多数用户在fieldset周围加上了一个边框，将border属性设置成none就可以关闭它。 


为了识别每个fieldset的用途，可以使用legend元素。 legend元素就像是fieldset的标题，它常常在fieldset的顶部垂直居中，并且向右缩进一点。 但是legend元素很难应用样式， 各种浏览器处理他们呢的方式都不一样。  因此如果使用legend的话就不得不接受浏览器之间的差异。


表单标签


label元素极其重要， 因为它可以帮助添加结构和增加表单的可用性和可访问性。  顾名思义这个元素用来在表单中添加有意义的描述性标签。  


在许多浏览器当中单击标签元素会导致相关联的表单元素获得焦点。


将标签与表单控件关联起来非常容易，而且可以采取两种方式之一来实现；一种是隐式方式， 即把表单元素嵌套在label元素中：
<label>email<input name="email" type="text"/></label>
另一种是显式方式， 即把label标签的for属性设置为相关联的表单元素的id名称：


<label for="email">email<label>
<input name="email" id="email" type="text"/>




你会注意到这个输入控件和本章中所有的表单控件都包含name和id属性。 在表单输入控件和标签之间创建关联需要id属性， 而将表单数据发送回服务器需要name属性。 


7.2.2基本布局
可以使用上一节讲的三个结构性元素对第一个fieldset的内容加标记，从而形成表单的基本布局。 
<fieldset>
<legend>Your Contact Details</legend>
<div>
<label for="author">Name:<em class="required">(Required)</em></label>
<input name="author" id="author" type="text"/>
</div>


<div>
<label for="email">Email Address:</label>
<input name="email" id="email" type="text"/>
</div>


<div>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text"/>
</div>
</fieldset>
没有应用任何样式的表单：




首先要设置fieldset和legend元素的一般样式。 fieldset必须使用外边距进行垂直分割，可以只用内边距在内容周围增加一些空间。 
fieldset{
margin:1em 0;
padding:1em;
border:1px solid #ccc;
background:#f8f8f8;
}
legend{
font-weight:bold;
}


将标签定位在表单元素上方实际上非常简单。 标签在默认的情况下是行内元素。  但是将他的display属性设置为block可以迫使它自己形成块框，迫使元素进入下一行。 在不同的浏览器中，文本输入框的宽度不一样， 因此为了一致，应该显式的设置文本输入框的宽度。


label{
display:block;
cursor:pointer;
}


input{
width:20em;
}
应用了样式以后的表单元素：D:\asp1\cssexample\表单-有用的表单元素.html








7.2.3其他元素
这个布局同样适合于其他表单元素，比如文本域：
<fieldset>
<legend>Comments</legend>
<div>
<label for="text">Message:</label>
<textarea name="text" id="text"></textarea>
</div>
</fieldset>


文本区域的尺寸在不同浏览器中也不一样，所以应该显式的设置他们的宽度和高度，在这里我把匡杜设置为100%， 所以宽度实际上是有父元素决定。 这样设置是个好方法， 因为它使布局更灵活，更独立。
textarea{
width:100%;
height:10em;
}


在前面的示例中，通过在输入元素上应用宽度，定义了文本框的宽度。 但是输入元素包括其他的表单控件（复选框，单选按钮，和提交按钮）如果将输入元素设置成20em的话，所有的输入元素都成为20em。
例如按钮：
<input name="button" type="button" value="submit" />也会成为20em宽。




解决这个问题的有效方法是，用属性选择器寻找他定的表单元素。 而并不是把所有输入元素都设置为20em，而是专门寻找文本输入元素。
input[type="text"]{
width:20em;
}
让作者感到遗憾的是，属性选择器只是在比较现代的浏览器中使用，在IE6和更低的版本中是无效的。 在属性选择器获得广泛的支持前，区分它们的最好方法是给每一个元素分配一个类。 
如分配的类是checkbox，radio…
就这样写 
input.radio,input.checkbox{
width:auto;
}


<fieldset>
<legend>Remember me</legend>
<div>
<label for="yes"><input id="yes" class="radio" name="remember" type="radio" vaule="yes"/>yes</label>
</div><!--/*zheshi  yizhong  neizhi  de  xiefa */-->
<div>
<label for="no"><input id="no" class="radio" name="remember" type="radio" vaule="no"/>yes</label>
</div>
</fieldset>


在前面，表单中所有的标签设置为块级元素，这让相关联的表单控件出现在另一行上。 显然对于单选按钮我们不希望这样。 所以通过让标签围绕表单控件来避免它。
最后需要在单选按钮中添加一点外边距，从而在标签之间提供适当的距离。


7.2.4 修饰
布局完成了，现在可以为高级的浏览器添加一些修饰， 例如在元素获得焦点时改变背景颜色。 
input[type="text"]:focus,textarea:focus{
background:#ffc;
}


input[type="text"],textarea{
border-top:2px solid #999;
border-left:2px solid #999;
border-bottom:2px solid #ccc;
border-right:1px solid #ccc;
}
效果：
D:\asp1\cssexample\有用的表单元素.html
必填域
许多表单都包含必须填写的必填域，可以在必填域的旁边方有文本提示后者是❤号，最适合这一信息的元素是em或strong元素。


<div>
<label for="author">Name:<em class="requried">(Required)</em></label>
<input id="author" name="author" type="text"/>
</div>


再对它应用样式：
.requried{
font-size:0.75em;
color:#760000;
}


现在你明白了，我们用纯CSS建立一个简单美观的表单布局。
7.3 复杂的表单布局


对于比较长的复杂的表单，垂直间距会造成问题，表单也不容易查看。 为了便于浏览减少使用的垂直空间， 有必要将表单元素水平布置。实际上非常简单只需要添加：
label{
float:left;
width:10em;
cursor:pointer;
}


表单标签可能跨多行，还应使用清理div容器，避免他们干扰下一组标签和弄乱布局。
form div{
clear:left;
}
但是很少有能像上面那么简单的表单，常常是许多的空间混杂在一起的。 下面的两节就是讲如何处理这些情况。 
    比较复杂的表单布局。 
7.3.1 可访问的数据输入元素
从前面的示例了解到，表单标签对于表单的可访问性很重要。 但是有时候我们不希望每个元素都显示标签。 例如上面图中的收集日期信息的表单元素。  但是即使不希望显示标签，让标签出现在源代码中并且可供屏幕阅读器使用人然很重要。 


<div>
<label for="dataofbirth">Data Of Birth:</label>
<input name="dataodbirth" id="dataofbirth" type="text"/>
<label id="monthofbirth" for="monthofbirth">Month of Birth:</label>
<select name="monthofbirth" id="monthofbirth">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
</select>
<label id="yearofbirth" for="yearofbirth">Wear of Birth:</label>
<input name="yearofbirth" id="yearofbirth" type="text"/>
</div>


为了创建这个布局，首先需要隐藏"month of birth""year of birth".  将标签的display的值设置成none也不行，会影响到屏幕阅读器访问他们。 所以不这样做，而是采用较大的副文本缩进使标签定位到屏幕之外。在创建基本表单样式中，标签已经设置了宽度，为了防止标签影响布局现在把标签的宽度设置为0；
#monthofbirth, #yearofbirth{
text-indent:-1000em;
width:0;
}
然后单独设置个表单空间的尺寸，然后用外边距限制他们的距离。
input#dataofbirth{
width:3em;
margin-right:0.5em;
}
input#monthofbirth{
width:10em;
margin-right:0.5em;
}
input#yearofbirth{
width:5em;
}




7.3.2 多列复选框


将大的复选框组或者单选按钮创建成两列有点复杂。 标签只能分别用于各个元素，而不能用于元素组。 理想情况下我们将整个组放在fieldset中，并且将legend用作这个组的标签。 遗憾的是浏览器处理legend标签的定位方式不一致，所以在这里不是可行的解决方案。 因此，在浏览器统一支持以前最好的解决方法是使用标题元素。 


为了创建效果，将复选框分成两组，每组放在一个div中各有一个col类。 然后将两个div元素放在一起具有一个ID的fieldset中：
<fieldset id="favoritecolor">
<h2>Favorite color</h2>
<div class="col">
<div>
<label><input class="checkbox" id="red" name="red" type="checkbox" value="red"/>red</label>
</div>
</div>


<div class="col">
<div>
<label><input class="checkbox" id="orange" name="orange" type="checkbox" value="orange"/>orange</label>
</div>
</div>
</fieldset>


/*因为已经创建了这些基本的fieldset样式，所以首先要覆盖这些样式，将内边距和外边距设置成零，去掉边框颜色并且将背景颜色设置为透明；*/


fieldset#favoritecolor{
margin:0;
padding:0;
border:none;
background:transparent;
}
/*设置标题h2的样式*/
#favoritecolor h2{
width:10em;
font-size:1em;
font-weight:normal;
display:block;
}
/*然后给div设置宽度并让他们向左浮动，从而创建出两列的布局,但是这个表单中所有的DIV默认情况下已经被清理了，需要用claer:none来覆盖那个声明*/
#favoritecolor .col{
width:8em;
float:left;
clear:none;
}


提交按钮
按钮控件是通常使用的type设置为submit的input元素。 但是他有一点问题就是无法使用元素选择器选择它们。可以使用属性选择器选择它们， 那么为什么不用button元素来代替input元素呢？


button元素渐渐被人们所接受，但是他人然不太为人所知，使用还不广泛。 不应该是这样的应为button元素有很强的适应性和灵活性。 首先可以在button标签中放置图像，让图像成为控件
<div>
<button type="submit">
<img src="" alt="Book Now"/>
</button>
<div>


因为按钮有一些默认样式，我们希望关闭它们。
button{
border:none;
background:none;
cursor:pointer;
}


OSX等系统禁止修改input按钮的样式，这是为了在整个操作系统中保持一致。 但是button元素不会受这些限制的影响。 因此但是用CSS就可以创建出丰富的按钮样式。 例如最初简单的提交按钮；
<p>
<button type="submit">Book Now</button>
</p>


可以做各种设置，包括边框背景色 圆角 渐变 镜像 还有翻转，具体前面已有例子，再此不做赘述。
D:\asp1\cssexample\纯CSS按钮.html
7.3.3 表单反馈
表单常常需要某种形式的反馈消息，虫儿突出显示那些忘了填写或者填写错误的域，采用的方法是常常在域的旁边加一个错误消息。


为了产生这种效果，可以将反馈文本放在一个em中， 将这个em放在源代码中文本输入元素的后面。 但是为了让他正确的浮动，em前面的input元素都需要浮动。 这会对他们的段落产生影响，从而影响到布局。
为了避免这些问题最好的方法是将错误消息放在表单标签中，然后用css进行定位：
<div>
<label for=""email>Email Address:
<em class="feedback">Incorrect email address.Please try again.</em>
</label>
<input name="email" id="email type="text"/>
</div>


为了对反馈的em进行定位，首先将表单中所有的段落的position设置为relative， 从而建立一个新的定位上下文。 然后可以对反馈em进行绝对定位，让它出现在输入元素的右边。 
form div{
position:relative;
}
form .feedback{
position:absolute;
left:30em;
right:0;
top:0.5em;
}
但是IE6更低版本的浏览器会错误的将反馈em的宽度设置成最小宽度。 为了解决这个问题需要为这种老式浏览器显式的设置宽度。一种做法是第八章介绍的条件注释。
form .feedback{
width:10em;
}
然后对反馈消息应用需要的的样式。例如加上小图标，改变字体颜色等等；
D:\asp1\cssexample\表单-有用的表单元素.html