input输入框type参数

今日闲来无事，把所有的输入框type属性都试了一遍。
一共呢，是有23个参数。

<form action="">
<input type="text" placeholder="1">//纯文本输入框
<input type="button" placeholder="2">//转换成按钮
<input type="checkbox" placeholder="3">//转换成勾选框
<input type="color" placeholder="4">//颜色选择器
<input type="date" placeholder="5">//日期选择，年月日
<input type="datetime" placeholder="6">//貌似没变化，依旧是纯输入框
<input type="datetime-local" placeholder="7">//日期选择精细版，年月日时分
<input type="email" placeholder="8">//邮箱输入框，使用form表单提交时能识别正确邮箱格式
<input type="file" placeholder="9">//文件选择器
<input type="hidden" placeholder="10">//隐藏输入框
<input type="image" placeholder="11">//可以放图片的表单提交按钮？？
<input type="month" placeholder="12">//日期的选择，年和月
<input type="number" placeholder="13">//数字输入框，只能输入数字，但可以输入小数点，还有大小写Ee，小数点可以理解，e是干嘛用的？有人能告诉我吗？
<input type="password" placeholder="14">//如字面意思，这是经常用到的密码框
<input type="radio" placeholder="15">//那个圆圈单选框
<input type="range" placeholder="16">//跟调音量的那条直线差不多，可以来回走动的，调试什么百分比应该会用到
<input type="reset" placeholder="17">//表单重置
<input type="search" placeholder="18">//专为搜索定制的搜索框
<input type="submit" placeholder="19">//表单提交
<input type="tel" placeholder="20">//这个没试出来有什么特别
<input type="time" placeholder="21">//时间选择，时与分
<input type="url" placeholder="22">//网址输入框，表单提交时识别是否为正确网址
<input type="week" placeholder="23">//这个选择时间的，选择哪一年和第几个星期
</form>

突然发现，记熟这些参数能让自己写界面的时候省下很多的功夫，像什么数字框，网址框，邮箱框，不过这些框要用form表单提交它会去识别和提醒，不用form表单的话是没有效果的。

唉，我以前都是用正则来判断的…麻烦的要死…

input输入框type参数相关推荐

项目总结（input输入框type设置为number，maxlength无效，设置为tel，maxlength有效）
这是一个小细节,以前很少注意,直到最近做的一个项目,当我把一个输入数字的input框的类型设置为number时,input框还是可以无限输入,设置maxlengh=10就不起作用了,然后我就去百度了一 ...
input输入框type设置为number，maxlength无效
<input type="number">时,maxlength无效 type设置为text.tel,maxlength才有效解决方案 <input type= ...
antd Input输入框type=number时如何去掉内部上下箭头
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; } inpu ...
input输入框为number类型时，去掉上下小箭头
input输入框type为number时,去掉上下小箭头,方式如下: <input type="number" ...><style>/* 在Chrome浏 ...
uniapp - [完美解决] 手机数字键盘没有小数点，当 input 输入框的 type 属性设置 number 后，手机系统的软键盘无法输入小数点和符号问题（此方案 uniapp 全端全平台适用）
效果图正常在uniapp项目中,用户想要输入数字或金额时,通常都会将 <input> 的 type 属性设置为 number.但是问题来了,可能在苹果IOS手机.小程序上.个别安卓机上就 ...
Firefox浏览器中，input输入框输入的内容在刷新网页后为何还在？
转自:http://www.webym.net/jiaocheng/473.html 这个问题比较容易解决,如果不希望浏览器保留以前输入的内容,只要给对应的 input 输入框加上以下参数: auto ...
解决select 下拉框选择器 input输入框、时间日期选择器el-date-picker 赋值后，出现无法修改选中更改问题
ElementUI时间选择器,传入时间赋值后之后无法改变 // ElementUI的表格组件<el-date-pickersize="mini"style="wid ...
element 输入框点击事件_Element Input输入框的使用方法
本文来源于Element官方文档: 基础用法带图标的输入框(属性方式) placeholder="请选择日期" suffix-icon="el-icon-date&qu ...
控制input输入框光标的位置
一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是选区开始的位置: selec ...

input输入框type参数

input输入框type参数相关推荐

最新文章

热门文章