表单:
功能：用于搜集不同类型的用户输入的内容
form 表单
input 表单元素，表单项
select和option 下拉菜单
textarea 文本域
(1)form元素
功能：用于创建一个表单
(2)input元素
表示输入框，有多种形式，可以根据type属性来确定显示哪种输入框。
1，对于input来说，它的type的默认值是text，表示单行文本
2，对于input，最好给它添加一个name属性，作用是用于将用户输入的内容提交给要处理这个数据的页面
1，每一个input标签都有一个value属性，不同类型的input， value的作用也不同
对于type=”text”来说，value可有可无，因为用户输入的内容都可以提交过去。
对于type=”radio”或type=”checkbox”来说，没有value，是提交不了的。
3，关于单行文本的宽度，可以使用size属性来设置，表示字符长度，实际上不用，我们一般是通过CSS进行控制的
（3）select和option
作用：用来实现下拉列表
3）textarea
作用：提供输入大量文本的输入框，比如，QQ空间中发表状态，贴吧发表贴子等。
格式：<textarea></textarea>
2、简单举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form表单</title>
<script type="text/javascript">
function check(){
var textusername = document.getElementById("username");
var textmima = document.getElementById("mima");
var textmima1 = document.getElementById("mima1");
//判断：1.1）用户名不能为空
if(textusername.value == ''){
alert("请输入用户名...");
return false;
}
//1.2）姓名不为空的情况下在4到6位之间
if(textusername.length < 4 || textusername > 6){
alert("请输入4-6位长度的用户名...");
return false;
}
//2.1）密码不能为空
if(textmima.value == ''){
alert("未输入密码，请您输入密码...");
return false;
}
//2.2)密码不为空的情况下在6-16之间
if(textmima.length < 6 || textmima.length > 16){
alert("请输入6-16位的密码长度...");
return false;
}
//3)检查两次输入的密码是否一致
if(textmima1.value != textmima.value){
alert("请确认两次密码一致...");
return false;
}else{
alert("检查通过，可提交..");
var f = document.getElementById("xingming");
f.Submit();
}
}
</script>
</head>
<body>
<!--action 属性规定当提交表单时，向何处发送表单数据。-->
<form name="xingming" action="www.baidu.come" method="post">
<table>
<tbody>
<tr>
<td>用户名</td><td><input name="useranme" id="username"
placeholder="请输入用户名在4-6位之间" style="width:200px;"
type="text" </td>
</tr>
<tr>
<td>密码</td><td><input name="mima" id="mima"
placeholder="请输入密码在6-16位之间" style="width:200px;"
type="password"></td>
</tr>
<tr>
<td>确认密码</td><td><input name="mima1" id="mima1"
placeholder="请确认密码一致" style="width:200px;"
type="password"></td>
</tr>
<tr>
<td colspan="2">
<button type="button" id="jiancha" onclick="check()">检查</button>
<button type="submit">提交</button>
<button type="reset">重置</button>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>