读HTML5应用开发与实践【一】【HTML5表单】

1.form

<form name="..." action="...." method="post/get"  enctype=“三种取值”  target="四个取值">    

<!--post比get慢，get是默认的，get数据附在URL后，post分开，post较慢--></form>

2.text

<input type="text" name="" size="" maxlength="" value=""/>

size显示的长度 maxlength最多可以输入的文字数

3.password

<input type="password" name="" size="" maxlength="" value=""/> 

如果密码有value的话好像会在url里面显示出来呢。哦 不是 是点了提交之后，并且要提交方式是get。蠢死我了。

4.radio 单选按钮

<input type="radio" name=""   value=""   checked=“checked”>

checked 默认选中

value传送到处理程序中的值

5.checkbox 复选框

<input type="checkbox " name=""   value=""   checked=“checked”/>

6.button

<input type="button" name=""   value=""   onclick="" />

7.submit

<input type="sumit" name=""   value=""    />

8.reset

<input type="reset" name=""   value=""    />

9.image 图像域

<input type="image" src="" name=""/>

10.hidden 隐藏域

<input type="hidden" value="" name=""/>

不会显示，但是在提交表单时，名称和取值将会同时传递给处理程序

11.file 文件域

<input type="file" name=""/>

12.select和option

<select name="">    <option value="" selected="selected">选项显示内容</option>    <option value="" >选项显示内容</option></select>

13.textarea文本域标记

<textarea name="" value="文本域默认值" rows="" cols="">

</textarea>

这个也是在表单里面的

14.placeholder

普通文本输入框，Email，number，url等其他类型的输入框也都支持placeholder特性。

<label>text:<input type="text" placeholder="write me" ></label>

有的浏览器不支持如我家的360安全浏览器，特性被忽略。 IE chrome都支持。

15.autocomplete

保护用户敏感数据，以免被本地浏览器进行不安全的存储

<input type="text" name="" autocomplete="off"/>

<!--off/on/不指定

不指定的时候使用浏览器的默认值（取决于浏览器）-->

<pre name="code" class="html"><input type="text" name="" autocomplete="on" list="mrs"/>  自动添加数据作为候补输入

16.autofocus

<input type="text" autofocus/>

打开页面时，该控件自动获得光标焦点。一个页面上只能有一个控件具有该属性。

亲测有两个的话，以第二个为准。

17.list

<datalist id="" style="display:none">    <option value="" selected="selected">选项显示内容</option>    <option value="" >选项显示内容</option></datalist<span style="font-family: Arial, Helvetica, sans-serif;">t</span><span style="font-family: Arial, Helvetica, sans-serif;">></span>

//目前只有opera10支持这个属性。。够了，怪不得我半天弄不出来

18.range min max step

<input type="range" id="" name="" min="" max="" step="" value=""/>

最小值默认是0，最大值默认是100。step表示递增和递减的梯度。默认step为1。

19.required

<input type="text" id="" name="" required/>

required 必填项

20.email

<input type="email" name="" value="" />

21.url

<input type="url" name="" value="" />

22.date

<input type="date" name="" value="2015-04-25" />

chrome会自动出日历的控件，不过IE好像不会呢。

23.month week

<pre name="code" class="html"><input type="month" name="" value="" />

<pre name="code" class="html"><input type="week" name="" value="" />

是的IE也不支持。

24.number

<input type="number" <span style="font-family: Arial, Helvetica, sans-serif;">name="" min="" max="" step="" value=""</span>/>

IE好像也不太支持这个。虽然会出来。不过嘛。。。

25.search

input[type="search"]{-webkit-appearance:textfield;}

26.tel

27.color

只在black Berry浏览器中被支持