表单和表格的相关属性及操作

input

文件上传

  <input type="file" multiple>请上传多个文件

默认只能上传一个

如果想上传多个，就添加multiple属性

单选

单选按钮必须和name属性一起使用，并且所有单选框的name值都一样才能实现单选

/* name一样才能实现单选 */
<input type="radio" name="sex" checked="checked"> 

多选（复选框）

• 复选框允许用户在一定数量的选择中选取一个或多个选项

• checked="checked"表示默认选中，属性和属性值一样，可以简写成一个checked

• disabled="disabled"表示禁用

disabled="disabled" 表示禁用

<input type="checkbox" checked="checked" disabled="disabled"> 

按钮

定义可点击的按钮，但没有任何行为

<input type="button" value="提交" onclick="msg()" />

下拉菜单

selected是默认选择

<select>
    <option></option>
    <option></option>
</select>

文本域

• rows表示行数 决定高度
• cols表示列数决定宽度
• resize:none禁止缩放
• placehloder 提示

textarea{
    resize:none;
}

<textarea rows="" cols=""></textarea>
/* 闭合之前不能加空格。挨着写 */

表单字段集（块元素）

自带样式（四周待边框）属于置换元素

fieldset可以自己嵌套自己

<fieldset>
    disabled="disabled"
</fieldset>

字段集合标题

在一个fieldset里面只能有一个lengend

lengend元素在fieldset对象绘制的方框内插入一个标题

<lengend align="left/center/right/justify">标题</lengend>

提示信息标签（行内元素）

为元素指定提示信息，就算不点击输入框，触发到一定范围区域，也触发输入，for属性的id名，要和元素的id名相同

<label for="绑定控件id名">

table表格

表格边框

table{
     width:500px;
    height:500px;
    border:1px solid #ccc;
}

单元格边框

td{
    border:1px solid #ccc;
}

单元格间距

只能给table添加

/**/
table{
   border-spacing:0;
}

合并相邻单元格的边框

合并边框的同时，也去掉了间距

只能给table添加

• separate 边框分开（默认值）
• collapse 边框合并

border-collapse:separate/collapse；

无内容时单元格的设置

无内容时隐藏

• show 显示
• hide 隐藏

empty-cells:show/hide;

显示单元格行和列的算法

只能给table添加

定义表格的布局算法

• fixed 每一列固定宽，内容超出单元格，宽度固定不变
• auto 根据内容自适应

table-layout:auto/fixed;

表格标题

写在table里，tr上面

<caption></caption>

合并

rules="groups/rows/cols/all/none" 添加组分隔线
groups位于行组合列祖之间的线条

列分组

/* value就代表几列为一组 */
/* 可以通过给table添加rules="groups" 添加组分隔线，同时水平方向的线条也没了 */
<colgroup span="value"></colgroup>

/* 不能添加分隔线 */
<col span="value">

行分组

头部

只能有一个

<thead></thead>

身体

只能有一个

<thbody>...<thbody>

表尾

<tfoot><tfoot>