HTML学习笔记（表格，表单）

表格

1. <table>...</table>
2. <tr>行
3. <td>单元格
4. <th>表头替代单元格,可以在thead和tbody中
5. 表格结构：
   1. <thead>
   2. <tbody>
6. table里面不能直接嵌套td（thead,tbody浏览器自动补全）
7. rowspan :跨行，高度增加
8. clospan:跨列，长度增加
9. <caption>..表格标题..<caption>:必须是表格的第一个元素
10. 列组：
    1. <clogroup> <col class=""><col class="" span="">.....</colgroup>
    2. 定义每列的样式，前后顺序与列一一对应

表单

1. 使用form获取让用户提供数据
   1. action：url,用户输入完数据之后，提交数据的网址
   2. method:选择提交方式，post和get
      1. get:获取用户输入，安全。有可能会缓存。一次性发送到服务器。在浏览器可以看到url地址
      2. post:将用户输入读取到浏览器。不会缓存，数据会影响到服务器数据。两次发送，有中间站。在浏览器无法看到url地址
   3. <p>提交内容<input type="文本（text）name="项目类型""></p>
   4. <button type="submit"></button>
2. url编码：

1. http method
   1. get
   2. post
   3. head:不返回正文，返回head
   4. put：存储
   5. delete
   6. options:不返回内容，返回head选项
2. 单行文本框，<input name=“username” value="默认值" placeholder="在未填写的时候提示输入内容" autofocus=“打开网页直接进入该文本框”>
3. 多行文本框
   1. <textarea >......</textarea>
   2. cols:列 rows:行
4. 输入验证
   1. <input requires >
   2. minlength:最小长度 maxlength:最大长度 placeholder：控制范围
   3. 或者正则表达式：1\d{10}:11位数字，第一位为1
5. type=search和type=text下方确认按钮，一个是搜索，一个是提交
6. 选择框
   1. radio
      1. 单选框
      2. 不同选项之间的name相同。成为一个选项组
   2. checkbox
      1. 多选框
      2. name相同
   3. label可以与选项组中的每一个选项关联
      1. <label for="aaaaa"></label> <p><input id="aaaaa"></p>将input和label关联
   4. select
      1. 选择框
      2. <option value=""></option> 选项组的value不同
      3. 通过<multiple size="可同时多选的选项个数"> 实现多选
      4. 通过shift或者拖拽选择多项
      5. 分组
         1. <optgroup label="分组类型"></optgroup>
7. 隐藏一些内容，不让用户看见：<input type="hidden">
8. 文件选择
   1. <input type="file" name="">
   2. 在表单中指定 enctype="multipart/form"
   3. 在input中添加属性 accept=""强制选择文件类型
9. <input>特殊输入类型
   1. date
   2. time
   3. datetime-local
   4. week
   5. month
   6. time
10. 数字验证合法性&range
    1. number，input=number，上下增减 min,max,step(点一下的大小)
    2. range：通过拖拽横条
11. <input> color ：不同浏览器不同
12. button
    1. 按钮
    2. type属性：（默认submit）
       1. submit：提交
       2. button：无行为
       3. reset：重置表单或恢复默认值
    3. 回车提交：自动触发第一个submit事件
13. 控件状态：
    1. reaonly:提交
    2. disable:不提交