在移动设备上填写表单很困难。输入操作最少的表单就是最好的表单。出色的表单提供有语义的输入类型。按键应变为与用户的输入类型匹配;用户在日历中选取日期。让用户了解最新信息。验证工具应告诉用户,在提交表单之前他们需要做什么。

设计高效的表单

通过避免重复操作、只请求必要的信息来设计高效的表单,并通过向用户显示他们在多部分表单中的操作进度来指引用户。

TL;DR

  • 使用现有数据来预填充各字段,并且一定要启用自动填充。
  • 使用清楚标示的进度条来帮助用户完成多部分的表单。
  • 提供可视化日历,让用户不必离开您的网站,并跳转到其智能手机上的日历应用。

最大程度减少重复的操作和字段

网页设计篇-创建开发出色的网站表单
在 Progressive.com 网站上,首先要求用户输入邮编,然后邮编会被预填充到表单的下一部分。

确保表单没有重复操作,只设置必要的字段数量,并利用自动填充,使用户能借助预填充的数据轻松填写表单。

寻找机会预先填充您已知道或可以预判的信息,使用户无需手动输入。 例如,给收货地址预先填充用户上次提供的收货地址。

向用户显示他们的操作进度

网页设计篇-创建开发出色的网站表单
使用清楚标示的进度条来帮助用户完成多部分的表单。

进度条和菜单应准确传达多步骤表单和流程的总体进度。如果在早期步骤中设置了异常复杂的表单,用户更可能放弃您的网站,而不会完成整个流程。

在选择日期时提供可视化日历

网页设计篇-创建开发出色的网站表单

用户在安排约会和旅行日期时往往需要更多上下文,如要使操作更容易,并防止他们离开您的网站去查看其日历应用,就应提供一个可视化日历,设置清楚的标签以便选择开始和结束日期。

选择最佳输入类型

使用正确的输入类型来简化信息输入操作。用户喜欢在输入电话号码时网站自动显示数字键盘,或随着输入信息自动跳换字段。寻找机会消除表单中的多余点击。

TL;DR

  • 选择最适合数据的输入类型,以简化输入操作。
  • 通过 datalist 元素在用户输入时提供建议值。

HTML5 输入类型

HTML5 引入了大量新的输入类型。这些新输入类型可以提示浏览器,屏幕键盘应显示什么类型的键盘布局。用户无需切换键盘,就能更轻松地输入所需信息,并且只看到该输入类型的相应按键

输入 type
url
用于输入网址。其开头必须是有效的 URI 架构,例如 http://、 ftp:// 或 mailto:
网页设计篇-创建开发出色的网站表单
tel
用于输入电话号码。它 执行特定的验证语法,因此,如果要确保特定的格式,可以使用模式属性。
网页设计篇-创建开发出色的网站表单
email
用于输入电子邮件地址,并提示键盘上应默认显示 @。 如果需要用户提供多个电子邮件地址,则可以添加 multiple 属性。
网页设计篇-创建开发出色的网站表单
search
一个文本输入字段,其样式与平台的搜索字段一致。
网页设计篇-创建开发出色的网站表单
number
用于数字输入,可以是任意合理的整数或浮点值。
网页设计篇-创建开发出色的网站表单
range
用于数字输入,但与 number 输入类型不同,其值没那么重要。 它以滑块控件的形式显示给用户。
网页设计篇-创建开发出色的网站表单
datetime-local
用于输入日期和时间值,提供的时区为本地时区。
网页设计篇-创建开发出色的网站表单
date
用于只输入日期,不提供时区。
网页设计篇-创建开发出色的网站表单
time
用于只输入时间,不提供时区。
网页设计篇-创建开发出色的网站表单
week
用于只输入星期,不提供时区。
网页设计篇-创建开发出色的网站表单
month
用于只输入月份,不提供时区。
网页设计篇-创建开发出色的网站表单
color
用于选取颜色。
网页设计篇-创建开发出色的网站表单

Note: 请谨记在选择输入类型时要牢记本地化,有些语言区域使用点 (.),而不使用逗号 (,) 来作为分隔符。

