网页设计与开发第4章表单的使用.ppt

运行本实例，将显示如图4-5所示的效果。 图4-5 在页面中使用复选框 在网页中按钮也很常见，在提交页面、恢复选项时常常用到。普通按钮一般情况下要配合脚本来进行表单处理。具体语法如下： input type=”button” name=”field_name” value=”button_text” field_name：普通按钮的名称。 button_text：按钮上显示的文字。 4.3.5 普通按钮button 提交按钮是一种特殊的按钮，在单击该类按钮时可以实现表单内容的提交。具体语法如下： input type=”submit” name=”field_name” value=”submit_text” field_name：提交按钮的名称。 submit_text：按钮上显示的文字。 【例4-5】 在页面中分别创建一个普通按钮和一个提交按钮，普通按钮用来关闭该页面，提交按钮用来提交表单。代码如下所示。 form action=mailto:mingrisoft@ !-- 表单提交到一个邮箱地址 -- 提交按钮：input type=submit value=提交表单页面 /br / !-- 使用submit提交表单 -- !-- onclick为鼠标单击事件，window.close()为关闭该页面的方法 -- 普通按钮：input type=button value=关闭当前页面 onclick=window.close(); / /form 4.3.6 提交按钮submit 运行本实例，将显示如图4-6所示的效果。 图4-6 单击普通按钮的效果 单击“重置”按钮后，可以清除表单的内容，恢复默认的表单内容设定。具体语法如下： input type=”reset” name=”field_name” value=”reset_text” field_name：重置按钮的名称。 reset_text：按钮上显示的文字。 【例4-6】 在填写信息时，常常有填错的时候，这时可以创建一个重置按钮，用来清除用户在页面中输入的信息。代码如下所示。 form h3 align=center人口调查/h3 姓名：input type=”text” name=”username” size=20 br / 性别：input type=”text” name=”sex” size=4 maxlength=1 nbsp;nbsp; 年龄：input type=”text” name=”sex” size=4 maxlength=3 br / 居住地址：input type=”text” name=”address” size=50 value=吉林省长春市br / input type=submit value=提交 / input type=reset value=重置 / /form 4.3.7 重置按钮reset 运行本实例，将显示如图4-7所示的效果。 图4-7 单击“重置”按钮清除用户输入信息 - 图像域是指可以用在提交按钮位置上的图片，这幅图片具有提交按钮的功能。使用默认的按钮形式往往会让人觉得单调。如果网页使用了较为丰富的色彩，或稍微复杂的设计，再使用表单默认的按钮形式甚至会破坏整体的美感。这时，可以使用图像域，创建和网页整体效果相统一的图像提交按钮。具体语法如下： input type=”image” name=”field_name” src=”image_url” field_name：图像域的名称。 image_url：图片的路径。 【例4-7】 大家在浏览网页的时候看到很多好看的按钮，其实大部分的按钮都是一张图片，现在我们创建一个登录页面，同时为页面加入一个图片按钮。代码如下所示。 form h3 align=center用户登录/h3 用户名称：input type=text name=username /br / 用户密码：input type=password name=pwd /br / input type=image name=img src=images/pic.bmp / /form 4.3.8 图像域image 运行本实例，将显示如图4-8所示的效果。 图4-8 带图片按钮的登录界面 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以便于被处理表单的程序所使用。浏览者单击“发送”按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。具体语法如下： i