表格与表单（html标签）

表格与表单（html标签）

---

表格

• 在网页中通过用table 标签来创建一个表格
• 在table 中使用 tr 表示表格中的一行，有几个tr就有几行
• 在tr中使用 td表示一个单元格，有几个td就有几个单元格
  clospan 横向合并单元格
rowspan 纵向合并单元格

---

长表格

• 可以将一个表格分成三个部分：
  1. 头部 thead
  2. 主题 tbody
  3. 底部 tfoot
  4. th 表示头部的单元格

---

表格的样式

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

• 如果表格中没有使用tbody 而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全部都放到tbody 中
• tr 不是table的子元素
• 默认情况下元素在td 中是垂直居中的，可以通过vertical-align设置

---

表单

• 在网页中的表单用于将本地的数据提交给远程的服务器
• 使用form 标签来创建一个表单

    <!-- form的属性： action 表单要提交的服务器的地址 -->
    <form action="###">
        <!-- 文本框    （注意：数据要提交到服务器中，必须要为元素指定一个 name 属性） -->
        文本框 <input type="text" name="username">
        
        <br> <!-- 换行 -->
        
        <!-- 密码框 -->
        密码框<input type="password" name="password">
        
        <!-- 单选按钮 
             - 一组单选按钮具有相同name属性
             - 像这种选择框，必须指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
             - checked 可以将单选按钮设置为默认选中
         -->
        单选按钮 <input type="radio" name="hello" value="a">
            <input type="radio" name="hello" value="b" checked>
            
        <!-- 多选框 -->
        多选框<input type="checkbox" name="test" value="1">
            <input type="checkbox" name="test" value="2">
            <input type="checkbox" name="test" value="3" checked>
            
        <!-- 下拉列表 -->
        <select name="haha" id="xxx">
            <option value="i">选项一</option>
            <option value="ii">选项二</option>
            <option value="iii">选项三</option>
        </select>
        
        <!-- 提交按钮 -->
        <input type="submit" value="注册">
    </form>

    <form action="###" >
        <!-- 
            autocomplete="off" 关闭自动补全 
            readonly 将表单项设置为只读，数据会提交
            disabled 将表单项设置为禁用，数据不会提交
            autofocus 设置表单项自动获取焦点
        -->
        <input type="text" name="username" autocomplete="off">
        <input type="text" name="a">
        
        <br><br>
        
        <input type="color">
        <input type="email">
        
        <br><br>
        
        <input type="submit">
        <!-- 重置按钮 -->
        <input type="reset">
        <!-- 普通的按钮（通常加js） -->
        <input type="button" value="按钮">
        
        <br><br>
        
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">按钮</button>
    </form>