创造惊艳的表单

选择最佳输入类型

每一次点击都包含在内。用户会感谢那些网站:在他们输入电话号码的时候自动呈现拨号键盘,或者是在他们输入信息前提前填。在你的表格中寻找能够去除多余轻击的机会。

关键要点

  • 为你的数据选择最适合的输入类型以简化输入流程。
  • 使用datalist 元素为用户输入类型提供建议.

HTML5 输入类型

HTML5 介绍了一系列新的输入类型。这些新方案提示浏览器应该为屏幕键盘显示怎样的键盘布局。用户能够更加容易输入所需信息,而不必切换他们的键盘,而且,用户只会看到适合当前输入类型的按键。

输入类型 标准键盘
url
输入一个网址,必须以有效的网址组合开始,例如: http://, ftp://或者mailto:.
tel
输入电话号码,并不存在强制特定的有效结构。所以如果你想确定一个特定格式,你可以使用pattern。
email
输入邮件地址,@符号应该默认出现在键盘上。如果要提供不止一个邮件地址,你可以添加多属性实现。
search
文本输入区域的风格和平台搜索区域的风格是一致的。
number
输入数值,这些数字可以是任何合理的整数或是浮点数。
range
输入数值,但因其值并不重要而不同于数字输入类型。它会以滑块控件的形式显示在用户面前。
datetime-local
在本地时区下输入一个日期值和时间值。
date
仅输入一个日期值,而且不提供时区。
time
仅输入一个时间值,而且不提供时区。
week
仅输入一个星期值,而且不提供时区。
month
仅输入一个月份值,而且不提供时区。
color
选择一个颜色。

在输入时用datalist元素提供建议

datalist元素并不是一种输入类型,它是一个建议输入内容的列表,并和表单字段相关。在用户输入的时候,它让浏览器给用户推荐自动完成的选项。不像选择元素,用户必须浏览冗长的列表来搜寻他们所寻找的值,并且限制用户停留在列表上。datalist只在用户输入时会提供提示。

    <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>
    
查看完整示例

谨记

  • datalist 值作为建议提供给用户,但是用户不会局限于所提供的建议中。

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

回到顶部