4.HTML5 Web表单

1.Button

2.列表

下面是简单下拉菜单：<br />
	<select id="skills" name="skills">
		<option value="java">Java语言</option>
		<option value="c">C语言</option>
		<option value="ruby">Ruby语言</option>
	</select><br /><br /><br />
	下面是允许多选的列表框：<br />
	<select id="books" name="books" multiple="multiple" size="4">
		<option value="java">Java讲义</option>
		<option value="android">Android讲义</option>
		<option value="ee">轻量级Java EE企业应用实战</option>
	</select><br />
	下面是允许多选的列表框：<br />
	<select id="leegang" name="leegang"  multiple="multiple" size="6">
		<optgroup label="Java体系图书">
			<option value="java" label="aaaaaaaa">Java讲义</option>
			<option value="android">Android讲义</option>
			<option value="ee">轻量级Java EE企业应用实战</option>
		</optgroup>
		<optgroup label="其他图书">
			<option value="struts">Struts 2.1权威指南</option>
			<option value="ror">RoR敏捷开发最佳实践</option>
		</optgroup>
	</select><br />
	<button type="submit"><b>提交</b></button><br />

3.HTML5为表单控件新增的属性

3.1 form属性

物品描述：<textarea name="desc" form="addForm"></textarea>

3.2 formaction属性

不同的按钮提交到不同的action

<form method="post">
	用户名：<input type="text" name="name"/><br/>
	密码：<input type="password" name="name"/><br/>
	<input type="submit" value="注册" formaction="regist"/>
	<input type="submit" value="修改" formaction="login"/>
</form>

3.3 formmethod属性

动态的让按钮设置表单以post或get方式提交。

<form method="post" action="pro">
	用户名：<input type="text" name="name"/><br/>
	密码：<input type="password" name="name"/><br/>
	<input type="submit" value="GET提交" formmethod="get"/>
	<input type="submit" value="POST提交" formmethod="post"/>
</form>

3.4 formenctype属性

让按钮动态的改变表单的额enctype属性。

3.5 formtarget属性

动态的改变表单的target属性。

3.6 autofocus属性

3.7 placeholder属性

<form method="post">
	用户名：<input type="text" name="name" placeholder="请输入用户名"/><br/>
	密码：<input type="password" name="name" placeholder="请输入密码"/><br/>
	<input type="submit" value="注册" formaction="regist"/>
	<input type="submit" value="修改" formaction="login"/>
</form>

3.8 list属性

<form method="post" action="buy">
	请输入图书：<input type="text" name="name" list="books"/><br/>
	<input type="submit" value="购买"/>
</form>
<datalist id="books">
	<option value="java">疯狂Java讲义</option>
	<option value="ee">轻量级Java EE企业应用实战</option>
	<option value="android">疯狂Android讲义</option>
</datalist>

3.9 autocomplete属性

<form method="post" action="buy">
	请输入图书：<input type="text" name="name" list="books" autocomplete="off"/><br/>
	<input type="submit" value="购买"/>
</form>
<datalist id="books">
	<option value="疯狂Java讲义">疯狂Java讲义</option>
	<option value="轻量级Java EE企业应用实战">轻量级Java EE企业应用实战</option>
	<option value="疯狂Android讲义">疯狂Android讲义</option>
</datalist>

4. 功能丰富的input元素

