+HTML input+HTML教程_IT编程+好学网

input type="text" 文本输入框

<input type="text"> 定义供文本输入的单行输入字段：

<form>名称:<br/> <input type="text" name="name"> </form>
input type="number" 数字输入框

<input type="number"> 定义供数字输入的单行输入字段,只能输入数字，无法输入字符：

<form>年龄:<br/> <input type="number" name="age"> </form>
input type="email" 邮件地址输入框

<input type="email"> 定义供邮箱地址输入的单行输入字段，只能输入合法的email，输入不合法不提交的：

<form>email:<br/> <input type="email" name="email"> </form>
input type="password" 密码输入框

<input type="password"> 定义供密码输入的单行输入字段,输入内容是不可见的：

<form>密码:<br/> <input type="password" name="password"> </form>
input type="url" url输入框

<input type="url"> 定义供URL输入的单行输入字段，输入值不合法不提交：

<form> url:<br/> <input type="url" name="url"> </form>
input type="tel" 电话号码输入框

<input type="tel"> 定义供电话号码输入的单行输入字段，手机端会唤出数字键盘：

<form>tel:<br/> <input type="tel" name="tel"> </form>
input type="search" 搜索输入框

<input type="search"> 定义供电话号码输入的单行输入字段，手机端会唤出搜索按键：

<form>search:<br/> <input type="search" name="search"> </form>
input type="range" 数字滑动控件

<input type="range"> 定义供范围内数字滑动选择块：

<form>range:<br/> <input type="range" name="range" min="0" max="10" step="2" value="1"> </form>
样式：
min属性指定最小值限制，max属性指定最大值限制，step属性规定合法数字间隔，value默认值
input type="hidden" 隐藏域

<input type="hidden"> 定义隐藏输入类型用于在表单中增加对用户不可见，但需要提交的额外数据时：

<form>隐藏域:<br/> <input type="hidden"> </form>

注意：disabled属性无法与type="hidden"的input元素一起使用
input type="file" 文件域

<input type="file"> 定义定义输入字段和“浏览”按钮，用于文件上传：

<form>文件域:<br/> <input type="file"> </form>
input type="color" 颜色选择器

<input type="color"> 颜色选择器，该类型会创建一个调色板用来选择颜色，颜色值以URL编码后的十六进制数值提交。如黑色会以%23000000发送，其中%23是#的URL编码：

<form>颜色选择器:<br/> <input type="color"> </form>
样式：
input type="radio" 单选按钮

<input type="radio"> 定义供用户从给定数目的选择中选一个选项，同一组选项按钮，name值一定要一致：

<form>单选:<br/> 男<input type="radio" value="男" name="single" /> 女<input type="radio" value="女" name="single" checked /> </form>

单选样式: 男女
input type="checkbox" 复选框

<input type="checkbox"> 定义供用户从给定数目的选择中选一个或多个选项，同一组选项按钮，name值一定要一致：

<form>复选框:<br/> 广州<input type="checkbox" value="广州" name="city" /> 深圳<input type="checkbox" value="深圳" name="city" /> 杭州<input type="checkbox" value="杭州" name="city" /> </form>

复选框样式:
广州深圳杭州
input type="time" 时间选择器

<input type="time">时间选择器，用于选取时、分：

<form>时间选择器:<br/> <input type="time"> </form>
样式：
input type="datetime-local" 日期加时间控件（不带时区）

<input type="datetime-local">日期加时间控件，用于选取时、日、月、年(本地时间)：

<form>日期加时间控件:<br/> <input type="datetime-local"> </form>
样式：
input type="date" 日期控件

<input type="date">时间选择器，用于选取日、月、年：

<form>日期控件:<br/> <input type="date"> </form>
样式：
input type="week" 周年控件

<input type="week">周年控件，用于选取周、年：

<form>周年控件:<br/> <input type="week"> </form>
样式： Safari浏览器不支持，只显示输入框
input type="month" 年月控件

<input type="month">年月控件，用于选取月、年：

<form>年月控件:<br/> <input type="month"> </form>
样式： Safari浏览器不支持，只显示输入框
input type="button" 普通按钮

<input type="button">定义可点击的按钮，但没有任何行为，常用于用户点击时调用JavaScript方法：

<form>普通按钮:<br/> <input type="button" value="普通按钮"> </form>
样式：
input type="submit" 提交按钮

<input type="submit">定义可点击的按钮，用于创建提交表单的按钮：

<form>提交按钮:<br/> <input type="submit" value="提交"> </form>
input type="reset" 重置按钮

<input type="reset">定义可点击的按钮，用于创建重置表单的按钮：

<form>重置按钮:<br/> <input type="reset" value="重置"> </form>
input type="image" 图像按钮

