FORM
HTML的重头戏
from标签 的三个最重要的属性action enctype method
action:发送form数据到目的地址
本身可以带参数表达式,如:
action = "b.jsp?id=5&name=ABC"
注意,参数表达式是用&隔开,而且参数没有type,就是说id=5,name=ABC,中的5,ABC没有类型之分。
method:就是发送,一般用的是发送(POST),因为get这个方法接收参数会地址栏显示传送的数据,换句话说就是不保密。另外好像上面action中的id=5,name=ABC,不会传送。(有待进一步证实)
enctype:拆开来看就是encode type,就是重编码,明文变密文,具体的算法不用关心,只要关心它可以让人看不懂就是了。它的三个属性值是:
1. application/x-www-form-urlencoded -- 窗体数据被编码为名称/值对.这是标准的编码格式.
2. multipart/form-data -- 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分.
3. text/plain -- 窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符.
下面介绍form标签内常用的标签:
input 标签 -- 代表HTML表单的单行输入域
input标签是单独出现的,<input />
属性.
Common -- 一般属性
type -- 代表一个输入域的显示方式(分为输入型,选择型,点击型)
maxlength -- 输入域最多可以输入文字的长度
src -- 当使用图片来表示按钮时,代表图片的位置(URI)
alt -- 代表表单的提示文字,当鼠标停留时
size -- 输入域的长度
value -- 输入域的值
accesskey -- 表单的快捷键访问方式
checked -- 如果是选择型的输入域,代表已经被选择
disabled -- 输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用
readonly -- 输入域可以选择,但是无法修改
tabindex -- 输入域的"tab"键遍历顺序
input---type 属性 -- 代表HTML表单,单行输入域(框)的表现方式
type 属性取值:
text -- 文字输入域(输入型)
password -- 也是文字输入域,但是输入的文字以密码符号'*'显示(输入型)
file -- 可以输入一个文件路径(输入型)
checkbox -- 复选框.可以选择零个或多个(选择型)
radio -- 单选框.只可以选择一个而且必须选择一个(选择型)
hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器
button -- 按钮(点击型)
image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src屬性)(点击型)
submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性來显示按鈕上的文字(点击型)
reset -- 重置按钮,可以把表单中的信息清空(点击型)
说明
输入型包括text,password,file
选择型包括checkbox,radio
点击型包括button,image,submin,reset
textarea 标签 -- 代表HTML表单多行输入域
textarea标签是成对出现的,以<textarea>开始,以</textarea>结束
属性:
Common -- 一般属性
cols -- 多行输入域的列数
rows -- 多行输入域的行数
alt -- 代表表单的提示文字,当鼠标停留时
accesskey -- 表单的快捷键访问方式
disabled -- 输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用
readonly -- 输入域可以选择,但是无法修改
tabindex -- 输入域,使用"tab"键的遍历顺序
select 标签 -- 选择列表标签
select标签是成对出现的,以<select>开始,以</select>结束
此标签中的每对option标签代表一个选择项
属性:
Common -- 一般属性
size -- 选择域的高度
multiple -- 可以有多个选择
disabled -- 输入框无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用
tabindex -- 使用"tab"键的遍历顺序
option 标签 -- 代表选择列表的一个选择项
option标签是成对出现的,以<option>开始,以</option>结束
属性:
Common -- 一般属性
label -- 说明选择项
value -- 说明选择项的值
selected -- 此选择项已经被选择
disabled -- 输入框无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用
tabindex -- 使用"tab"键的遍历顺序
optgroup 标签 -- 代表分组选择项的类别名(此类别名不能选择)
optgroup标签是成对出现的,以<optgroup>开始,以</optgroup>结束
属性:
Common -- 一般属性
label -- 说明选择项
说明,在optgroup标签中最好带着label属性,因为你肯定不想别人选择的是什么分类都不知道。
label 标签
提示表单的含义(标签说明)
label标签是成对出现的,以<label>开始,以</label>结束
两个label之间的内容,是要显示的文字
属性:
Common -- 一般属性
for -- 与此label描述的表单的id
accesskey -- 表单的快捷键访问方式
说明
可以使用label标签和for属性连接一个表单元素
标签可以被某些可视化浏览器渲染成可以点击的,点击后光标会显示在关联的表单元素内.
label标签是标准网页设计中重要的组成部分,起到了对表单进行语义化的作用.
现在开始表单分组
如果一个页面的表单项太多,我们最好把它们分组显示,就像使用p标签分开段落一样,可以使用fieldset与legend标签对表单内容分组.fieldset 标签 -- 对表单进行分组
fieldset标签是成对出现的,以<fieldset>开始,以</fieldset>结束
一个表单可以有多个<fieldset>,每对<fieldset>为一组,每组内容的描述可以使用legend标签说明
属性:
Common -- 一般属性
说明
legend的内容一般显示在左上角
通过CSS可以改变fieldset边框显示方式,也可以改变legend的显示方式.
legend 标签 -- 对表单的每组内容进行说明
legend标签是成对出现的,以<legend>开始,以</legend>结束
此标签在<fieldset>标签内
属性:
Common -- 一般属性
accesskey -- 表单的快捷键访问方式。
表单的学习基本上是要多练习,一些平时很少用的标签以及属性在关键时刻可以帮你节省不少的时间和开发难度。
posted on 2007-12-28 13:06
湘江夜游神 阅读(351)
评论(0) 编辑 收藏 所属分类:
HTML