使用 datalist 在输入时提供建议值

datalist 元素不是输入类型,而是与一个表单字段关联的建议输入值的列表。 它允许浏览器在用户输入时建议自动填充选项。 datalist 元素与 select 元素不同,它无需用户浏览长列表来找出所需的值,也不限制用户只能选择这些选项,此元素在用户输入时提供提示。

<label for="frmFavChocolate">Favorite Type of Chocolate</label>
<input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
<datalist id="chocType">
  <option value="white">
  <option value="milk">
  <option value="dark">
</datalist>

Note:datalist 值是提供的建议值,并不意味着用户只能选择所提供的建议值。

正确地为输入设置标签和命名

在移动设备上填写表单很困难。输入操作最少的表单就是最好的表单。出色的表单提供有语义的输入类型。按键应变为与用户的输入类型匹配;用户在日历中选取日期。让用户了解最新信息。验证工具应告诉用户,在提交表单之前他们需要做什么。

TL;DR

  • 务必对表单输入使用 label,并确保字段处于焦点时标签可见。
  • 使用 placeholder 来提供有关预期输入内容的指导。
  • 为帮助浏览器自动填充表单,为各元素使用既定的 name 并包括 autocomplete 属性。

标签的重要性

label 元素为用户提供指引,告诉他们表单元素中需要什么信息。 将输入元素放在 label 元素内,或通过使用“for”属性,可使每个 label 与一个输入元素关联。为表单元素设置标签还能帮助增大触摸目标的大小:用户可以触摸标签或输入框,以将焦点置于输入元素中。

<label for="frmAddressS">Address</label>
<input type="text" name="ship-address" required id="frmAddressS"
  placeholder="123 Any Street" autocomplete="shipping street-address">

标签大小和放置

标签和输入框应足够大,以便点击。在纵向视口中,字段标签应在输入元素上方,在横向视口中则在输入元素旁边。确保字段标签和对应的输入框同时可见。要注意自定义的滚动处理程序,可能会把输入元素滚动到页面顶端而隐藏了标签,或者放在输入元素下方的标签可能会被虚拟键盘所遮挡。

使用占位符

占位符属性可提示用户应在输入框中输入什么内容,通常以浅色文本显示其值,直到用户开始在元素中输入。

<input type="text" placeholder="MM-YYYY" ...>

Note: 当用户开始输入元素时,占位符立即消失,因此它们不能代替标签。应使用占位符作为辅助,引导用户注意所需的格式和内容。

使用元数据来实现自动填充

当网站自动填写一些常见字段(如姓名、电子邮件地址和其他常用字段)为用户节省时间时,用户会很喜欢,并且这样还能帮助减少潜在的输入错误,尤其是在使用虚拟键盘和很小的设备时。

浏览器使用许多启发方法,根据用户之前指定的数据来确定可以自动填充哪些字段,并且您可以为每个输入元素提供 name 属性和 autocomplete 属性来提示浏览器。Note: Chrome 需要将 input 元素包含在 <form> 标记中才能启用自动完成。 如果它们不包含在 form 标签中,Chrome 将提供建议值,但是不会完成表单。

例如,要提示浏览器应给表单自动填写用户名、电子邮件地址和电话号码,应当使用:

<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
  placeholder="Full name" required autocomplete="name">

<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
  placeholder="name@example.com" required autocomplete="email">

<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
  placeholder="name@example.com" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
  placeholder="+1-555-555-1212" required autocomplete="tel">

建议的输入 name 和 autocomplete 属性值

autocomplete 属性值是当前 WHATWG HTML 标准的一部分。下面显示了最常用的 autocomplete 属性。

autocomplete 属性可以附带分区名称,例如 shippinggiven-name 或 billingstreet-address。浏览器将单独自动填充不同的分区,而不是将其作为一个连续表单。

