创造惊艳的表单

合适的标签和输入框命名

表单很难在移动设备上完全表现出来。体验最佳的表单是那些仅需少量输入的表单。好的表单能够提供给用户恰逢时宜的输入类型。键盘应该改变类型以匹配用户的输入场景。当用户在日历中添加一个事件时,请使你的用户时刻保持被提醒的状态。验证工具则应该告诉用户在提交表格前需要做些什么。

关键要点

  • 在表单输入框中使用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" ...>

Remember

  • 当元素中的内容被替换时,占位符会自动隐藏。因此,占位符不能替代标签。它们应该被用来作为所需格式和内容上的一种帮助来指导用户。

使用元数据使自动完成成为可能

当网站为用户节省时间,自动填入通用字符,例如:名字、邮件地址和其他常用的表字符时,用户会感到非常感激。添加元数据能够帮助减少潜在的输入错误 - 特别是在虚拟键盘和小型设备上。

浏览器会根据用户之前输入过的特定数据,使用多种启发式搜索来决定哪些字段可以自动完成,并且,通过在输入框中提供名字属性和自动完成属性,你可以给予浏览器提示。

举例来说,为了提示浏览器它应该自动完成用户姓名,邮件地址和手机号码,你应该使用:

    <label for="frmNameA">Name</label>
    <input type="text" name="name" id="frmName"
    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">
    
查看完整示例

推荐的输入框nameautocomplete属性值

内容类型 name属性 autocomplete属性
名字 name fname mname lname name
Email email email
地址 address city region province state zip zip2 postal country street-address locality region postal-code country
电话 phone mobile country-code area-code exchange suffix ext tel
信用卡 ccname cardnumber cvc ccmonth ccyear exp-date card-type cc-name cc-number cc-csc cc-exp-month cc-exp-year cc-exp cc-type

autocomplete属性应该带有shippingbilling前缀,根据其内容决定。

谨记

  • 只有当表单方法为提交的时候,自动完成才会工作。

autofocus属性

在一些表单中,例如在Google主页,你唯一想让用户做的事情是填写特定字段,因此你可以添加autofocus属性。当添加该属性后,桌面浏览器会立即将焦点置于输入字段,使得用户可以轻松快速开始使用表单。移动浏览器忽略autofocus属性,这是为了防止键盘随机出现的情况。

在使用自动获取焦点属性时请注意,因为它会侵占键盘焦点,并潜在地禁用了用作导航的退格符。

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

除非另有说明,本网页的内容采用知识共享署名3.0许可和代码示例都基于Apache2.0许可。如需详细资讯,请参阅我们的网站政策

回到顶部