<input>

简介

<input>标签是一个行内元素，用来接收用户的输入。它是一个单独使用的标签，没有结束标志。

它有多种类型，取决于type属性的值，默认值是text，表示一个输入框。

  1. <input>
  2. <!-- 等同于 -->
  3. <input type="text">

上面代码会生成一个单行的输入框，用户可以在里面输入文本。

<input>的属性非常多，有些属性是某个类型专用的，放在下文的“类型”部分介绍。这里介绍一些所有类型的共同属性。

  • autofocus：布尔属性，是否在页面加载时自动获得焦点。
  • disabled：布尔属性，是否禁用该控件。一旦设置，该控件将变灰，用户可以看到，但是无法操作。
  • form：关联表单的id属性。设置了该属性后，控件可以放置在页面的任何位置，否则只能放在<form>内部。
  • list：关联的<datalist>的id属性，设置该控件相关的数据列表，详见后文。
  • name：控件的名称，主要用于向服务器提交数据时，控件键值对的键名。注意，只有设置了name属性的控件，才会向服务器提交，不设置就不会提交。
  • readonly：布尔属性，是否为只读。
  • required：布尔属性，是否为必填。
  • type：控件类型，详见下文。
  • value：控件的值。

类型

type属性决定了<input>的形式。该属性可以取以下值。

（1）text

type="text"是普通的文本输入框，用来输入单行文本。如果用户输入换行符，换行符会自动从输入中删除。

  1. <input type="text" id="name" name="name" required
  2.        minlength="4" maxlength="8" size="10">

text输入框有以下配套属性。

  • maxlength：可以输入的最大字符数，值为一个非负整数。
  • minlength：可以输入的最小字符数，值为一个非负整数，且必须小于maxlength。
  • pattern：用户输入必须匹配的正则表达式，比如要求用户输入4个～8个英文字符，可以写成pattern="[a-z]{4,8}"。如果用户输入不符合要求，浏览器会弹出提示，不会提交表单。
  • placeholder：输入字段为空时，用于提示的示例值。只要用户没有任何字符，该提示就会出现，否则会消失。
  • readonly：布尔属性，表示该输入框是只读的，用户只能看，不能输入。
  • size：表示输入框的显示长度有多少个字符宽，它的值是一个正整数，默认等于20。超过这个数字的字符，必须移动光标才能看到。
  • spellcheck：是否对用户输入启用拼写检查，可能的值为true或false。

（2）search

type="search"是一个用于搜索的文本输入框，基本等同于type="text"。某些浏览器会在输入的时候，在输入框的尾部显示一个删除按钮，点击就会删除所有输入，让用户从头开始输入。

下面是一个例子。

  1. <form>
  2.   <input type="search" id="mySearch" name="q"
  3.     placeholder="输入搜索词……" required>
  4.   <input type="submit" value="搜索">
  5. </form>

（3）button

type="button"是没有默认行为的按钮，通常脚本指定click事件的监听函数来使用。

  1. <input type="button" value="点击">

建议尽量不使用这个类型，而使用<button>标签代替，一则语义更清晰，二则<button>标签内部可以插入图片或其他 HTML 代码。

（4）submit

type="submit"是表单的提交按钮。用户点击这个按钮，就会把表单提交给服务器。

  1. <input type="submit" value="提交">

如果不指定value属性，浏览器会在提交按钮上显示默认的文字，通常是Submit。

该类型有以下配套属性，用来覆盖<form>标签的相应设置。

  • formaction：提交表单数据的服务器 URL。
  • formenctype：表单数据的编码类型。
  • formmethod：提交表单使用的 HTTP 方法（get或post）。
  • formnovalidate：一个布尔值，表示数据提交给服务器之前，是否要忽略表单验证。
  • formtarget：收到服务器返回的数据后，在哪一个窗口显示。

（5）image

type="image"表示将一个图像文件作为提交按钮，行为和用法与type="submit"完全一致。

  1. <input type="image" alt="登陆" src="login-button.png">

