HTML5原有的表单以及表单控件
HTML5原有的表单以及表单控件
1.表单元素
<r…>元素用于生成输入表单，该元素不会生成可视化部分。在HTML 5规范以前，其
他表单控件，如单行文本框、多行文本域、单选按钮、复选框等都必须放在<orm…>元素之内。
<form…/>元素可以指定 id、style、 class 等核心属性，还可以指定onclick 等事件属性。
除此之外还可以指定如下几个属性。
➢action:指定当单击表单内的“确认”按钮时，该表单被提交到哪个地址。该属性
既可指定一个绝对地址，也可指定-一个相对地址。该属性必填。
➢method:指定提交表单时发送何种类型的请求，该属性值可为get或post,分别用
于发送GET或POST请求。通常建议发送POST请求。该属性必填。
➢enctype:指定对表单内容进行编码所使用的字符集。
name:指定表单的唯一名称， 建议该属性值与id属性值保持一致。
➢target: 指定使用哪种方式打开目标URL (提交请求会打开另一个URL资源)，与
超链接的target可接受的属性值完全一样，该属性值可以是_ blank、 parent、_ self
和_ top四个值中之一。
<om…>元素的method属性非常重要，它指定了该表单提交请求的方式，表单默认以
GET方式提交请求。GET请求和POST请求区别如下。
➢GET 方式的请求:直接在浏览器地址栏中输入访问地址所发送的请求，或提交表单
发送请求时，该表单对应的<frm…/>元素没有设置method属性，或设置method
属性为get,这几种请求都是GET方式的请求。GET方式的请求会将请求参数的
名和值转换成字符串，并附加在原URL之后，因此可以在地址栏中看到请求参数
名和值。且GET请求传送的数据量较小，-般不能大于2KB。
➢POST方式的请求:这种方式通常使用提交表单的方式来发送，且需要设置
<om…>元素的method属性为post。POST方式传送的数据量较大，通常认为
POST请求参数的大小不受限制，但往往取决于服务器的限制，POST 请求传输的
数据量总比GET传输的数据量大。而且POST方式发送的请求参数以及对应的值，
放在HTML HEADER中传输，用户不能在地址栏里看到请求参数值，安全性相对
较高。
2.使用input元素
➢单行文本框: 指定<input..>元素的type属性为text即可。
➢密码输入框: 指定<input../>元素的type属性为password即可。
➢隐藏域: 指定<input.../> 元素的type属性为hidden即可。
➢单选框: 指定<input..>元素的type属性为radio 即可。
➢复选框: 指定<input../>元素的 type属性为checkbox即可。
➢图像域: 指定<input...>元素的type属性为image即可。当type="image"时，可以
为inpt../>元素指定width和height两个属性。
➢文件 上传域:指定<input.../>元素的type属性为file即可。
➢提交、重设、无动作按钮:分别指定<input...>元素的 type 属性为submit、 reset
或button即可。
➢placeholder：用于提示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www. crazyit. org" method="get">
单行文本框: <input id="username" name="username" type="text" /><br />
不能编辑的文本框: <input id="username2" name="username" type="text" readonly="sreadonly" /><br />
密码框: <input id="password" name="password" type="password" /><br />
隐藏域: <input id="hidden" name="hidden" type="hidden" /><br />
第一组单选框: <br />
<input id="color" name="color" type="radio" value="red"/>
<input id="color2" name="color" type="radio" value="green" />
<input id="color3" name="color" type="radio" value="blue"/><br/>
第二组单选框: <br />
<input id="gender" name="gender" type="radio" value="male"/>
<input id="gender2" name="gender" type="radio" value="female"/><br />
两个复选框: <br 1>
<input id="website" name="website" type="checkbox"
value="leegang.org" />
<input id="website2" name= "website" type="checkbox"
value="crazyit.org" /><br />
文件上传域: <input id="file" name="file" type="file"/><br/>
图像域: <input type="image" src="img/wjc.gif" alt="疯狂Java联盟"/><br />
下面是四个按钮: <br />
<input id="ok" name="ok" type="submit" value="提交" />
<input id="dis" name="dis" type="submit" value- "提交”
disabled ="disabled" />
<input id="cancel" name="cancel" type="reset" value="重填"/>
<input id="no" name="no" type="button" value="无动作" />
</ form>
</body>
</html>
➢checked: 设置单选框、复选框初始状态是否处于选中状态，该属性值只能是
checked,表示初始即被选中。只有当type属性值为checkbox或radio 时才可指
定该属性。
➢disabled:设置首次加载时禁用此元素。该属性值只能是disabled，表示该元素被
禁用，则该元素无法获得输入焦点、无法选中、无法在其中输入文本，无法响应鼠
标单击、双击等事件。当type="hidden"时不能指定该属性。
➢maxlength:该属性值是-一个数字，指定文本框中所允许输入的最大字符数。
➢readonly: 指定该文本框内的值不允许用户修改(可以使用JavaScript脚本修改)。
➢size: 该属性值是一一个数字， 指定该元素的宽度。当type="hidden"时不能指定该属性。
➢src: 指定图像域所显示图像的URL,只有当type="image"时才可指定该属性。
在页面上的效果如下：
3.label标签
下面有主要代码：
<form action="http:/ /www. crazyit.org" method="get ">
<1abel for="username">单行文本框: </1abe1>
<input id="username" name="username" type="text" /><br />
<1abe1>密码框: <input id= "password" name= "password" type="password" />
</1abel><br />
<input id='ok' type="submit" value=" 登录疯狂Java联盟" />
</ form>
在页面上的显示效果如下：
1327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
