我们在浏览一些网站时经常会用到一种网页元素--表单。如下图，像这样允许用户输入并使用按钮提交信息的功能，我们称之为表单，那么接下来介绍HTML表单相关的一些知识点。
1)表单:帮助服务器收集客户端信息的一种机制
<form action="提交到的页面" method="提交的方法">
表单控件
form>
action:数据最后所提交的页面 绝对路径/相对路径
method:数据提交服务器时的提交方法 post get
2)表单控件:表单用于用户填写信息的控件
1、文本控件: 用于用户填写较少信息，且可以显示用户填写信息的控件
(注册时，用户名填写)
格式:
<input type="text" name="" id="" value="" size="" placeholder=""/>
type:设置控件样式 text
name:用于表单收集信息的一种标示符，也就是控件的名称
2、密码框:只是用户输入的内容看不到
<input type="password" name="" id="" size=""/>
3、单选按钮组:由多个单选按钮组成的按钮组，只能选中其中一个，这种按钮组
<input type='radio' name="" value="" checked>标示符
name:为了保证传递服务器数据只有一个，所以name值必须相同
value：是用提交服务器时，该标签被提交的数据,value不能相同
checked:默认按钮组中的那个按钮被选中
性别:<input type='radio' name="" value="" checked>男
<input type='radio' name="" value="" checked>女
<input type='radio' name="" value="" checked>保密
所有表单控件name值不能相同!!!
4、复选按钮组: 与单选按钮组的区别可以选择多个，为了能将用户选择的多项内容传递服务器中，要将name名字后面加个[]
格式:
<input type='checkbox' name="" id="" value="" checked>标示
选课:
<input type='checkbox' name='classes[]' checked value='1'>语文
<input type='checkbox' name='classes[]' value='2'>数学
<input type='checkbox' name='classes[]' value='3'>历史
<input type='checkbox' name='classes[]' value='4'>政治
<input type='checkbox' name='classes[]' value='5'>物理
<input type='checkbox' name='classes[]' value='6'>化学
<input type='checkbox' name='classes[]' checked value='7'>美术
注意：一定要在name属性后面添加[]
5)下拉列表框:
格式:
<select name="" >
<option value="" selected>下拉列表项option>
<option value="" >下拉列表项option>
<option value="" >下拉列表项option>
<option value="" >下拉列表项option>
<option value="" >下拉列表项option>
select>
multiple:允许用户选中多个下拉列表项
optgroup: 设置下拉分类标示
6) 文本域：可以输入多行数据的表单控件
<textarea name="" id="" cols="" rows="">
内容
textarea>
rows:设置文本域可以输入的行数
cols:设置的文本域输入的列数(一行可以输入多少个字符)(不是PX)
个人介绍:
<textarea name='descs' cols="50" rows="10">
我是个学生
textarea>
7)隐藏域：
<input type="hidden" name = “”value =””>
8)上传控件：
<input type="file" name=””>
9)按钮标签:
普通按钮:为js提供的控件
<input type='button' name=”” value=""/>
value：按钮中显示的数据和提交到服务器后该控件提交的值
<input type='button' name='clicks' value="点我"/>
提交按钮:点击后可以提交表单
<input type='submit' name="add" value='注册'/>
重置按钮:点击后可以将用户输入的数据清空
<input type='reset' name='cancel' value='重置'>
图片提交按钮:使用图片作为提交按钮
<input type='image' src='图片地址' name=””>
本文的分享就到这，希望我的回答能帮到你。
//html文档如下，其实还能更简洁，请采纳<html>
<head>
<title>HTML注册表单</title>
<script type="text/javascript">
function sub(){
var f = document.form1//取form对象
var userName = f.userName.value//取用户名
var passWord = f.passWord.value//取密码
var repassWord = f.repassWord.value//取确认密码
var box1 = f.theRead.checked//判断复选框是否被选中
var box2 = f.theTravel.checked//判断复选框是否被选中
var box3 = f.theInt.checked//判断复选框是否被选中
var count = (box1 ? 1 : 0) + (box2 ? 1 : 0) + (box3 ? 1 : 0)//判断复选框被选中几个
var readme = f.readme.value//取自我介绍内容
var rename = new RegExp("^[a-zA-Z_][a-zA-Z_0-9]{0,}", "")//匹配用户名的正则表达式
var repass = new RegExp("[a-zA-Z_0-9]{6,16}", "")//匹配密码的正则表达式
if(userName == ""){
alert("用户名不能为空！")
return false
}else if(rename.test(userName) == false){
alert("用户名: 必须是字母数字或下划线, 不能以数字开头")
return false
}else{
if(passWord == ""){
alert("用户密码不能为空！")
return false
}else if(repass.test(passWord) == false){
alert("密码: 必须是6-16位字母数字下划线！")
return false
}else{
if(repassWord == ""){
alert("请输入确认密码！")
return false
}else if(passWord != repassWord){
alert("两次输入的密码不一致！")
return false
}else{
if(count <1){
alert("请选择至少一项兴趣爱好！")
return false
}else{
if(readme == ""){
alert("请填写个人介绍！")
return false
}
}
}
}
}
}
</script>
</head>
<body>
<form name="form1" id="form1" action="" method="post" onsubmit="return sub()">
用 户 名：<input type="text" name="userName" id="userName" value=""/>
<br>
用户密码：<input type="password" name="passWord" value=""/>
<br>
确认密码：<input type="password" name="repassWord" value=""/>
<br>
性别：
<input type="radio" name="theSex" value="0" checked=”default” />男
<input type="radio" name="theSex" value="1" />女
<br>
城市:
<select name="theCity">
<option value="0">郑州</option>
<option value="1">上海</option>
<option value="2">天津</option>
<option value="3">深圳</option>
</select>
<br>
兴趣爱好:
<input type="checkbox" name="theRead" value="0" />阅读
<input type="checkbox" name="theTravel" value="1" />旅游
<input type="checkbox" name="theInt" value="2" />上网
<br>
个人简介:
<br>
<textarea rows="5" cols="30" name="readme"></textarea>
<br>
<input type="submit" value="提交"/>
</form>
</body>
</html>
在table外面再套个form<form name="f1" method="post" action="abc.php">
</form>
这样点击submit会跳转的abc.php页面，再该页面中处理post提交的数据
