web网页设计的表单 第1篇
<html>
这是一个段落。
这是另一个段落。
html>
示例运行结果如图所示。
图表格的嵌套
用户经常在网上看到一些会员注册页面、用户登陆页面、网上调查问卷页面、搜索工具页面等,这些页面是什么做的呢?不敢说完全是用表单做的,但肯定至少包含有表单。可见表单主要用来收集客户端相关信息,使网页具有交互功能。本节主要讨论如何使用HTML来创建表单,然后向表单中添加表单元素。网页中的表单用途很广,而且还在不断发展。下面我们就列举一些典型的表单应用:
Ø 在用户注册某种服务或事件时收集姓名、地址、电话号码、电子邮件和其他信息。
Ø 收集关于调查问卷信息。大部分提供服务性的网站都鼓励用户参与调查问卷,提供反馈信息。这些反馈信息除了维系良好的客户关系外,它还有助于改进和提高网站的服务质量,从而使网站的服务更具人性化,吸引更多的浏览者。
Ø 为网站提供搜索工具。提供各种信息的站点通常会为用户提供一个搜索框,使用户能够更快地找到想要的信息,比较著名的搜索网站:谷歌(()、百度()等。
如图就是一个典型的表单。
图 典型的表单
创建表单后,就可以在表单中放置元素以接受用户的输入。这些元素通常放在
一个表单可以向 Web服务器传递多个信息,但每个信息都需要有唯一的名称标识。因此,表单中的每一个表单元素都应有一个 name属性,用于指定表单元素的名称。这样 Web 服务器可以根据表单元素的名称来获取客户端传递给服务器的信息,未设置name属性的表单元素将不会被提交。如下图淘宝网的登录表单。
图 淘宝网的登录表单
表2-1-1
web网页设计的表单 第2篇
在实际的网页开发中通常采用post方式提交表单中的数据
radio:单选按钮
name:如果是一组,那么取相同的name
对于radio,value是必须的
checked:单选按钮默认选中的状态
checkbox:复选框
name:一组复选框有相同的name
value:值
checked:复选框默认选中状态
select:列表框
option:选项
value:表单提交的选项的值,如果不写默认提交option中的类容
selected:默认选中项
图片按钮
submit:提交按钮
reset:表单重置按钮
image:图片提交按钮
button:普通按钮,天生不具备任何功能,可通过js赋予功能
textarea:多行文本域
cols:显示的列数
rows:显示的行数
file:文件域
enctype=“multipart/form-data”:如果要上传文件必须加。它表示表单编码属性
type如果指定是email,会自动验证email地址格式是否正确
type指定是url,会自动验证url地址格式是否正确
number:表示是数字输入框
min:最小值
max:最大值
step:步进(每次加/减多少)
range:滑块
min:允许的最小值
max:允许的最大值
step:合法的数字间隔
search
表单在提交的时候需要提交,但是又不希望被用户看到,这样就需要用到隐藏域
type=hidden
readonly:只允许读,不允许修改
disabled:表示禁用
增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上
标签的for
属性应该与表单控件的id
属性值相同,以此来建立与表单控件之间的关联。如果元素直接包含了表单控件(如),则不需要使用for
属性,因为关联是隐式的。
表单验证好处:
减轻服务器的压力
保证数据的可行性和安全性
用户输入内容必须符合正则表达式所指的规则,否则不能提交表单
web网页设计的表单 第3篇
将元素的type属性设为checkbox就可以创建一个复选框。复选框用于站点访问者从一个列表项目中选择一项或多项内容,例如提交个人爱好信息。如果某信息有多个复选框,可以将它们命名为相同的名称,这样便于客户端脚本编程时访问。当然,也可以用不同的名称命名。属性checked可用于设置复选框的选中状态,只有当复选框为选中状态时,浏览器才会将选中的复选框的值和 name属性一起提交给服务器,否则不会提交任何复选框的内容。