03. html表单标签

html表单标签

1. 表单作用

<!--能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器-->

2. 注册小案例

show code 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>form表单</title>
	</head>

	<body>
		<!--action  提交数据到后端的路径（给哪个服务器提交）-->
		<!--
			1.什么都不写   默认当前页面所在的url
			2.全路径 www.baidu.com 百度
			3.只写路径后缀 action='/index'
			自动识别出服务端的ip和port拼接到前面
			host:port/index
		-->
		<!--input 和  label一起使用-->
		<form action="">
			<p><label for="d1">
				username : <input type="text" id="d1"/>
			</label></p>
			<!--通过id连接即可-->
			<p><label for="d2"></label> password : <input type="password" id='d2' /></p>
			<p>birthday ：
				<label for="d3"><input type="date" id="d3"/></label>
			</p>
			<!--
				所有获取用户标签输入的标签 都应该有name属性
					name类似于字典的key
					用户数据类似于字典的value
			-->
			<p>gender :
				<input type="radio" value="男" name="gender" checked="checked" />
				<input type="radio" value="女" name="gender" />
				<input type="radio" value="其他" name="gender" />
			</p>
			<p>bobby :
				<input type="checkbox" /> 打球
				<input type="checkbox" /> 音乐
			</p>
			<p>province:
				<select name="" id="">
					<option value="" >桂林</option>
					<option value="" selected>南宁</option>
					<option value="">梧州</option>
				</select>
			</p>
			<p>subject :
				<select name="" id="" multiple>
					<option value="">python</option>
					<option value="" selected>java</option>
					<option value="">js</option>
				</select>
			</p>
			<p> addr：
				<select name="" id="">
					<optgroup label="桂林">
						<option value="">临桂</option>
						<option value="">龙胜</option>
						<option value="">恭城</option>
					</optgroup>
					<optgroup label="河池">
						<option value="">宜州</option>
						<option value="">金城江</option>
					</optgroup>
				</select>
			</p>
			<p>上传文件:
				<input type="file" multiple/>
			</p>
			<p>自我介绍：
				<textarea name="" id="" cols="30" rows="10" maxlength="20"></textarea>
			</p>
			<!--提交form表单数据页面刷新-->
			<input type="submit" value="注册" />
			<!--普通按钮，本身没有功能，后面有用，学js之后自定义功能-->
			<input type="button" value="按钮" />
			<!--用来重置内容-->
			<input type="reset" value="重置" />
			<!--button也可以提交表单数据-->
			<button>点我</button>

		</form>
	</body>

</html>

3. 表单标签详解

3.1 form表单

格式：
	<form action=""></form>  在该form标签内部书写的获取用户的数据都会被form标签提交到后端（会有案例解释）

action:控制数据提交的后端路径(给哪个服务端提交数据)
  	1.什么都不写  默认就是朝当前页面所在的url提交数据
	2.写全路径:https://www.baidu.com  朝百度服务端提交
	3.只写路径后缀action='/index/'，自动识别出当前服务端的ip和port拼接到前面
	  host:port/index/

3.2 input标签

input标签 就类似于前端的变形金刚  通过type属性变形
text:普通文本
password:密文
date:日期
submit:用来触发form表单提交数据的动作
button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能
reset:重置内容
radio:单选
checkbox:多选
file:获取文件  也可以一次性获取多个

3.2.1 type="text"&type="password"与label结合使用 （文本框、密码框）

  • 标签与label作用：原始的input标签需要点击文本框/密码框才能输入，绑定之后可以点击绑定物（username、password）也能输入
  • 第一种：嵌套起来，通过id值链接
  • 第二种：通过id值与label标签中的for直接链接即可，不需要嵌套
<!--第一种-->
<p><label for="d1">
	username : <input type="text" id="d1"/>
  </label></p>
<!--第二种-->
<p><label for="d2"></label> password : <input type="password" id='d2' /></p>

3.2.2 type="date"使用 （时间）

<p>birthday ：
	<label for="d3"><input type="date" id="d3"/></label>
</p>

3.2.3 type="radio"使用 （单选框）

<p>gender :
	<input type="radio" value="男" name="gender" checked="checked" />
	<input type="radio" value="女" name="gender" />
	<input type="radio" value="其他" name="gender" />
</p>

3.2.4 type="checkbox"使用 （复选框）

<p>bobby :
	<input type="checkbox" /> 打球
	<input type="checkbox" /> 音乐
</p>

3.2.5 type="file"使用 （上传文件）

<p>上传文件:
	<input type="file" multiple/>
</p>

3.2.6 按钮

注意：最有用的是 type="button"， 因为它本身不具备功能，后续我们可以写js代码给它绑定任意事件

<!--提交form表单数据页面刷新-->
<input type="submit" value="注册" />
<!--普通按钮，本身没有功能，后面有用，学js之后自定义功能-->
<input type="button" value="按钮" />
<!--用来重置内容-->
<input type="reset" value="重置" />

<!--button也可以提交表单数据-->
<button>点我</button>

4. 其他不是input标签的表单

4.1 下拉框

<!--第一种--> 普通下拉框
<p>province:
	<select name="" id="">
		<option value="" >桂林</option>
		<option value="" selected>南宁</option>
		<option value="">梧州</option>
	</select>
</p>
<!--第二种--> 可以多选的下拉框加上multiple
<p>subject :
	<select name="" id="" multiple>
		<option value="">python</option>
		<option value="" selected>java</option>
		<option value="">js</option>
	</select>
</p>
<!--第三种-->  分级的下拉框
<p> addr：
	<select name="" id="">
		<optgroup label="桂林">
			<option value="">临桂</option>
			<option value="">龙胜</option>
			<option value="">恭城</option>
		</optgroup>
		<optgroup label="河池">
			<option value="">宜州</option>
			<option value="">金城江</option>
		</optgroup>
	</select>
</p>

4.2 文本域

<p>自我介绍：
	<textarea name="" id="" cols="30" rows="10" maxlength="20"></textarea>
</p>

4.3 结合flask后端验证表单提交数据

posted @ 2021-08-09 12:50  超暖  阅读(103)  评论(0)  编辑  收藏  举报