1.Button
<button type="button"><b>提交</b></button><br />
3.HTML5为表单控件新增的属性
3.3 formmethod属性
动态的让按钮设置表单以post或get方式提交。
3.4 formenctype属性
3.8 list属性
5.HTML5增强的文件上传域
6.2 通过checkValidity进行校验
6.3自定义错误提示
6.4 关闭校验
<button type="button"><b>提交</b></button><br />
<button type="submit"><img src="images/wjc.gif" alt="crazyit.org"/> </button><br />
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>