HTML5中表单重点总结
表单:
在实际网页开发中通常采用post方式提交表单数据
属性 |
说明 |
type |
指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button,默认为 text |
name |
指定表单元素的名称 |
value |
元素的初始值。type 为 radio时必须指定一个值 |
size |
指定表单元素的初始宽度。当 type 为 text 或 password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位 |
maxlength |
type为text 或 password 时,输入的最大字符数 |
checked |
type为radio或checkbox时,指定按钮是否是被选中 |
文本框:
用户名:<input type="text" name="userName" value="用户名" size="30" maxlength="20" />
密码框:
密码:<input type="password " name="pass" size="20" />
单选按钮:
name值需要设为一样的。如果想要一个被选中要加checked。
<input name="sex" type="radio" value="男" checked />男
<input name="sex" type="radio" value="女" />女
复选框:
name值需要设为一样的。
<input type="checkbox" name="interest" value="swimming"/>游泳
<input type="checkbox" name="interest" value="running" checked />跑步
<input type="checkbox" name="interest" value="jumping"/>跳水
列表框:
<select name="name" >
<option value="beijing" selected="selected">北京</option >
<option value="shanghai">上海</option >
<option value="nanjing">南京</option >
<option value="hebei">河北</option >
</select>
多行文本域:
<textarea name="showText" cols="30" rows="10">遵循以下协议 </textarea >
按钮:
<input type="reset" name="butReset" value="重置">
<input type="submit" name="butSubmit" value="提交">
<input type="button" name="butButton" value="按钮"/>
图片按钮:
<input type="image" src="images/login.gif" />
当是submit按钮时才能提交并且必须有form表单:
<form method="get" action="result.html">
文件域:
<form action="" method="post" enctype="multipart/form-data">
<p><input type="file" name="files" />
<input type="submit" name="upload" value="上传" /></p>
</form>
邮箱:
会自动验证Email地址格式是否正确。
<p>邮箱:<input type="email" name="email"/></p>
网址:
会自动验证URL地址格式是否正确。
<p>请输入你的网址:<input type="url" name="userUrl"/></p>
数字:
<p>请输入数字:<input type="number" name="num" min="0" max="100" step="10"/></p>
滑块:
<p>请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/></p>
搜索框:
<p>请输入搜索的关键词:<input type="search" name="sousuo"/></p>
表单的高级应用:
一、隐藏域
二、只读和禁用
W3C HTML5标准中,规定对于布尔类型的属性,属性值可以省略
三、表单元素的标注:
- 增强鼠标的可用性
- 自动将焦点转移到与该标注相关的表单元素上
表单初级验证的方法:
一、placeholder
1. input类型的文本框提供一种提示(hint)
2. 可以描述文本框期待用户输入何种内容
3. 提示语默认显示,当文本框中输入内容时提示语消失
4. 适合于input标签:text、search、url、email和password等类型
二、required
1. 规定文本框填写内容不能为空,否则不允许用户提交表单
2. 适合于input标签:text、search、url、email、password、number、checkbox、radio、file等类型
三、pattern
用户输入的内容必须符合正则表达式(对字符串进行验证)所指的规则,否则就不能提交表单