（1）.HTML原有的表单及表单控件
1.表单元素
<form>
action:表单提交到的地址
method:指定提交表单时发送何种类型的请求，如get（默认），post
enctype:对表单内容进行编码使用的字符集
- application/x-www-form-urlencoded:默认编码方式
- multipart/form-data:以二进制流的方式处理表单数据,如表单上传文件
- text/plain:当表单的action属性值为mailto:URL的形式时使用这种编码方式比较简单，使用于通过表单发送数据
name:指定表单唯一的名称,建议和id值一致
target:指定使用何种方式打开目标URL
2.使用input元素
单行文本框type="text"
密码输入框type="password"
隐藏域type="hidden"
单选框type="radio"
复选框type="checkbox"
图像域type="image"
文件上传域type="file"
提交，重置，无动作按钮：type="submit","reset","button"
属性：
-checked
-disabled
-maxlength
-readonly
-size
-src:只有图像域可使用
<form action="http://www.crazyit.org" method="get">
单行文本框：<input id="username" name="username" type="text" /><br />
不能编辑的文本框：<input id="username2" name="username" type="text"
readonly="readonly" /><br />
密码框：<input id="password" name="password" type="password" /><br />
隐藏域：<input id="hidden" name="hidden" type="hidden" /><br />
第一组单选框：<br />
<input id="color" name="color" type="radio" value="red"/>
<input id="color2" name="color" type="radio" value="green" />
<input id="color3" name="color" type="radio" value="blue"/><br />
第二组单选框：<br />
<input id="gender" name="gender" type="radio" value="male"/>
<input id="gender2" name="gender" type="radio" value="female" /><br />
两个复选框：<br />
<input id="website" name="website" type="checkbox"
value="leegang.org" />
<input id="website2" name="website" type="checkbox"
value="crazyit.org" /><br />
文件上传域：<input id="file" name="file" type="file"/><br />
图像域：<input type="image" src="images/wjc.gif" alt="疯狂Java联盟"/><br />
下面是四个按钮：<br />
<input id="ok" name="ok" type="submit" value="提交" />
<input id="dis" name="dis" type="submit" value="提交"
disabled="disabled" />
<input id="cancel" name="cancel" type="reset" value="重填"/>
<input id="no" name="no" type="button" value="无动作" />
</form>
表单控件效果
3.使用lable定义标签
<form action="http://www.crazyit.org" method="get">
<label for="username">单行文本框：</label>
<input id="username" name="username" type="text" /><br />
<label>密码框：<input id="password" name="password" type="password" />
</label><br />
<input id='ok' type="submit" value="登录疯狂Java联盟" />
</form>
使用label生成标签
4.使用button定义按钮
<button>
属性：
- disabled
- name
- type
- value
<form action="http://www.crazyit.org" method="get">
<button type="button"><b>提交</b></button><br />
<button type="submit"><img src="images/wjc.gif" alt="crazyit.org"/>
</button><br />
</form>
使用button生成的按钮
5.列表框和下拉菜单
<select>
属性：
- disabled
- multiple
- size
<option> 定义列表框项或菜单项
属性：
- disabled
- selected
- value
<optgroup>定义列表项或菜单项组
<form action="http://www.crazyit.org" method="post">
下面是简单下拉菜单：<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 />
</form>
下拉菜单和列表框
6.textarea定义文本域
属性：
- cols:宽度
- rows:高度
- disabled
-readonly
<form action="http://www.crazyit.org" method="post">
简单多行文本域：<br />
<textarea cols="20" rows="2"></textarea><br />
只读的多行文本域：<br />
<textarea cols="28" rows="4" readonly="readonly">
疯狂Java讲义
轻量级Java EE企业应用实战
</textarea><br />
<button type="submit"><b>提交</b></button><br />
</form>
多行文本域
（2）.HTML5新增的属性和元素
1.HTML5为表单空间新增的属性
form属性:
<form id="addForm" action="add">
物品名：<input type="text" name="name"/>
<input type="submit" value="添加"/>
</form>
物品描述：<textarea name="desc" form="addForm"></textarea>
formaction属性:动态地让表单提交到不同的URL
<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>
formXXX属性:
formenctype formmethod formtarget
<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>
autofocus属性：自动获得焦点
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>
使用placeholder指定的提示信息
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>
image.png
autocomplete属性:on-文本框下方显示下拉菜单 off-文本框下方不会显示下拉菜单
2.功能丰富的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>
3.HTML5新增的表单控件
<output>
for
<form action="do">
<input id="color1" name="color1" type="color"/>
<output name="a" for="color1" onforminput="innerHTML=color1.value;"></output><p>
<input id="range1" name="range1" type="range" min="0" max="100" step="5"/>
<output name="b" for="range1" onforminput="innerHTML=range1.value;"></output><p>
<input value="提交" type="submit"/>
</form>
（3）.HTML5增强的文件上传域
1.FileList对象和File对象
HTML5为type="file"的<input>元素增加了两个属性
- accept: 控制允许上传的文件类型
- multiple: 设置允许选择多个文件
浏览图片：<input id="images" type="file" multiple accept="image/*"/>
<input type="button" value="显示文件" onclick="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>
2.使用FileReader读取文件内容
FileReader的方法
- readAsText(file,encoding):以文本方式读取文件内容
- readAsBinaryString(file)：读取二进制文件
- readAsDataURL(file):也可以读取二进制文件，但它返回的是该二进制文件编码成DataURL格式的字符串
- abort() 停止读取
浏览文件：<input id="file1" type="file"/><br/>
<div id="result"></div>
<input type="button" value="读取文本文件" onclick="readText();"/><br/>
<input type="button" value="读取二进制文件" onclick="readBinary();"/><br/>
<input type="button" value="以DataURL方式读取" onclick="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>
实时监控文件上传的进度
浏览文件：<input id="file1" type="file"/><br/>
上传进度：<progress id="pro" value="0"></progress>
<div id="result"></div>
<input type="button" value="读取二进制文件" onclick="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>
（4）.HTML5新增的客户端校验
1.使用校验属性执行校验
required
pattern
min,max,step : 只对数值类型和日期类型的<input>有效
<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>
2.调用checkValidity方法进行校验
<form action="add">
生日：<input id="birth" name="birth" type="date"/><br/>
邮件地址：<input id="email" name="email" type="email"/><br/>
<input type="submit" value="提交" onclick="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>
3.自定义错误提示
通过setCustomValidity()方法来定制错误提示
<form action="add">
图书名：<input id="name" name="name" type="text" required/><br/>
图书ISBN：<input id="isbn" name="isbn" type="text"
required pattern="\d{3}-\d-\d{3}-\d{5}"/><br/>
图书价格：<input id="price" name="price" type="number"
min="20" max="150" step="5"/><br/>
<input type="submit" value="提交" onclick="check();"/>
</form>
<script type="text/javascript">
var check = function()
{
if(!document.getElementById("name").checkValidity())
{
document.getElementById("name").setCustomValidity("图书名是必填的！");
}
if(!document.getElementById("isbn").checkValidity())
{
document.getElementById("isbn").setCustomValidity("图书ISBN必须填写，"
+ "\n而且必须符合xxx-x-xxx-xxxxx的格式（其中x代表数字）。");
}
if(!document.getElementById("price").checkValidity())
{
document.getElementById("price").setCustomValidity("图书价格必须填写，"
+ "\n而且必须在20~150之间，且是5的倍数。");
}
};
</script>