上面代码中，图像文件是一个可以点击的按钮，点击后会提交数据到服务器。

该类型有以下配套属性。

  • alt：图像无法加载时显示的替代字符串。
  • src：加载的图像 URL。
  • height：图像的显示高度，单位为像素。
  • width：图像的显示宽度，单位为像素。
  • formaction：提交表单数据的服务器 URL。
  • formenctype：表单数据的编码类型。
  • formmethod：提交表单使用的 HTTP 方法（get或post）。
  • formnovalidate：一个布尔值，表示数据提交给服务器之前，是否要忽略表单验证。
  • formtarget：收到服务器返回的数据后，在哪一个窗口显示。

用户点击图像按钮提交时，会额外提交两个参数x和y到服务器，表示鼠标的点击位置，比如x=52&y=55。x是横坐标，y是纵坐标，都以图像左上角作为原点(0, 0)。如果图像按钮设置了name属性，比如name="position"，那么将以该值作为坐标的前缀，比如position.x=52&position.y=55。这个功能通常用来地图类型的操作，让服务器知道用户点击了地图的哪个部分。

（6）reset

type="reset"是一个重置按钮，用户点击以后，所有表格控件重置为初始值。

  1. <input type="reset" value="重置">

如果不设置value属性，浏览器会在按钮上面加上默认文字，通常是Reset。

这个控件用处不大，用户点错了还会使得所有已经输入的值都被重置，建议不要使用。

（7）checkbox

type="checkbox"是复选框，允许选择或取消选择该选项。

  1. <input type="checkbox" id="agreement" name="agreement" checked>
  2. <label for="agreement">是否同意</label>

上面代码会在文字前面，显示一个可以点击的选择框，点击可以选中，再次点击可以取消。上面代码中，checked属性表示默认选中。

value属性的默认值是on。也就是说，如果没有设置value属性，以上例来说，选中复选框时，会提交agreement=on。如果没有选中，提交时不会有该项。

多个相关的复选框，可以放在<fieldset>里面。

  1. <fieldset>
  2.   <legend>你的兴趣</legend>
  3.   <div>
  4.     <input type="checkbox" id="coding" name="interest" value="coding">
  5.     <label for="coding">编码</label>
  6.   </div>
  7.   <div>
  8.     <input type="checkbox" id="music" name="interest" value="music">
  9.     <label for="music">音乐</label>
  10.   </div>
  11. </fieldset>

上面代码中，如果用户同时选中两个复选框，提交的时候就会有两个name属性，比如interest=coding&interest=music。

（8）radio

type="radio"是单选框，表示一组选择之中，只能选中一项。单选框通常为一个小圆圈，选中时会被填充或突出显示。

  1. <fieldset>
  2.   <legend>性别</legend>
  3.   <div>
  4.     <input type="radio" id="male" name="gender" value="male">
  5.     <label for="male">男</label>
  6.   </div>
  7.   <div>
  8.     <input type="radio" id="female" name="gender" value="female">
  9.     <label for="female">女</label>
  10.   </div>
  11. </fieldset>

上面代码中，性别只能在两个选项之中，选择一项。

注意，多个单选框的name属性的值，应该都是一致的。提交到服务器的就是选中的那个值。

该类型的配套属性如下。

  • checked：布尔属性，表示是否默认选中当前项。
  • value：用户选中该项时，提交到服务器的值，默认为on'。

（9）email

type="email"是一个只能输入电子邮箱的文本输入框。表单提交之前，浏览器会自动验证是否符合电子邮箱的格式，如果不符合就会显示提示，无法提交到服务器。

  1. <input type="email" pattern=".+@foobar.com" size="30" required>

上面代码会生成一个必填的文本框，只能输入后缀为foobar.com的邮箱地址。

该类型有一个multiple的布尔属性，一旦设置，就表示该输入框可以输入多个逗号分隔的电子邮箱。

  1. <input id="emailAddress" type="email" multiple required>

注意，如果同时设置了multiple属性和required属性，零个电子邮箱是允许的，也就是该输入框允许为空。

