<!DOCTYPE html> <html> <head lang="en"> <title></title> <meta charset="utf-8"> </head> <body> 当前行车速度：<meter value="159" min="0" max="220" low="0" high="160">120</meter>千米/小时<br/> <!-- 属性说明： value:当前值 默认0 min：最小值 默认0 max：最大值 默认1 low：指定范围最小值 必须 > min high：指定范围最大值 必须 < max optimun：有效范围最佳值 如果该值 > high 说明越大越好，< low 说明越小越好 --> 任务完成比例：<progress value="30" max="100">30/100</progress><br/> <script type="text/javascript"> </script> </body> </html>
- 新增元素与属性
form：指明元素归属哪个表单，可以写在form标签的外部，以前所有的表单元素都必须写在form表单内的
formaction：元素所属的action
formmethod：元素提交方式
placeholder：提示输入
autofocus：获取输入焦点
list：与datelist配合生成下拉框
1 <input type="text" name="greeting" list="greetings"> 2 <datalist id="greetings" style="disable:none"> 3 <option value="1">早上好</option> 4 <option value="2">中午好</option> 5 <option value="3">晚上好</option> 6 </datalist>
- 新增与改良的input type属性
search：用于站点搜索，样式与text一样，但safari中search与text是不同的
tel：与text类似，但用于电话
url：与text文本框类似，但必须输入满足url格式的文字
email：可以使用multiple属性，传递多个email地址，用逗号分隔
datetime、date、month、week、time、datetime-location
number
range：只允许输入一定范围内数值的文本框，包含min与max属性，默认0~100
color：颜色文本选择框
file：可以通过指定multiple属性，选择多个文件
- 验证
required：是否必填
pattern：指定正则表达式
min、max：对于数值或日期类型，设置了最值
step：增大或减小时的步幅
formnovalidate：配置在提交按钮上或input上，对应的校验会消失
- 文件API
FileList对象：表示用户选择的文件列表
file对象：FileList中的每个元素都是file对象
举例：获取多选的文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function showFileName(){ var file; var upFiles = document.getElementById("file").files; var len = upFiles.length; for (var i = 0;i < len;i++){ file = upFiles[i]; document.write(file.name); document.write("<br/>"); } } </script> </head> <body> 文件选择:<input type="file" multiple id="file" size="80" /><input type="button" value="文件上传" onclick="showFileName()"> </body> </html>
1 下拉框
<!DOCTYPE html>
<html>
<head lang="en">
<title></title>
<meta charset="utf-8">
</head>
<body>
<form>
单选
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select><tr>
多选
<select multiple="multiple">
<option>1</option>
<option>2</option>
<option>3</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>0</option>
</select><tr>
optiongroup
<select multiple="multiple">
<optgroup label="书籍1">
<option>1_1</option>
<option>1_2</option>
<option>1_3</option>
<option>1_4</option>
<option>1_5</option>
<option>1_6</option>
</optgroup>
<optgroup label="书籍2">
<option>2_1</option>
<option>2_2</option>
<option>2_3</option>
<option>2_4</option>
<option>2_5</option>
<option>2_6</option>
</optgroup>
</select>
</tr>
</form>
<script type="text/javascript">
</script>
</body>
</html>
2 表单属性
<!DOCTYPE html>
<html>
<head lang="en">
<title></title>
<meta charset="utf-8">
</head>
<body>
<form>
<!-- placeholder 属性指定提示内容 -->
<input type="text" placeholder="提示内容"><br/>
<!--输入与下拉同时使用-->
<input type="text" name="book" list="books" /><br/>
<!--通过指定formaction属性提交给不同的Action，不再需要通过JavaScript修改提交的Action-->
<input type="submit" formaction="action1">
<input type="submit" formaction="action2">
</form>
<datalist id="books">
<option>书籍_1</option>
<option>书籍_2</option>
<option>书籍_3</option>
<option>书籍_4</option>
</datalist>
<hr/>
多文件上传
<input type="file" multiple id="images" accept="image/*" />
<input type="button" value="显示文件" onclick="showDetails()" />
<script type="text/javascript">
var showDetails = function(){
var imageFile = document.getElementById("images");
var fileList = imageFile.files;
for(var i = 0;i < fileList.length;i++){
var file = fileList[i];
var div = document.createElement("div");
div.innerHTML = "第"+(i+1)+"个文件的文件名是："+file.name+"，该文件大小是："+file.size;
document.body.appendChild(div);
}
}
</script>
</body>
</html>
3 读取上传文件内容
<!DOCTYPE html>
<html>
<head lang="en">
<title></title>
<meta charset="utf-8">
</head>
<body>
浏览文件：<input type="file" id="file1" /><br/>
<div id="result"></div>
<input type="button" value="读取文本文件" onclick="readText();"><br/>
<input type="button" value="读取二进制文件" onclick="readBinary();"><br/>
<input type="button" value="以DataURL方式读取" onclick="readURL();"><br/>
<script type="text/javascript">
var reader = null;
if(FileReader){
reader = new FileReader();
}else{
alert("浏览器暂不支持FileReader对象");
}
var readText = function(){
reader.readAsText(document.getElementById("file1").files[0],"gbk");
reader.onload = function(){
document.getElementById("result").innerHTML = reader.result;
}
}
var readBinary = function(){
reader.readAsBinaryString(document.getElementById("file1").files[0]);
reader.onload = function(){
document.getElementById("result").innerHTML = reader.result;
}
}
var readURL = function(){
reader.readAsDataURL(document.getElementById("file1").files[0]);
reader.onload = function(){
document.getElementById("result").innerHTML = reader.result;
}
}
</script>
</body>
</html>