表单
1、表单作用
提交数据,使页面具有交互性。
2、表单标签
form双标签
<form action=””>内容</form>
表单之间不能相互嵌套,但是一个html可以有多个form,而且form里面可以包括表格。
<form action=”提交的地址” name=”表单名称” method=”提交方式”>
<table>
<tr>
<td>
</td>
</tr>
</table>
</form>
提交方式:get\post
get&post区别:
①get(默认)提交数据不安全,因为会在地址栏中显示;post不会;
②get提交数据大小由限制,不能大于2KB,而post目前没有限制;
如图:
这是GET用法
这是POST用法
3、表单元素
是行元素,得通过换行或者
1)单行文本框
用户名:<input type=”text” name=”常用的是userName”/>
密码:<input type=”password” name=”常用的是password”/>
第二个和第一个的区别是,第二个的输入会自动保护,类似密码登录
2)单选按钮
性别:
<input type=”radio” name=”sex”/>男
<input type=”radio” name=”sex”/>女
此时name必须有,而且像这种多选一的情况,这几个情况的name必须一致
3)多选按钮
<input type=”checkbox” />选项1
<input type=”checkbox” />选项2
<input type=”checkbox” />选项3
4)提交按钮
<input type=”submit” value=””/>
value的值用于修改按钮名称(默认提交)
5)重置按钮
<input type=”reset” value=””/>
value的值用于修改按钮名称(默认重置)
6)一般按钮
<input type=”button” value=””/>
button按钮没有任何功能,其内容通过value赋值
是提交功能;默认type=”submit”
重置 是重置功能
没有功能的按钮 是一般按钮
7)文件
当跟file有关的时候需要改编码格式:
<form action=”” name=”” enctype=”multipart/form-data”>
转换成二进制:0和1
<input type=”file” value=””/>
当type=”file”的时候,就可以选择文件
8)隐藏域
<input type=”hidden”/>
后台用的多,用户是看不见的
9)图片提交按钮
<input type=”image” src=”路径”/>
10)下拉列表
<select name=”列表名称”>
<option value=”等同值1”>内容1</option>
<option value=”等同值2”>内容2</option>
<option value=”等同值3”>内容3</option>
<option value=”等同值4”>内容4</option>
</select>
分组:
<optgroup label=”组名”>
组员
</optgroup>
<select name=”列表名称”>
<optgroup>
<option value=”等同值1”>内容1</option>
<option value=”等同值2”>内容2</option>
</optgroup>
<optgroup>
<option value=”等同值3”>内容3</option>
<option value=”等同值4”>内容4</option>
</optgroup>
</select>
11)多行文本框
<textarea name=”名称” cols=”列数” rows=”行数”>可以写内容</textarea>
默认情况下是可以缩放的。
12)与按钮相匹配
<input type=”radio” name=”sex” id=man”/><label for=”man”>男</label>
<input type=”radio” name=”sex” id=woman”/><label for=”woman”>女</label>
即当用户点击汉字的时候,也会自动选择对应的按钮;用以提升用户体验度。
4、表单元素的属性
1)type 属性
2)name 名称
3)Value 当前值
4)Checked 默认被选中,配合单选按钮和多选按钮使用
5)Selected 默认显示,配合option使用
6)Readonly 只读
7)Disable 禁用
练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>欢迎来到我的小家!</title>
</head>
<body>
<form action="" name="form1" method="POST" align="center">
用户名:<input type="text" name="userName">
</br>
密码:<input type="password" name="password">
</br>
性别:<input type="radio" id="man" name="sex" checked><label for="man">男</label>
<input type="radio" id="woman" name="sex"><label for="woman">女</label>
</br>
爱好:<input type="checkbox" id="sing" checked><label for="sing">唱歌</label>
<input type="checkbox" id="play"><label for="play">看剧</label>
<input type="checkbox" id="cp"><label for="cp">磕CP</label>
</br>
<input type="submit" value="登录">
<input type="reset" value="取消">
</br>
<input type="file" name="" enctype="multipart/form-data">
<p>时代少年团:<select name="时代少年团">
<optgroup label="高考加油!">
<option value="1">丁程鑫</option>
<option value="2">马嘉祺</option>
<option value="3">张真源</option>
</optgroup>
<optgroup label="高中生">
<option value="4">宋亚轩</option>
<option value="5">贺峻霖</option>
<option value="6">严浩翔</option>
</optgroup>
<option value="7" selected>刘耀文</option>
</select>
</p>
</form>
</body>
</html>
结果如图: