![网页设计与网站建设完全实战手册](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=1739297799-dlFpVyQ60wsGQwCeOkKI8VlMLDy18iik-0-84f407d7507f40c8264581f4566dd895)
图9-45 电子邮件表单效果
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0354_0001.jpg?sign=1739297799-FDppg6lHnjEo1lNVDSu0E4qOWdjMe8sL-0-9c9c44d78b8bb05480d1a0b87cdb3362)
01 打开网页文档,将光标置于页面中,如图9-46所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00418.jpg?sign=1739297799-ch6C9CIDEbe34kNvFzEHHYBPWbCaYLsa-0-43206ec5c4b46e4c3fac600a6c80f08c)
图9-46 打开网页文档
02 执行“插入”|“表单”|“表单”命令,插入表单,如图9-47所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00419.jpg?sign=1739297799-oHa2Glks2IXB2pyWnPFqO6GrEtznyb35-0-2ceff7550cea2bb18d423db541a70be7)
图9-47 插入表单
03 将光标置于表单中,执行“插入”|“表格”命令,插入一个6行2列的表格,如图9-48所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00420.jpg?sign=1739297799-AS26uhpaeHIMVdgw2UpwONZiHYvUfSLJ-0-39cd136a54d636a984cc4da662f83570)
图9-48 插入表格
04 将光标置于表格的第1行第1列单元格中,输入相应的文字,如图9-49所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00421.jpg?sign=1739297799-FuQSrH9D0VvJvsCdgYPT26qagj9ssOeo-0-7982b1b2e869052024184a707b9b453e)
图9-49 输入文字
05 将光标置于表格的第1行第2列单元格中,执行“插入”|“表单”|“文本”命令,插入文本域,如图9-50所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00422.jpg?sign=1739297799-6x8l8gXF9Fq76vzGH2uuwpmOFvCAi9Lr-0-05c0b929828d79c6913947ede25b8a7a)
图9-50 插入文本域
06 将光标置于表格的第2行第1列单元格中,输入相应的文字,如图9-51所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00423.jpg?sign=1739297799-v92CD9etQLvLAjUOm3IwJHN0AHBwp2no-0-4c8ec37e4cafc2be6b246e2e23dc67a0)
图9-51 输入文字
07 将光标置于表格的第2行第2列单元格中,执行“插入”|“表单”|“Tel”命令,插入Tel域,如图9-52所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00424.jpg?sign=1739297799-7lightdOZpViR98ViQr9FbxhVcMzTP13-0-192b0f31f2373225679aaef557befc08)
图9-52 插入Tel域
08 将光标置于表格的第3行第1列单元格中,输入相应的文字,如图9-53所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00425.jpg?sign=1739297799-My9eQ80xGo85gWYXj0cBFx9gt1uAX20b-0-d1cea63b0ad14c6ae3a7d5c9429999d4)
图9-53 输入文字
09 将光标置于表格的第3行第2列单元格中,执行“插入”|“表单”|“单选按钮”命令,插入单选按钮,如图9-54所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00426.jpg?sign=1739297799-mNjeJTjuOXudjbd5MgowLSEq82htukGm-0-cc7b5390b5af55273325f0c40d6b8c1c)
图9-54 插入单选按钮
10 将光标置于单选按钮的右边,输入相应的文字,如图9-55所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00427.jpg?sign=1739297799-Zn6Fahl8Vl2uij36dOx3GV8UFgZRT5Qr-0-51210e0c7d6a0ea76454de605e852ec6)
图9-55 输入文字
11 将光标置于文字的右边,插入其他单选按钮,并输入相应的文字,如图9-56所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00428.jpg?sign=1739297799-lsrMWAppCS6YoPulVgvfdCHYBKSXES7s-0-a3300297bf2aed55bf8570da1b525476)
图9-56 插入其他单选按钮
12 将光标置于表格的第4行第1列单元格中,输入相应的文字,如图9-57所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00429.jpg?sign=1739297799-b0VDv6MWxGYkca2Y91yBiJ2so2FDAPra-0-c63f0bd51a9e8c3b7d31199668173a4a)
图9-57 输入文字
13 将光标置于表格的第4行第2列单元格中,执行“插入”|“表单”|“复选框”命令,插入复选框,如图9-58所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00430.jpg?sign=1739297799-GHn0cxV6Iae9neTi56UvRQiKl0ADUDe0-0-7f45394972d698ca0171416f880da052)
图9-58 插入复选框
14 将光标置于复选框的右边,输入相应的文字,如图9-59所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00431.jpg?sign=1739297799-uv0ZnaiTbac3sZnxuZMk2GqyOqG9sn3I-0-68065ba70f45261096d8b8766df33900)
图9-59 输入文字
15 将光标置于文字的右边,插入其他的复选框,并输入相应的文字,如图9-60所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00432.jpg?sign=1739297799-lxE3yBlBtCBfrwCdWFZiMY2Sg1i6indL-0-a9fc0123c039ed621cb98f1e0421083d)
图9-60 插入其他复选框
16 将光标置于表格的第5行第1列单元格中,输入相应的文字,如图9-61所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00433.jpg?sign=1739297799-8u7JFi6bhkLzlITimPVU75qjvXR2atf2-0-53d44b07588a86860db5b2aabea2071b)
图9-61 输入文字
17 将光标置于表格的第5行第2列单元格中,执行“插入”|“表单”|“文本区域”命令,插入文本区域,如图9-62所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00434.jpg?sign=1739297799-qk4FTDOnsDnB2vbR0fKVhRR96tE2ZGLl-0-03ba005879634eb131ad9b1330e249dd)
图9-62 插入文本区域
18 选中插入的文本区域,打开“属性”面板,在属性面板中设置相关属性,如图9-63所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00435.jpg?sign=1739297799-FX9t5AQ0wJ0SAsdsqcRc0zNpbivT7Fi3-0-4ab1f2d88aab9c0ca543d11043b1f403)
图9-63 设置文本区域
19 将光标置于表格的第7行第2列单元格中,执行“插入”|“表单”|“提交按钮”命令,插入提交按钮,如图9-64所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00436.jpg?sign=1739297799-a72cVmhlcKiGGiO44QeE9xOf009J2pKN-0-bde5a359c62a7d70f57146641e5f6192)
图9-64 插入提交按钮
20 将光标置于提交按钮的右边,执行“插入”|“表单”|“重置按钮”命令,插入重置按钮,并在“属性”面板中设置相关属性,如图9-65所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00437.jpg?sign=1739297799-aWC98Z1sHdxikWtPOwwnTxMv2cIWzNJ1-0-a3ffdb9a5e1602b79256ad899461c621)
图9-65 输入文字
21 保存文档,完成表单对象的制作,效果如图9-45所示。