<form action="do">
	type="color"的文本框:<br/><input name="color" type="color"/><p>
	type="date"的文本框:<br/><input name="date" type="date"/><p>
	type="time"的文本框:<br/><input name="time" type="time"/><p>
	type="datetime"的文本框:<br/><input name="datetime" type="datetime"/><p>
	type="datetime-local"的文本框:<br/><input name="datetime-local" type="datetime-local"/><p>
	type="month"的文本框:<br/><input name="month" type="month"/><p>
	type="time"的文本框:<br/><input name="time" type="time"/><p>
	type="week"的文本框:<br/><input name="week" type="week"/><p>
	type="email"的文本框:<br/><input name="email" type="email" multiple/><p>
	type="tel"的文本框:<br/><input name="tel" type="tel"/><p>
	type="url"的文本框:<br/><input name="url" type="url"/><p>
	type="number"的文本框:<br/><input name="number" type="number"/><p>
	type="range"的文本框:<br/><input name="range" type="range" min="0" max="100" step="5"/><p>
	type="search"的文本框:<br/><input name="search" type="search"/><p>
	<input value="提交" type="submit"/>
</form>

5.HTML5增强的文件上传域

5.1 FileList对象和File对象

<body>
浏览图片：<input id="images" type="file" multiple accept="image/*"/>
<input type="button" value="显示文件" οnclick="showDetails();"/>
<script type="text/javascript">
var showDetails = function()
{
	var imageEle = document.getElementById("images");
	// 获取文件上传域内输入的多个文件
	var fileList = imageEle.files;
	// 遍历每个文件
	for(var i = 0 ; i < fileList.length ; i ++)
	{
		var file = fileList[i];
		div = document.createElement("div");
		// 依次读取每个文件的文件名、文件类型、文件大小
		div.innerHTML = "第" + (i + 1) + "个文件的文件名是：" + file.name
			+ "，该文件类型是：" + file.type
			+ "，该文件大小为：" + file.size;
		// 把div元素添加到页面中。
		document.body.appendChild(div);
	}
}
</script>
</body>

5.2 使用FileReader读取文件内容

FileReader提供的如下方法:

readAsText(file,encoding)

readAsBinaryString(file)

readAsDataURL(file)

abort()

onloadstart()

onprogress

onload

onerror

<body>
	浏览文件：
	<input id="file1" type="file"/><br/>
	<div id="result"></div>
	<input type="button" value="读取文本文件" οnclick="readText();"/><br/>
	<input type="button" value="读取二进制文件" οnclick="readBinary();"/><br/>
	<input type="button" value="以DataURL方式读取" οnclick="readURL();"/><br/>
	<script type="text/javascript">
	var reader = null;
	// 如果浏览器支持FileReader对象
	if(FileReader)
	{
		reader = new FileReader();
	}
	// 如果浏览器不支持FileReader对象，弹出提示信息
	else
	{
		alert("浏览器暂不支持FileReader");
	}
	var readText = function()
	{
		// 通过正则表达式验证该文件是否为文本文件，
		// 如果用户选择的第一个文件是文本文件
		if(/text\/\w+/.test(document.getElementById("file1").files[0].type))
		{
			// 以文本文件的方式读取用户选择的第一个文件
			reader.readAsText(document.getElementById("file1").files[0] , "gbk");
			// 当reader读取数据完成时将会激发该函数
			reader.onload = function()
			{
				document.getElementById("result").innerHTML = reader.result;
			};
		}
		else
		{
			alert("你选择的文件不是文本文件！");
		}
	}
	var readBinary = function()
	{
		// 以二进制流的方式读取用户选择的第一个文件
		reader.readAsBinaryString(document.getElementById("file1").files[0]);
		// 当reader读取数据完成时将会激发该函数
		reader.onload = function()
		{
			document.getElementById("result").innerHTML = reader.result;
		};
	}
	var readURL = function()
	{
		// 以DataURL的方式读取用户选择的第一个文件
		reader.readAsDataURL(document.getElementById("file1").files[0]);
		// 当reader读取数据完成时将会激发该函数
		reader.onload = function()
		{
			document.getElementById("result").innerHTML = reader.result;
		};
	}
	</script>
</body>

