HTML5 之 Form 标签

概述

form 是块级双标签，用于指定一个表单区域，并向服务器提交信息。

属性

常用属性

action：指定表单提交的URL，表单内提交按钮的formaction属性会覆盖此属性
enctype：指定表单的数据编码方式，表单内提交按钮的formenctype属性会覆盖此属性
method：指定表单的请求方式，表单内提交按钮的formmethod属性会覆盖此属性。另外若表单在dialog元素中，指定method为dialog将在提交时关闭模态框，详细参考
target：表示表单提交时于何处响应，表单内提交按钮的formtarget属性会覆盖此属性
novalidate：指定后表单提交时不用验证数据，表单内提交按钮的formnovalidate属性会覆盖此属性，关于表单内提交按钮覆盖情况，详细参考

accept

指定表单内的上传控件可接受的文件类型（MIME 类型），可指定多个。注意几乎所有的浏览器都不支持，此属性已在HTML5中被移除不再使用，替代方式则是上传控件单独指定accept属性。

<form action="" method="post" accept="image/png, image/gif"><input type="file"><button type="submit">提交</button>
</form>

如下为模拟呈现。

accept-charset

规定服务器以何种字符集处理表单数据，浏览器中每种内容类型的默认值通常是正确的，所以一般不用设置。

常用值包括如下。

UTF-8：unicode字符编码
ISO-8859-1 ：拉丁字母表的字符编码
gb2312：简体中文字符集

<form action="" method="post" accept-charset="UTF-8, ISO-8859-1">...
</form>

autocapitalize

Safari浏览器独有的非标准属性，在表单的后代控件中，输入文本时，此属性可控制文本值的首字母是否大写等其它样式。

可选值包括如下。

none：禁用首字母大写
sentences：对每句文本首字母大写
words：每个单词首字母大写
characters：大写所有字母

<form action="" method="post" autocapitalize="words">...
</form>

autocomplete

输入框是否自动补全，默认值为on（启用自动补全），off（禁用）。

<form action="" method="post" autocomplete="on"><input type="text" name="username"><br><button type="submit">提交</button>
</form>

注意输入控件需指定name属性，浏览器会根据此属性，查找出此属性之前输入并提交过的值。若不指定name属性，此属性将不生效。

方法

checkValidity

用于返回表单或者表单元素是否验证通过，返回值为布尔值。

绝大多数浏览器支持，IE9及以下浏览器不支持。

<form action=""><input type="input" required><button type="button">提交</button>
</form>
<script>const form = document.querySelector('form')const input = document.querySelector('input')const btn = document.querySelector('button')btn.addEventListener('click', () => {console.log('input:', form.checkValidity())console.log('form:', form.checkValidity())})
</script>

reportValidity

验证表单或者表单元素并且触发浏览器的内置验证提示交互，返回值为布尔值，IE11及以下浏览器不支持。

<form action=""><input type="input" required><button type="button">提交</button>
</form>
<script>const form = document.querySelector('form')const btn = document.querySelector('button')btn.addEventListener('click', function () {console.log('form:', form.reportValidity())})
</script>

setCustomValidity

自定义表单元素的提示文字，IE9及以下浏览器不支持。

const input = document.querySelector('input')input.setCustomValidity('请输入文字')

属性

validity

返回表单元素的各种验证状态，返回结果为 ValidityState 对象。

IE9及以下浏览器不支持。

如下为Chrome浏览器包含的只读属性和属性值。

const input = document.querySelector('input')console.log(input.validity)

badInput：输入框的值浏览器无法转换。例如number类型输入框输入3.14-2，此时返回true，注意IE浏览器不支持此属性
customError：元素是否调用setCustomValidity方法自定义验证规则
patternMismatch：输入框的值与指定的pattern正则不匹配返回true（可用:invalid伪类修改样式），否则为false

input {outline: none;
}input:valid {border: 1px solid #409eff;
}input:invalid {border: 1px solid #f56c6c;
}<form><input type="text" pattern="[a-z]{5}" /><br><button type="button">提交</button>
</form>
<script>const input = document.querySelector('input')const btn = document.querySelector('button')btn.addEventListener('click', () => {console.log('patternMismatch:', input.validity.patternMismatch)})
</script>

