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>
时间： 2024-10-23 12:11:57