html5world笔记

最新推荐文章于 2025-08-14 17:31:00 发布

weixin_30415801

最新推荐文章于 2025-08-14 17:31:00 发布

阅读量84

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/aicpcode/p/4280728.html

本文介绍了HTML5中表单元素的新特性及其使用方法，包括label元素的应用、文本框的list属性、文件输入控件的功能增强等。此外还演示了如何通过JavaScript进行文件的选择、读取以及获取文件的基本信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5学习笔记
一：表单及其他新增和改良的元素
1.1以前表单内的从属元素必须写在表单的内部，在5中可以把它写在任何的部位中的label的使用代码如下：
<!DOCTYPE html>
<html>
<head>
	<title> labels属性的使用的示例              </title>
	<meta charset="UTF-8">
	<script type="text/javascript">
	
	function Validate()
	{
	    	var txtName = document.getElementById("txt_name");
	    	var button = document.getElementById("btnValidate");
	    	var form = document.getElementById("testform");
	    	if(txtName.value.trim() == "")
	    	{
	    	    if(txtName.labels.length == 1)
	    	    {
	    	       var label = document.createElement("label");
	    	       label.setAttribute("for","txt_name");
	    	       form.insertBefore(label,button);
	    	       txtName.labels[1].innerHTML = "input your name";
	    	       txtName.labels[1].setAttribute("style","font-size:9px;color:red");
	    	    
	    	    }
	    	
	    	}else if(txtName.labels.length > 1)
	    	{
	    	   form.removeChild(txtName.labels[1]);
	    	}
	}
	</script>
	
</head>

<body>
	<form id="testform">
	<label id="label" for="txt_name"> name:</label>
	<input id="txt_name">
	<input type="button" id="btnValidate" value="yanzheng" onclick="Validate()">
	
	</form>
</body>
</html>
1.2 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
</head>

<script type="text/javascript">

function setValue()
{
   var label = document.getElementById("label");
   var textbox = label.control;
   textbox.value = "213001";


}

</script>


<body>
<form >
<label id="label">
邮编  :::
<input id="txt_zip" maxlength="6">
<small >please input 6</small>

</label>
<input type="button" value="默认值   "      onclick="setValue()">    


</form>
	
</body>
</html>

1.3文本框的list属性
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="UTF-8">
</head>

<body>
	text:<input type="text" name = "greeting" list="greetings">
	<datalist id="greetings" style = "display: none;">
	<option value="Good Morning"> Good Morning</option>
	<option value="Hello"> Hello</option>
	<option value="Good Afternoon"> Good Afternoon</option>
	
	
	</datalist>
</body>
</html>

选择文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>FileReader与 file 示例                    </title>
	<script type="text/javascript">
	function ShowName()
	{
	    var file;
	    for(var i=0;i<document.getElementById("file").files.length;i++)
	    {
	       file = document.getElementById("file").files[i];
	       alert(file.name);
	    }
	
	   
	}
	
	
	
	</script>
</head>

<body>
	<input type="file" id="file" multiple size="50">
	<input type="button" onclick="ShowName();" value="上传"  >
</body>
</html>

使用Blob接口获取文件的类型和大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>FileReader与 file 示例                    </title>
	<script type="text/javascript">

	function ShowFileType()
	{
	    var file;
	    file = document.getElementById("file").files[0];
	    var size = document.getElementById("size");
	    size.innerHTML = file.size;
	    var type = document.getElementById("type");
	    type.innerHTML = file.type;
	
	
	
	}
	
	
	
	
	</script>
</head>

<body>
选择   文件               :::	

<input type="file" id="file">
<input type="button" value="Show" onclick="ShowFileType();"></br>

LEngth:<span id="size"></span></br>

LEIXing:<span id="type"></span> 


</body>
</html>


读取文件的操作
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script type="text/javascript">
	var result = document.getElementById("result");
	var file = document.getElementById("file");
	if(typeof FileReader == 'undefined')
	{
	    result.innerHTML ="<p>NO:</p>";
	    file.setAttribute('disabled','disabled');
	    
	    
	    
	}
	
	function readAsDataURL()
	{
	    //jian cha shibuhsi tuxiang wenjian
	    var file = document.getElementById("file").files[0];
	    if(!/image\/\w+/.test(file.type))
	    {
	       alert("Image");
	       return false;
	       
	    }
	    var reader = new FileReader();
	    //Data in yemian
	    reader.readAsDataURL(file);
	    reader.onload = function(e)
	    {
	        var result = document.getElementById("result");
	        result.innerHTML = '<img src = "'+this.result+'" alt = "">'
	    
	    }
	    
	    
	    
	    
	    
	    
	    
	
	
	
	}
	
	function readAsText()
	{
	  var file = document.getElementById("file").files[0];
	 var reader = new FileReader();
	  reader.readAsText(file);
	  reader.onload = function(f)
	  { 
	      var result = document.getElementById("result");
	      alert(result);
	      result.innerHTML = this.result;
	  
	  }
	
	
	}
	
	
	
	
	</script>



</head>

<body>
<p >

<label > please choice a file </label>
<input type="file" id="file">
<input type="button" value="readImage" onclick="readAsDataURL()">
<input type="button" value="readBirData" onclick="readAsBinaryString()">
<input type="button" value="readTxt" onclick="readAsText()">




</p>
<div name="result" id="result"></div>


	
</body>
</html>