二、表单与表格元素的介绍

二、表单与表格元素

---

1.表格元素

在网页中，我们经常用表格来显示数据，例如下面的班级列表。

项目	价格
电脑	$1600
手机	$12

我们可以用表格元素实现在网页中制作表格
代码如下（示例）：

<table border="1" width="100%">
    <thead>
        <tr>
            <th>项目</th>
            <th>价格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>电脑</td>
            <td>1600</td>
        </tr>
        <tr>
            <td>手机</td>
            <td>12</td>
        </tr>
    </tbody>
</table>

​因为表格默认是没有样式的，使用我们添加了border属性来设置边框，width属性设置表格的宽度。在实际开发中，我们用css来设置表格的样式，而不是用表格的属性。

• table标签：表格容器
• thead标签：表示表头
• tbody标签：表示表体
• tr标签：表示行，内部一定是只有td或th
• th标签：表示表头单元格，字体会加粗
• td标签：表示单元格

关于表单我们还可以做合并单元格操作

• 通过colspan属性可以合并列，示例代码如下，colspan属性可以让单元格在同行占据两个单元格的位置。
  代码如下（示例）：

<table border="1" width="100%">
    <tr>
        <td align="center" colspan="2">学生列表</td>
    </tr>
    <tr>
        <td>小明</td>
        <td>2岁</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>3岁</td>
    </tr>
</table>

• 通过rowspan属性可以合并行，rowspan属性可以让单元格在同一列占据3行的位置。
  代码如下（示例）：

<table border="1" width="100%">
    <tr>
        <td rowspan="3">一班</td>
        <td>小明</td>
        <td>2岁</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>3岁</td>
    </tr><tr>
        <td>小亮</td>
        <td>16岁</td>
    </tr>
    <tr>
        <td rowspan="3">二班</td>
        <td>张三</td>
        <td>2岁</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>17岁</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>18岁</td>
    </tr>
</table>

关于表格我们先了解这些基本概念，后面我们会学到一些UI框架可以让表格元素变得更加美观。

2.表单元素

在网页中，我们通常用表单向服务器发送数据，例如下面一个最简单的登录功能。

关于与服务器交互数据的内容，后面我们会学到，现在我们只要简单了解一下常用的表单元素即可。
我们先来看一个完整的表单是如何用html标签和属性实现的。
代码如下（示例）：

<form action="">
    <div>
        <label for="username">用户名：</label>
        <input id="username" type="text">
    </div>
    <div>
        <label for="password">密码：</label>
        <input id="password" type="password">
    </div>
    <div>
        <label>性别:</label>
        <select>
            <option>男</option>
            <option>女</option>
        </select>
    </div>
    <input type="submit" value="注册">
</form>

• form标签

​form标签是表单的容器，为了实现采集数据的功能，其他表单标签应当放在form标签之内。
代码如下（示例）：

<form action="" method="get"></form>

​关于form标签的更多功能会在前后台数据交互中深入讲解，现在只对表单标签做初步的介绍。

• input标签

代码如下（示例）：

<input type="text">  <!-- 文本框 -->
<input type="password">  <!-- 密码输入框 -->
<input type="radio">  <!-- 单选框 -->
<input type="checkbox" >  <!-- 复选框 -->
<input type="button">  <!-- 按钮 -->
<input type="submit">  <!-- 提交按钮 -->

input标签通过type属性可以分为多个类别，常用的input上面的代码已经列出：

• type=“text”：文本框，用于文本的输入。
• type=“password”：密码输入框，用于密码的输入，与文本框的区别是，输入的内容不能被用户看到。
• type=“radio”:单选框，通过name控制类别，name中的radio只能被选择一个。
• type=“checkbox”:复选框，用name控制类别，但是可以选择多个。
• type=“button”:按钮，如果不做进一步处理，没有任何功能。
• type=“submit”:提交按钮，可以将表单数据提交至网站后台，关于数据传输，后续会深入讲解。
• label标签
  ​ 通过label标签，可以指定文字相对应的表单空间，例如下面的示例，使用for属性对应input的id，这样当鼠标点击label标签的文字时，光标就会聚焦到相对的input标签之上。
  代码如下（示例）：

<div>
    <label for="username">用户名：</label>
    <input id="username" type="text">
</div>

• placeholder属性

placeholder可以设置文本框默认的提示信息

代码如下（示例）：

<div>
    <label for="username">用户名：</label>
    <input id="username" type="text" placeholder="请输入用户名">
</div>

• 下拉菜单

代码如下（示例）：

<form action="">
    <label>请选择性别</label>
    <select>
        <option>男</option>
        <option>女</option>
    </select>
</form>

select标签定义了网页中的下拉菜单，下拉菜单的选项用option标签。