第十章表单的设计_HTML教程(2)_H5之家 - 中国HTML5教程资源分享第一站

以上类型的输入区域有一个公共的属性name，此属性给每一个输入区域一个名字。这个名字与输入区域是一一对应的，即一个输入区域对应一个名字。服务器就是通过调用某一输入区域的名字的value值来获得该区域的数据的。而value属性是另一个公共属性，它可用来指定输入区域的缺省值。

应用格式

常用属性：

1 name 控件名称

2 type控件类型如：botton 普通按钮，texe 文本框等

3 align 指定对齐方式,可取top, bottom, middl

4 size 指定控件的宽度

5 value 用于设定输入默认值

6 maxlength在单行文本的时候允许输入的最大字符数

7 src 插入图像的地址

8 event 指定激发的事件

实例：10-2.html

<center>
<h2><font color="#339933"><input>控件的使用</font></h2></center>

<pre>

<form action="" method="post" target="_parent">
单行的文本输入区域： <INPUT name=T1 type=text>
普通按钮： <INPUT name=B1 type=button value=button>
提交按钮： <INPUT name=B1 type=submit value=Submit>
重置按钮： <INPUT name=B1 type=reset value=Reset>
复选框：你喜欢哪些教程：<INPUT name=C1 type=checkbox value=ON> Html入门 <INPUT CHECKED name=C2 type=checkbox value=ON> 动态Html <INPUT name=C3 type=checkbox value=ON> ASP
图像来代替Submit按钮： <INPUT border=0 name=I2 height=20 src="../../imge/nnn.gif" type=image width=65>
密码的区域： <INPUT name=p1
type=password> </P>
单选按钮: 你的休闲爱好是什么：<INPUT CHECKED name=R1 type=radio value=V1> 音乐 <INPUT name=R1 type=radio value=V2> 体育 <INPUT name=R1 type=radio value=V3> 旅游
</form>
</pre>
<a href="#" onClick="javascript:window.history.back()"><FONT size=4>返回</FONT></A></SUB>
</PRE>
</body>
</html>

10-3 菜单下拉列表框<select></select><option>

<select></select>标志对用来创建一个菜单下拉列表框。此标志对用于<form></form>标志对之间。<select>具有multiple、name和size属性。multiple属性不用赋值，直接加入标志中即可使用，加入了此属性后列表框就成了可多选的了；name是此列表框的名字，它与上边讲的name属性作用是一样的；size属性用来设置列表的高度，缺省时值为1，若没有设置(加入)multiple属性，显示的将是一个弹出式的列表框。
<option>标志用来指定列表框中的一个选项，它放在<select></select>标志对之间。此标志具有selected和value属性，selected用来指定默认的选项，value属性用来给<option>指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用<select>区域的名字的value属性来获得该区域选中的数据项的。

实例：10-3-1.html

<html>
<head>
<title>下拉列表框</title>
</head>
<body>
<form action="" method="post">
<p>请选择最喜欢的男歌星:
<select name="gx1" size="1">
<option value="ldh">刘德华
<option value="zhxy" selected>张学友
<option value="gfch">郭富城
<option value="lm">黎明
</select>
</form>
</body>
</html>

实例：10-3-2.html

<html>
<head>
<title>复选的列表框</title>
</head>
<body>
<form action="" method="post">
<p>请选择最喜欢的女歌星:
<select name="gx2" multiple size="4">
<option value="zhmy">张曼玉
<option value="wf" selected>王菲
<option value="tzh">田震
<option value="ny">那英
</select>
</form>
</body>
</html>

10-4 多行的文本框.<textarea></textarea>

<textarea></textarea>用来创建一个可以输入多行的文本框，此标志对用于<form></form>标志对之间。<textarea>具有以下属性：

(1)onchange指定控件改变时要调用的函数
(2)onfocus当控件接受焦点时要执行的函数
(3)onblur当控件失去焦点时要执行的函数
(4)onselect当控件内容被选中时要执行的函数
(5)name这文字区块的名称，作识别之用，将会传及 CGI。
(6)cols这文字区块的宽度。
(7)rows这文字区块的列数，即其高度。
(8)wrap属性定义输入内容大于文本域时显示的方式，可选值如下：
*默认值是文本自动换行；当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；
*Off，用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动；
*Virtual，允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；
*Physical,让文本换行,当数据被提交处理时换行符也将被一起提交处理。
这里列与行是以字符数为单位的。