4.表单常用控件

BUG之神 185

四表单常用控件

表单的使用非常广泛,例如搜索框,登录注册页面等等

https://weibo.com/

4.表单常用控件 

4.表单常用控件 

常用表单控件代码如下:

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>3-1表单的基本元素</title>
</head>
<body>
	<!-- 表单元素使用form标签包裹 -->
	<form action="do.php">
		<!-- 1.输入框 -->
		<!-- name属性用于提交到后端编程语言处理 -->
		姓名:<input type="text" name="name" value=""><br>
		<!-- 2.密码框 -->
		密码:<input type="password" name="password" value=""><br>
		<!-- 3.单选框 不管有多少单选框,name属性的值必须一致 -->
		性别:<input type="radio" name="sex" value="male">男
			 <input type="radio" name="sex"  value="female">女
			 <!-- 默认设置性别为保密 -->
			 <!-- checked是bool属性:真true 假false,要么不赋值,要么把自己赋值给自己
			  下方三种方式均可-->
			 <!-- <input type="radio" name="sex"  value="secret" checked="">保密<br> -->
			 <!-- <input type="radio" name="sex"  value="secret" checked>保密<br> -->
			 <input type="radio" name="sex"  value="secret" checked="checked">保密<br>
		<!-- 4.复选框,name值必须是一个数组-->
		爱好:<input type="checkbox" name="hobby[]" value="movie">看电影
				<!-- 将打游戏设置为默认选项 -->
			  <input type="checkbox" name="hobby[]" value="game" checked>打游戏
			  <input type="checkbox" name="hobby[]" value="cook">做饭
			  <input type="checkbox" name="hobby[]" value="wash">洗衣
			  <br>
		<!-- 5.下拉框 -->
		级别:<select name="level" >
				<option value="xiaobai">小白</option>
				<!-- 默认选中第一个,这里将菜鸟设置为默认项 -->
				<option value="cainiao" selected>菜鸟</option>
				<option value="zhongji">中级</option>
				<option value="dashen">大神</option>
			 </select>
		<br>
		<!-- 6.文件-->
		<!-- accept 可接受的文件类型,可写作 image/jpg,image/png,image/gif
		*代表可以接受所有图片类型 -->
		头像:<input type="file" name="photo" accept="image/*">
		<br>
		<!-- 7.文本域-->
		<!-- 文本域是一个多行多列的文本框,如果想禁止拖拽文本域拖动可以使用css的resize: none-->
		备注:<textarea name="comment" rows="5" cols="30"></textarea>
		<br>
		
		<!-- 8.提交按钮 -->
		<!-- 提交后会交给form 中action中指定的文件进行处理 -->
		<input type="submit" name="submit" value="提交">
		
	</form>	
</body>
</html>

执行:

4.表单常用控件 

点击提交,可以看到提交的信息都通过url发送给了do.php,当前不存在do.php所以报404错误

4.表单常用控件 

这种提交方式是get提交,所有信息明文显示在url地址中 

说明:

提交方式有很多,最主要的有二种:

1.get方式:这也是默认的方式,用户提交的表单数据全部在url地址上

优点是便于收藏和重复调用,缺点是不安全并且数据数量受限制

2.post方式:数据通过请求头来提交,url地址栏看不到,非常安全,且长度不受限制

 

get方式非常适合传递不敏感且长度很短的数据

post方式非常适合传递重要数据且长度不确定的数据

 

将提交方式改为post

4.表单常用控件 

此时再提交就是通过post方式,而不再是get明文的方式

4.表单常用控件 

如果想要查看提交的信息,可以查看请求头,需要在do.php文件存在的情况下才能查看,后面再讲

分享