<body>
浏览文件：<input id="file1" type="file"/><br/>
上传进度：<progress id="pro" value="0"></progress>
<div id="result"></div>
<input type="button" value="读取二进制文件" οnclick="readBinary();"/><br/>
<script type="text/javascript">
	var reader = null;
	// 如果浏览器支持FileReader对象
	if(FileReader)
	{
		reader = new FileReader();
	}
	// 如果浏览器不支持FileReader对象，弹出提示信息
	else
	{
		alert("浏览器暂不支持FileReader");
	}
	var readBinary = function()
	{
		// 以二进制流的方式读取用户选择的第一个文件
		reader.readAsBinaryString(document.getElementById("file1").files[0]);
		var pro = document.getElementById("pro");
		pro.max = document.getElementById("file1").files[0].size;
		// 当reader读取数据的过程中会不断激发该函数。
		reader.onprogress = function(evt)
		{
			pro.value = evt.loaded;
		};
	}
</script>

6.HTML5 客户端校验

6.1 通过属性进行校验

<form action="add">
	图书名：<input name="name" type="text" required/><br/>
	图书ISBN：<input name="isbn" type="text" required pattern="\d{3}-\d-\d{3}-\d{5}"/><br/>
	图书价格：<input name="price" type="number"  min="20" max="150" step="5"/><br/>
	<input type="submit" value="提交"/>
</form>

6.2 通过checkValidity进行校验

<body>
	<form action="add">
		生日：<input id="birth" name="birth" type="date"/><br/>
		邮件地址：<input id="email" name="email" type="email"/><br/>
		<input type="submit" value="提交" οnclick="return check();"/>
	</form>
	<script type="text/javascript">
		var check = function()
		{
			return commonCheck("birth" , "生日" , "字段必须是有效的日期！")
				&& commonCheck("email" , "邮件地址" , "字段必须符合电子邮件的格式！");
		}
		var commonCheck = function(field , fieldName , tip)
		{
			var targetEle = document.getElementById(field);
			// 如果该字段的值为空
			if (targetEle.value.trim() == "")
			{
				alert(fieldName + "字段必须填写！");
				return false;
			}
			// 调用checkValidity()方法执行输入校验
			else if(!targetEle.checkValidity())
			{
				alert(fieldName + tip);
				return false;
			}
			return true;
		}
	</script>
</body>

6.3自定义错误提示

<body>
	<form action="add">
		生日：<input id="birth" name="birth" type="date"/><br/>
		邮件地址：<input id="email" name="email" type="email"/><br/>
		<input type="submit" value="提交" οnclick="return check();"/>
	</form>
	<script type="text/javascript">
		var check = function()
		{
			return commonCheck("birth" , "生日" , "字段必须是有效的日期！")
				&& commonCheck("email" , "邮件地址" , "字段必须符合电子邮件的格式！");
		}
		var commonCheck = function(field , fieldName , tip)
		{
			var targetEle = document.getElementById(field);
			// 如果该字段的值为空
			if (targetEle.value.trim() == "")
			{
				alert(fieldName + "字段必须填写！");
				return false;
			}
			// 调用checkValidity()方法执行输入校验
			else if(!targetEle.checkValidity())
			{
				alert(fieldName + tip);
				return false;
			}
			return true;
		}
	</script>
</body>

6.4 关闭校验

<div>
	<form novalidate>
		<fieldset>
			<legend>Contact Details</legend>
			<label for="name">Name <em>*</em></label>
			<input id="name" placeholder="Jane Smith" autofocus required><br>
			<label for="telephone">Telephone</label>
			<input id="telephone" placeholder="xxx-xxxx" pattern="[0-9]{3}-{0-9}{3}"><br>
			<label for="email">Email <em>*</em></label>
			<input id="email" type="email" required><br> 
		</fieldset>
		<p><input type="submit" value="Submit Application"></p>
	</form>
</div>

7.综合

<div>
	<input id="email" type="email" required><br> 
	<input id="url" type="url" required><br> 
	<input id="search" type="search" required><br> 
	<input id="tel" type="tel" required><br> 
	<input id="number" type="number" min="0" max="10"><br> 
	<input id="range" type="range" min="1" max="3" step="1"><br> 
	<input id="date" type="date" required><br> 
	<input id="datetime" type="datetime" required><br>
	<input id="datetimelocal" type="datetimelocal" required><br>
	<input id="month" type="month" required><br> 
	<input id="week" type="week" required><br> 
	<input id="time" type="time" required><br> 
	<input id="color" type="color" required><br> 
</div>


<div>
	  <fieldset>
		<legend>What's Your Favorite Animal?</legend>
		<datalist id="animalChoices">
			<span class="Label">Pick an option:</span>
			  <select id="favoriteAnimalPreset">
				<option label="Alpaca" value="alpaca">
				<option label="Zebra" value="zebra">
				<option label="Pigeon" value="pigeon">
				<option label="Crab" value="crab">
			  </select>
			<span class="Label">Or type it in:</span>
		</datalist>
		<input list="animalChoices" id="favoriteAnimal">
	  </fieldset>
</div>

<div>
	<h1>Progress Bars</h1>
	<progress max=100 value=50>50%</progress><br>
	<progress>Task in progress...</progress>

	<h1>Meters</h1>
	<meter min="5" max="70" value="28">28 pounds</meter><br>
	<meter min="5" max="100" high="70" value="79">79 pounds</meter><br>
	<meter max="50000" value="14000"></meter>
</div>


<div>
	<script>
	function startEdit() {
	  var element = document.getElementById("editableElement");
	  element.contentEditable = true;
	} 
	function stopEdit() {
	  var element = document.getElementById("editableElement");
	  element.contentEditable = false; 
	}
	</script>
	<div id="editableElement">You can edit this text, if you'd like.</div>
	<div>
	  <button οnclick="startEdit()">Start Editing</button>
	  <button οnclick="stopEdit()">Stop Editing</button>
	</div>
</div>

<div>
	<script>
	function startHTML() {
	  var editor = document.getElementById("pageEditor");
	  editor.contentWindow.document.designMode = "on";
	}

	function stopHTML() {
	  var editor = document.getElementById("pageEditor");
	  editor.contentWindow.document.designMode = "off"; 
	  var htmlDisplay = document.getElementById("editedHTML");
	  htmlDisplay.textContent =   editor.contentWindow.document.body.innerHTML;
	}
	</script>
	
	
	<iframe id="pageEditor" src="http://www.baidu.com"></iframe>
	<div>
	  <button οnclick="startHTML()">Start Editing HTML.</button>
	  <button οnclick="stopHTML()">Stop Editing HTML.</button>
	</div>
	<div id="editedHTML"></div>
</div>

4.HTML5 Web表单

继续阅读

APP强制更新(uni-app)项目要求：解决思路：效果图：具体代码：总结

【web素材】01-10款大气的购物商城网站模板

蚪侠-远程泛目录[泛域名+泛目录+泛内页]-[代码+汉字]干扰-字体繁简切换-蜘蛛欺骗-主动推送_镜像版-V25版

vue相同路由跳转强制刷新该路由组件操作

前端获取不到后端返回自定义头信息，怎么解决获取不到跨域请求的response headers呢

magin 负值

CSS颜色搭配（超级赞的几个网站）ColorSpaceWebGradientsGRADIENT BUTTONSUigradientsCoolHue 2.0EggradientsGradientaMesh GradientCool BackgroundDuotones

HTML CSS 的鼠标悬浮，点击的样式当鼠标悬浮时：a:hover当鼠标点击链接时：a:active

推荐一些有用的网站一键分享制作网站小图标插件网站seo 相关的网站地图 api二维码相关

H5测试点

用 Canvas 编织璀璨星空图

HTML5Canvas 酷炫效果

龙珠训练营task04

jQuery练习一. 选择器练习二. DOM操作练习三. 事件练习

layui多任务上传添加进度条