HTML input标签的属性：

1.type：该属性是input标签里唯一的必须输入的属性，当然，也可以不填，默认为type = “text”。具体它有那些值，我们后面再讨论。

2.required：标记一个字段是否为必须。如果一个字段被标记为required = “required”（严格模式下），或者required（宽松模式下）(ps：下面属性的写法同理，就不一一写出了)，并且这个字段的值为空，或者填入的值是无效值，那么这个表单不能提交。什么是无效值？看pattern属性。

3.pattern：该属性包含了一个JavaScript风格的正则表达式，输入的内容必须完全匹配该正则表达式，不然就算输入的内容无效。对正则表达式不了解？可以去看看JavaScript 正则表达式。

4.min max：这两个属性用于日期date时间time等输入，还有number和range。顾名思义，它们的作用是限制最大值，最小值。

5.step：和max min类似，作用是提供一个可以上下点的按钮，比如当前数字是1，你设置了step = “5”，点一下上的按钮，就变成6了。

6.placeholder：该属性不多说，大家应该都很熟悉，一般是用来提示用户输入的，当用户真的输入了文字之后，会被输入的文字覆盖。

7.readonly：顾名思义，该属性会让表单空控件不可编辑。这里的不可编辑不是禁用，只是不能编辑文本而已，比如像单选框radio，复选框checkbox这种，本来就是不可编辑的，所以这个属性对它们来说毫无意义。

8.disabled：该属性会禁用一个表单元素。这里是禁用，完全禁用掉除了之外的所有表单元素。

9.maxlength ：该属性用于限制用户输入的最大字数限制。

10.size：已经没什么时候实际的作用了，控制大小现在几乎都是由CSS控制了。

11.form：在HTML5中，表单控件已经没有必要嵌套在一个表单中，新的form属性可以把表单元素与页面上的任意的表单关联起来。也可以被嵌套在一个表单中，随着另一个表单提交，代码如下：

这样，就把form和input联系起来了。如果input没有form属性，那么，它将被关联到离他最近的form表单。

12.autocomplete：顾名思义，自动完成，用户输入一部分，后面的自动补全。需要浏览器保存用户输入的内容，以便下一次自动补全。

13.autofocus：该属性指的是表示这个表单控件在页面载入的时候自动获得焦点。

14.name属性：元素的名称，也就是name的值代表当前input元素的名字；
15.value属性：元素的默认值
1）当input type=“text”、“password”、"hidden"时，定义输入字段的初始值；
2）当input type=“button”、“reset”、"submit"时，定义按钮上的显示的文本；
3）当input type=“checkbox”、“radio”、"image"时，定义与输入相关联的值；
注意：input type="checkbox"和input type="radio"中必须设置value属性；value属性无法与input type="file"一通使用。
style属性：为input元素设定CSS样式；
width属性：当input type="image"时，通过width属性控制元素的宽度；
height属性：当input type="image"时，通过height属性控制元素的高度；
maxlength属性：定义input元素中可输入的最长字符数。
 

1、type
格式：type=“文本的类型”
当type设置为text时，text属性表示一个纯文本，可以向其中输入任何类型的文本、数字或字母等。示例代码：

<input type="text" name="控件的名称" size="控件的长度"  maxlength="最长的字符数" value="文字域的默认取值">
下面为大家列举了type的属性值

