1.4-表格与表单标签

1 表格table 标签

1.1 表格的结果为表头和表身，可以为表格添加标题

1.2 thead代表表头，tbody代表表身，thead嵌套tr和th，tbody里面嵌套tr和td

1.3 tr里只能嵌套th和td，th一般用来表示表头，有加粗的样式，td代表表头对应的具体数据

 合并单元格标签

        跨行合并:rowspan=“合并单元格的个数”

        跨列合并:colspan=“合并单元格的个数”

跨行：最上侧单元格为目标单元格，写合并单元格

跨列：最左侧单元格为目标单元格，写合并单元格

合并单元格三步曲：

1、先确定是跨行还是跨列合并

2、找到目标单元格，写上合并方式=合并的单元格数量。比如:<td colspan="2"></td>

3、删除多余的单元格

表格补充：

1、数据分组

<colgroup span="value"></colgroup> <!--span属性为把几列分为一组--> 一个表示为一组，要分为几个组就要写几个

2、表格标题

<caption></caption>

3、表格属性

（1）单元格间距：border-spacing:value; 跟cellspacing一样的效果

说明：单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值

（2）合并相邻单元格边框：border-collapse:separate/collapse;

说明：合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)

（3）无内容时单元格的设置：empty-cells:show/hide;

说明：定义当单元格无内容时，是否显示该单元格的边框区域；show：显示 ；hide：隐藏；条件：单元格与单元格之间有距离，并且边框没有进行合并

（4）添加分隔线：rules="groups/rows/cols/all/none" rows--行与行添加分割线 cols--列与列添加分割线 groups--组与组添加分割线 all--表示行与行、列与列之间都添加分割线 none--默认值，不添加分割线

2 表单form标签

2.1 表单域<form>会把范围内的表单元素信息提交给服务器

2.2 表单控件（输入或选择内容）

（1)<input type="属性值" />

[1]文本框 <input type="text" value="默认值"/>

[2]密码框 <input type="password" />

[3]提交按钮--默认会刷新游览器 <input type="submit" value="按钮内容" />

[4]重置按钮--只能重置用户输入的,不能重置默认值 <input type="reset" value="按钮内容" />

[5]普通按钮--默认没有文字，不能刷新游览器 <input type="button" value="按钮内容" /> 按钮设置的时候会少4px像素，设置高的时候需要额外添加4px，两个相邻的按钮可利用vertical:middle相对居中

[6]单选按钮组--一组单选按钮（一组只能选其中一个）需要给这些单选按钮设置一样属性值的name属性  

<input type=“radio” name=“ral” /> <label for="">男</label>

解析:label 将文字和单选按钮进行绑定，点击文字单选按钮也被选中，label是行内元素，不可设置宽高  

<input type=“radio” name=“ral”   checked=“checked”/> <label for="">(默认选中)女</label> placeholder：给输入框设置输入框的提示信息（占位符） --HTML4写法

html5写法：<label><input type=“radio” name=“ral”   checked=“checked”/>女</label>

[7]复选框组   <input type="checkbox" name="" />   <input type="checkbox" name="" disabled="disabled" />    

* disabled="disabled" (禁用，锁死文本框的值 )     * checked="checked"  (默认选中)

 (2)除了type属性外，<input>标签还有其他很多属性，其常用属性如下：

 （3）<label>标签 --用于绑定一个表单元素，当点击<label>标签内的文本时，游览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。说明：label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。

    (4）<select>下拉表单元素

         <option>中定义selected="selected"时，当前默认选中option种value属性的值跟option标签内容一样

<select >   <option>下拉选项1</option>   <option>下拉选项2</option>   ………… </select>

表示下拉列表，name属性不是必须的 默认选择项用selected属性：表示被选中这条option内容

  （5）<textarea>文本域元素--多行文本输入控件

        在这个文本域中可以换行

        语法: <textarea name="" cols="" rows="" ></textarea>

        rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。 防止文本域被拖动 阻止浏览器对窗口的拖动设置:{resize:none;}（css属性）

     (6)表单字段集 语法：<fieldset></fieldset> ​

说明：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disabled定义空间禁制可用；

表单补充

1.input type属性的属性值补充

(1)color 颜色选择器（卖油漆）

(2)number 只能包含数字的输入框

(3)file上传文件框 --默认只能上传一个文件 实现多个文件上传 <input type="file" multiple/>

(4)date 日期

2.表单新增属性

(1)placeholder占位符

(2)autofocus获取焦点

(3)multiple文件上传多个

(4)required 验证条件，必填项,如果input框有requied属性的时候，提交的时候必须要填写 这个输入框，如果没有填写内容，不能提交

(5)min 最小

(6)max 最大

(7)list 必须结合datalist标签，绑定datalist id名称。

(8)novalidate 取消验证

3.新增表单标签

• output

<form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">   
    <input id="a" type="range" min="0" max="100">100+    
    <input id="b" type="text" value="50">=    
    <output name="x" for="a b"></output>
</form>

• datalist 必须和list属性结合使用。做提示信息。

<input type="url"     list="url_list"    name="link" />
<datalist    id="url_list">     
    <option label="W3School" value="http://www.W3School.com.cn" />     
    <option label="Google" value="http://www.google.com" />     
    <option label="Microsoft" value="http://www.microsoft.com" /> 
</datalist>