六.表格与表单

表格与表单

表格标签

1. 表格

<table>
    <tr>行
        <td></td>列
    </tr>
</table>

2. th标签

内容会有加粗和居中效果

<table>
    <tr>
        <th></th>
    </tr>
</table>

3. colspan属性

在同一行内同时合并多个列

<table>
    <tr>
        <td colspan="5"></td>
        合并原本的5个格子为1个格子
    </tr>
</table>

4. 表格的行合并属性

<table>
    <tr rowspan="3">
    在同一列中实现多行合并，并删除
    该合并行之外的行。
        <td></td>
    </tr>
</table>

表单标签

用于收集不同类型的输入数据

常用属性：

• action：表示动作，值为服务器的地址，将表单的数据提交到该地址上进行处理。
• method：表示请求方式(get,post都是地址栏)。
  get请求参数都在地址之后进行拼接，特点是不安全但效率更高，请求的大小受限制，约在2KB，一般用于查询数据。
  post请求参数单独处理，特点是安全可靠但效率低，请求大小无上限，一般用于插入，删除，修改等操作。
• enctype：表示的是表单提交的类型。

表单提交

<form action="提交的目标位置" method="GET" enctype="application/x-www-form-urlencoded">
    <input type="submit" value="提交" name="name">
    value:按钮的提示信息
    name:后台接收用户输入的信息
</form>

1.input元素

input元素是表单中的重要元素，可根据不同的type值，表现出不同状态。

主要属性值如下：

text：单行文本框<input type="text">
password:密码框
tel：联系方式
submit：表单提交按钮
button：普通按钮
reset：重置按钮
radio：单选框
date：日期框
time：时间框
datetime：日期和时间框
email：电子邮件输入
number：数值输入
file；文件上传
hidden：隐藏域
range：取值范围
color：取色按钮
image：图片提交按钮
button：普通按钮

注意：
单选框需要给name属性取值一致，才会达到互斥的效果。
照片提交按钮要提供照片的源路径。
重置按钮是更改为初始值

2.select元素

• 单项选择

<form action="index.html">
    地区选择：
    <select>
        <option value="1">中国</option>
        <option value="2">印度</option>
        <option value="3">泰国</option>
        <option value="4">日本</option>
        <option value="5" selected="selected">韩国</option>
        selected属性表示默认选项
    </select>
    <br>
    <input class="c1" type="submit">
</form>

• 多项选择(Ctrl+Shift)

结合name，value属性进行提交

<form action="index.html">
    喜欢的运动：
    <select name="喜欢的运动" multiple="multiple">
        <option value="1">乒乓球</option>
        <option value="2" selected="selected">桌球</option>
        <option value="3">游泳</option>
        <option value="4">爬山</option>
        <option value="5">篮球</option>
    </select>
    <br>
    <input class="c1" type="submit">
</form>
结果如下：
index.html?喜欢的运动=2&喜欢的运动=3&喜欢的运动=4

3.textarea元素

<textarea cols="40" rows="5" name="s1"></textarea><br>
凡是涉及提交数据的，都必须添加name属性。
<input class="c1" type="submit">
提交结果：
index.html?喜欢的运动=3&s1=我爱你中国！