值	示例代码	描述
text	<input type="text">	默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符
<input type="text" size="20" maxlength="20" value="文本输入框" style="height: 30px; color:cyan">
password	<input type="password">	定义密码字段。字段中的字符会被遮蔽
<input type=”password” name=”...”  size=”...” maxlength=”...” value=”...”/>
button	<input type="button">	定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
<input type="button" value="确认" name="bt" onClick="">
checkbox	<input type="checkbox">	定义复选框
<input type=”checkbox” name=”...” value=”...”/>
radio	<input type="radio">	定义单选按钮
<input type=”radio” name=”...” value=”...”/>
submit	<input type="submit">	定义提交按钮。提交按钮向服务器发送数据
<input type="submit" value="提交" name="sm" />
file	<input type="file">	定义输入字段和 “浏览…” 按钮，供文件上传
<input type="file" name="file" value="选择文件" />
hidden	<input type="hidden"	定义隐藏输入字段
<input type=”hidden” name=”...” value=”...”/>
image	<input type="image">	定义图像作为提交按钮
<input type="image" src="#" alt="测试图片">
reset	<input type="reset">	定义重置按钮。重置按钮会将所有表单字段重置为初始值
<input type="reset" value="重置" name="reset"/>
email	<input type="email">	定义用于 e-mail 地址的文本字段
<input type="email" pattern="  " value="  ">
url	<input type="url">	定义用于 URL 的文本字段
<input type="url" value="">
tel	<input type="tel">	定义用于电话号码的文本字段
<input type="tel" placeholder="请输入11位手机号码" pattern="\d{11}">
number	<input type="number">	定义带有 spinner 控件的数字字段
<input type="number" name="number" min="2" max="8" value="3" />
max 规定允许的最大值；min 规定允许的最小值；step 规定合法的数字间隔；     value 规定默认值
range	<input type="range">	定义带有 slider 控件的数字字段/输入数值
<input type="range" name="range" min="0" max="10" step="1" value="" />
max 规定允许的最大值；min 规定允许的最小值；step 规定合法的数字间隔；     value 规定默认值
search	<input type="search">	定义用于搜索的文本字段
<input type="search">
color	<input type="color">	定义拾色器
date	<input type="date">	定义日期字段（带有 calendar 控件）
<input type="date" min="2022-05-19" max="2022-05-19" />
datetime	<input type="datetime">	定义日期字段（带有 calendar 和 time 控件）
<input type="datetime" id="datetime" value="2022-05-19T09:47Z"/ >
datetime-local	<input type="datetime-local">	定义日期字段（带有 calendar 和 time 控件）
month	<input type="month">	定义日期字段的月（带有 calendar 控件）
<input type="month" value="2022-05" />
week	<input type="week">	定义日期字段的周（带有 calendar 控件）
<input type="week" value="2022-W36" step="2" min="2022-W25" max="2022-W40">
time	<input type="time">	定义日期字段的时、分、秒（带有 time 控件）
size	<input type="size">	定义可见的字符数
<input size="1"><input type="password" size="2">

 

详细说明：
<input type="text">：如果一个input没有type属性，那么它会是默认type=“text”。没有什么特别的，就是允许输入文本，简单明了。
<input type="password">：顾名思义，在用户输入密码的时候建议使用这个属性而非text，使用了这个属性，用户输入的文字将会变成*，我们是看不到的，当然，传给后台会是用户输入的文本。有些手机端上不会一开始就是*，而是会短暂的明文显示用户输入的最后一个字符，然后才是*。
<input type="button">：一个按钮，表单按钮，和单纯的元素相比，没有使用CSS方便，所以如果你不是想用这个按钮去重置（reset）或者提交（submit），并且为了和传统的表单风格相比配的话，建议你都使用而不是 。
<input type="checkbox">：复选框，默认是小方格，可以选择多个。
<input type="radio">：单选框，默认是小圆圈，只能选择一个。
<input type="submit">：通常被认为是一个提交按钮，当点击此按钮时，提交本表单的数据。
<input type="file">：这个类型和其他的不同，其他无非是一些选择，或者输入文本，而这个属性，是为了能让用户上传本地文件。
<input type="hidden">：该属性是用来隐藏掉该表单控件。
<input type="image">：该属性接受所有<img>，将会像submit一样提交图片，如果想上传图片，照片，不妨使用这个属性。
<input type="reset">：重置按钮，点了这个按钮，表单的数据全部重置，也就是清空的意思。慎用！

