HTML5+CSS3网页设计与制作单元4 表单应用与制作注册登录页面

HTML5+CSS3网页设计与制作单元4单应用与制作注册登录页面我们都曾申请过E-mail邮箱，在申请过程必须在网页上输入个人信息，然后提交信息，提交成功后，才能获得E-mail邮箱。这个用于获取信息的网页称为表单，通常一个表单中包含多个对象，有时也称为控件或表单元素，例如用于输入文本的文本域、用于发送命令的按钮、用于选择项目的单选按钮和复选框、用于显示列表项的列表框等。一个网站不仅需要各种供用户浏览的网页，还需要与用户进行交互的表单。表单实现了浏览器和服务器之间的信息传递，它使网页由单向浏览变成了双向交互。表单是实现用户调查、产品订单和对象搜索等功能的重要手段。利用表单处理程序，可以收集、分析用户的反馈意见，做出科学的、合理的决策。本章导读Thechapter’sintroduction目录导航渐进训练任务4-1制作与美化电脑版用户注册网页0401.html探索训练任务4-3制作触屏版用户注册网页0403.html析疑解惑单元小结任务4-2制作与美化电脑版用户登录网页0402.html任务4-4制作触屏版用户登录网页0404.html任务4-1制作与美化电脑版用户注册网页0401.html任务描述制作与美化电脑版用户注册网页0401.html，其浏览效果如图4-1所示。图4-1　网页0401.html的浏览效果【任务4-1-1】创建电脑版用户注册网页任务描述①创建网页文档040101.html，且在该网页中插入1个表单域。②在表单域中插入1个9行3列的表格。③在表格中插入6个单行文本域。④在表格中插入2个密码文本域。⑤在表格中插入2按钮。⑥在表格中插入1个下拉式菜单。⑦在表格中插入1个单选按钮组。⑧在表格中插入1个复选框。⑨在表格中插入1个图像域。图4-2　网页文档040101.html的浏览效果网页文档040101.html的浏览效果如图4-2所示。【任务4-1-1】创建电脑版用户注册网页1．创建网页文档且保存任务实施在站点“易购网”中创建文件夹“04表单应用与制作注册登录页面”，在该文件夹中创建文件夹“0401”，并在文件夹“0401”中创建子文件夹“CSS”和“image”，将所需要的图片文件拷贝到“image”文件夹中。在文件夹“0401”中创建网页文档040101.html。【任务4-1-1】创建电脑版用户注册网页每个表单由一个表单域和若干个表单控件组成，制作表单页面的第一步是插入表单域。打开网页文档040101.html，然后选择菜单命令【插入】→【表单】→【表单】，如图4-3所示，在网页中的光标处插入一个表单域。2．插入表格域图4-3　插入“表单”的菜单命令【任务4-1-1】创建电脑版用户注册网页一个表单域插入到网页中，在编辑窗口中显示为一个红色虚线框，其他的表单对象必须要放入这个框内才能起作用。如果看不见插入到页面中的标记表单域的红色虚线区域，则可以选择菜单命令【查看】→【可视化助理】→【不可见元素】，使红色虚线可见，如图4-4所示。2．插入表格域图4-4　“可视化助理”菜单【任务4-1-1】创建电脑版用户注册网页将光标置于表单域中，即可看到表单域的【属性】面板，在该【属性】面板中设置表单域的属性。【属性】面板上各项属性的设置如下所述。3．设置表单域的属性（1）“ID”：（2）“Action”（3）“Target”（4）“Method”（5）“Enctype”有2个选项：“application/x-www-form-urlencoded”和“multipart/formdata”【任务4-1-1】创建电脑版用户注册网页对应的HTML代码如下所示：表单域的属性设置完成后，其【属性】面板如图4-5所示。图4-5　表单域的属性设置【任务4-1-1】创建电脑版用户注册网页在网页040101.html的表单域中插入一个9行3列的表格，该表格的id设置为“table01”，“宽”设置为“700像素”，“边框”设置为“1”，“填充”设置为“3”，“间距”设置为“0”，“对齐”方式设置为“居中对齐”，对应的【属性】面板如图4-6所示。4．在网页中插入表格图4-6　表单域的表格属性设置【任务4-1-1】创建电脑版用户注册网页将表格的第1列的宽度设置为130px，水平对齐方式设置为右对齐，第2列的宽度设置为220px。在表格中输入必要的提示文字，如图4-7所示。图4-7　在9行3列表格中输入必要的提示文字【任务4-1-1】创建电脑版用户注册网页在表单的文本域中，可以输入文本、数字或字母。输入的内容可以单行显示，也可以是多行显示，还可以将密码以星号形式显示。5．插入单行文本域（1）打开【插入】面板组，切换到【表单】面板。（2）将光标置于“用户名：”行的第2列的单元格中。（3）在【表单】面板中单击【文本】按钮，如图4-8所示。在光标位置插入1个文本域，默认插入的是单行文本域。图4-8　“表单”面板中按钮【任务4-1-1】创建电脑版用户注册网页5．插入单行文本域图4-9　单行文本域的“属性”设置选中插入的文本域，在“文本域”属性面板中设置文本域的属性，在“最多字符数”文本框中输入“18”，设置文本框最多能输入9个汉字（18字节的长度），类型为默认设置“单行”。文本域的属性设置结果如图4-9所示。【任务4-1-1】创建电脑版用户注册网页5．插入单行文本域如果在文本框【属性】面板中的“类型”选项组中选择“密码”单选按钮，则文本框将转换成密码框，密码框和文本框的设置完全一致，只是在浏览时，密码框中输入字符时，字符将自动以符号“*”或“·”显示，文本内容被隐藏，从而起到保密作用。在“密　码：*”行的第2个单元格中和“再次输入密码：*”行的第2个单元格中分别插入1个“单行文本域”，这两个文本框的类型为“密码”，“最多字符数”设置为“16”，名称分别为“password”和“passwordconfirm”。在“密码保护问题答案：*”行的第2个单元格中插入1个“单行文本域”，该文本框的类型为“单行”，“最多字符数”设置为“30”，其名称为“passwordanswer”。【任务4-1-1】创建电脑版用户注册网页5．插入单行文本域在“出生日期：*”行的第2个单元格中插入3个“单行文本域”，这3个文本框的类型为“单行”，其名称分别为“year”“month”和“day”，“最多字符数”分别设置为“4”“2”和“2”。在每个文本域后分别输入文字“年”“月”和“日”。第1个“年”对应的文本域的【属性】面板如图4-10所示。图4-10　“年”对应文本域的属性设置在“请输入右边的字符：*”行的第2个单元格中插入1个“单行文本域”，该文本框的类型为“单行”，“最多字符数”设置为“16”。【任务4-1-1】创建电脑版用户注册网页6．插入表单按钮表单按钮的作用是控制表单操作，单击表单中的“按钮”将表单数据提交到服务器，或者将表单中数据恢复到初始状态。将光标置于用户名文本域的右侧，在【表单】面板中单击【按钮】，即可在光标位置插入一个按钮。选中表单域中所插入的按钮，在【属性】面板中设置其属性，在“动作”单选按钮组中选择“无”单选项，在“值”文本框中输入“检测”，使按钮上显示的文字为“检测”；属性设置结果如图4-11所示。图4-11　“检测”按钮的属性设置【任务4-1-1】创建电脑版用户注册网页6．插入表单按钮用同样的方法在表格的第9行第3个单元格中插入另一个按钮，按钮名称为“create_account”，“值”文本框中输入“创建账号”，使按钮上显示的文字为“创建账号”，“动作”类型选择“提交表单”，属性设置结果如图4-12所示。图4-12　“创建账号”按钮的属性设置【任务4-1-1】创建电脑版用户注册网页7．插入下拉式菜单表单的下拉式菜单最大的好处是可以在有限的空间内为用户提供更多的选项，非常节省版面。“下拉式菜单”默认只显示一项，该项也是活动选项，用户可以单击打开下拉菜单，但只能选择其中的一项。（1）将光标置于“密码保护问题：*”行的第2个单元格中。（2）在【表单】面板中单击【选择】按钮，即可在光标插入“”。单击按钮，为菜单添加一个新项，在此分别添加“请选择密码提示问题”“您母亲的姓名是?”“您父亲的姓名是?”“您最要好朋友的姓名是?”和“您的出生地是?”等5项，如图4-13所示。也可以单击按钮，删除已有的菜单选项。单击按钮或按钮，为菜单选项调整顺序。【任务4-1-1】创建电脑版用户注册网页7．插入下拉式菜单在【Select]属性面板单击【列表值】按钮，弹出【列表值】对话框，在该对话框中，中间的列表项中列出了该菜单所包含的所有选项，每一行代表一个选项。“项目标签”用来设置每个选项所显示的文本，“值”设置的是选项的值。（3）添加列表值。图4-13　在菜单【列表值】对话框中添加菜单选项在“初始化时选定”列表项中选择第1项“请选择密码提示问题”，如图4-14所示，作为浏览时初始状态下默认的选项，如果这里没有选择，则浏览时菜单未被选择之前为空。【任务4-1-1】创建电脑版用户注册网页7．插入下拉式菜单（4）在【列表值】对话框中单击【确定】按钮，返回到【属性】面板，这时“初始化时选定”列表项中会出现刚设置的菜单选项，如图4-14所示。图4-14　“所在省份”菜单的属性设置（5）保存网页，预览其效果。（1）将光标置于“性　别：*”行的第2个单元格中。（2）在【表单】面板中单击【单选按钮组】按钮，弹出图4-15所示的【单选按钮组】对话框。【任务4-1-1】创建电脑版用户注册网页8．插入单选按钮组使用单选按钮组，可以一次插入一组单选按钮。图4-15　【单选按钮组】对话框【任务4-1-1】创建电脑版用户注册网页8．插入单选按钮组（3）单击按钮，向单选按钮组中添加新的单选按钮，然后单击“标签”一列的文字，输入新的内容，可以使用汉字，这里分别输入“男”和“女”；单击“值”一列的文字，输入需要的值，只能使用英文半角字符，这里分别输入“man”和“woman”。单选按钮组的属性设置完成，如图4-16所示。图4-16　添加了2个单选按钮的【单选按钮组】对话框【任务4-1-1】创建电脑版用户注册网页8．插入单选按钮组（4）单击【确定】按钮，在光标位置插入单选按钮组，删除换行符
，将2个单选按钮调整为同一行，然后通过插入多个空格，使其对齐，如图4-17所示。图4-17　“性别”单选按钮组的布局（5）设置单选按钮属性。选中单选按钮组中的一个单选按钮“男”，然后在属性面板中设置其属性，如图4-18所示。图4-18　单选按钮组中单个单选按钮的属性设置【任务4-1-1】创建电脑版用户注册网页9．插入复选框复选框允许在一组选项中选择多个选项，用户可以选择任意多个合适的选项。复选框对每个单独的响应进行“关闭”或“打开”状态切换。（1）将光标置于第9行的第2个单元格中。（2）在【表单】面板中的单击【复选框】按钮，即可在光标位置插入一个复选框。（3）设置复选框的属性。单击选择复选框，然后在属性面板中设置其属性，将复选框的“Value”设置为“true”，当表单被提交时，被选中复选框对应的值被传递给服务器的应用程序，“Checked”设置为“已勾选”状态，复选框的属性设置如图4-19所示。图4-19　复选框的属性设置【任务4-1-1】创建电脑版用户注册网页10．插入图像域表单中也可以插入图像按钮，使表单按钮更加美观。图4-20在【选择图像源文件】对话框中选择图像文件将光标置于“请输入右边的字符：*”行第3个单元格中，在【表单】面板中的单击【图像域】按钮，即可在光标处插入一个图像域。单击选择图像按钮，然后在属性面板中设置其属性，单击【浏览文件】按钮，打开【选择图像源文件】对话框，在该对话框中选择一个图像文件“codeImg.gif”，如图4-20所示，然后单击【确定】按钮即可。【任务4-1-1】创建电脑版用户注册网页10．插入图像域该图像按钮的属性设置如图4-21所示。图4-21　图像按钮的属性设置保存网页040101.html，然后按快捷键【F12】浏览该网页，其浏览效果如图4-2所示。11．保存网页与浏览网页效果【任务4-1-2】美化电脑版用户注册网页任务描述①创建外部样式文件global.css，在该样式文件中定义必要的CSS样式。②创建外部样式文件main1.css，在该样式文件中定义必要的CSS样式。③创建网页文档0401.html，该网页中所包含的内容与网页040101.html类似，网页0401.html主要应用CSS样式对表格、单元格和表单控件进行美化。④编写代码实现以下功能：浏览网页时，当鼠标指针指向“用户名”和“密码”文本框时，该文本框自动获取焦点，并且文本框的背景颜色和边框颜色自动改变。当鼠标指针离开该文本框，则自动恢复默认的背景颜色和边框颜色。⑤编写代码实现以下功能：游览网页时，在“字符”文本框中单击时，该文本框获取焦点，且背景颜色和边框颜色自动改变。当该文本框失去焦点时，则自动恢复默认的背景颜色和边框颜色。【任务4-1-2】美化电脑版用户注册网页1．创建外部样式文件global.css任务实施创建外部样式文件global.css，保存在文件夹“0401\css”中，在该样式文件中定义必要的CSS样式，对应的样式代码如表4-1所示。010203040506*{padding:0px;margin:0px;}body{CSS代码行号表4-1　外部样式文件global.css中的样式代码070809101112font-size:12px;font-family:"宋体",verdana,arial,helvetica,sans-serif;background-color:#fff;}CSS代码行号【任务4-1-2】美化电脑版用户注册网页13141516171819202122a{color:#0679e4;text-decoration:underline;}label{cursor:pointer;}table{table-layout:fixed;CSS代码行号表4-1　外部样式文件global.css中的样式代码23242526272829303132padding:0px;}table,tr,td{border-width:0px;border-collapse:collapse;border-spacing:0px;}.fri{float:right;}CSS代码行号【任务4-1-2】美化电脑版用户注册网页2．创建外部样式文件main1.css创建外部样式文件main1.css，保存在文件夹“0401\css”中，在该样式文件中定义必要的CSS样式，对应的样式代码如表4-2所示。01020304050607080910.content{width:964px;height:auto;margin:0pxauto;text-align:center;}.main-cont{width:870px;padding:5px0px;CSS代码行号表4-2　外部样式文件main1.css中的样式代码11121314151617181920margin:0pxauto;}.cont-tab{width:870px;margin-bottom:5px;border-left:1pxsolid#ccc;border-bottom:1pxsolid#ccc;}CSS代码行号【任务4-1-2】美化电脑版用户注册网页212223242526272829303132333435.cont-tabtd{padding:10px5px;border-top:1pxsolid#ccc;border-right:1pxsolid#ccc;height:30px;line-height:150%;}.cont-tabtd.td1{font-size:14px;text-align:right;width:200px;}.cont-tabtd.td2{CSS代码行号表4-2　外部样式文件main1.css中的样式代码363738394041424344454647484950text-align:left;vertical-align:middle;width:260px;}.cont-tabtd.td3{width:auto;text-align:left;}.fle{width:205px;font-weight:bold;float:left;}CSS代码行号【任务4-1-2】美化电脑版用户注册网页515253545556575859606162636465input.ipt-normal{border-color:#a0b4c5;background-color:#fff;}.cont-tabtd.td2.inp{font-size:14px;line-height:16px;vertical-align:middle;width:95%;height:20px;border-color:#727272;padding:4px2px2px;border-width:1px;border-style:solid;CSS代码行号表4-2　外部样式文件main1.css中的样式代码666768697071727374757677787980}.nes{font-size:12px;color:#c00;line-height:30px;}input.ipt-focus{border-color:#727272background-color:#fffbd5;}.btn-jc{font-size:14px;color:#1f79a7;CSS代码行号【任务4-1-2】美化电脑版用户注册网页818283848586878889909192939495background-image:url(../images/04bg.jpg);background-repeat:no-repeat;background-position:-468px-146px;vertical-align:middle;width:43px;height:26px;margin-top:2px;border-width:0px;cursor:pointer;}.cont-tabtd.td2.sel{font-size:14px;color:#666;width:95%;CSS代码行号表4-2　外部样式文件main1.css中的样式代码96979899100101102103104105106107108109110}.btn-submit{background-image:url(../images/04bg.jpg);background-repeat:no-repeat;background-position:-9px-219px;width:117px;height:41px;margin:10px;border-width:0px;cursor:pointer;}td.codeimgimg{border:#e7e7e71pxsolid;CSS代码行号【任务4-1-2】美化电脑版用户注册网页111112113114115116117118119120121vertical-align:middle;}td.codeimga{text-decoration:underline;}#authcode{border-top:#fff0pxgroove;border-right:#fff0pxgroove;border-left:#fff0pxgroove;CSS代码行号表4-2　外部样式文件main1.css中的样式代码122123124125126127128129130131132}.btn-submit-act{background-image:url(../images/04bg.jpg);background-repeat:no-repeat;background-position:-126px-219px;width:117px;height:41px;margin:0px;border-width:0px;}CSS代码行号【任务4-1-2】美化电脑版用户注册网页3．创建网页文档0401.html创建网页文档0401.html，保存在文件夹“0401”中，在网页中插入Div标签对网页元素进行布局，应用CSS样式对表格、单元格和表单控件进行美化，对应的HTML代码如表4-3所示。表4-3　网页0401.html对应的HTML代码0102030405060708用户名：*HTML代码行号【任务4-1-2】美化电脑版用户注册网页表4-3　网页0401.html对应的HTML代码09101112131415161718192021