2.5 表单

学完表格，接着学习另一个常用的标签：表单。网页中通常使用表单提交数据，需要从客户端发起请求至服务器端，然后服务器端给出响应。下面，我们对创建表单涉及的标签进行简单介绍。

● <form>标签：用于创建一个表单。在<form>标签内，通常会放置一个或多个专门用于表单的标签，这些表单标签用于提供输入信息的不同方式，如文本框、单选、多选、下拉菜单等。

● <input> 标签：用于创建一个文本框。<input>标签可以设置name属性给该标签命名；设置type属性用来定义<form>标签中输入数据的类型，包括4种属性值，分别是text（文本输入框）、password （密码框）、radio（单选框）和checkbox（复选框）；还可以设置value属性值，用来表示文本输入框中默认显示的内容。

● <select>标签：用来实现下拉列表。该标签可以包含一个或多个<option>标签，用来表示下拉列表中的项。

● <textarea>标签：用来表示文本域。文本域可以用来输入多行文本，输入的内容中允许换行。

● <button>标签：用于创建一个提交按钮。

图2-46就是一个经典的用户登录表单，创建test_form.html文件，示例代码如下。

代码中定义了两个文本框，文本框类型分别是文本和密码。运行代码查看效果，如图2-46所示。

图2-46 用户登录页面

此时输入信息，在用户名对应文本框中显示的是用户名文本，在密码对应文本框中无论输入什么都以“*”来显示，如图2-47所示。

图2-47 输入用户名和密码

需要注意的是，虽然密码框在表单中展示为占位符“*”，好像被加密了，但是如果提交表单后就会发现实际上并没有被加密。提交表单后，查看浏览器地址栏，如图2-48所示。

图2-48 提交表单后，查看浏览器地址栏