以上的都是HTML5以前都有的属性，下面是新增的：
<input type="email">：该属性外观上和文本栏相似，用于指定一个电子邮箱地址。在web端没有什么差别，但是在手机端就不一样了，输入键盘会自动的变成有@ 数字 A-Z .等，与输入邮箱有关的字符，用户体验直线上升，有木有？
<input type="url">：外观功能和 <input type="email">类似，用于指定一个web地址。在手机端上会自动转换成有类似于.com \等方便用户输入web地址的键盘。
<input type="tel">：用于指定输入的是电话号码。键盘就会变成输入电话号码的键盘。当然，也可以自己定义一些格式什么的，比如023-8208之类的，需要与pattern属性连用。
<input type="number">：用于指定输入的是数字，键盘为输入数字的键盘。
<input type="range">：变成一个滑动条，不同的客户端显示出默认的样式是不一样的。用户可以左右滑动。webkit中可以使用CSS：input[type=range]{=webkit-appearance:slider-vertical}让滑动条竖起来。
<input type="search">：搜索栏。如果有文本输入的话，很多浏览器会在最右边显示一个清空搜索栏的小叉，点了就清空该搜索栏。
<input type="color">：在浏览器支持的情况下，提供一个拾色器，虽然功能没有PS里面的那么强大，不过感觉和window自带的图画功能里面的拾色器差不多。
<input type="date">：日期选择器，可以用来选择年月日。
<input type="datetime">：该属性提供两个栏，一个年月日，一个用于时分秒。时区被设置成了UTC。
<input type="datetime-local">：和 <input type="datetime">几乎完全一样，只是不是UTC时间。
<input type="month">：只包括了年，月的时间选择器。
<input type="week">：该属性是输入多少年的多少周，你可以选择日期，但是返回的是XXXX年XX周。
<input type="time">：只包括了时分秒的时间选择器，而且是24小时制。
input标签中常见的属性补充说明：
type：该属性是input标签里唯一的必须输入的属性，当然，也可以不填，默认为type = “text”。
required：标记一个字段是否为必须。如果一个字段被标记为required = “required”（严格模式下），或者required（宽松模式下）(ps：下面属性的写法同理，就不一一写出了)，并且这个字段的值为空，或者填入的值是无效值，那么这个表单不能提交。什么是无效值？看pattern属性。
pattern：该属性包含了一个JavaScript风格的正则表达式，输入的内容必须完全匹配该正则表达式，不然就算输入的内容无效。对正则表达式不了解？可以去看看JavaScript 正则表达式。
min max：这两个属性用于日期date时间time等输入，还有number和range。顾名思义，它们的作用是限制最大值，最小值。
step：和max min类似，作用是提供一个可以上下点的按钮，比如当前数字是1，你设置了step = “5”，点一下上的按钮，就变成6了。（注意： Internet Explorer 9及更早 IE 版本，或 Firefox 不支持 input 标签的 step 属性。）
placeholder：该属性一般是用来提示用户输入的，当用户真的输入了文字之后，会被输入的文字覆盖。
readonly：该属性会让表单空控件不可编辑。这里的不可编辑不是禁用，只是不能编辑文本而已，比如像单选框radio，复选框checkbox这种，本来就是不可编辑的，所以这个属性对它们来说毫无意义。
disabled：该属性会禁用一个表单元素。这里是禁用，完全禁用掉除了<output>之外的所有表单元素。
maxlength：该属性用于限制用户输入的最大字数限制。
size：已经很少人直接这样使用了，控制大小现在几乎都是由CSS控制了。
autocomplete：顾名思义，自动完成，用户输入一部分，后面的自动补全。需要浏览器保存用户输入的内容，以便下一次自动补全。
autofocus：该属性指的是表示这个表单控件在页面载入的时候自动获得焦点。
form：在HTML5中，表单控件已经没有必要嵌套在一个表单中，新的form属性可以把表单元素与页面上的任意的表单关联起来。也可以被嵌套在一个表单中，随着另一个表单提交，
 

2、name

格式：name=“控件的名称”
表示文本框的名称，主要是用来区分其他的控件（相当于起名字）

name：控件的名字，一个控件是否设置它的 name 属性是不会影响到这个网页的功能实现的。但是，当我们需要把这个控件所关联的数据传递到数据库时，就必须要设置 name 属性。相当于人的姓名，可以重名

3、size

格式：size=“控件的长度”
表示文本框在页面里能够显示出来的长度（就是你能看见文本框里面有多少个字符）

size属性对于type="text"或"password"的input元素是可见的字符数；而对于其他类型，是以像素为单位的输入字段宽度

注意：由于size属性是一个可视化的设计属性，推荐使用CSS来代替它

4、maxlength

格式：maxlength=“最长的字符数”
表示文本框里面最多可以输入的字符数

• 必须是非负数
• 为 0 时则禁止用户输入
• 只是限制用户输入
• 通过js可以动态设置超过maxlength限制长度的值
• 如果需要 手动限制动态赋值

第一种方法：input属性为number，做if判断，然后slice选取

<input type="number" οninput="if(value.length>6)value=value.slice(0,6)" />
第二种方法：input属性为text，设置maxlength为最大长度，使用onkeyup和onafterpaste 限制只能输入数字。
 
<input type="text"  placeholder="只能输入四位数字字符" class="input" id="input" maxlength="4" οnkeyup="if(this.value.length==1){this.value=this.value.replace(/[^19]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
 onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-19]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">

5、value

value属性为input元素设定值。对于不同的输入类型，value属性的用法也不同：

type=“button”、“reset”、"submit"用于定义按钮上的显示的文本

type=“text”、“password”、"hidden"用于定义输入字段的初始值

type=“checkbox”、“radio”、"image"用于定义与输入相关联的值

注意1：type="checkbox"或"radio"必须设置value属性
注意2：value属性无法与type="file"的input元素一起使用

格式：value=“文字域的默认取值”
用于定义文本框中的默认值（就是你什么都不输入的时候就会在文本框里显示的值）
date                　　 YYYY-MM-DD
time                 　　hh:mm:ss.s
datetime            　　 YYYY-MM-DDThh:mm:ss:sZ
datetime-local           YYYY-MM-DDThh:mm:ss:s
month            　　　　 YYYY-MM
week                　　 YYYY-Wnn
YYYY=年

MM=月

DD=日

hh=小时

mm=分钟

ss=秒

s=0.1秒

T=日期与时间之间的分隔符

Z=Zulu时间的时区

Wnn=W周数，从1月的第一周开始是1，直到52

该类型的value属性格式还可以用在min和max的属性里，用来创建时间跨度；step可以用来设置移动的刻度