首页 前端知识 HTML世界之input标签

HTML世界之input标签

2024-10-15 23:10:16 前端知识 前端哥 862 643 我要收藏

<input> 元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件。

<input> 元素是空的,它只包含标签属性,规定了用户可以在其中输入数据的输入字段。输入字段可通过多种方式改变,取决于 type 属性。

属性

描述

语法

accept

audio/* 接受所有的声音文件。

video/* 接受所有的视频文件。

image/* 接受所有的图像文件。

MIME_type 一个有效的 MIME 类型,不带参数。请参阅 IANA MIME 类型,获得标准 MIME 类型的完整列表。

规定通过文件上传来提交的文件的类型。 (只针对type="file")

<input accept="audio/*|video/*|image/*|MIME_type">

提示:如需规定多个值,请使用逗号分隔(比如 <input accept="audio/*,video/*,image/*" />)。

alt

text

定义图像输入的替代文本。 (只针对type="image")

<input alt="text">

autocomplete

on 默认。规定启用自动完成功能。

off 规定禁用自动完成功能。

autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。

<input autocomplete="on|off">

autofocus

autofocus

autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点。

<input autofocus>

checked

checked

checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")

<input checked>

disabled

disabled

disabled 属性规定应该禁用的 <input> 元素。

<input disabled>

form

form_id 规定 <input> 元素所属的一个或多个表单的 id 列表,以空格分隔。

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

<input form="form_id">

formaction

URL

属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")

<input formaction="URL">

formenctype

application/x-www-form-urlencoded 默认。在发送前对所有字符进行编码。将空格转换为 "+" 符号,特殊字符转换为 ASCII HEX 值。

multipart/form-data 不对字符编码。当使用有文件上传控件的表单时,该值是必需的。

text/plain 将空格转换为 "+" 符号,但不编码特殊字符。

属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。

<input formenctype="value">

formmethod

get 默认。将表单数据(form-data)以名称/值对的形式附加到 URL:URL?name=value&name=value。

post 以 HTTP post 事务的形式发送表单数据(form-data)。

定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")

<input formmethod="get|post">

formnovalidate

formnovalidate

formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。

<input formnovalidate="formnovalidate">

formtarget

_blank 在新窗口/选项卡中显示响应。

_self 在同一框架中显示响应(默认)。

_parent 在父框架中显示响应。

_top 在整个窗口中显示响应。

framename 在指定的 iframe 中显示响应。

framename 规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")

<input formtarget="_blank|_self|_parent|_top|framename">

height

pixels

规定 <input>元素的高度。(只针对type="image")

<input height="pixels">

list

datalist_id 规定绑定到 <input> 元素的 datalist 的 id。

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

<input list="datalist_id">

max

number 数字值。规定输入字段允许的最大值。

date 日期。规定输入字段允许的最大值。

属性规定 <input> 元素的最大值。

<input max="number|date">

maxlength

number

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

<input maxlength="number">

min

number 数字值。规定输入字段允许的最大值。

date 日期。规定输入字段允许的最大值。

属性规定 <input>元素的最小值。

<input min="number|date">

multiple

multiple

属性规定允许用户输入到 <input> 元素的多个值。

<input multiple>

name

text

name 属性规定 <input> 元素的名称。

<input name="text">

pattern

regexp

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

<input pattern="regexp">

placeholder

text

placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。

<input placeholder="text">

readonly

readonly

readonly 属性规定输入字段是只读的。

<input readonly>

required

required

属性规定必需在提交表单之前填写输入字段。

<input required>

size

number

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

<input size="number">

src

URL

src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")

<input src="URL">

step

number

step 属性规定 <input> 元素的合法数字间隔。

<input step="number">

type

button 定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本)。

checkbox 定义复选框。

color 定义拾色器。

date 定义 date 控件(包括年、月、日,不包括时间)。

datetime定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)。

datetime-local定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。

email 定义用于 e-mail 地址的字段。

file 定义文件选择字段和 "浏览..." 按钮,供文件上传。

hidden 定义隐藏输入字段。

image 定义图像作为提交按钮。

month 定义 month 和 year 控件(不带时区)。

number 定义用于输入数字的字段。

password 定义密码字段(字段中的字符会被遮蔽)。

radio 定义单选按钮。

range 定义用于精确值不重要的输入数字的控件(比如 slider 控件)。

reset 定义重置按钮(重置所有的表单值为默认值)。

search 定义用于输入搜索字符串的文本字段。

submit 定义提交按钮。

telNew 定义用于输入电话号码的字段。

text 默认。定义一个单行的文本字段(默认宽度为 20 个字符)。

time 定义用于输入时间的控件(不带时区)。

url 定义用于输入 URL 的字段。

week 定义 week 和 year 控件(不带时区)。

type 属性规定要显示的 <input> 元素的类型。

<input type="value">

value

text

指定 <input> 元素 value 的值。

<input value="text">

width

pixels

width 属性规定 <input> 元素的宽度。 (只针对type="image")

<input width="pixels">

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18987.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!