html5学习-input标签

html5中对input有了很大的改进

首先说下list, datalist和autocomplete

看这段代码：

1  text:  <input   type= "text"   name= "greeting"   list= "greetings"   autocomplete= "on" >
2          <datalist   id= "greetings"   style= "display: none" >
3          <option   value= "Good Morning" > GoodMoring </option>
4          <option   value= "Hello" > hello </option>
5          <option   value= "Good" > Good Afternoon </option>
6          </datalist>

这里面里面首先在list里指定了datalist，然后就能直接选了哦，然后还有一个autocomplete打开之后自动补全，用这个的话，在不支持的浏览器里不会显示。

在html5中的input的属性变多了

search 类似text，用于搜索

tel 类似text，专用于telephone

url 类似text，要求url格式文本

email 要求email格式文本

datetime, date, month,week,time,datetime-local 各种日期和时间输入

number 数值输入

range (具有min和max属性)输入一段范围内的数值文本框

color 颜色选择文本框，选择值为#000000格式的文字

file 文件选择框，可以通过multiple属性，一次选择多个文件，value属性为用逗号分割的文件名。同时，通过把MIME类型指定给accept属性，可以限制选择文件种类。

至于具体实现效果，请自行尝试～～浏览器请选择支持html5比较好的。。。

补充一个onchange方法，首先看个代码

1  <input   type= "radio"   id= "radio1"   name= "radio"   οnchange= "radio_onchange();" > enable </radio>
2  <input   type= "radio"   id= "radio2"   name= "radio"   οnchange= "radio_onchange();" > disable </radio>
3       <br>
4  <input   type= "text"   id= "text1" >

上面这个是两个单选按钮加一个输入框。

其中radio_onchange()方法如下所示：

01  < script >
02           function   radio_onchange  ()  {
03               var   radio   =   document . getElementById ( 'radio1' );
04               var   text   =   document . getElementById ( 'text1' );
05               if  ( radio . checked )  {
06                   text . disabled   =   "" ;
07               } else {
08                   text . value = "" ;
09                   text . disabled = "disabled" ;
10               }
11           }
12       < /script>
13       < style   type = "text/css" >
14           input [ type = "text" ] : enabled {
15               background - color :   yellow ;
16           }
17           input [ type = "text" ] : disabled {
18               background - color :   purple ;
19           }
20       < /style>

这里面也包含了CSS样式，其中用的选择器可以自行查找如何使用。

这样就能够控制input的Onchange了。