今天来给大家讲解一下input标签的内部属性： 直接开门见山，首先我们先看input标签的第一个属性type：

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

下面为大家列举了type的属性值

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

：该属性外观上和文本栏相似，用于指定一个电子邮箱地址。在web端没有什么差别，但是在手机端就不一样了，输入键盘会自动的变成有@ 数字 A-Z .等，与输入邮箱有关的字符，用户体验直线上升，有木有？ ：外观功能和 类似，用于指定一个web地址。在手机端上会自动转换成有类似于.com \等方便用户输入web地址的键盘。 ：用于指定输入的是电话号码。键盘就会变成输入电话号码的键盘。当然，也可以自己定义一些格式什么的，比如023-8208之类的，需要与pattern属性连用。 ：用于指定输入的是数字，键盘为输入数字的键盘。 ：变成一个滑动条，不同的客户端显示出默认的样式是不一样的。用户可以左右滑动。webkit中可以使用CSS：input[type=range]{=webkit-appearance:slider-vertical}让滑动条竖起来。 ：搜索栏。如果有文本输入的话，很多浏览器会在最右边显示一个清空搜索栏的小叉，点了就清空该搜索栏。 ：在浏览器支持的情况下，提供一个拾色器，虽然功能没有PS里面的那么强大，不过感觉和window自带的图画功能里面的拾色器差不多。 ：日期选择器，可以用来选择年月日。 ：该属性提供两个栏，一个年月日，一个用于时分秒。时区被设置成了UTC。 ：和 几乎完全一样，只是不是UTC时间。 ：只包括了年，月的时间选择器。 ：该属性是输入多少年的多少周，你可以选择日期，但是返回的是XXXX年XX周。 ：只包括了时分秒的时间选择器，而且是24小时制。

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

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

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

格式：value=“文字域的默认取值” 用于定义文本框中的默认值（就是你什么都不输入的时候就会在文本框里显示的值）

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：该属性会禁用一个表单元素。这里是禁用，完全禁用掉除了之外的所有表单元素。 maxlength：该属性用于限制用户输入的最大字数限制。 size：已经很少人直接这样使用了，控制大小现在几乎都是由CSS控制了。 autocomplete：顾名思义，自动完成，用户输入一部分，后面的自动补全。需要浏览器保存用户输入的内容，以便下一次自动补全。 autofocus：该属性指的是表示这个表单控件在页面载入的时候自动获得焦点。 form：在HTML5中，表单控件已经没有必要嵌套在一个表单中，新的form属性可以把表单元素与页面上的任意的表单关联起来。也可以被嵌套在一个表单中，随着另一个表单提交，代码如下：

admin

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

MDN web docs