该类型的配套属性如下。

  • maxlength：可以输入的最大字符数。
  • minlength：可以输入的最少字符数。
  • multiple：布尔属性，是否允许输入多个以逗号分隔的电子邮箱。
  • pattern：输入必须匹配的正则表达式。
  • placeholder：输入为空时的显示文本。
  • readonly：布尔属性，该输入框是否只读。
  • size：一个非负整数，表示输入框的显示长度为多少个字符。
  • spellcheck：是否对输入内容启用拼写检查，可能的值为true或false。

该类型还可以搭配<datalist>标签，提供输入的备选项。

  1. <input type="email" size="40" list="defaultEmails">
  3. <datalist id="defaultEmails">
  4.   <option value="jbond007@mi6.defence.gov.uk">
  5.   <option value="jbourne@unknown.net">
  6.   <option value="nfury@shield.org">
  7.   <option value="tony@starkindustries.com">
  8.   <option value="hulk@grrrrrrrr.arg">
  9. </datalist>

上面代码中，输入焦点进入输入框以后，会显示一个下拉列表，里面有五个参考项，供用户参考。

（10）password

type="password"是一个密码输入框。用户的输入会被遮挡，字符通常显示星号（*）或点（·）。

  1. <input type="password" id="pass" name="password"
  2.            minlength="8" required>

浏览器对该类型输入框的显示，会有所差异。一种常见的处理方法是，用户每输入一个字符，先在输入框里面显示一秒钟，然后再遮挡该字符。

如果用户输入内容包含换行符（U+000A）和回车符（U+000D），浏览器会自动将这两个字符过滤掉。

该类型的配套属性如下。

  • maxlength：可以输入的最大字符数。
  • minlength：可以输入的最少字符数。
  • pattern：输入必须匹配的正则表达式。
  • placeholder：输入为空时的显示文本。
  • readonly：布尔属性，该输入框是否只读。
  • size：一个非负整数，表示输入框的显示长度为多少个字符。
  • autocomplete：是否允许自动填充，可能的值有on（允许自动填充）、off（不允许自动填充）、current-password（填入当前网站保存的密码）、new-password（自动生成一个随机密码）。
  • inputmode：允许用户输入的数据类型，可能的值有none（不使用系统输入法）、text（标准文本输入）、decimal（数字，包含小数）、numeric（数字0-9）等。

（11）file

type="file"是一个文件选择框，允许用户选择一个或多个文件，常用于文件上传功能。

  1. <input type="file"
  2.        id="avatar" name="avatar"
  3.        accept="image/png, image/jpeg">

