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属性一起提交给服务器，否则不会提交任何复选框的内容。