Web前端自学记录（七） （表格和表单）

表格和表单

1.表格

table

在table中使用tr表示表格中的一行
在tr中使用td表示单元格

colspan 横向的合并单元格
rowspan 纵向的合并单元格

表格的样式

border-spacing:指定边框之间的距离
border-collapse: collapse; 设置边框合并

 默认情况下元素在td中是垂直居中的
 可以通过vertical-align设置

2.表单

表单（form）
action 的值是表单要提交的服务器的地址

<form action="">

文本框
注意：数据要提交到服务器中，必须要为元素指定一个name属性值

<input type="text" name="username">

密码框

<input type="password">

单选按钮
选择框必须指定一个value属性，value值传递给服务器
checked 将单选按钮设置为默认选中

<input type="radio" name="hello" value="A">
<input type="radio" name="hello" value="B">

多选框

<input type="checkbox" name="text">
<input type="checkbox" name="text">
<input type="checkbox" name="text">

下拉列表

<select name="haha">
    <option value="i">选项一</option>
    <option value="ii">选项二</option>
    <option value="iii">选项三</option>
</select>

提交按钮

<input type="submit" value="提交">

按钮常用形式

<button type="submit">提交</button>

表单的扩展

autocomplete="off" 关闭自动补全
readonly 将表单项设置为只读，数据会提交
disabled 将表单项设置为禁用，数据不会提交
autofocus 设置表单项自动获取焦点

后续会持续更新