内容类型name 属性autocomplete 属性
名称name fname mname lnamename(全名)given-name(名字)additional-name(中间名)family-name(姓氏)
电子邮件emailemail
地址address city region province state zip zip2 postal country用于单个地址输入框:street-address用于两个地址输入框:address-line1address-line2address-level1(州或省)address-level2(城市)postal-code(邮编)country
电话phone mobile country-code area-code exchange suffix exttel
信用卡ccname cardnumber cvc ccmonth ccyear exp-date card-typecc-namecc-numbercc-csccc-exp-monthcc-exp-yearcc-expcc-type
用户名usernameusername
密码passwordcurrent-password(用于登录表单)new-password(用于注册和更改密码表单)

Note: 仅在您的地址格式需要时,才需要使用 street-address 或者 address-line1 和 address-line2address-level1 和 address-level2

autofocus 属性

在某些表单上,例如 Google 首页,需要用户做的唯一操作是填写一个特定字段,则可以加上 autofocus 属性。在设置了此属性时,桌面浏览器会立即将焦点移到输入字段,使用户可以轻松快速地开始填写表单。 移动浏览器会忽略 autofocus 属性,以防止键盘随机显示。

要小心使用 autofocus 属性,因为它将侵占键盘焦点,并且可能阻止使用退格符来进行导航。

<input type="text" autofocus ...>

提供实时验证

实时数据验证不仅有助于保持数据清洁,还能改善用户体验。现代浏览器有多种内置工具可提供实时验证,并且能防止用户提交无效的表单。应使用可视化线索来指示表单是否已正确填写。

TL;DR

  • 利用浏览器的内置验证属性,例如 pattern、 required、 min、 max 等。
  • 使用 JavaScript 和 Constraints Validation API 来满足更复杂的验证要求。
  • 实时显示验证错误,如果用户尝试提交无效的表单,则显示他们需要修正的所有字段。

使用以下属性来验证输入值

pattern 属性

pattern 属性指定一个用于验证输入字段的正则表达式。 例如,要验证美国邮编(5 位数,有时后面有一个破折号和另外 4 位数),我们将 pattern 设置如下:

<input type="text" pattern="^\d{5,6}(?:[-\s]\d{4})?$" ...>
常用的正则表达式模式
正则表达式
邮寄地址[a-zA-Z\d\s\-\,\#\.\+]+
邮编(美国)^\d{5,6}(?:[-\s]\d{4})?$
IP 地址 (IPv4)^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$
IP 地址 (IPv6)^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$
IP 地址(两种)^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)|(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$
信用卡号^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|6(?:011|5[0-9]{2})[0-9]{12}|(?:2131|1800|35\d{3})\d{11})$
社会保障号^\d{3}-\d{2}-\d{4}$
北美电话号码^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$

required 属性

如果提供 required 属性,则此字段必须包含值,才能提交表单。 例如,要使邮编为必填值,只需加上 required 属性:

<input type="text" required pattern="^\d{5,6}(?:[-\s]\d{4})?$" ...>

minmax 和 step 属性

对于数字输入类型,如数字或范围以及日期/时间输入,可以指定最小值和最大值,以及在通过滑块或微调框进行调整时的每个增量/减量。例如,鞋码输入将设置最小码 1 和最大码 13,递增或递减单位为 0.5

<input type="number" min="1" max="13" step="0.5" ...>

maxlength 属性

maxlength 属性可用于指定输入值或文本框的最大长度,当您要限制用户可提供信息的长度时,此属性很有用。例如,如果要将文件名限制为 12 个字符,可以使用以下方法。

<input type="text" id="83filename" maxlength="12" ...>

minlength 属性

minlength 属性可用于指定输入值或文本框的最小长度,当您要指定用户必须提供的最小长度时,此属性很有用。例如,如果要指定文件名需要至少 8 个字符,可以使用以下方法。

<input type="text" id="83filename" minlength="8" ...>

novalidate 属性

在某些情况下,即使表单包含无效的输入,您也可能想允许用户提交表单。 为此,可给表单元素或单独的输入字段加上 novalidate 属性。 在这种情况下,所有伪类和 JavaScript API 仍将允许您检查表单是否通过验证。

<form role="form" novalidate>  <label for="inpEmail">Email address</label>  <input type="email" ...></form>

Success: 即使客户端有输入验证,也务必在服务器上验证数据,以确保数据的一致性和安全性。