如下为配合:invalid伪类实现的输入验证。

rangeOverflow：与元素max属性规定的最大值比较，超过返回true，否则为false。例如number类型输入框的属性max="5"，输入值为8则返回true（可用:out-of-range或:invalid伪类修改样式）
rangeUnderflow：与元素min属性规定的最小值比较，小于返回true，否则为false，为true时也可用:out-of-range或:invalid伪类修改样式
stepMismatch：输入框的值与step属性值不匹配时返回true，或者说输入框的值无法整除step。例如number类型输入框的属性step="30"，输入值为-60、-30、0、30、60等均返回false，而非30倍数均返回true（也可用:invalid伪类修改样式）
tooLong：输入内容长度大于元素maxlength时返回true，否则为false，为true时也可用:invalid伪类修改样式

input:invalid {outline: none;border: 1px solid #f56c6c;
}<input type="text" maxlength="5" />

tooShort：输入内容长度小于元素minlength时返回true，否则为false，为true时也可用:invalid伪类修改样式，注意IE浏览器不支持此属性
typeMismatch：输入框的值与元素type要求的值不匹配时返回true，否则为false。例如email类型输入框输入非email格式，此时返回true（也可用:invalid伪类修改样式）
valid：当前元素是否完全验证通过，通过返回true，否则为false。例如email类型输入框的属性minlength="20"，输入值为email@email.com时返回false（可用:invalid伪类修改样式）
valueMissing：若元素含required属性且输入框值为空，则返回true，否则为false（可用:invalid伪类修改样式）

validationMessage

表示当前输入框将要显示的出错提示，只读属性。

<form><input type="email" required minlength="10" /><button type="button">提交</button>
</form>
<script>const input = document.querySelector('input')const btn = document.querySelector('button')btn.addEventListener('click', () => {console.log('input:', input.value, ', validationMessage:', input.validationMessage)})
</script>

willValidate

当前元素是否在提交前进行验证，只读属性，需要验证返回true，否则为false。

若元素含disabled属性，则此属性返回false，即提交前无需验证此元素。

其它

阻止 form 默认提交行为

表单内submit按钮单击时会触发表单默认行为，若form指定了action属性，将提交表单数据（FormData 格式）并跳转至action页面，未指定将跳转至当前页面，造成页面刷新。

<form action="" method="POST"><input type="text" name="username"><input type="text" name="password"><button type="submit">提交</button>
</form>

修改按钮类型

可修改按钮类型为button。

<button type="button">提交</button>

或者使用input标签的按钮。

<input type="button" value="提交">

阻止按钮点击事件

addEventListener绑定的事件，阻止默认行为。

<button type="submit">提交</button>const btn = document.querySelector('button')btn.addEventListener('click', event => {event.preventDefault()
})

onclick绑定的事件，阻止默认行为。

<button type="submit" onclick="handler(event)">提交</button>function handler(event) {event.preventDefault()
}

onclick 返回值方式

其中onclick="return true"为默认的表单提交事件，onclick="return false"为阻止表单提交事件。

<button type="submit" onclick="return false">提交</button>

若阻止表单默认提交行为同时，又要保留点击事件，可用return function()返回函数的方式，注意函数末尾一定要返回false。

<button type="submit" onclick="return handler(event)">提交</button>function handler(event) {...return false
}

更进一步的，可在表单提交之前做一些数据处理，最后再return true触发表单提交。

<button type="submit" onclick="return handler(event)">提交</button>function handler(event) {...return true
}

阻止表单 submit 事件

addEventListener绑定的事件，阻止submit事件。

<form action="" method="POST">...
</form>const form = document.querySelector('form')form.addEventListener('submit', event => {event.preventDefault()
})

onclick绑定的事件，阻止submit事件。

<form action="" method="POST" onsubmit="handler(event)">...
</form>function handler(event) {event.preventDefault()
}

onsubmit 返回值方式

此方式同上述onclick返回值方式基本一致，不再详细描述。

<form action="" method="POST" onsubmit="return handler(event)">...
</form>function handler(event){...return true | false
}