表单输入标记是使用最频繁的表单标记,通过这个标记可以向页面中添加单行文本、多行文本、按钮等。
它的属性很多,所以我单开一篇详细记录一下:
type
用于指定添加的是哪种类型的输入字段,共有10个可选值,如下:
可选值 | 描述 | 可选值 | 描述 |
text | 文本框 | submit | 提交按钮 |
password | 密码域 | reset | 重置按钮 |
file | 文件域 | button | 普通按钮 |
radio | 单选按钮 | hidden | 隐藏域 |
checkbox | 复选按钮 | image | 图像域 |
disabled
用于指定输入字段不可用,即字段变成灰色。其属性值可以为空值,也可以指定为disabled
checked
用于指定输入字段是否处于被选中状态,用于type属性为radio和checkbox的情况下。其属性可以为空值,也可以指定checked。
width
用于指定输入字段的宽度,用于type属性值为image的情况下。
height
用于指定输入字段的高度,用于type属性值为image的情况下。
maxlenght
用于指定字段可输入文字的个数,用于type属性值为text和password的情况下,默认没有数字限制。
readonly
用于指定输入字段是否为只读。其属性可以为空值,也可以指定为readonly。
size
用于指定输入字段的宽度,当type属性值为text和password时,以文字个数为单位,当type属性为其他值时,以像素为单位。
src
用于指定图片的来源,只有当type属性为image时有效。
usemap
为图片设置热点地图,只有当type属性为image时有效。
属性值为URI,URI格式为“#+<map>标记的name属性值”。
例如:<map>标记的name属性值为Map,该URI为#Map。
alt
用于指定当图片无法显示时的文字,只有当type属性为image时有效。
name
用于指定输入字段的名称
value
用于指定输入字段默认数据值,
当type属性为radio和checkbox时,不可忽略此属性;
为其他值时,可以忽略。
当type属性为button、reset、submit时,指定的是按钮上的显示文字;
当type属性为radio和checkbox时,指定的是数据项选定时的值。
一个实验:
在该文件中,首先应用<form>标记添加一个表单,将表单的action属性设置为register_deal.jsp,method属性设置为post,然后应用<input>标记添加获取用户名和E-mail的文本框、获取密码和确认密码的密码域、选择性别的单选按钮、选择爱好的复选按钮、提交按钮、重置按钮。
<body>
<form action="002.jsp" method="post" name="myform">
<!-- action="002.jsp" 点击确认保存后,网页跳转另一个叫“002.jsp”的页面 -->
用户名:<input name="username" type="text" id="UserNamed4" maxlenght="20"><br>
密码:<input name="pwd1" type="password" id="PWD14" size="20" maxlenght="20"><br>
确认密码:<input name="pwd2" type="password" id="PWD25" size="20" maxlenght="20"><br>
性别:
<input name="sex" type="radio" class="noborder" value="男" checked>
男
<input name="sex" type="radio" class="noborder" value="女" checked>
女
<br>
爱好:
<input name="like" type="checkbox" id="like" value="体育" checked>
体育
<input name="like" type="checkbox" id="like" value="旅游" checked>
旅游
<input name="like" type="checkbox" id="like" value="听音乐" checked>
听音乐
<input name="like" type="checkbox" id="like" value="看书" checked>
看书
<br>
E-mail:
<input name="email" type="text" id="PWD225" size="50"><br>
<input name="Submit" type="submit" class="btn_grey" value="确认保存">
<input name="Reset" type="reset" class="btn_grey" id="Reset" value="重新填写"><br>
<input type="image" name="imageField" src="../pic/1.jpg" width="300" title="花花花花花">
<!-- src="../pic/1.jpg" 这个是图像的位置 -->
</form>
</body>