欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

总结

程序员文章站 2022-04-21 21:04:53
...

注: 参考文档 - 菜鸟教程

<input> 标签属性

accept - 文件选择

  • 定义
    accept 属性规定了可通过文件上传提交的服务器接受的文件类型

  • 注意
    accept 属性仅适用于 <input type="file">

  • 提示
    请不要将该属性作为您的验证工具。应该在服务器上对文件上传进行验证

  • 语法

<input accept="audio/*|video/*|image/*|MIME_type">
<!--  提示:如需规定多个值,请使用逗号分隔(比如 <input accept="audio/*,video/*,image/*" />) -->
  • 实例
<form action="demo_form.php">
    <input type="file" name="test-1" accept="audio/*"> <!-- 接受所有的声音文件 -->
    <input type="file" name="test-2" accept="video/*"> <!-- 接受所有的视频文件 -->
    <input type="file" name="test-3" accept="image/*"> <!-- 接受所有的图像文件 -->
    <input type="file" name="test-4" accept="MIME_type"> <!-- 一个有效的 MIME 类型,不带参数 -->
</form>

alt - 图像替代文本

  • 定义
    alt 属性为用户由于某些原因(比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器)无法查看图像时提供了替代文本

  • 注意
    alt 属性只能与 <input type="image" name="test"> 配合使用

  • 语法

<input alt="text">
<!-- text 规定图像的替代文本 -->
  • 实例
<form action="demo_form.php">
    <input type="image" src="submit.gif" alt="Submit" width="48" height="48">
</form>

autocomplete - 显示历史纪录下拉框

  • 定义
    autocomplete 属性规定输入字段是否应该启用自动完成功能
    自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项

  • 注意
    必须有 name 属性
    autocomplete 属性适用于下面的 <input> 类型:text、search、url、tel、email、password、datepickers、range 和 color

  • 提示
    所有主流浏览器都支持 autocomplete 属性
    在某些浏览器中,您可能需要手动启用自动完成功能(在浏览器菜单的"参数设置"中进行设置)

  • 语法

<input autocomplete="on|off">
<!-- on 默认。规定启用自动完成功能 -->
<!-- off 规定禁用自动完成功能 -->
  • 实例
<form action="demo_form.html" autocomplete="on">
    <input type="text" name="test-1"><br>
    <input type="text" name="test-2" autocomplete="off"><br>
    <input type="submit" name="test">
</form>

autofocus - 自动获取焦点

  • 定义
    autofocus 属性是一个布尔属性
    autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点

  • 语法

<input autofocus>
  • 实例
<form action="demo_form.html">
    First name: <input type="text" name="fname" autofocus><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit">
</form>

checked - 默认选项

  • 定义
    checked 属性是一个布尔属性
    checked 属性规定在页面加载时应该被预先选定的 <input> 元素。
    checked 属性适用于 <input type="checkbox"><input type="radio">
    checked 属性也可以在页面加载后,通过 JavaScript 代码进行设置

  • 语法

<input checked>
  • 实例
<form action="demo_form.php" method="get">
    <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
    <input type="submit" value="提交">
</form>

disabled - 禁用

  • 定义
    disabled 属性是一个布尔属性
    disabled 属性规定应该禁用的 <input> 元素
    被禁用的 input 元素是无法使用和无法点击的
    disabled 属性进行设置,使用户在满足某些条件时(比如选中复选框,等等)才能使用 <input> 元素。然后,可使用 JavaScript 来删除 disabled 值,使该<input> 元素变为可用的状态

  • 注意
    disabled 属性不适用于 <input type="hidden">

  • 提示
    表单中被禁用的 <input> 元素不会被提交

  • 语法

<input disabled>
  • 实例
<form action="demo_form.php">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname" disabled><br>
    <input type="submit" value="提交">
</form>

form - 表单

  • 定义
    form 属性规定 <input> 元素所属的一个或多个表单

  • 注意
    IE 不支持 form 属性

  • 语法

<input form="form_id">
<!-- form_id: 规定 <input> 元素所属的一个或多个表单的 id 列表,以空格分隔 -->
  • 实例
