表单:<form>...</form>
form中的属性:
1.action:将表单中的数据提交到服务器的地址,也能够做本地页面的跳转
<a>...</a>链接(超链接)与action有本质区别,<a>...</a>链接只是做页面间跳转的
2.method:向服务器提供数据提交方式,有两种方式(get、post)
get与post的区别:
- 1.get是从服务器读取信息,也可以向服务器提交信息
- .1.post是向服务器提交(存储)信息的
- 1.get提交数据是不安全的,地址栏是可见的,提交数据大小只有2KB
- 1.post提交数据是安全的
- 1.get提交数据时以参数形式向服务器提交数据
- 1.post以数据块的形式打包发送到服务器
3.enctype:表示的是form表单中有文件上传的功能
使用方式:enctype="multipart/form-data"
表单控件分两种:
1.输入控件
input标签(单标签)
属性:name获取表单中填写的值;id是input框的唯一标识;
name后面跟用户名用username,跟密码用pwd,跟性别用sex
type表示方式:text是文本,password是密码框,file是上传文件,radio是单选框,checkbox是多选框,hidden是隐藏框
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" enctype="multipart/form-data" method="post"></form>
<label>用户名</label><input name="userName" id="uid" type="text/><br/>
<label>密码</label><input name="ped" type="password" /><br />
<label>上传头像</label><input name="file" type="file" /><br />
<label>性别</label><input name="sex" type="radio" />男
<input name="sex" type="radio" />女<br />
<p><label for="">爱好</label>
<label for="tennis"><input type="checkbox" name="hobby" id="tennis" value="tennis"><span>网球</span></label>
<label for="basketball"><input type="checkbox" name="hobby" id="basketball" value="basketball">
<span>篮球</span></label>
<label for="swimming"><input type="checkbox" name="hobby" id="swimming" value="awimming" ><span>游泳</span></label>
<input for="other"><input type="checkbox" name="hobby" id="other" value="other"><span>其他</span></label>
</p>
</body>
</html>
显示为:
2.列表控件
select标签(双标签,不可单独使用)搭配option进行使用
按钮分两种属性,一种是button,一种是input的type类型submit(<input type=button或submit,value="按钮")
submit、button的区别:
submit是对form表单中的内容进行提交,button是配合js中的onclink事件进行使用提交
列表控件:两个标签核心为select标签,搭配option使用
selected:表示浏览器初次显示默认被选中,size:列表中显示的个数(此时name获取选择列表的值)
默认值:selected
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<label>户籍信息</label>
<select name="hj">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="zhengzhou">郑州</option>
</select>
</body>
</html>
显示为: