HTML5的六大属性+文件+存储

最新推荐文章于 2021-07-29 09:11:41 发布

我想离开浪浪山去远方看看

最新推荐文章于 2021-07-29 09:11:41 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_34216631/article/details/81781413

HTML 专栏收录该内容

37 篇文章

订阅专栏

本文详细介绍了HTML5新增的功能及属性，包括表单验证、文件操作、数据存储等方面，并通过实例展示了如何使用这些新特性。

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


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>2018/8/10/HTML练习</title>
<script type="text/javascript" language="javascript">
function fileUpload(files){	
  var str = "<li>";
  str = str + "<span> 文件名称 </span>";
  str = str + "<span> 文件类型 </span>";
  str = str + "<span> 文件大小 </span>";
  for(var i=0;i<files.length;i++){
    var item = files[i];
    str = str + "<li>";
    str = str + "<span> " + item.name + " </span>";
    str = str + "<span> " + item.type + " </span>";
    str = str + "<span> " + item.size + " </span>";
    str = str + "</li>";
  }
document.getElementById("show").innerHTML = str;}


function prevImg(files){
  if(typeof FileReader == 'undefined'){
	alert("您的浏览器不支持图片预览");}
  var str = "";
  for(var i=0;i<files.length;i++){
    var item = files[i];
    var reader = new FileReader();
    reader.readAsDataURL(item);
    reader.onload=function(e){//读取文件完成后触发onload事件
	str = str + "<span>";
	str = str + "<img src='"+e.target.result+"' />";
	str = str + "</span>";
	document.getElementById("show").innerHTML = str ;
			}}
document.getElementById("show").innerHTML = str;
}

function nameChange(name){
   var strName = name.value;
   sessionStorage.setItem("name",strName);
   document.getElementById("show1").style.display = "block";
   document.getElementById("show1").innerHTML =     
                       sessionStorage.getItem("name");
}
function getValue(){
   document.getElementById("show1").style.display = "block";
   document.getElementById("show1").innerHTML =sessionStorage.getItem("name");
}
function loginCheck(){
  var strName = document.getElementById("name").value;
  var strPwd = document.getElementById("pwd").value;
  localStorage.setItem("userName",strName);
  if(document.getElementById("save").checked){
     localStorage.setItem("userPwd",strPwd);
  }
  document.getElementById("loginStatus").innerHTML = "登陆成功";
}
function pageLoad(){
  var strName = localStorage.getItem("userName");
  var strPwd = localStorage.getItem("userPwd");
  if(strName){//js判断为空(undefined/0)
	 document.getElementById("name").value=strName;
  }
  if(strPwd){
	document.getElementById("pwd").value=strPwd;
  }
}
</script>
<script>

function getValue(){
   document.getElementById("show").style.display = "block";
   document.getElementById("show").innerHTML =sessionStorage.getItem("name");
}



function loginCheck(){
  var strName = document.getElementById("name").value;
  var strPwd = document.getElementById("pwd").value;
  localStorage.setItem("userName",strName);
  if(document.getElementById("save").checked){
     localStorage.setItem("userPwd",strPwd);
  }
  document.getElementById("loginStatus").innerHTML = "登陆成功";
}
function pageLoad(){
  var strName = localStorage.getItem("userName");
  var strPwd = localStorage.getItem("userPwd");
  if(strName){//js判断为空(undefined/0)
	 document.getElementById("name").value=strName;
  }
  if(strPwd){
	document.getElementById("pwd").value=strPwd;
  }
}
</script>
</head>
<p>6大属性的验证</p>
<body>
<p>autofocus属性:页面加载完成后，光标是否自动锁定该input元素</p>
<form>
	UserName: <input type="text" name="user_name" autofocus />
	</br>
	Password: <input type="text" name="password"  />
	</br>
	<input type="submit" />
</form>

<p>pattern属性：元素的验证属性，使用该属性中的正则表达式，可以验证文本输入框中的内</p>
<form method="get">
	UserName: 
	<input type="text" pattern="^[a-zA-z]\w{5,7}"/>
	<input type="submit" />
<p>
	以字母开头,包含字符、数字或下划线，长度在6~8之间
</p>
</form>

<p>placeholder属性:提供一种提示（hint），描述输入域所期待的值。提示（hint）会在输入域为空时显示出现，会在输入域获得输入值时消失</p>
<form method="get">
  UserName:
  <input type="text" placeholder="用户名" />
  <input type="submit" />
</form>

<p>required属性:规定必须在提交之前填写输入域（不能为空）</p>
<form method="get">
 UserName: <input type="text" required />
 <input type="submit" />
</form>

<p>datalist:辅助表单文本框的数据输入。定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值</p>

<input id="myCar" list="cars" />
		<datalist id="cars">
		<option value="BMW">
		<option value="Ford">
		<option value="Volvo">
		</datalist>

<p>output:在页面中显示不同类型表单元素的内容，如输入框的值、JS执行后的结果值等
该元素必须从属于某个表单</p>
<form oninput="o.value = num1.value * num2.value">
    <fieldset>
        <legend>请输入两个数字</legend>
        <input id="num1" type="number" step="any" />
            *
        <input id="num2" type="number" step="any" />
            =
        <output name="o">0</output>
    </fieldset>
 </form>


<p>novalidate:取消表单中所有元素的验证功能</p>
<form novalidate>
    <fieldset>
        <p>输入用户名:</p>
        <input id="text1" type="text" 	pattern="^[a-zA-z]\w{5,7}$" 
	required="true"/>
	<input type="submit" value="确定">
    </fieldset>
 </form>

<p>HTML5中的文件</p>
<p>选择文件</p>
<fieldset>
     <legend>单个文件上传:</legend>
     <input id="text1" type="file"/>
</fieldset>
<fieldset>
     <legend>多个文件上传:</legend>
     <input id="text1" type="file" multiple/>
</fieldset>

<p>获取文件类型与大小</p>
<form>
<fieldset>
<legend>多个文件上传:</legend>
        <input id="upload" type="file" 
		multiple="true" 			onchange="fileUpload(this.files);"/>
	<ul id="show"></ul>
    </fieldset>
</form>
<p>accept:过滤选择文件类型</p>
<fieldset>
    <legend>文件上传:</legend>
        <input id="upload" type="file" accept="image/*"/>
        <input id="upload" type="file" accept="image/gif"/>
        <input id="upload" type="file" accept="image/jpg"/>
</fieldset>


<p>FileReader读取文件</p>
<fieldset>
        <legend>文件上传:</legend>
        <input id="upload" type="file" 
		multiple="true" 		 	
		onchange="prevImg(this.files);"/>
	<ul id="show"></ul>
</fieldset>

<p>HTML5中的数据存储</p>
<p>sessionStorage使用示例(sessionStorage对象只能保存用户临时会话数据，关闭浏览器后，这些数据都将丢失)</p>

<fieldset>
	<legend>sessionStorage</legend>
	<input type="text" onChange="nameChange(this);" size="30px">
	<input type="button" onChange="getValue();" value="读取">
	<p id="show1"></p>
</fieldset>



<p>localStorage使用示例(localStorage对象可以将数据长期保存在客户端，但在跨浏览器读取数据时，被保存的数据不可共用)</p>
<form id="loginForm" action="#">
  <fieldset>
  <legend>登陆</legend>
  <span id="loginStatus"></span></br>
  用户名:<input id="name" type="text">
  密码:<input id="pwd" type="password">
  <input id="save" type="checkbox">保存密码
  <input id="login" type="button" onClick="loginCheck();" value="登陆">
  <input id="login" type="reset" value="取消">
  </fieldset>
</form>

</body>
</html>