input type属性

Posted 2020-10-02

在html5中，规定的 input type 属性值如下：

1.button　　　　　　　　　　　　　　　　定义可点击按钮

2.checkbox　　　　　　　　  　　　　　　复选框

<form action="demo-form.php">
  <input type="checkbox" name="vehicle[]" value="Bike"> 我有一辆自行车<br>
  <input type="checkbox" name="vehicle[]" value="Car"> 我有一辆小轿车<br>
  <input type="checkbox" name="vehicle[]" value="Boat"> 我有一艘船<br>
  <input type="submit" value="提交">
</form>

3.color　　　 　　　　　　   　　　　　　定义拾色器，定义后出现颜色调板，只支持谷歌和opera

4.date　　　 　　　　　　　    　　　　　　   定义 date 控件（包括年、月、日，不包括时间）。只支持谷歌、opera、safari

5.datetime　　　　　　　　 　　　　　　定义date和time空间,仅支持safari、opera

6.datetime-local　　　　　  　　　　　　定义date和time空间。只支持谷歌、opera、safari

7.email　　　　　　　　　　　　　　　　定义用于e-mail地址字段，提交时会验证。safari不支持

8.file　　　　　　　　　　　　　　　　　 上传文件

9.hidden　　　　　　　　　　　　　　　定义隐藏字段

10.image　　　　　　　　　　　　　　  定义图像为提交按钮

<input type="image" src="img_submit.gif" alt="Submit">

11.month　　　　　　　　　　　　　　定义month和year空间。只支持谷歌、opera、safari

12.number　　　　　　　　　　　　　 定义数字输入的字段。只支持谷歌、opera、safari

数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">

13.password　　　　　　　　　　　　 定义密码字段

14.radio　　　　　　　　　　　　　　 单选项

<form>
  <input type="radio" name="gender" value="女"> 女<br>
  <input type="radio" name="gender" value="女"> 男<br>
</form>

 15.range　　　　　　　　　　　　　定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您也可以设置可接受数字的限制：

<input type="range" name="points" min="1" max="10">

16.reset　　　　　　　　　　　　　 定义重置按钮，重置为初始值

17.search　　　　　　　　　　　　  定义搜索字段。只支持谷歌、opera

18.submit　　　　　　　　　　　　 定义提交按钮

19.tel　　　　　　　　　　　　　　 定义输入电话号码字段，注：目前主流浏览器都不支持

20.text　　　　　　　　　　　　　 文本

21.time　　　　　　　　　　　　　定义输入时间 IE和火狐不支持

22.url　　　　　　　　　　　　　　输入url字段，苹果浏览器不支持

23.week　　　　　　　　　　　　　定义week和year控件，IE和火狐不支持

input样式，

获得焦点清除输入框边框：outline:none;

 输入框景背景透明：
<input style="background:transparent;border:1px solid #ffffff">

鼠标划过输入框，输入框背景色变色：
<inputvalue="Type here" name="user_pass" type="text" size="29" onmouseover="this.style.borderColor=‘black‘;
this.style.backgroundColor=‘plum‘" 
style="width: 106; height: 21" 
onmouseout="this.style.borderColor=‘black‘;this.style.backgroundColor=‘#ffffff‘" 
style="border-width:1px;border-color=black">
<input type="text" id="oText" style="border:5px dotted red;color:red" onfocus="borderColor(this);" onblur="clearTimeout(oTime);">

自动横向廷伸的输入框：
<input type="text" style="huerreson:e xpression(this.width=this.scrollWidth)" value="abcdefghijk">

自动向下廷伸的文本框：
<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">回车</textarea>

只有下划线的文本框：
<input style="border:0;border-bottom:1 solid black;background:;">