1.<input>--单行文本输入框
最简单的<input>元素用于单行输入
<body>
<input>
</body>
2.type属性
2.1 type="text"(默认)
<body>
<input type="text">
</body>
2.2 type="password"----此时输入的内容会被小圆点代替,防止密码被偷窥.
<body>
<input type="password">
</body>
2.3 type="number"---此时输入类容被限制为数字.
<body>
<input type="number">
</body>
2.4 type="color"---此时input框成为了色块,可以调节各种颜色
<body>
<input type="color">
</body>
2.5 type="button"---此时的input不是输入框,而是一个按钮
<body>
<input type="button">
<button></button>
<!-- 效果类似,但是<button>具有<input type="button">相同的作用但是在可操控性方面更加强大-->
</body>
2.6 type="checked"---此时的input不是输入框,而是多选框
<body>
<input type="checkbox">
<!-- checked表示为选中状态 -->
<input type="checkbox" checked>
</body>
2.7 type="radio"---此时input为单选框,选择一方,另外一方就会被取消选择.
<body>
<!-- checked表示为选中状态 -->
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
<!-- name属性表示两个单选框是指向什么方面的选择 -->
</body>
2.8 type="range"---此时input为范围区间条
<body>
<input type="range" min="0" max="100">
<!-- 设置[min,max]的区间 -->
<input type="range" min="0" max="100" step="10">
<!-- 此时每次移动为10 -->
</body>
2.9 type="file",此时<input>为文件选择器
<body>
<input type="file">
<!-- 点击选择文件,会弹出文件选择器 -->
</body>
2.10 type="image"---此时用图片为提交按钮
<body>
<!-- src为图片文件的地址 -->
<!-- width为图片大小 -->
<input type="image" width="200" src="./image/JavaScript.png">
</body>
2.11 type="data"---日期选择器
<body>
<input type="date">
</body>
2.12 type="datetime-local"---与date类似具体到分钟
<body>
<input type="datetime-local">
</body>
2.13 type="month"---用于年份和月份的显示
<body>
<input type="month">
</body>
2.14 type="week"---用于周数显示
<body>
<input type="week">
</body>
2.15 type="time"---用于时间的输入,分秒
<body>
<input type="time">
</body>
2.16 type="email" 和 type="submit"---email,submit与<form>表单元素配合验证邮箱是否正确.
submit单独没有意义,通常与<from>元素配合使用,<from>我们后面会讲到.
<body>
<form>
<input type="email">
<input type="submit" value="提交">
</form>
</body>
2.17 type="reset"与submit与<from>元素使用
value为input的值显示在input框内
reset是将表单重置为初始值
submit是提交表单
<body>
<form>
用户名: <input type="text">
密码: <input type="password">
<input type="submit" value="提交">
<input type="reset" value="重置表单">
</form>
</body>
3.placeholder---占位字符
当输入框为空的时候,内部显示,提示用户输入
<body>
<input type="text" placeholder="请输入">
</body>
当<input>有value时会覆盖placeholder
<body>
<input type="text" placeholder="请输入" value="你好">
</body>
4.autofocus---自动聚焦
当打开网页时,鼠标光标自动进入输入框中,不要点击输入框再输入了
<body>
<input type="text" placeholder="请输入" autofocus>
</body>