• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • <input>

    HTML <input>元素用于为基于Web的表单创建交互式控件,以便接受来自用户的数据;可以使用各种类型的输入数据和控件小部件,具体取决于设备和user agent。

    浏览器支持

    所有浏览器都支持<input>

    示例

    你可以使用各种与颜色相关的属性来设置<input>元素的样式。与文本输入相关的元素特有的一个不常见的特性是CSScaret-color属性,该属性允许你设置用于绘制文本输入插入符的颜色

    //HTML
    <label for="textinput">note the red caret:</label>
    <input id="textinput" class="custom" size="32"/>
    
    //css
    input.custom {
      caret-color: red;
      font: 16px "helvetica", "arial", "sans-serif"
    }
    

    定义和用法

    <input>标签定义输入字段,用户可在其中输入数据。

    内容分类流动区域;内容区域;交互式内容(如果不是处于hiddenhidden状态);列表,可标签,可提交,可重置,与表单相关的元素。
    允许的内容无,这是一个空元素。
    标签省略

    必须有开始标签但不必有结束标签。

    允许的祖先元素任何元素都可以包含语句型元素。
    允许的无障碍网络应用
    • type=button:link,menuitem,menuitemcheckbox,menuitemradio,radio,switch,tabtype=checkbox:button,menuitemcheckbox,option,switchtype=image:link,menuitem,menuitemcheckbox,menuitemradio,radio,switchtype=radio:menuitemradiotype=color | date | datetime | datetime-local | email | file: None
    • type=hidden | month | number | password | range | research: None
    • type=search | submit | tel | text | url | week: None
    DOM 接口HTMLInputElement

    属性

    • type<input>的工作方式因其类型属性的值而有很大差异,不同的类型会在各自的参考页中进行介绍。如果未指定此属性,则采用的默认类型为text

      可用的值包括:

      • button:无缺省行为按钮。
      • checkbox:复选框。必须使用 value 属性定义此控件被提交时的值。使用checked 属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态(大多数平台上,显示为一条穿过复选框的水平线)。
      • colorHTML5新增用于指定颜色的控件。
      • dateHTML5新增用于输入日期的控件(年,月,日,不包括时间)。
      • datetime-localHTML5新增用于输入日期时间控件,不包含时区。
      • emailHTML5新增用于编辑 e-mail 的字段。合适的时候可以使用:valid:invalidCSS 伪类。
      • file:此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。
      • hidden:不显示在页面上的控件,但它的值会被提交到服务器。
      • image:图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。
      • monthHTML5新增用于输入年月的控件,不带时区。
      • number:HTML5新增用于输入浮点数的控件。
      • password:一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度。maxlength THML5中废弃。此功能已过时。尽量避免使用它。
    • readonly这个布尔属性用于指明用户无法修改控件的值。

      HTML5新增如果控件的type属性为hidden,range,color,checkbox,radio,file或type时,此属性会被忽略。

    • requiredHTML5新增
      这个属性指定用户在提交表单之前必须为该元素填充值。当type属性是hidden,image或者按钮类型(submit,reset,button)时不可使用.:optional:requiredCSS 伪元素的样式将可以被该字段应用作外观.
    • selectionDirectionHTML5新增
      The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTLlocale, or "backward" if the selection was made in the opposite direction. This can be "none"if the selection direction is unknown.
    • size控件的初始大小。以像素为单位。但当type属性为text或password时,它表示输入的字符的长度。从HTML5开始,此属性仅适用于当type属性为text,search,tel,url,email,或password;否则会被忽略。此外,它的值必须大于0。如果未指定大小,则使用默认值20。HTML5概述"用户代理应该确保至少大部分字符是可见的",但是不同的字符的用不同的字体表示可能会导致宽度不同。在某些浏览器中,一串带有x的字符即使定义了到x的大小也将显示不完整。。
    • spellcheckHTML5新增
      将此属性的值设置为true表示元素需要检查其拼写和语法。值default表示该元素将根据默认行为进行操作,可能基于父元素自己的spellcheck值。值false表示不应该检查元素
    • src如果type属性的值是image,这个属性指定了按钮图片的路径;否则它被忽视.
    • stepHTML5新增
      使用minmax属性来限制可以设置数字或日期时间值的增量。它可以是任意字符串或是正浮点数。如果此属性未设置为任何,则控件仅接受大于最小步长值的倍数的值。
    • tabindexelement-specific in, global in HTML5新增
    • 元素在当前文档的Tab导航顺序中的位置。
    • usemapTHML5中废弃
    • 作为图像映射的<map>元素的名称.
    • value控件的初始值。此属性是可选的,除非type属性是radiocheckbox。注意,当重新加载页面时,如果在重新加载之前更改了值,Gecko和IE将忽略HTML源代码中指定的值。
    • widthHTML5新增
      如果type属性的值是image,这个属性定义了按钮图片的宽度。

    非标准<input>属性

    • autocorrect尚未标准化
      This is a non-standard attribute supported by Safari that is used to control whether autocorrection should be enabled when the user is entering/editing the text value of the<input>. Possible attribute values are:
      • on: Enable autocorrection.
      • off: Disable autocorrection.
      autocorrectdocumentationin the Safari HTML Reference.
    • incremental尚未标准化
      This is a nonstandard attribute supported by WebKit(Safari)and Blink(Chrome)that only applies when thetypeissearch. If the attribute is present, regardless of what its value is, the<input>firessearchevents as the user edits the text value. The event is only fired after an implementation-defined timeout has elapsed since the most recent keystroke, and new keystrokes reset the timeout. In other words, the event firing is debounced. If the attribute is absent, thesearchevent is only fired when the user explicitly initiates a search(e.g. by pressing the Enter key while within field).incrementaldocumentation in the Safari HTML Reference
    • mozactionhint尚未标准化
      Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values arego,done,next,search, andsend. These automatically get mapped to the appropriate string and are case-insensitive.
    • results尚未标准化
      This is a nonstandard attribute supported by Safari that only applies when thetypeissearch. It is used to control the maximum number of entries that should be displayed in the<input>'s native dropdown list of past search queries. Its value should be a nonnegative decimal integer.
    • webkitdirectory尚未标准化
      This Boolean attribute indicates if the selector used when thetypeattribute isfilehas to allow for the selection of directories only.
    • x-moz-errormessage尚未标准化
      This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.

    属性

    属性描述45
    acceptlist_of_mime_types一个逗号分隔的 MIME 类型列表,指示文件传输的 MIME 类型。注释:仅可与 type="file"配合使用。45
    align
    • left
    • right
    • top
    • texttop
    • middle
    • absmiddle
    • baseline
    • bottom
    • absbottom

    定义图像之后的文本对齐方式。

    不支持,请使用 CSS 代替。

    4
    alttext

    定义图像的替代文本。

    注释:仅可与 type="image"配合使用。

    45
    autocomplete5
    autofocus
    • true
    • false

    当页面加载时,使输入字段获得焦点。

    注释:type="hidden"时,无法使用。

    5
    checked
    • true
    • false

    指示此 input 元素首次加载时应当被选中。

    注释:请与 type="checkbox"及 type="radio"配合使用。

    45
    disabled
    • true
    • false

    当 input 元素首次加载时禁用此元素,这样用户就无法在其中写文本,或选定它。

    注释:不能与 type="hidden"一同使用。

    45
    form
    • true
    • false
    定义输入字段属于一个或多个表单。5
    inputmodeinputmode定义预期的输入类型。5
    listid of a datalist引用 datalist 元素。如果定义,则一个下拉列表可用于向输入字段插入值。5
    maxnumber输入字段的最大值。5
    maxlengthnumber定义文本域中所允许的字符最大数目。45
    minnumber输入字段的最小值。5
    namefield_name为 input 元素定义唯一的名称。45
    pattern5
    readonlyreadonly指示是否可修改该字段的值。45
    replacetext定义当表单提交时如何处理该输入字段。5
    required
    • true
    • false

    定义输入字段的值是否是必需的。

    当使用下列类型时无法使用:hidden, image, button, submit, reset

    5
    sizenumber_of_char定义 input 元素的大小。不再支持。4
    srcURL

    定义要显示的图像的 URL。

    仅用于 type="image"时。

    45
    step5
    templatetemplate定义一个或多个模板。5
    type
    • button
    • checkbox
    • date
    • datetime
    • datetime-local
    • email
    • file
    • hidden
    • image
    • month
    • number
    • password
    • radio
    • range
    • reset
    • submit
    • text
    • time
    • url
    • week

    指示 input 元素的类型。

    默认值是"text"

    注释:该属性不是必需的。但是我们认为应该使用它。

    45
    valuevalue

    对于按钮、重置按钮和确认按钮:定义按钮上的文本。

    对于图像按钮:定义传递向某个脚本的此域的符号结果。

    对于复选框和单选按钮:定义 input 元素被点击时的结果。

    对于隐藏域、密码域以及文本域:定义元素的默认值。

    注释:不能与 type="file"一同使用。

    注释:与 type="checkbox"和 type="radio"一同使用时,此元素是必需的。

    45

    HTML 4.01 与 HTML 5 之间的差异

    在 HTML 5 中,该元素有很多新属性,同时不再支持 HTML 4.01 中的一些属性。

    在 HTML 5 中,type 属性有很多新的值。

    实例

    一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮:

    <form action="./">
    	first name:<input type="text" name="fname"><br>
    	last name:<input type="text" name="lname"><br>
    	<input type="submit" value="submit">
    </form>
    

    <input>标签type属性

    type属性指定要显示的<input>元素的类型。默认类型是text。

    属性值描述
    button定义可单击的按钮(主要与JavaScript一起使用以激活脚本)
    checkbox定义一个复选框
    color HTML5新增定义颜色选择器
    date HTML5新增定义日期控件(年,月,日(无时间))
    datetime-local HTML5新增定义日期和时间控件(年,月,日,时间(无时区)
    email HTML5新增定义电子邮件地址的字段
    file定义文件选择字段和“浏览”按钮(用于文件上载)
    hidden定义隐藏的输入字段
    image将图像定义为提交按钮
    month HTML5新增定义月份和年份控件(无时区)
    number HTML5新增定义用于输入数字的字段
    password定义密码字段
    radio定义单选按钮
    range HTML5新增定义范围控件(如滑块控件)
    reset定义重置按钮
    search HTML5新增定义用于输入搜索字符串的文本字段
    submit定义提交按钮
    tel HTML5新增定义用于输入电话号码的字段
    text默认。定义单行文本字段
    time HTML5新增定义用于输入时间的控件(无时区)
    url HTML5新增定义用于输入URL的字段
    week HTML5新增定义周和年控制(无时区)

    button值

    <form>
    	<input type="button" value="点击我" onclick="msg()">
    </form>
    

    checkbox值

    <form action="./">
    	<input type="checkbox" name="vehicle1" value="Bike"> 我有一辆自行车<br>
    	<input type="checkbox" name="vehicle2" value="Car"> 我有一辆自轿车<br>
    	<input type="checkbox" name="vehicle3" value="Boat" checked> 我有一只船<br><br>
    	<input type="submit" value="提交">
    </form>
    
    我有一辆自行车
    我有一辆自轿车
    我有一只船

    color值

    <form action="./">
      选择您喜欢的颜色: <input type="color" name="favcolor" value="#00ff00"><br><br>
      <input type="submit">
    </form>
    
    选择您喜欢的颜色:

    date值

    <form action="./">
      生日: <input type="date" name="bday">
      <input type="submit">
    </form>
    
    生日:

    datetime-local值

    <form action="./">
      生日: <input type="datetime-local" name="bdaytime">
      <input type="submit">
    </form>
    
    生日:

    email值

    <form action="./">
      E-mail: <input type="email" name="emailaddress">
      <input type="submit">
    </form>
    
    E-mail:

    file值

    <form action="./">
      选择文件: <input type="file" name="myFile"><br><br>
      <input type="submit">
    </form>
    
    选择文件:

    hidden值

    <form action="./">
      用户名: <input type="text" name="fname"><br>
      <input type="hidden" id="custId" name="custId" value="3487">
      <input type="submit" value="提交">
    </form>
    
    用户名:

    image值

    <form action="./">
      姓氏: <input type="text" name="fname"><br>
      名字: <input type="text" name="lname"><br>
      <input type="image" src="https://www.lanmper.cn/upload/image/202004/jquery.jpg" alt="Submit" width="48" height="48">
    </form>
    
    姓氏:
    名字:

    month值

    <form action="./">
      生日(年和月): <input type="month" name="bdaymonth">
      <input type="submit">
    </form>
    
    生日(年和月):

    number值

    <form action="./">
      数量 (1 - 5): <input type="number" name="quantity" min="1" max="5">
      <input type="submit">
    </form>
    
    数量(1 - 5):

    password值

    <form action="./">
      用户名: <input type="text" name="username"><br>
      密码: <input type="password" name="pwd" maxlength="8"><br>
      <input type="submit">
    </form>
    
    用户名:
    密码:

    radio值

    <form action="./">
      <input type="radio" name="gender" value="male"> PHP<br>
      <input type="radio" name="gender" value="female"> Java<br>
      <input type="radio" name="gender" value="other"> Python<br>  
      <input type="submit" value="Submit">
    </form>
    
    PHP
    Java
    Python

    range值

    <form action="./">
    范围: <input type="range" name="points" min="0" max="10">
    <input type="submit">
    </form>
    
    范围:

    reset值

    <form action="./">
      Email: <input type="text" name="email"><br>
      Pin: <input type="text" name="pin" maxlength="4"><br>
      <input type="reset" value="Reset">
      <input type="submit" value="Submit">
    </form>
    
    Email:
    Pin:

    search值

    <form action="./">
      百度搜索: <input type="search" name="q"><br>
      <input type="submit">
    </form>
    
    百度搜索:

    submit值

    <form action="./">
    First name: <input type="text" name="firstname" value="Mickey"><br>
    Last name: <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="提交">
    </form> 
    
    First name:
    Last name:

    tel值

    <form action="./">
      电话号码: <input type="tel" name="usrtel"><br>
      <input type="submit">
    </form> 
    
    电话号码:

    text值

    <form action="./">
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit">
    </form>
    
    First name:
    Last name:

    time值

    <form action="./">
      选择一个时间: <input type="time" name="usr_time">
      <input type="submit">
    </form>
    
    选择一个时间:

    url值

    <form action="./">
      添加你的主页: <input type="url" name="homepage"><br>
      <input type="submit">
    </form>
    
    添加你的主页:

    week值

    <form action="./">
      选择星期: <input type="week" name="year_week">
      <input type="submit">
    </form>
    
    选择星期:

    上篇:<form>

    下篇:<label>