55. 文本类输入：text/search/url/email/tel

这些类型看起来都是”输入文字”，但各有各的语义和特殊行为。

text：通用文本

最基础的类型，单行文本输入。

<input type="text" name="username" placeholder="请输入用户名">

placeholder 是占位提示文字，用户一开始输入就消失。

search：搜索框

语义上表示搜索。某些浏览器会在右侧显示一个清除按钮（小叉号）。

<input type="search" name="q" placeholder="搜索关键词">

在 Safari 和 Chrome 里，搜索框的边角更圆润。功能和 text 基本一样，但语义更明确。

url：网址输入

专门输入网址用的。

<input type="url" name="website" placeholder="https://example.com">

提交时会自动校验是不是合法 URL 格式（必须有协议开头，比如 https://）。

手机上点这个输入框，键盘会变成带 .com 快捷按钮的版本。

email：邮箱输入

用来输入邮箱地址。

<input type="email" name="email" placeholder="your@email.com">

提交时自动校验邮箱格式（有没有 @ 符号）。

手机上键盘会显示 @ 按键，方便输入。

<!-- 支持输入多个邮箱 -->
<input type="email" name="emails" multiple>

加 multiple 属性后，用户可以输入多个逗号分隔的邮箱。

tel：电话号码

<input type="tel" name="phone" placeholder="13800138000">

注意：tel 类型不做格式校验。它的主要价值在移动端——手机会弹出数字键盘。

如果需要限制格式，配合 pattern 属性：

<input type="tel" name="phone" pattern="1[3-9]\d{9}" title="请输入11位手机号">

pattern 属性：自定义校验

pattern 接受一个正则表达式，提交时按此规则校验。

<input type="text" name="zipcode" pattern="[0-9]{6}" title="请输入6位邮编">

不符合规则时浏览器会弹出 title 里的提示信息。

各类型移动键盘差异

type 类型	移动端键盘特点
text	默认字母键盘
search	带搜索按钮
url	带 .com、/ 快捷键
email	带 @ 和 . 快捷键
tel	数字键盘

选对 type，用户体验直接提升一个档次。

完整示例

一个”联系我”表单：

<form>
  <p>
    <label>搜索：
      <input type="search" name="q" placeholder="关键词...">
    </label>
  </p>
  <p>
    <label>网址：
      <input type="url" name="site" placeholder="https://">
    </label>
  </p>
  <p>
    <label>邮箱：
      <input type="email" name="email" placeholder="your@mail.com">
    </label>
  </p>
  <p>
    <label>电话：
      <input type="tel" name="phone" placeholder="13800138000">
    </label>
  </p>
  <p>
    <button type="submit">提交</button>
  </p>
</form>

手机上点进每个框，键盘都不一样。这就是选对 type 的好处。