表单是可以把浏览者输入的数据传送到服务器端的程序(比如ASP,PHP)的HTML元素,服务器端程序可以处理表单传过来的数据,从而进行一些动作.
表单用form标签来定义,form表单只要有以下几个属性:
name--用来标识这个表单,在javascript中可以通过 document.表单名 来取得这个表单
action--浏览者输入的数据被传送到的地方.
method--表示提交方式,可以选择post和get,默认为get方式.两种方式的区别:
post--所有提交的参数都会隐藏,没有参数的大小限制,建议使用该方式
get--所有提交参数都会在地址栏显示,参数总量最大4-5K.不建议使用
enctype--表示表单的封装方式,只有在进行文件上传时才会使用,当执行文件上传时,必须将这个值设置为 enctype="multipart/form-data"
onsubmit--当表单提交时自动执行的javascript事件,一般在需要进行提交验证时使用.
input标签
input标签代表html表单的单行输入域,input标签分为3种类型
1.输入型--包括text,password,file.
2.选择型--包括checkbox和radio
3.点击型--包括button,image,sbumit,reset.
其中除了name属性是必选的以外，其他属性都是可选的。这些属性的功能和用法介绍如下：
name--该属性用于指定保存用户输入文本的变量和名称
title--该属性用于input元素的标签，通常是位于输入框前的提示信息。
type--用于指定文本输入区的类型.
value--该属性用于指定name属性所定义变量的值，它将显示在输入框中。
default--该属性用于指定name属性所定义变量的默认值。
format--该属性用于格式化输入的数据。
maxlength--该属性用于指定用户可输入字符串的最大长度。该属性的上限为256，最多不能超过256个字符。
emptyok--用于指定用户是否可以不在输入框内输入内容。
size--该属性用于指定输入框的宽度，宽度值为字符个数。
tabindex--用于指定多个输入框存在时，类似于HTML中Tab键的具体位置。
示例:
<input name="variable" title="label" type="type" value="value" default="default" format="specifier" emptyok="false|true" size="n" maxlength="n" tabindex="n"/>
input标签的type属性值有以下几种:
text -- 文字输入域(输入型)
password -- 也是文字输入域,但是输入的文字以密码符号'*'显示(输入型)
file -- 可以输入一个文件路径(输入型)
checkbox -- 复选框.可以选择零个或多个(选择型)
radio -- 单选框.只可以选择一个而且必须选择一个(选择型)
hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器
button -- 按钮(点击型)
image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src屬性)(点击型)
submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性來显示按鈕上的文字(点击型)
reset -- 重置按钮,可以把表单中的信息清空(点击型)
input标签的checked属性
checked是使选择型输入域或者框被选中.如:<input type="checkbox" id="11" name="22" checked="checked" />
input标签的disabled属性
disabled属性是禁止对输入域进行操作.<input type="checkbox" id="11" name="22" disabled="disabled" />
input标签的disabled属性
readonly属性表示只读(只能看到,不能修改)的输入域(框).<input type="checkbox" id="11" name="22" readonly="readonly" />
textarea标签
textarea标签代表html表单的多行输入域.有以下属性:
cols--多行输入域的列数
rows--多行输入域的行数
accesskey--表单的快捷键访问方式
disabled--输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用
readonly--输入域可以选择,但是无法修改
tabindex--输入域,使用"tab"键的遍历顺序
如:<textarea cols="50" rows="10" id="jianyi" name="jianyi">默认值,可有可无</textarea>
select标签
select标签可创建单选或多选菜单.主要属性有以下几种
size -- 选择域的高度
multiple -- 可以有多个选择
disabled -- 输入框无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用
tabindex -- 使用"tab"键的遍历顺序
name --规定下拉列表的名称。
示例:
<select size="1" id="select" name="select">
<option>北京市</option>
<option>上海市</option>
<option>天津市</option>
<option>重庆市</option>
</select>
select标签下的option标签
代表选择列表的一个选择项,属性如下:
label -- 说明选择项
value -- 说明选择项的值
selected -- 此选择项已经被选择
disabled -- 输入框无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用
tabindex -- 使用"tab"键的遍历顺序
select标签下的optgroup标签
optgroup标签代表分组选择项的类别名(此类别名不能选择),有个label属性,是选择项的标题,对选择项进行说明.
示例:
<select id="WebDesign" name="WebDesign">
<optgroup label="client">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="javascript">javascript</option>
</optgroup>
<optgroup label="server">
<option value="PHP">PHP</option>
<option value="ASP">ASP</option>
<option value="JSP">JSP</option>
</optgroup>
<optgroup label="database">
<option value="Access">Access</option>
<option value="MySQL">MySQL</option>
<option value="SQLServer">SQLServer</option>
</optgroup>
</select>
label标签
label标签是为 input 元素定义标注.
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
示例:
<form>
<label for="name">姓名</label>
<input type="text" id="name" />
</form>
fieldset和legend标签
fieldset 标签--对表单进行分组
legend 标签 -- 对表单的每组内容进行说明
表单综合示例:
<form id="xinxi" action="chuli.php" method="post">
<p>
<fieldset>
<legend>姓名密码单行输入</legend>
<label for="name">姓名:<input type="text" id="name"/></label>
<label for="password">密码:<input type="password" id="password"/></label>
<label for="guoji">国籍:<input type="text" id="guoji" value="中国" readonly="readonly" /></label>
</fieldset>
</p>
<p>
<fieldset>
<legend>性别单选</legend>
<label for="nan">男:<input type="radio" name="sex" id="nan"/></label>
<label for="nv">女:<input type="radio" name="sex" id="nv"/></label>
<label for="baomi">保密:<input type="radio" name="sex" id="baomi"/></label>
</fieldset>
</p>
<p>
<fieldset>
<legend>爱好多选</legend>
<label for="xuexi">学习<input type="checkbox" name="aihao" id="xuexi" checked="checked" /></label>
<label for="lvyou">旅游<input type="checkbox" name="aihao" id="lvyou" /></label>
<label for="diaoyu">钓鱼<input type="checkbox" name="aihao" id="diaoyu" /></label>
<label for="zuguo">祖国<input type="checkbox" name="aihao" id="zuguo" checked="checked" disabled="disabled" /></label>
</fieldset>
</p>
<p>
<fieldset>
<legend>单行单选下拉列表</legend>
<label for="shengfen">选择省份</label>
<select size="1" name="xuanze" id="shengfen">
<option value="1">山东省</option>
<option value="2">河北省</option>
<option value="3" selected="selected">江苏省</option>
<option value="4">浙江省</option>
<option value="5">安徽省</option>
<option value="6">湖南省</option>
</select>
</fieldset>
</p>
<p>
<fieldset>
<legend>多行单选或ctrl单击多选下拉列表</legend>
<label for="chengshi">选择城市</label>
<select size="5" name="xuanze" multiple="multiple" id="chengshi">
<option value="1">济南市</option>
<option value="2">石家庄市</option>
<option value="3" selected="selected">南京市</option>
<option value="4">杭州市</option>
<option value="5">合肥市</option>
<option value="6">长沙市</option>
</select>
</fieldset>
</p>
<p>
<fieldset>
<legend>分组单选下拉列表</legend>
<label for="fenzu"></label>
<select size="1" name="xuanze" id="fenzu">
<optgroup label="山东省">
<option value="jinan">济南市</option>
<option value="qingdao">青岛市</option>
<option value="yantai">烟台市</option>
<option value="weihai">威海市</option>
</optgroup>
<optgroup label="河南省">
<option value="zhengzhou">郑州市</option>
<option value="kaifeng">开封市</option>
<option value="luoyang">洛阳市</option>
<option value="xinyang">信阳市</option>
</optgroup>
<optgroup label="湖南省">
<option value="changsha">长沙市</option>
<option value="xiangtan">湘潭市</option>
<option value="yueyang">岳阳市</option>
<option value="huaihua">怀化市</option>
</optgroup>
<optgroup label="四川省">
<option value="chengdu">成都市</option>
<option value="mianyang">绵阳市</option>
<option value="yibin">宜宾市</option>
<option value="leshan">乐山市</option>
</optgroup>
</select>
</fieldset>
</p>
<p>
<fieldset>
<legend>文件上传以及留言文字域</legend>
<label for="wenjian">上传文件:
<input type="file" name="shangchuan" id="wenjian" size="35" maxlength="255" />
</label>
<br /><br />
<label for="">留言<br />
<textarea cols="50" rows="10">默认留言,可有可无</textarea>
</label>
</fieldset>
</p>
<p>
<fieldset>
<legend>按钮</legend>
<input type="submit" value="提交" name="anniu" id="tijiao" />
<input type="reset" value="重写" name="anniu" id="chongxie" />
<input type="image" src="http://www.baidu.com/img/baidu_sylogo1.gif" title="这是图像按钮" />
<input type="button" value="普通按钮" name="anniu" id="anniu" />
</fieldset>
</p>
</form>