<input type="image">定义可点击的图像按钮，该类型可以设置width、height、src、alt这四个属性用图片作为提交按钮会一起发送点击在图片上的x和y坐标，这样可以与服务器端图片地图结合使用，如果图片有name属性，也会随坐标发送：

<form>图像按钮:<br/> <input type="image" src="xxx.gif" alt="Submit" width="48" height="48"> </form>

input 限制属性

这里列出了一些常用的输入限制属性

属性	描述
disabled	规定输入字段应该被禁用。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）
size	规定输入字段的宽度（以字符计）
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。

input 其他属性

autocomplete 属性

autocomplete 属性规定表单或输入字段是否应该自动完成。属性开启后，浏览器会基于用户之前的输入值自动填写值。

autocomplete 属性适用于 <form> 以及如下 <input> 类型：text、search、url、tel、email、password、datepickers、range 以及 color。

<form>名称:<br/> 姓名:<input type="text" name="fname"><br/> 昵称: <input type="text" name="lname"><br/> 邮箱: <input type="email" name="email" autocomplete="off"><br/> <input type="submit"> </form>

提示：可设置的值为 off on
autofocus属性

autofocus 属性也是一个布尔属性。添加在标签上，在页面加载时，域自动地获得焦点。

<form> <input type="text" name="name"><br><br> <input type="email" id="email" name="email" autofocus><br><br> <input type="submit"> </form>

例子在页面打开后焦点会在email的输入框内
form 属性

form 属性规定 <input> 元素所属的一个或多个表单。即input 标签不一定非得包含在<form></form>里面，使用form属性，可表明属于那个表单，值为表单的id

<form id="form1"><br/> <input type="email" id="email" name="email" autofocus><br/> <input type="submit"><br/> </form><br/> <input type="text" name="name" form="form1">
formaction 属性

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

只适用于 type="submit" 以及 type="image"

<form id="form1" action="/rest.html"><br/> <input type="email" id="email" name="email" autofocus><br/> <input type="submit"><br/> <input type="submit" formaction="/rest2.html" value="Submit as admin"> </form>
formenctype 属性

formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）。覆盖 <<form> 元素的 enctype 属性。

只适用于 type="submit" 以及 type="image"

<form id="form1" action="/rest.html"><br/> <input type="email" id="email" name="email" autofocus><br/> <input type="submit" formenctype="multipart/form-data"><br/> </form>
formmethod 属性

formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。 <<form> 元素的 method 属性。

只适用于 type="submit" 以及 type="image"

<form id="form1" action="/rest.html" method="get"><br/> <input type="email" id="email" name="email" autofocus><br/> <input type="submit" ><br/> <input type="submit" formmethod="post" value="POST提交"><br/> </form>
formnovalidate 属性

novalidate 属性是布尔属性。作用在提交表单时不对 <input> 元素进行验证。

只适用于 type="submit"

<form id="form1" action="/rest.html"><br/> <input type="email" id="email" name="email" autofocus><br/> <input type="submit" value="验证提交"><br/> <input type="submit" formnovalidate value="不验证提交"> </form>
formtarget 属性

formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。会覆盖 <form> 元素的 target 属性。

适用于 type="submit" type="image"

<form id="form1" action="/rest.html"><br/> <input type="email" id="email" name="email" autofocus><br/> <input type="submit" value="本窗口提交"><br/> <input type="submit" formtarget="_blank" value="新窗口提交"> </form>
height 和 width 属性

height 和 width 属性规定 <input> 元素的高度和宽度。

仅适用于 type="image"

<form id="form1" action="/rest.html"><br/> <input type="email" id="email" name="email" autofocus><br/> <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> </form>
list 属性

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

仅适用于 type="image"

<form id="form1" action="/rest.html"><br/> <input list="browsers" type="text"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> </form>
pattern 属性

pattern 属性规定用于检查 <input> 元素值的正则表达式。如果设置，则规定允许用户在 <input> 元素中输入一个以上的值。

适用于以下输入类型：text、search、url、tel、email、and password

提示：请使用全局的 title 属性对模式进行描述以帮助用户理解。

提示：请在我们的 JavaScript 教程中学习更多有关正则表达式的知识。

实例

<form action="/tutorial/try_result.html" > 国家代码：<input type="text" name="country_code" pattern="[A-z]{3}" title="三个字母的国家代码" /> <button type="submit">提交</button> </form>
placeholder 属性

placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。该提示会在用户输入值之前显示在输入字段中。

适用于以下输入类型：text、search、url、tel、email 以及 password。

<input type="text" name="fname" placeholder="请输入您的名字">
required 属性

required 属性是布尔属性。规定在提交表单之前必须填写输入字段。

适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio以及file。

<input type="text" name="fname" required>

HTML form

HTML input

HTML select

HTML input

input 限制属性

input 其他属性

autofocus属性