小标签，大用途2

input标签规定了用户可以在其中输入数据的输入字段。输入字段可通过多种方式改变，取决于 type 属性。

type属性及其对应形态一览

一、普通输入类

1.默认情况下type=“text” disabled/radonly为不可点击状态/只读状态（可以聚焦但是没有光标）。

1
2

<input value="你好" type="text" disabled>
<input value="你好" type="text" readonly>

2.只可写数字，字母敲不上去

<input type="number">

3.密码框
<input type="password">

4.支持html5的浏览器会自动验证email域值的格式合法性。<input type="email">
当输入的不是email格式的内容时，在支持html5的浏览器中提交该表单会出个提示说不是合法的email格式，样式与普通input无异，在手机端会唤出英文键盘。

二、按钮类

1.相当于普通button，需加一个value属性来确定按钮的文字

<input type="button" onclick="click()" value="按钮">

2.点击选择文件
<input type="file">

3.单选框：需要name属性进行分组，name相同的只可进行单选，name不同互不影响，value为提交时input的代表值

1
2
3
4
5

<input name="sex" type="radio" value='1'>男
<input name="sex" type="radio" value='2'>女

<input name="age" type="radio" value='1'>16-18
<input name="age" type="radio" value='2'>18-22

男 女

16-18 18-22

4.进度条（通过min，max，和value控制进度条的起点终点和现在的位置）

<input type="range" min=1 max=200 value=10>

5.重置按钮 点击可使整个表单恢复初始状态（用form标签包裹的视为一个表单）

<input type="reset" value="点我你就白写了">

6.提交表单（点击提交整个表单的按钮）
<input type="submit">

三、选择时间类

1.年/月/日
<input type="date">

2.年/月/日 时：分
<input type="datetime-local">

3.- -年- -月
<input type="month">

4.时：分
<input type="time">

5. - –年 第- –周
<input type="week">

四、其他神奇类

1.上传图片功能（与img标签用法相似，需传入src属性、alt属性）
不同点：input的图片可点击（小手形态）可聚焦，在表单中自带submit功能。（创建一个图像控件，该控件单击后将导致表单立即被提交。）

1

<input type="image" src="./QQ截图20210108183129.png">

2.type=“hidden”，什么也没有，让人直呼(shen)神(ma)奇(gui)，跟css里的display：none的作用好像也没啥不同。
<input type="hidden">