使用 JavaScript 实现更复杂的实时验证

当内置验证加上正则表达式还不够时,可以使用 Constraint Validation API,这是一个用于处理自定义验证的强大工具。此 API 使您能够进行各种验证,例如设置自定义错误,检查一个元素是否有效,并确定元素无效的原因:

Constraint Validation
setCustomValidity()设置自定义验证消息,并将 ValidityState 对象的 customError 属性设置为 true
validationMessage返回一个字符串,说明输入值未通过验证测试的原因。
checkValidity()如果元素满足其所有约束条件,则返回 true,否则返回 false。由开发者决定在检查返回 false 时页面如何响应。
reportValidity()如果元素满足其所有约束条件,则返回 true,否则返回 false。当页面响应 false 时,向用户报告约束问题。
validity返回一个表示元素有效状态的 ValidityState 对象。

设置自定义验证消息

如果字段未通过验证,可使用 setCustomValidity() 来将字段标记为无效并解释字段未通过验证的原因。 例如,注册表单可能要求用户通过输入两次来确认其电子邮件地址。 对第二个输入使用 blur 事件,以验证两个输入值,并设置相应的响应。例如:

if (input.value != primaryEmail) {
  // the provided value doesn't match the primary email address
  input.setCustomValidity('The two email addresses must match.');
  console.log("E-mail addresses do not match", primaryEmail, input.value);
} else {
  // input is valid -- reset the error message
  input.setCustomValidity('');
}

阻止提交无效的表单

由于并非所有浏览器都会在表单存在无效数据时阻止用户提交,因此您应当捕获提交事件,并对表单元素使用 checkValidity() 以确定表单是否有效。

例如:

form.addEventListener("submit", function(evt) {
  if (form.checkValidity() === false) {
    evt.preventDefault();
    alert("Form is invalid - submission prevented!");
    return false;
  } else {
    // To prevent data from being sent, we've prevented submission
    // here, but normally this code block would not exist.
    evt.preventDefault();
    alert("Form is valid - submission prevented to protect privacy.");
    return false;
  }
});

实时显示反馈

在用户提交表单之前,就在每个字段提供可视指示,提示用户是否已正确填写表单,这样做很有帮助。HTML5 也引入了很多新的伪类,可以用于根据输入值或属性来设置输入的样式。

实时反馈
:valid明确地设置当输入值符合所有验证要求时,要使用的输入值样式。
:invalid明确地设置当输入值不符合所有验证要求时,要使用的输入值样式。
:required明确地设置已设定 required 属性的输入元素的样式。
:optional明确地设置未设定 required 属性的输入元素的样式。
:in-range明确地设置在输入值处于范围内时数字输入元素的样式。
:out-of-range明确地设置在输入值超出范围时数字输入元素的样式。

验证是立即进行的,意味着当页面加载时,即使用户尚无机会填写各字段,字段就可能被标记为无效。它还意味着,用户正在输入时就可能看到提示样式无效。 为防止此问题,可以将 CSS 与 JavaScript 结合,只在用户已访问此字段时才显示无效的样式。

input.dirty:not(:focus):invalid {
  background-color: #FFD9D9;
}
input.dirty:not(:focus):valid {
  background-color: #D9FFD9;
}
var inputs = document.getElementsByTagName("input");
var inputs_len = inputs.length;
var addDirtyClass = function(evt) {
  sampleCompleted("Forms-order-dirty");
  evt.srcElement.classList.toggle("dirty", true);
};
for (var i = 0; i < inputs_len; i++) {
  var input = inputs[i];
  input.addEventListener("blur", addDirtyClass);
  input.addEventListener("invalid", addDirtyClass);
  input.addEventListener("valid", addDirtyClass);
}

    版权声明:

     本网站的所有文字、图片资料,未标注转字的均由作者亲自整理创作,如需复制、转载、转贴等方式发布/发表,请以锚链接的方式显示原文出处,请尊重我的劳动成果,侵权必究。本网站转载的文章如有侵权的地方请及时联系本人,核对后会第一时间删除!

阿沐
1625139774@qq.com

发表评论