MDN表单指南(详细参考)
<input>
是内联块状元素,既可以和其他元素放在同一行(内联),也可以设置宽高等属性(块状)
<form
>标签用于为用户输入创建HTML表单
<form method="post"(规定如何发送表单数据 常用值:get|post)
action="result.html">(表示向何处发送表单数据)
</form>
经验:在实际网页开发中通常采用post方式提交表单数据
1.label
<label>
标签为 input 元素定义标注(标记)。
(1)for属性
“for” 属性可把 label 绑定到另外一个元素,所以把 “for” 属性的值设置为相关元素的 id 属性的值
<form>
<label for="male">Male</label> //与下一行的表单元素绑定
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
1.增强鼠标的可用性
2.自动将焦点转移到与该标注相关的表单元素上
如果不使用label,则用户对某内容进行勾选时,必须要用鼠标点到勾选框内才能进行选择,有时会比较麻烦,对用户不友好;使用label则可以让整条内容连同前面的勾选框一起作为一个大的勾选框,用户只需要点击文字,就可以勾选内容,方便用户使用。
(2)form
规定 label 字段所属的一个或多个表单。
具体看:https://www.w3school.com.cn/tags/att_label_form.asp
2.input
<input type=" " name="fname" value="初始值"/>
属性 | 说明 |
---|---|
type | 指定元素类型:text(默认)、 password、checkbox(复选框)、radio(单选框)、submit、reset(重置按钮)、file、hidden、image、button |
name | 元素名称 |
value | 初始值,type 为 radio时必须指定一个值 |
size | 指定表单元素的初始宽度。当 type 为 text 或 password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位 |
maxlength | 输入最大字符 |
checked | 元素是否被选中 |
选择的时候注意语义信息
文件域
<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>
<input type="submit"/>
网址:自动验证
<p>请输入你的网址:<input type="url"(网址) name="userUrl"/></p>
<input type="submit"/>
数字
<p>请输入数字:<input type="number"(数字) name="num" min="0"(允许的最小值) max="100"(允许的最大值) step(合法的数字间隔)="10"/></p>
<input type="submit"/>
滑块
<p>请输入数字:<input type="range"(滑块) name="range1" min="0"(允许的最小值) max="10"(允许的最大值) step(合法的数字间隔)="2"/></p>
<input type="submit"/>
搜索框
<p>请输入搜索的关键词:<input type="search"(搜索框) name="sousuo"/></p>
<input type="submit"/>
隐藏域
<input type="hidden"(隐藏域) value="666" name="userid">
只读和禁用
<input name="name" type="text" value="张三" readonly(只读文本框)>
<input type="submit " disabled (禁用) value="保存" >
3.表单的初级验证
减轻服务器的压力,保证数据的可行性和安全性
验证方法:placeholder、required、pattern
(1)placeholder
- input类型的文本框提供一种提示(hint)
- 可以描述文本框期待用户输入何种内容
- 提示语默认显示,当文本框中输入内容时提示语消失
- 适合于input标签:text、search、url、email和password等类型
<input type="search" name="sousuo" placeholder(文本框输入内容提示)="请输入要搜索的关键字"/>
(2)required
- 规定文本框填写内容不能为空,否则不允许用户提交表单
- 适合于input标签:text、search、url、email、password、number、checkbox、radio、file等类型
<input type="text" name="username" required/(必填项)>
(3)pattern
用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表单
<input type="text" name="tel" required pattern(验证规则,正则表达式)="^1[358]\d{9}" />
(4)验证输入中文时字符长度为2
- 英文字符长度为1,中文字符长度为2
- 通过ADCII码判断是中文还是英文
var inputLength = 0;
//给一个变量来记录长度
for (var i = 0; i < str.length; i++) {
var countCode = str.charCodeAt(i);
//返回指定位置的字符的Unicode编码
//判断是不是ASCII码,Unicode码前128个字符是ASCII码
if (countCode >= 0 && countCode <= 128) {
inputLength ++;
}else{
inputLength +=2;
//如果是扩展码,则一次+2
}
}
(5)值允许输入中文、数字和英文
function checkUsername()
{
//正则表达式
var reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
//获取输入框中的值
var username = document.getElementById("username").value.trim();
//判断输入框中有内容
if(!reg.test(username))
{
alert("请输入中文、数字和英文!");
//输入非法字符,清空输入框
$("#username").val("");
}
}
4.select
<select(列表框) name="列表名称" size="行数">
<option value="选项的值" selected="selected"(默认选中项)>…</option >
<option(选项) value="选项的值">…</option >
</select>
5.textarea
<textarea rows="3" cols="20">
用行列确定大小
</textarea>
<textarea height="" width="">
用css定义大小
</textarea>
可以通过 wrap 属性设置文本输入区内的换行模式
6.fieldset
<form>
<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>
</form>
7.menu
参考:https://blog.csdn.net/nanjinzhu/article/details/82251110