input各种属性的使用

最新推荐文章于 2024-04-30 17:59:49 发布

簸箕0606

最新推荐文章于 2024-04-30 17:59:49 发布

阅读量818

点赞数 1

分类专栏： input各种属性的使用文章标签： input各种属性的使用

本文链接：https://blog.csdn.net/zjbkzj/article/details/72532461

版权

input各种属性的使用专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
1-----accept属性
在文件上传中使用 accept 属性，本例中的输入字段可以接受 GIF 和 JPEG 两种图像：
<form>
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>
如果不限制图像的格式，可以写为：accept="image/*"。
定义和用法
accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。
提示：请避免使用该属性。应该在服务器端验证文件上传。
2-----alt属性
<input type="image" src="submit.jpg" alt="Submit" align="right" />
定义和用法
alt 属性只能与 <input type="image"> 配合使用。它为图像输入规定替代文本。
alt 属性为用户由于某些原因无法查看图像时提供了备选的信息。
注释：即使 alt 属性不是必需的属性，但是当输入类型为 image 时，仍然应该设置该属性。如果不使用该属性，就有可能对文本浏览器或非可视的浏览器造成使用障碍。
除了 Safari，所有主流的浏览器都支持 "alt" 属性。
语法
<input alt="value">
属性值
值描述
value 图像 input 的替代文本。
3------autocomplete
实例
启用自动完成功能的表单（其中一个输入字段禁用了自动完成）：
<form action="demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
定义和用法
autocomplete 属性规定输入字段是否应该启用自动完成功能。
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
提示：在某些浏览器中，您可能需要手动启用自动完成功能。
autocomplete 属性是 HTML5 中的新属性。
语法
<input autocomplete="value">
属性值
值描述
on 默认。规定启用自动完成功能。
off 规定禁用自动完成功能。
4-------autofocus属性
定义和用法
autofocus 属性规定当页面加载时 input 元素应该自动获得焦点。
如果使用该属性，则 input 元素会获得焦点。
autofocus 属性是 HTML5 中的新属性。
语法
<input autofocus="autofocus">
5-------checked属性
checked 属性规定在页面加载时应该被预先选定的 input 元素。
checked 属性与 <input type="checkbox"> 或 <input type="radio"> 配合使用。
checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。
语法
<input checked="value">
属性值
值描述
checked 预先选定复选框或单选按钮。
6-------disabled
disabled 属性规定应该禁用 input 元素。
被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。
注释：disabled 属性无法与 <input type="hidden"> 一起使用。
语法
<input disabled="value">
属性值
值描述
disabled 禁用一个 input 元素。
7-------form属性
<form action="/example/html5/demo_form.asp" method="get" id="form1">
First name: <input type="text" name="fname" /><br />
<input type="submit" value="提交" />
</form>

<p>下面的 "Last name" 字段位于 form 元素之外，但仍然是表单的一部分。</p>

