HTML5 之 Form 标签_h5 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>
1
2
3
4

  如下为模拟呈现。

accept-charset

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

  常用值包括如下。

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

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

autocapitalize

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

  可选值包括如下。

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

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

autocomplete

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

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

  注意输入控件需指定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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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>
1
2
3
4
5
6
7
8
9
10
11
12

setCustomValidity

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

const input = document.querySelector('input')

input.setCustomValidity('请输入文字')
1
2
3

属性

validity

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

  IE9及以下浏览器不支持。

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

const input = document.querySelector('input')

console.log(input.validity)
1
2
3

• 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

  如下为配合: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" />
1
2
3
4
5
6

• 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>
1
2
3
4
5
6
7
8
9
10
11
12

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>
1
2
3
4
5

修改按钮类型

  可修改按钮类型为button。

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

  或者使用input标签的按钮。

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

阻止按钮点击事件

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

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

const btn = document.querySelector('button')

btn.addEventListener('click', event => {
  event.preventDefault()
})
1
2
3
4
5
6
7

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

<button type="submit" onclick="handler(event)">提交</button>

function handler(event) {
  event.preventDefault()
}
1
2
3
4
5

onclick 返回值方式

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

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

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

<button type="submit" onclick="return handler(event)">提交</button>

function handler(event) {
  ...
  return false
}
1
2
3
4
5
6

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

<button type="submit" onclick="return handler(event)">提交</button>

function handler(event) {
  ...
  return true
}
1
2
3
4
5
6

阻止表单 submit 事件

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

<form action="" method="POST">
  ...
</form>

const form = document.querySelector('form')

form.addEventListener('submit', event => {
  event.preventDefault()
})
1
2
3
4
5
6
7
8
9

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

<form action="" method="POST" onsubmit="handler(event)">
  ...
</form>

function handler(event) {
  event.preventDefault()
}
1
2
3
4
5
6
7

onsubmit 返回值方式

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

<form action="" method="POST" onsubmit="return handler(event)">
  ...
</form>

function handler(event){
  ...
  return true | false
}
1
2
3
4
5
6
7
8

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/110928