第十二章表单（form）

表单的相关的元素

什么时候可能使用到：什么时候都会用使用！

表单可以把用户输入的数据提交给服务器（后台PHP程序）

表单的核心元素

快速入门案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
	</head>
	<body>
		<h1>登录页面</h1>
<!--
表单的基本用法
action="loginOk.html" 表示把表单的数据提交给loginOk.html页面
method="get" 表单，提交方式是以get方式提交
<input type="text" name="user_name">表示一个文本框 name给文本框取名
密  码：<input type="password" name="user_pass"><br>表示一个密码框，当输入数据时，是以密码的方式显示的
<input type="submit" value="点击登录"> 这是一个提交按钮，当用户点击这个按钮时，浏览器就会把这个表单的数据提交给action指向的文件
<input type="reset" value="重新填写">这是一个重置按钮，当用户点击这个按钮时，浏览器就会把这个表单的数据清空

-->
		<form action="loginOk.html" method="get">
			用户名：<input type="text" name="user_name"><br>
			密  码：<input type="password" name="user_pass"><br>
			<input type="submit" value="点击登录"><input type="reset" value="重新填写">
		</form>
	</body>
</html>

loginOk.html

<!DOCTPYE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>loginOk</title>
	</head>
	<body>
		恭喜你！登录成功！
	</body>
</html>

快速入门：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素说明</title>
	</head>
	<!--
		特别说明：表单提交的复选框和单选按钮的数据，是value属性的值
		复选框和单选按钮的name应该保持一致
	-->
	<body>
		<form action="xxx.php" method="get">
			名字：<input type="text" name="user_name" size="60px" maxlength="16"><br>
			密码：<input type="password" name="user_pass"><br>
			<hr>
			复选框<br>
			<input type="checkbox" name="hobby" value="music">音乐<br>
			<input type="checkbox" name="hobby" value="sport">运动<br>
			<hr>
			单选<br>
			<input type="radio" name="sex" value="male">男<br>
			<input type="radio" name="sex" value="female">女<br>
			<hr>
			隐藏表单<br>
			<input type="hidden" name="oper" value="delete"><br>
			<hr>
			图片按钮<br>
			<input type="image" src="0000.jpeg" width="80px">
			<hr><br>
			下拉框：你喜欢的爱好<br>
			<!--
			size="4" 表示可以显示多少个选项，multiple="multiple"表示可以多选
			-->
			<select name="like" size="1" multiple="multiple">
				<!--选择项-->
				<option value="lq">篮球</option>
				<option value="zq">足球</option>
				<option value="pq">排球</option>
				<option value="bq">棒球</option>
				<option value="ymq">羽毛球</option>
				<option value="wq">网球</option>
			</select>
			<hr><br>
			文本域<br>
			<textarea name="article" rows="10" cols="50">  
				请输入内容！			
			</textarea><br>
			<input type="submit" value="提交">			
		</form>	
	</body>
</html>

第十二章 表单（form）

猜你喜欢

第十二章表单（form）