<form action="demo-form.php" id="form1">
    First name: <input type="text" name="fname"><br>
    <input type="submit" value="提交">
</form>

<p> "Last name" 字段没有在 form 表单之内,但它也是 form 表单的一部分</p>

Last name: <input type="text" name="lname" form="form1">

formaction - 当表单提交时处理输入控件的文件的 URL

  • 定义
    formaction 属性规定当表单提交时处理输入控件的文件的 URL
    formaction 属性覆盖 <form> 元素的 action 属性

  • 注意
    formaction 属性只适用于 type="submit" 和 type="image"

  • 语法

<input formaction="URL">
  • 实例
<form action="demo-form.php">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交"><br>
    <input type="submit" formaction="demo-admin.php" value="提交">
</form>

formenctype - 当表单数据提交到服务器时如何编码

  • 定义
    Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 formenctype 属性

  • 注意
    Internet Explorer 9 及之前的版本不支持 <input> 标签的 formenctype 属性

  • 语法

<input formenctype="value">
  • 实例
<form action="demo-post-enctype.php" method="post">
    First name: <input type="text" name="fname"><br>
    <input type="submit" value="提交">
    <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>

formmethod - 发送表单数据到 action URL 的 HTTP 方法

  • 定义
    formmethod 属性定义发送表单数据到 action URL 的 HTTP 方法
    formmethod 属性覆盖 <form> 元素的 method 属性

  • 注意
    formmethod 属性与 type="submit" 和 type="image" 配合使用

  • 提示
    表单数据可被作为 URL 变量的形式来发送(method="get")或者作为 HTTP post 事务的形式来发送(method="post")

  • 语法

<input formmethod="get|post">
  • 实例
<form action="demo-form.php" method="get">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
    <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>

formnovalidate - 表单提交不验证

  • 定义
    novalidate 属性是一个布尔属性
    novalidate 属性规定当表单提交时 <input> 元素不进行验证
    formnovalidate 属性覆盖 <form> 元素的 novalidate 属性 (表单提交验证)

  • 注意
    formnovalidate 属性可与 type="submit" 配合使用

  • 语法

<input formnovalidate="formnovalidate">
<!-- formnovalidate 属性是一个布尔属性,且可通过下面的方式进行设置 -->
<!-- <input formnovalidate> -->
<!-- <input formnovalidate="formnovalidate"> -->
<!-- <input formnovalidate=""> -->
  • 实例
<form action="demo-form.php">
    E-mail: <input type="email" name="userid"><br>
    <input type="submit" value="提交"><br>
    <input type="submit" formnovalidate="formnovalidate" value="不验证提交">
</form>

formtarget - 提交表单后在哪里显示接收到响应的名称或关键词

  • 定义
    formtarget 属性规定表示提交表单后在哪里显示接收到响应的名称或关键词
    formtarget 属性覆盖 <form> 元素的 target 属性

  • 注意
    formtarget 属性可以与 type="submit" 和 type="image" 配合使用

  • 语法

<input formtarget="_blank|_self|_parent|_top|framename">
<!-- _blank 在新窗口/选项卡中显示响应 -->
<!-- _self 在同一框架中显示响应(默认) -->
<!-- _parent 在父框架中显示响应 -->
<!-- _top 在整个窗口中显示响应 -->
<!-- framename 在指定的 iframe 中显示响应 -->
  • 实例
<form action="demo-form.php">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="正常提交">
    <input type="submit" formtarget="_blank" value="提交到一个新的页面上">
</form>

height - <input>元素的高度

  • 定义
    height 属性规定 <input> 元素的高度

  • 注意
    height 属性只适用于 <input type="image">

  • 提示
    为图片指定 height 和 width 属性是一个好习惯。如果设置了这些属性,当页面加载时会为图片预留需要的空间。而如果没有这些属性,则浏览器就无法了解图像的尺寸,也就无法为其预留合适的空间。情况是当页面和图片加载时,页面布局会发生变化

  • 语法

