疯狂H5讲义笔记 - 表单相关元素和属性

1.form表单的enctype属性用于指定传递表单数据所用的编码方式，有三种：

1.application/x-www.form-urlencoded：默认编码方式，处理表单控件的value值
2.multipart/form-data：以二进制流的方式处理表单数据，用于上传文件
3.text/plain：当action为mailto:url形式时使用该编码方式，用于发送邮件

2.label标签可以用来绑定对应的input输入框，该标签有一个for属性，指定所绑定的输入框的id值，当使用该标签绑定了对应的输入框之后，单击该标签的文本内容，所对应的输入框就会获得焦点

<label for="username">username: </label>
<input type="text" id="username" name="name" />

3.select标签的子元素有两个:option和optgroup，前者指定下拉列表的每一个列表元素，后者可以指定一个列表组，后者有一个label属性，用于指定该列表组的列表名:

<select>
<option>111</option>
<optgroup label="图书列表">
<option>222</option>
<option>333</option>
</optgroup>
</select>

4.当我们想要在一个form表单中对不同的button指定不同的action时，比如login button 和regist button，以前我们通常使用js来完成该操作，现在可以直接使用标签属性来完成了，一系列formXxx属性用于

<button>/<input type="button" />

之类的按钮标签，用于指定不同的form表单属性，有四个:formaction/formenctype/formmethod/formtarget：

<form action="do">
<label for="username">username:</label>
<input type="text" id="username" name="username" />
<br />
<label for="password">password:</label>
<input type="password" id="password" name="password" />
<br />
<input type="button" value="login" formaction="login" />
<span>  </span>
<input type="button" value="regist" formaction="regist" />
</form>

5.input输入框新增两个属性:autofocus：自动获取焦点；placeholder：指定未输入时用于显示的提示信息

6.H5新增了一个特效，可以对于一个输入框，用户既可以自己输入，也可以双击该输入框来获取下拉列表来选择。该特效实现操作如下：1.input输入框指定list属性用于指定所使用的下拉列表的id；2.创建特殊的下拉列表:

<datalist id>

，该元素的子元素是

<option>

<input type="text" id="book" name="book" list="booklist" />
<datalist id="booklist">
<option>java</option>
<option>ajax</option>
<option>struts</option>
</datalist>

7.H5增强文件上传域，可指定上传文件类型和是否允许上传多个文件：accept：指定允许上传的文件类型；multiple：是否允许上传多个文件

<input type="file" accept="images/*" multiple="muptiple" />

JS可以通过该input的files属性返回一个代表所有的上传文件的FileList对象，完全可以将它看成数组来使用，遍历或者使用索引都行，该FileList对象里面包含的每个元素的类型为File对象，File对象有三个属性：name：文件名，不包括路径；type：文件的MIME类型字符串；size：文件的大小

<script>
function getFiles() {
var fileinput = document.getElementById("file") ;
var filelist = fileinput.files ;
for(var i=0;i<filelist.length;i++){
var name=filelist[i].name ;
var type=filelist[i].type ;
var size=filelist[i].size ;
}
alert("name: "+name+";type: "+type+";size: "+size) ;
} ;
</script>

6.JS提供了一个FileReader类型FileReader对象用来读取文件上传域的内容，该对象有三个读取方法：

1.readAsText(file,encode)：已指定编码集的形式来读取文本文件的方式读取文件
2.readAsBinaryString(file)：已二进制流的方式来读取文件
3.readAsDataURL(file)：以dataurl方式来读取文件，以data64的方式读取的

不过所有的readXX()方法都是异步方法，不会直接返回读取的内容，如果想要取得读取的内容，必须以FileReader对象的时间监听方式来读取该内容，FileReader对象有如下监听事件:

1.onloadstart：开始读取文件时触发该事件
2.onprogress：正在读取时持续触发该事件
3.onload：成功读取该文件时触发该事件
4.onerror：读取文件失败时触发该事件
5.onloaded：不论成功还是失败，读取结束后都会触发该事件

在监听事件里获取读取的内容使用FileReader对象的result属性，该属性封装这读取的内容

<input type="file" id="file" />
<progress id="pro" value="0"></progress>
<button id="btn">读取</button>
<div id="content"></div>
<script>
var input = document.getElementById("file") ;
var button = document.getElementById("btn") ;
var div = document.getElementById("content") ;
var progress = document.getElementById("pro") ;
btn.onclick = function() {
var reader = new FileReader() ;
var file = input.files[0] ;
reader.readAsText(file,"gbk") ;
//指定进度条跟随
read.onprogress = function(event) {
progress.value = event.loaded ;
}
//指定reader的成功读取事件
reader.onload = function() {
div.innerHTML = reader.result ;
}
} ;
</script>