增强的表单Form功能
2017-08-09 本文已影响39人
Look_a_Look
所有元素必须放到表单form中或者指定form属性
新增属性
- 表单内部，可省略form属性
- formaction属性，指定不用的提交页面
- formmethod属性，指定表单提交的方式。post/get
- formenctype，指定表单提交内容的编码方式
- formtarget，表单提交后在何处打开新页面。_blank/_self/_top/_parent/指定frame名称
- autofocus，为某个元素自动获取焦点的功能
- required属性，表示表单内该元素的值时必填的，若在提交时未填，会有提示信息弹出
- labels属性，貌似是绑定一个label元素和表单元素之间的关系【意义不明】
- label的control属性可以通过JS语言调用，获取其内部的表单元素【意义不明】
-
placeholder属性为
input元素设置输入提示，可以通过css来自定义其样式 -
list属性为
input元素设置已经在datalist元素中的后选值，可用作输入建议功能 -
autocomplete 是否让浏览器自动记录
input之前输入的值，可实现list属性效果。on/off/'' -
pattern属性可以在表单提交时对
input的值进行正则验证，不通过会有提示信息弹【出未输入内容会匹配？】 -
selectionDirection属性可以通过JS获取
input或textarea的选中或者未选中的内容 - indeterminate可以通过JS来设置CheckBox的第三种状态：“未知选中结果”
-
maxlength可以指定
textarea元素的最大长度 -
wrap可以设置
textarea的换行属性，通过cols属性指定每行最大长度，提交表单时会有一个换行符
input新增的type属性
- search 外观和普通input不同，右侧会有一个清空的按钮
-
url url，以
http://开头，在表单提交时验证 - tel 输入电话号，类似普通input，没有内容限制，在移动设备会触发数字键盘
-
email 输入email，必须要有
@，在表单提交时验证，设置multiple可是输入多个逗号分隔的email - ** datetime,date,month,week,time,datetime-local** 兼容性不好，chrome只支持date
- number 只许输入数字，可以指定最大最小值。在移动设备会触发数字键盘。外观和普通input不同，右侧会有一个数字选择的按钮
- range 无输入框，是一个滑动条，可以指定最大最小值
-
color 无输入框，是一个颜色选择器，value格式为
#000000类型
以上规则在输入框为空时不做验证
表单验证
可以在form上使用novalidate来关闭整个表单验证
对input元素使用formnovalidate可以关闭该input的验证
对input[type=submit]元素使用formnovalidate可以关闭整个表单的验证
可以在form的onsubmit属性上添加显示验证功能。onsubmit="return valitate()"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input form='asd' type="text" required>
<form id='asd' action="" target="_self">
<input type="text" autofocus required placeholder="输入XXX" autocomplete="on" list="myData">
<input type="checkbox" indeterminate="true" id='ca'>
<input type="text" pattern="[0-9][A-Z]{3}" value="123" placeholder="输入 1个数字3个大写字母 格式">
<br> 不同格式的input<br>
<input type="text">
<input type="search">
<input type="url">
<input type="tel">
<input type="email">
<input type="datetime-local">
<input type="number">
<input type="range">
<input type="color">
<br>
<input type="submit" value='get提交' formmethod='get'>
<input type="submit" value='post提交' formmethod='post'>
<input type="submit" value='提交' formaction="">
<input type="submit" value='提交到jsp' formaction="test.php">
<input type="image" value='图片提交' alt='图片提交' formaction="test.php">
</form>
<datalist id="myData">
<option value="good morning"></option>
<option value="hello world"></option>
<option value="what is your name"></option>
<option value="this is a box"></option>
<option value="i will back home"></option>
</datalist>
<script>
window.onload = function() {
document.getElementById('ca').indeterminate = true
}
</script>
</body>
</html>