<input height="pixels">
<!-- pixels 以像素计的高度(比如 height="100") -->
  • 实例
<form action="demo-form.php">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="image" src="img_submit.gif"  alt="Submit" width="48" height="48">
</form>

list - 下拉框

  • 定义
    list 属性引用 <datalist> 元素,其中包含 <input> 元素的预定义选项

  • 注意
    Safari 或者 Internet Explorer 9 及之前的版本不支持 <input> 标签的 list 属性

  • 语法

<input list="datalist_id">
<!-- datalist_id 规定绑定到 <input> 元素的 datalist 的 id -->
  • 实例
<form action="demo-form.php" method="get">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

max - 最大值

  • 定义
    max 属性规定 <input> 元素的最大值

  • 注意
    max 和 min 属性适用于以下 input 类型:number、range、date、datetime、datetime-local、month、time 和 week

  • 提示
    max 属性与 min 属性配合使用,可创建合法值范围

  • 语法

<input max="number|date">
<!-- number 数字值。规定输入字段允许的最大值 -->
<!-- date 日期。规定输入字段允许的最大值 -->
  • 实例
<form action="demo-form.php">

    输入 1980-01-01 之前的日期:
    <input type="date" name="bday" max="1979-12-31"><br>

    输入 2000-01-01 之后的日期:
    <input type="date" name="bday" min="2000-01-02"><br>

    数量 (在1和5之间):
    <input type="number" name="quantity" min="1" max="5"><br>

    <input type="submit">
</form>

maxlength - 允许的最大字符数

  • 定义
    maxlength 属性规定 <input> 元素中允许的最大字符数

  • 注意
    type 为 number 时, maxlength 无效

  • 语法

<input maxlength="number">
<!-- number 在 <input> 元素中允许的最大字符数 -->
  • 实例
<form action="demo_form.php">
    Username: <input type="text" name="usrname" maxlength="10"><br>
    <input type="submit" value="提交">
</form>

min - 最小值

  • 定义
    min 属性规定 <input> 元素的最小值

  • 注意
    max 和 min 属性适用于以下 input 类型:number、range、date、datetime、datetime-local、month、time 和 week

  • 提示
    min 属性与 max 属性配合使用,可创建合法值范围

  • 语法

<input min="number|date">
<!-- number 数字值。规定输入字段允许的最小值 -->
<!-- date 日期。规定输入字段允许的最小值 -->
  • 实例
<form action="demo-form.php">

    输入 1980-01-01 之前的日期:
    <input type="date" name="bday" max="1979-12-31"><br>

    输入 2000-01-01 之后的日期:
    <input type="date" name="bday" min="2000-01-02"><br>

    数量 (在1和5之间):
    <input type="number" name="quantity" min="1" max="5"><br>

    <input type="submit">
</form>

multiple - 可选择多个文件

  • 定义
    multiple 属性是一个布尔属性
    multiple 属性规定允许用户输入到 <input> 元素的多个值

  • 注意
    multiple 属性适用于以下 input 类型:email 和 file

  • 语法

<input multiple>
  • 实例
<form action="demo-form.php">
    选择图片: <input type="file" name="img">
    <input type="submit">
</form>

name - <input> 元素名称

  • 定义
    name 属性规定 <input> 元素的名称
    name 属性用于在 JavaScript 中引用元素,或者在表单提交后引用表单数据

  • 注意
    只有设置了 name 属性的表单元素才能在提交表单时传递它们的值

  • 语法

<input name="text">
<!-- text 规定 <input> 元素的名称 -->
  • 实例
<form action="demo_form.php">
    Name: <input type="text" name="fullname"><br>
    Email: <input type="text" name="email"><br>
    <input type="submit" value="提交">
</form>

pattern - 正则表达式

  • 定义
    pattern 属性规定用于验证 <input> 元素的值的正则表达式

  • 注意
    pattern 属性适用于下面的 input 类型:text、search、url、tel、email 和 password

  • 提示
    请使用全局的 title 属性来描述模式以帮助用户

  • 语法

