3.6　表单小案例：制作求职申请表

有很多网站都需要用户通过注册成为会员。注册时，需要填写一些个人基本信息。因为只有完成注册，才能被认为是网站可追踪记录的用户。网站会根据我们的浏览行为，提供更加个性化的服务。注册时填写的表格可不是简单的表格，而是一个表单。这一节介绍表单的基本用法。

3.6.1　表单标签

任务描述：制作求职申请表，效果如图3.10所示。

操作步骤：在test文件夹下，新建04_jobApp.html，首先复制基本框架代码，然后输入主体代码如图3.11所示。代码完成后，可以在Chrome浏览器中打开查看效果。

我们跳过基本的框架代码，直接看主体代码行。

代码行8和39：＜form＞是表单标记，对齐方式为居中，表单中的数据一般都会需要提交到数据库中。因此，需要定义提交方式为post。关于表单的提交方式，稍后再谈。

代码行9：＜b＞元素已经说过，就是让文字加粗的元素，这个&nbsp是什么？啊，你发现了，这是空格，“求职申请”四个字之间都有一定的空格，你可以试试手动敲入空格，而不用&nbsp，那么空格是不会出来的。因为HTML会自动忽略代码中的空格，因此，若要输入空格，一定要用&nbsp，需要十个空格，就输入十个&nbsp。

代码行10：＜input＞是输入文本框标签，type指定类型是文本。

代码行11：＜input＞输入文本框，type指定类型是密码，就是不会显示出你的密码。

代码行12-20：＜select＞＜/select＞下拉列表元素，name是它的属性，值为province，用于与JavaScript程序交互。每一个选项都是＜option＞标签，选项的值是value，一般就用序号，今后将用于与程序交互。

代码行22：＜textarea＞是多行文本的输入块标签，name的属性名为message，一般用于发表很多文字内容的输入块，这里定义它的列为30个字符，行为10行。

代码行23-26：单选按钮，类型为radio，意味着这里三个选项，你只能选一个，眼尖的你一定发现了，性别的三个选项，“男”，“女”，“不愿透露”的name属性都是一样的，它就是通过这个来限定这一组值里只能有一个被选中。为了后续JavaScript程序的特定使用，又采用id属性和value属性把它们区别对待。

代码行27：还是＜input＞标签，不过类型为file，表示支持文件上传，同样有name属性。

代码行28：＜br＞换行，又一个单标记。注意：你手动敲入的换行浏览器可是不认的。

代码行29-33：＜select＞多选列表标签，就是在前面介绍过的籍贯标签中，用到的＜select＞加上一个属性multiple，就表示可以选择多个，按下shift键，就可以选择多个。

代码行36-37：这个按钮，有人说不对，按钮应该是button，怎么这里不是呢？因为输入框中提交和重置按钮是最常用的。因此，HTML就将它们设置为了默认的按钮，并且通过类型属性来指明。因此，提交就是type=“submit”，重置（清除）就是type=“reset”。不信，你试试按下这两个按钮。

代码行38-41：它们是距离最近的开始标签＜p＞、＜form＞、＜body＞和＜html＞对应的结束标签。

表单＜form＞一般见于用户注册，报名申请表等需要填写个人信息并提交至网站的应用，因此它的用途也是很广泛的。在表单中，最重要的标签是＜input＞，表单的意义就是允许用户输入，至于输入的类型，则可以通过type属性来指定。

祝贺你，已经完成了第一个接近50行代码量的任务。你一定奇怪为什么一上来就做任务，而不是先介绍标签的用法。根据多年的教学经验，我发现直接从代码任务开始，一方面可以帮你尽快找到上手的感觉；另一方面能更有助于形成事后思考和修改漏洞的习惯。所以，请别怀疑，跟着步骤走下去，慢慢你就会体会到代码只是一种实现网页的工具。

3.6.2　表单用法大揭秘

你一定被吓到了，要记那么多标签，实际上，我劝你不要记忆它们，最常用的其实只是3～5个，包括普通文本、密码和按钮等。这里你只需要记住以下的基本框架：

其中，type表示输入框的类型；name用于JavaScipt脚本中引用表单；value就是在没有输入任何值时的默认显示值。