input type属性

<input type="text" autofocus pattern="^\d*[a-z]+" required placeholder="请输入数字开头字母结束格式"/>
必填，自动补全，自动获取焦点，填入的内容必须满足正则表达式

<input type="button" value="button"/>
按钮

<input type="checkbox" checked/>
多选框

<input type="radio" value="true" checked/>
单选框

<input type="date"/>


<input type="datetime" required/> 貌似没啥特殊的，就是一个input输入框
<input type="datetime-local"/>


<input type="email" required placeholder="请输入邮箱格式"/>
邮箱格式 默认必须有个@

<input type="file" accept="image/*"/>
选择文件，accept指定文件类型，选择时，只能选择指定的文件类型

<input type="number" min="10" max="50" step="3"/>
数字输入框，最右带上下箭头，可加减，最小10 最大50 每次加减变化3，点击submit时会验证数值

<input type="image" src="./../img/card.png"/>
图片

<input type="month" placeholder="month"/>


<input type="week" placeholder="week"/>


<input type="time" placeholder="time"/>


<input type="range" placeholder="range" value="100" min="51" max="500" step="50" onchange="handleChange(event)"/>
 
onchange 可以监听到更新的数值， 默认100 最小51 最大500 拉动一次变化50

<input type="url" placeholder="请输入网址格式"/>
必须是网址格式

<input type="search" autocomplete="on" placeholder="search has close button"/>
 跟普通input比，多了一个情况的小叉叉

<input type="tel" placeholder="电话号码 键盘九宫格数字"/>
在手机上有效，弹出的键盘是九宫格数字键盘

<input type="color" onchange="handleChange(event)"/>

 

可以选择颜色，通过onchange可以监听到选中的颜色，但是只有左侧选中的，或者右侧选中并添加自定义颜色后才有效