<input pattern="regexp">
<!-- regexp 规定用于验证 <input> 元素的值的正则表达式 -->
  • 实例
<form action="demo-form.php">
    Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
    <input type="submit">
</form>

placeholder - 输入提示信息

  • 定义
    placeholder 属性规定可描述输入字段预期值的简短的提示信息(比如:一个样本值或者预期格式的短描述)
    该提示会在用户输入值之前显示在输入字段中

  • 注意
    placeholder 属性适用于下面的 input 类型:text、search、url、tel、email 和 password

  • 提示
    可通过 CSS 设置颜色

  • 语法

<input placeholder="text">
<!-- text 规定可描述输入字段预期值的简短的提示信息 -->
  • 实例
<form action="demo-form.php">
    <input type="text" name="fname" placeholder="First name"><br>
    <input type="text" name="lname" placeholder="Last name"><br>
    <input type="submit" value="提交">
</form>

<style>
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #909;
    opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #909;
    opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #909;
}
</style>

readonly - 输入字段只读

  • 定义
    readonly 属性是一个布尔属性
    readonly 属性规定输入字段是只读的

  • 注意
    只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本
    readonly 属性可以防止用户对值进行修改,直到满足某些条件为止(比如选中了一个复选框)。然后,需要使用 JavaScript 消除 readonly 值,将输入字段切换到可编辑状态
    只针对 input(text / password)和 textarea 有效

  • 语法

<input readonly>
  • 实例
<form action="demo_form.php">
    Email: <input type="text" name="email"><br>
    Country: <input type="text" name="country" value="Norway" readonly><br>
    <input type="submit" value="提交">
</form>

required - 必需在提交表单之前填写输入字段

  • 定义
    required 属性是一个布尔属性
    required 属性规定必需在提交表单之前填写输入字段

  • 注意
    required 属性适用于下面的 input 类型:text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file

  • 语法

<input required>
  • 实例
<form action="demo-form.php">
    Username: <input type="text" name="usrname" required>
    <input type="submit">
</form>

size - <input> 元素宽度

  • 定义
    size 属性规定以字符数计的 <input> 元素的可见宽度

  • 注意
    size 属性适用于下面的 input 类型:text、search、tel、url、email 和 password

  • 提示
    如需规定 <input> 元素中允许的最大字符数,请使用 maxlength 属性

  • 语法

<input size="number">
<!-- number 规定以字符数计的 <input> 元素的宽度。默认值是 20 -->
  • 实例
<form action="demo_form.php">
    Email: <input type="text" name="email" size="35"><br>
    PIN: <input type="text" name="pin" maxlength="4" size="4"><br>
    <input type="submit" value="提交">
</form>

src - 图像 URL

  • 定义
    src 属性规定显示为提交按钮的图像的 URL

  • 注意
    src 属性对于 <input type="image"> 是必需的属性,且只能与 <input type="image"> 配合使用

  • 语法

<input src="URL">
<!-- URL 规定作为提交按钮来使用的图像的 URL -->
  • 实例
<form action="demo_form.php">
    First name: <input type="text" name="fname"><br>
    <input type="image" src="submit.gif" alt="Submit" width="48" height="48">
</form>

step - 合法数字间隔

  • 定义
    step 属性规定 <input> 元素的合法数字间隔
    实例:如果 step="3",则合法数字应该是 -3、0、3、6,以此类推

  • 注意
    step 属性适用于下面的 input 类型:number、range、date、datetime、datetime-local、month、time 和 week

  • 提示
    step 属性可以与 max 和 min 属性配合使用,以创建合法值的范围

  • 语法

<input step="number">
<!-- number 规定输入字段的合法数字间隔 -->
  • 实例
<form action="demo-form.php">
    <input type="number" name="points" step="3">
    <input type="submit">
</form>

type - <input> 元素的类型

  • 定义
    type 属性规定要显示的 <input> 元素的类型
    默认类型是:text

  • 提示
    该属性不是必需的,但是我们认为您应该始终使用它

  • 语法

