表格

• table 元素名
• tr 行， colspan 跨列
• td 列，rowspan 跨行

<table border="1px">
    <tr colspan="4">学生成绩</tr>
    <tr>
        <td rowspan="2">小鱼儿</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">大鱼</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

表单

• form 元素 <form></form>

• method 提交方式 (有 get 和 post 两种)

• action 向何处发送表单数据

1. post 和 get

get 在url中可以看到信息

post 相对来说更安全

<form method="get", action="post.html"></form>

2. 文本框

<!-- 文本输入框 input type='text' -->
<p>名字 <input type="text" name="username" /></p>  

3. 密码框

<!-- 密码框 input type='password' -->

4. 单选框

<!-- input type='radio'
     value 单选框的值
     name  组 -->
<p>
    性别
    <input type="radio" name="gender" value="male" />男
    <input type="radio" name="gender" value="female" />女
</p>

5. 多选框

<!-- 多选框 input type='checkbox'  -->
<p>
    技能
    <input type="checkbox" name="skill" value="C++"> C++
    <input type="checkbox" name="skill" value="Java">Java
    <input type="checkbox" name="skill" value="Python">Python
    <input type="checkbox" name="skill" value="CET-4">CET-4
    <input type="checkbox" name="skill" value="CET-6">CET-6
</p>

6. 按钮

<!-- 普通按钮 -->
<p><input type="button" name="btn1" value="普通按钮" /></p>

<!-- 图片按钮 -->
<p><input type="image" src="images/test.png" /></p>

<!-- 提交 -->
<input type="submit" value=“提交”/>

<!-- 重置 -->
<input type="reset" value=“重置”/>

7. 列表框（下拉框）

<!-- 下拉框 -->
<p>
    民族
    <select name="民族">
        <option vluae="汉">汉</option>
        <option value="少数民族">少数民族</option>
    </select>
</p>

8. 文本域

<!-- 文本域 -->
<p>
    自我介绍
    <textarea name="textarea" cols="50" rows="10">请自我介绍</textarea>
</p>

9. 文件域

<!-- 文件域 -->
<p>
    <input type="file" name="files" />
</p>

10. 邮箱、网址和数字

<!-- 邮箱 url number -->
<p>
    邮箱
    <input type="email" name="email" />
</p>

<p>
    github地址
    <input type="url" name="url" />
</p>

<p>
    年龄
    <input type="number" max="30" min="20" step="1" />
</p>

11. 滑块

<!-- 滑块 -->
<input type="range" max="100" min="0">

12. 搜索框

<!-- 搜索框 -->
<p>
    搜索
    <input type="search" name="search" />
</p>

13. 鼠标定位

<label for="mark">搜索</label>
<input type="search" name="search" id="mark"/>

14. 隐藏、只读、禁用

• hidden
• readonly
• disabled

15. 表单初级验证

placeholder 显示提示信息

<p>名字 <input type="text" name="username" placeholder="请输入用户名"/></p>

required 表示不能为空

<p>
    邮箱
    <input type="email" name="email" required/>
</p>

pattern 正则表达式

<p>
    邮箱

    <input
        type="text"
        name="email"
        pattern="/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/"
    />
</p>