Last name: <input type="text" name="lname" form="form1" />
定义和用法
form 属性规定 input 元素所属的一个或多个表单。
form 属性的值必须是其所属表单的 id。
如需引用一个以上的表单，请使用空格分隔的列表。
HTML 4.01 与 HTML 5 之间的差异
form 属性是 <input> 标签在 HTML5 中的新属性。
语法
<input form="value">
属性值
值描述
id input 元素所属的一个或多个表单的 id。
8-------formaction属性
带有两个提交按钮的表单（不同的 action 值）：
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" /><br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
</form>
定义和用法
formaction 属性覆盖 form 元素的 action 属性。
该属性适用于 type="submit" 以及 type="image"。
HTML 4.01 与 HTML 5 之间的差异
formaction 属性是 <input> 标签在 HTML5 中的新属性。
语法
<input formaction="value">
属性值
值描述
URL 向何处发送表单数据。
可能的值：
绝对 URL - 指向其他站点（比如 src="www.example.com/example.htm"）
相对 URL - 指向站点内的文件（比如 src="example.htm"）
9-------formenctype属性
实例
带有两个提交按钮的表单（拥有有不同的编码方式）：
<form action="demo_post_enctype.asp" method="post">
First name: <input type="text" name="fname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formenctype="multipart/form-data" value="Submit" />
</form>
定义和用法
formenctype 属性覆盖 form 元素的 enctype 属性。
该属性与 type="submit" 和 type="image" 配合使用。
HTML 4.01 与 HTML 5 之间的差异
formenctype 属性是 <input> 标签在 HTML5 中的新属性。
语法
<input formenctype="value">
属性值
值描述
application/x-www-form-urlencoded 在发送前对所有字符进行编码（默认）。
multipart/form-data 不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
text/plain 将空格转换为 "+" 符号，但不编码特殊字符。
10------formmethod属性
实例
下面的提交按钮覆盖了表单的 HTTP 方法：
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit" />
</form>
定义和用法
formmethod 属性覆盖 form 元素的 method 属性。
可以通过以下方式发送 form-data ：
以 URL 变量 (使用 method="get") 的形式来发送
以 HTTP post (使用 method="post") 的形式来发送
该属性与 type="submit" 以及 type="image" 配合使用。
HTML 4.01 与 HTML 5 之间的差异
formmethod 属性是 <input> 标签在 HTML5 中的新属性。
语法
<input formmethod="get|post">
属性值
值描述
get 向 URL 追加表单数据（form-data）：URL?name=value&name=value
post 以 HTTP post 事务的形式发送表单数据（form-data）
11------formnovalidate 属性
带有两个提交按钮的表单（一个进行验证，另一个不验证）：
<form action="demo_form.asp" method="get">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" /><br />
<input type="submit" formnovalidate="formnovalidate" value="Submit" />
</form>
定义和用法
formnovalidate 属性覆盖 form 元素的 novalidate 属性。
如果使用该属性，则提交表单时按钮不会执行验证过程。
该属性适用于 <form> 以及以下类型的 <input>：text, search, url, telephone, email, password, date pickers, range 以及 color。
HTML 4.01 与 HTML 5 之间的差异
formnovalidate 属性是 <input> 标签在 HTML5 中的新属性。
语法
<input formnovalidate="formnovalidate">
12------formtarget属性
实例
带有两个提交按钮的表单，会提交到不同的目标窗口：
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formtarget="_blank" value="Submit" />
</form>
定义和用法
formtarget 属性覆盖 form 元素的 target 属性。
该属性与 type="submit" 以及 type="image" 配合使用。
注释：HTML5 不支持框架和框架集。现在，parent, top 和 framename 值大多用于 iframe。
HTML 4.01 与 HTML 5 之间的差异
formtarget 属性是 <input> 标签在 HTML5 中的新属性。
语法
<input formtarget="value">
属性值
值描述
_blank 在新窗口/选项卡中将表单提交到文档。
_self 在同一框架中将表单提交到文档。（默认）
_parent 在父框架中将表单提交到文档。
_top 在整个窗口中将表单提交到文档。
framename 在指定的框架中将表单提交到文档。
13------list属性
带有 datalist 的表单：
<form action="demo_form.asp">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />//lable属性--提示值
</datalist>
<input type="submit" />
</form>
定义和用法
list 属性引用数据列表，其中包含输入字段的预定义选项。
HTML 4.01 与 HTML 5 之间的差异
list 属性是 <input> 标签在 HTML5 中的新属性。
语法
<input list="value">
属性值
值描述
datalist-id 文档中的 datalist 的 id。
14------multiple
实例
可接受多个值的文件上传字段：
<form action="demo_form.asp" method="get">
Select images: <input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>
定义和用法
multiple 属性规定输入字段可选择多个值。
如果使用该属性，则字段可接受多个值。
注释：multiple 属性使用欧冠与以下 <input> 类型：email 和 file。
HTML 4.01 与 HTML 5 之间的差异
multiple 属性是 HTML5 中的新属性。
语法
<input multiple="multiple">
15------pattern
实例
只能包含三个字母的文本字段（数字或特殊字符）：
Country code: <input type="text" name="country_code" pattern="[A-z]{3}"
title="Three letter country code" />
定义和用法
pattern 属性规定用于验证输入字段的模式。
模式指的是正则表达式。您可以在我们的 JavaScript 教程中阅读到这方面的内容。
注释：pattern 属性适用于以下 <input> 类型：text, search, url, telephone, email 以及 password 。
提示：请使用标准的 "title" 属性来描述模式。
HTML 4.01 与 HTML 5 之间的差异
pattern 属性是 HTML5 中的新属性。
语法
<input pattern="regexp">
属性值
值描述
regexp 规定用于验证输入字段的模式。
16------required
实例
带有必填字段的表单：
<form action="demo_form.asp" method="get">
Name: <input type="text" name="usr_name" required="required" />
<input type="submit" />
</form>
亲自试一试
定义和用法
required 属性规定必需在提交之前填写输入字段。
如果使用该属性，则字段是必填（或必选）的。
注释：required 属性适用于以下 <input> 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
HTML 4.01 与 HTML 5 之间的差异
required 属性是 HTML5 中的新属性。
语法
<input required="required">
17------标签的 src
实例
下面的表单拥有两个输入字段以及一个图像形式的提交按钮：
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="image" src="submit.jpg" alt="Submit" align="right" />
</form>
定义和用法
src 属性只能与 <input type="image"> 配合使用。它规定作为提交按钮显示的图像的 URL。
src 属性必须与 <input type="image"> 同时使用。
语法
<input src="value">
属性值
值描述
URL
作为提交按钮使用的图像的 URL。
可能的值：
绝对 URL - 指向另一个站点（比如 src="www.example.com/submit.gif"）
相对 URL - 指向网站内的文件（比如 src="submit.gif"）
18------<input> step
实例
带有合法数字间隔的数字输入控件：
<form action="demo_form.asp" method="get">
<input type="number" name="points" step="3" />
<input type="submit" />
</form>
定义和用法
step 属性规定输入字段的合法数字间隔（假如 step="3"，则合法数字应该是 -3、0、3、6，以此类推）。
提示：step 属性可以与 max 以及 min 属性配合使用，以创建合法值的范围。
注释：step、max 以及 min 属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。
HTML 4.01 与 HTML 5 之间的差异
step 属性是 HTML5 中的新属性。
语法
<input step="number">
属性值
值描述
number 规定输入字段的合法数字间隔。
19-----type属性
<form action="" method="" target="_blank">
<input type="image" accept="image/*" value="" />
<input type="date" min="1990/11/10"/>
<input type="color" />
<input type="checkbox" name="ii"/>
<input type="checkbox" name="ii"/>
<input type="radio" name="name" />
<input type="radio" name="name"/>
<input type="datetime" />
<input type="datetime-local" value="2016-11-11T11:22:22"/>
<input type="email" required="required"/>
<input type="month" />
<input type="number" />
<input type="password" />
<input type="range" min="0" max="255" value="22"/>
<input type="search" placeholder="搜索.."/>
<input type="reset" />
<input type="submit" value="委托"/>
<input type="tel" />
<input type="text" />
<input type="week" />
</form>
</body>
</html>