<input type="value">
<!-- value 输入 <input> 元素的类型 -->
  • 实例
<form action="demo-form.php">
    普通按钮: <input type="button" value="确认" name="type-1"><br>
    复选框: <input type="checkbox" name="type-2"><br>
    拾色器: <input type="color" name="type-3"><br>
    日期 (年月日): <input type="date" name="type-4"><br>
    日期+时间 (基于 UTC 时区, 需配合JS): <input type="datetime" name="type-5"><br>
    日期+时间 (不带时区): <input type="datetime-local" name="type-6"><br>
    邮箱: <input type="email" name="type-7"><br>
    选择文件: <input type="file" name="type-8"><br>
    隐藏输入字段: <input type="hidden" name="type-9"><br>
    图像作为提交按钮: <input type="image" src="//www.baidu.com/img/bd_logo1.png?qua=high" width="80" name="type-10"><br>
    日期 (年月): <input type="month" name="type-11"><br>
    数字: <input type="number" name="type-12"><br>
    密码: <input type="password" name="type-13"><br>
    单选: <input type="radio" name="type-14"><br>
    滑动条: <input type="range" min="1" max="10" name="type-15"><br>
    重置按钮: <input type="reset" name="type-16"><br>
    搜索框 (可清空): <input type="search" name="type-17"><br>
    提交按钮: <input type="submit" name="type-18"><br>
    电话号码: <input type="tel" name="type-19"><br>
    单行的文本 (默认, 宽度为20字符): <input type="text" name="type-20"><br>
    时间: <input type="time" name="type-21"><br>
    输入 URL: <input type="url" name="type-22"><br>
    年+周: <input type="week" name="type-23"><br>
</form>

value - <input> 元素 value 的值

  • 定义
    value 属性规定 <input> 元素的值
    value 属性对于不同 input 类型,用法也不同:

    • 对于 "button"、"reset"、"submit" 类型 - 定义按钮上的文本
    • 对于 "text"、"password"、"hidden" 类型 - 定义输入字段的初始(默认)值
    • 对于 "checkbox"、"radio"、"image" 类型 - 定义与 input 元素相关的值,当提交表单时该值会发送到表单的 action URL
  • 注意
    value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的
    value 属性不适用于 <input type="file">

  • 语法

<input value="text">
<!-- text 规定 <input> 元素的值 -->
  • 实例
<form action="demo_form.php">
    First name: <input type="text" name="fname" value="John"><br>
    Last name: <input type="text" name="lname" value="Doe"><br>
    <input type="submit" value="提交表单">
</form>

width - <input> 元素的宽度 (只针对type="image")

  • 定义
    width 属性规定 <input> 元素的宽度

  • 注意
    width 属性只适用于 <input type="image">

  • 提示
    为图片指定 height 和 width 属性是一个好习惯。如果设置了这些属性,当页面加载时会为图片预留需要的空间。而如果没有这些属性,则浏览器就无法了解图像的尺寸,也就无法为其预留合适的空间。情况是当页面和图片加载时,页面布局会发生变化

  • 语法

<input width="pixels">
<!-- pixels 以像素计的宽度(比如 width="100") -->
  • 实例
<form action="demo-form.php">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="image" src="img_submit.gif"  alt="Submit" width="48" height="48">
</form>

总结

readonly 和 disabled 比较

  • 相同点
    • 都是禁止修改表单内容
  • 不同点
    • readonly 只针对 input (text/password)和 textarea 有效,而 disabled 对于 (除了<input type="hidden">) 以外的所有的表单元素有效,包括select,radio,checkbox,button等

type="tel" 和 type="number" 比较

  • 相同点
    • 在移动端中都能唤起系统的数字键盘, 方便输入
  • 不同点
    • type="number" 只能输入 数字+-. 等, 而 type="tel" 没有这些限制
    • 注: 只能输入数字可以直接用 <input type="number"> 进行判断, 它可以写小数, 但对于IOS好像不太友好; <input type="tel" min="0" maxlength="10"> 兼容IOS, 但不能输入小数, 而且只能对H5移动端有效