该类型有以下属性。

  • accept：允许选择的文件类型，使用逗号分隔，可以使用 MIME 类型（比如image/jpeg），也可以使用后缀名（比如.doc），还可以使用audio/*（任何音频文件）、video/*（任何视频文件）、image/*（任何图像文件）等表示法。
  • capture：用于捕获图像或视频数据的源，可能的值有user（面向用户的摄像头或麦克风），environment（外接的摄像头或麦克风）。
  • multiple：布尔属性，是否允许用户选择多个文件。

（12）hidden

type="hidden"是一个不显示在页面的控件，用户无法输入它的值，主要用来向服务器传递一些隐藏信息。比如，CSRF 攻击会伪造表单数据，那么使用这个控件，可以为每个表单生成一个独一无二的隐藏编号，防止伪造表单提交。

  1. <input id="prodId" name="prodId" type="hidden" value="xm234jq">

上面这个控件，页面上是看不见的。用户提交表单的时候，浏览器会将prodId=xm234jq发给服务器。

（13）number

type="number"是一个数字输入框，只能输入数字。浏览器通常会在输入框的最右侧，显示一个可以点击的上下箭头，点击向上箭头，数字会递增，点击向下箭头，数字会递减。

  1. <input type="number" id="tentacles" name="tentacles"
  2.        min="10" max="100">

上面代码指定数字输入框，最小可以输入10，最大可以输入100。

该类型可以接受任何数值，包括小数和整数。可以通过step属性，限定只接受整数。

该类型有以下配套属性。

  • max：允许输入的最大数值。
  • min：允许输入的最小数值。
  • placeholder：用户输入为空时，显示的示例值。
  • readonly：布尔属性，表示该控件是否为只读。
  • step：点击向上和向下箭头时，数值每次递减的步长值。如果用户输入的值，不符合步长值的设定，浏览器会自动四舍五入到最近似的值。默认的步长值是1，如果初始的value属性设为1.5，那么点击向上箭头得到2.5，点击向下箭头得到0.5。

（14）range

type="range"是一个滑块，用户拖动滑块，选择给定范围之中的一个数值。因为拖动产生的值是不精确的，如果需要精确数值，不建议使用这个控件。常见的例子是调节音量。

  1. <input type="range" id="start" name="volume"
  2.          min="0" max="11">

上面代码会产生一个最小值为0、最大值为11的滑块区域。用户拖动滑块，选择想要的音量。

该类型的配套属性如下，用法与type="number"一致。

  • max：允许的最大值，默认为100。
  • min：允许的最小值，默认为0。
  • step：步长值，默认为1。

value属性的初始值就是滑块的默认位置。如果没有设置value属性，滑块默认就会停在最大值和最小值中间。如果max属性、min属性、value属性都没有设置，那么value属性为50。

该类型与<datalist>标签配合使用，可以在滑动区域产生刻度。

  1. <input type="range" list="tickmarks">
  3. <datalist id="tickmarks">
  4.   <option value="0" label="0%">
  5.   <option value="10">
  6.   <option value="20">
  7.   <option value="30">
  8.   <option value="40">
  9.   <option value="50" label="50%">
  10.   <option value="60">
  11.   <option value="70">
  12.   <option value="80">
  13.   <option value="90">
  14.   <option value="100" label="100%">
  15. </datalist>

上面代码会在0～100之间产生11个刻度。其中，0%、50%和100%三个位置会有文字提示，不过浏览器很可能不支持。

注意，浏览器生成的都是水平滑块。如果想要生成垂直滑块，可以使用 CSS 改变滑块区域的方向。

（15）url

type="url"是一个只能输入网址的文本框。提交表单之前，浏览器会自动检查网址格式是否正确，如果不正确，就会无法提交。

  1. <input type="url" name="url" id="url"
  2.        placeholder="https://example.com"
  3.        pattern="https://.*" size="30"
  4.        required>

上面代码的pattern属性指定输入的网址只能使用 HTTPS 协议。

注意，该类型规定，不带有协议的网址是无效的，比如foo.com是无效的，http://foo.com是有效的。

该类型的配套属性如下。

  • maxlength：允许的最大字符数。
  • minlength：允许的最少字符串。
  • pattern：输入内容必须匹配的正则表达式。
  • placeholder：输入为空时显示的示例文本。
  • readonly：布尔属性，表示该控件的内容是否只读。
  • size：一个非负整数，表示该输入框显示宽度为多少个字符。
  • spellcheck：是否启动拼写检查，可能的值为true（启用）和false（不启用）。

该类型与<datalist>标签搭配使用，可以形成下拉列表供用户选择。随着用户不断键入，会缩小显示范围，只显示匹配的备选项。

  1. <input id="myURL" name="myURL" type="url"
  2.        list="defaultURLs">
  4. <datalist id="defaultURLs">
  5.   <option value="https://developer.mozilla.org/" label="MDN Web Docs">
  6.   <option value="http://www.google.com/" label="Google">
  7.   <option value="http://www.microsoft.com/" label="Microsoft">
  8.   <option value="https://www.mozilla.org/" label="Mozilla">
  9.   <option value="http://w3.org/" label="W3C">
  10. </datalist>

上面代码中，<option>的label属性表示文本标签，显示在备选下拉框的右侧，网址显示在左侧。

（16）tel

type="tel"是一个只能输入电话号码的输入框。由于全世界的电话号码格式都不相同，因此浏览器没有默认的验证模式，大多数时候需要自定义验证。

  1. <input type="tel" id="phone" name="phone"
  2.        pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
  3.        required>
  5. <small>Format: 123-456-7890</small>

上面代码定义了一个只能输入10位电话号码的输入框。

该类型的配套属性如下。

  • maxlength：允许的最大字符数。
  • minlength：允许的最少字符串。
  • pattern：输入内容必须匹配的正则表达式。
  • placeholder：输入为空时显示的示例文本。
  • readonly：布尔属性，表示该控件的内容是否只读。
  • size：一个非负整数，表示该输入框显示宽度为多少个字符。

（17）color

type="color"是一个选择颜色的控件，它的值一律都是#rrggbb格式。

  1. <input type="color" id="background" name="background"
  2.            value="#e66465">

上面代码在 Chrome 浏览器中，会显示一个#e66465的色块。点击色块，就会出现一个拾色器，供用户选择颜色。

如果没有指定value属性的初始值，默认值为#000000（黑色）。

（18）date

type="date"是一个只能输入日期的输入框，用户可以输入年月日，但是不能输入时分秒。输入格式是YYYY-MM-DD。

  1. <input type="date" id="start" name="start"
  2.        value="2018-07-22"
  3.        min="2018-01-01" max="2018-12-31">

上面代码会显示一个输入框，默认日期是2018年7月22日。用户点击以后，会日期选择器，供用户选择新的日期。

该类型有以下配套属性。

  • max：可以允许的最晚日期，格式为yyyy-MM-dd。
  • min：可以允许的最早日期，格式为yyyy-MM-dd。
  • step：步长值，一个数字，以天为单位。

（19）time

type="time"是一个只能输入时间的输入框，可以输入时分秒，不能输入年月日。日期格式是24小时制的hh:mm，如果包括秒数，格式则是hh:mm:ss。日期选择器的形式则随浏览器不同而不同。

  1. <input type="time" id="appt" name="appt"
  2.        min="9:00" max="18:00" required>
  4. <small>营业时间上午9点到下午6点</small>

该类型有以下配套属性。

  • max：允许的最晚时间。
  • min：允许的最早时间。
  • readonly：布尔属性，表示用户是否不可以编辑时间。
  • step：步长值，单位为秒。
  1. <input id="appt" type="time" name="appt" step="2">

上面代码中，调节控件的话，时间每次改变的幅度是2秒钟。

（20）month

type="month"是一个只能输入年份和月份的输入框，格式为YYYY-MM。

  1. <input type="month" id="start" name="start"
  2.        min="2018-03" value="2018-05">

该类型有以下配套属性。

  • max：允许的最晚时间，格式为yyyy-MM。
  • min：允许的最早时间，格式为yyyy-MM。
  • readonly：布尔属性，表示用户是否不可以编辑时间。
  • step：步长值，单位为月。

（21）week

type="week"是一个输入一年中第几周的输入框。格式为yyyy-Www，比如2018-W18表示2018年第18周。

  1. <input type="week" name="week" id="camp-week"
  2.        min="2018-W18" max="2018-W26" required>

该类型有以下配套属性。

  • max：允许的最晚时间，格式为yyyy-Www。
  • min：允许的最早时间，格式为yyyy-Www。
  • readonly：布尔属性，表示用户是否不可以编辑时间。
  • step：步长值，单位为周。

（22）datetime-local

type="datetime-local"是一个时间输入框，让用户输入年月日和时分，格式为yyyy-MM-ddThh:mm。注意，该控件不支持秒。

  1. <input type="datetime-local" id="meeting-time"
  2.        name="meeting-time" value="2018-06-12T19:30"
  3.        min="2018-06-07T00:00" max="2018-06-14T00:00">

该类型有以下配套属性。

  • max：允许的最晚时间，格式为yyyy-MM-ddThh:mm。
  • min：允许的最早时间，格式为yyyy-MM-ddThh:mm。
  • step：步长值，单位为秒，默认值是60。