![网页设计与网站建设完全实战手册](https://wfqqreader-1252317822.image.myqcloud.com/cover/459/27110459/b_27110459.jpg)
9.3 实战应用——制作网站注册页面
表单是网站的管理者与访问者进行交互的重要工具,一个没有表单的页面传递信息的能力是有限的,所以表单经常用来制作用户登录、会员注册及信息调查等页面。
在实际应用中,这些表单对象很少单独使用,一般一个表单中会有各种类型的表单对象,以便浏览者对不同类型的问题做出最方便、快捷的回答。因此,在这一节中,我们将会带着读者,一步一步亲手制作一个完整的电子邮件表单,效果如图9-45所示,具体的操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00417.jpg?sign=1739675738-D1DX2FHqHh4caCh4txgzasF0yCVNT8XD-0-916b2c7096160a748ef60de793b9aa20)
图9-45 电子邮件表单效果
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0354_0001.jpg?sign=1739675738-mNgOf79i2bNfj7BHjIvUzGh2HQGF2q3l-0-13c15a93bfa13ad656972b6af3b09de3)
01 打开网页文档,将光标置于页面中,如图9-46所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00418.jpg?sign=1739675738-s7aYl6EsQLh7CJ7OcGtEm4ZbEYBuUu6I-0-99342441f456e10ea931d1b323c0d309)
图9-46 打开网页文档
02 执行“插入”|“表单”|“表单”命令,插入表单,如图9-47所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00419.jpg?sign=1739675738-0UHSfIzkHKW7DqzWZe9FwYhm71sDRoT8-0-67109863643bddc712ae196be037a0e0)
图9-47 插入表单
03 将光标置于表单中,执行“插入”|“表格”命令,插入一个6行2列的表格,如图9-48所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00420.jpg?sign=1739675738-HxWb9DO5celRrCNGyYtrFszVQ03xpCfW-0-32691e88a958bd028555ac7fb30960bf)
图9-48 插入表格
04 将光标置于表格的第1行第1列单元格中,输入相应的文字,如图9-49所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00421.jpg?sign=1739675738-cNgpmaOY0u76BAh186qIAS5zIzFE6KOK-0-eae98db702b103c39f597948d8d13fcc)
图9-49 输入文字
05 将光标置于表格的第1行第2列单元格中,执行“插入”|“表单”|“文本”命令,插入文本域,如图9-50所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00422.jpg?sign=1739675738-Sncl8IvfSj1PMQaeNljdAEFb7Yl6i1WX-0-e11a7fa1c9bae21994c8d472854b3b61)
图9-50 插入文本域
06 将光标置于表格的第2行第1列单元格中,输入相应的文字,如图9-51所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00423.jpg?sign=1739675738-AhdtEGYKotO2SPlGYpGHNGQCCZgDXrvV-0-d221d6da79e8143c1429046846a0de02)
图9-51 输入文字
07 将光标置于表格的第2行第2列单元格中,执行“插入”|“表单”|“Tel”命令,插入Tel域,如图9-52所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00424.jpg?sign=1739675738-V0ITafoYY9hSUfh4OrhAUFq4PQTM6QLS-0-db2f6765a93e93b8d1ec4d4813d49f18)
图9-52 插入Tel域
08 将光标置于表格的第3行第1列单元格中,输入相应的文字,如图9-53所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00425.jpg?sign=1739675738-xELit0rQra6nKgW7opOQyIQ5GZmENxQv-0-c87cd4eff56488140b43d12418c1e3ac)
图9-53 输入文字
09 将光标置于表格的第3行第2列单元格中,执行“插入”|“表单”|“单选按钮”命令,插入单选按钮,如图9-54所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00426.jpg?sign=1739675738-N12kVrY0VY1TnAbDt41NzHegnAJww8g4-0-d6efd7a0061e28a7b80016c6c14a4e2e)
图9-54 插入单选按钮
10 将光标置于单选按钮的右边,输入相应的文字,如图9-55所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00427.jpg?sign=1739675738-jnaYD6Q1HVnSmjew9ptfuEXERHJFlQAt-0-72f55095a9fb8bcfbd52e81133efc131)
图9-55 输入文字
11 将光标置于文字的右边,插入其他单选按钮,并输入相应的文字,如图9-56所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00428.jpg?sign=1739675738-SVQ5DhEo2AG9hxAmb05p9jYOc1eOPhgl-0-998b99996125ebc5f53d91d5520a7f2d)
图9-56 插入其他单选按钮
12 将光标置于表格的第4行第1列单元格中,输入相应的文字,如图9-57所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00429.jpg?sign=1739675738-NYggiKVXRYqm8vUiNlEv9xY1txXwEGbY-0-fb6f0a714e099dc5eb7bd0a1aaa5a00b)
图9-57 输入文字
13 将光标置于表格的第4行第2列单元格中,执行“插入”|“表单”|“复选框”命令,插入复选框,如图9-58所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00430.jpg?sign=1739675738-jIpUkPC5uUL74JbD15f4eAmayWdSOycR-0-f05c25dab31f20fa449e698bb0b2d6f1)
图9-58 插入复选框
14 将光标置于复选框的右边,输入相应的文字,如图9-59所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00431.jpg?sign=1739675738-crXTNhX0UGzLlVPCnToIn2yop8j4ChyH-0-6530d8ebda563b0a34053606fdeab3a0)
图9-59 输入文字
15 将光标置于文字的右边,插入其他的复选框,并输入相应的文字,如图9-60所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00432.jpg?sign=1739675738-FBvm7cGANOTxKvbUJRbMA487hadEJHIt-0-2268163851adb1e8769c0bf1a2b8d01f)
图9-60 插入其他复选框
16 将光标置于表格的第5行第1列单元格中,输入相应的文字,如图9-61所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00433.jpg?sign=1739675738-6sw3jZ64cmORc3y600Nem9YcWjeRoEJ3-0-b5dc896bce04fe37c08c82a095a4b728)
图9-61 输入文字
17 将光标置于表格的第5行第2列单元格中,执行“插入”|“表单”|“文本区域”命令,插入文本区域,如图9-62所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00434.jpg?sign=1739675738-iuHHQtlWTjsXeuP3DDCwAeEr0tjZH51F-0-e8196c4f69503af93adfe61f56723bb5)
图9-62 插入文本区域
18 选中插入的文本区域,打开“属性”面板,在属性面板中设置相关属性,如图9-63所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00435.jpg?sign=1739675738-7Tn4PYomjYjYT6bqRApyKRybhFNY72pS-0-38dc6e8cdc5011d1ce36cab08ef82d34)
图9-63 设置文本区域
19 将光标置于表格的第7行第2列单元格中,执行“插入”|“表单”|“提交按钮”命令,插入提交按钮,如图9-64所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00436.jpg?sign=1739675738-wC36yYg0y6pLoy0OdcHISmsmUyqLMOQ2-0-5a47b93f0b89aeda60c27338c55fabe3)
图9-64 插入提交按钮
20 将光标置于提交按钮的右边,执行“插入”|“表单”|“重置按钮”命令,插入重置按钮,并在“属性”面板中设置相关属性,如图9-65所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00437.jpg?sign=1739675738-rynHjaxF6G0CY4CPQ5L5u7RfgPrlCEI7-0-139acf3b4167a131400ba7a94f709448)
图9-65 输入文字
21 保存文档,完成表单对象的制作,效果如图9-45所示。