html5world笔记
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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。