HTML学习4 表单

最新推荐文章于 2021-10-21 02:07:50 发布

林⁣熙

最新推荐文章于 2021-10-21 02:07:50 发布

阅读量223

点赞数

分类专栏： HTML 文章标签： html web

本文链接：https://blog.csdn.net/lx1315998513/article/details/106068393

版权

HTML 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

表单

	1.表单就是收集用户信息的，就是让用户填写的、选择的。
			<div>
				<h3>欢迎注册本网站</h3>
				<form>
					所有的表单内容，都要写在form标签里面
				</form>
			</div>
			form是英语表单的意思。form标签里面有action属性和method属性，action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。
	2.文本框
		例子：
		<input type="text" value="默认有的值"/>
		input表示“输入”，指的是这是一个“输入小部件”，
		type表示“类型”，
		text表示“文本”，指的是类型是一个文本框的输入小部件。
		value表示“值”，value属性就是默认有的值，文本框中已经被填写好了
	
	3.密码框
		例子：
		<input type="password" />
		也就是说，input标签很神奇，又是文本框，又是密码框。
		到底是啥？看type属性的值是什么，来决定。
		如果type=”text”  文本框
		如果type=”password” 密码框
	
	4.单选按钮
		只能选一个，术语叫做“互斥”。
		<input type="radio" name="xingbie" /> 男
		<input type="radio" name="xingbie" /> 女
		radio是“收音机”的意思，input的type的值，如果是radio就是单选按钮。
		非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
	
		单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
		
		默认被选择，就应该书写checked=”checked”
		<input type="radio" name="sex" checked="checked">
	
	5.复选框
		也是input标签，type是checkbox。 
		<p>
			请选择你的爱好：
			<input type="checkbox" name="aihao"/> 睡觉
			<input type="checkbox" name="aihao"/> 吃饭
			<input type="checkbox" name="aihao"/> 足球
			<input type="checkbox" name="aihao"/> 篮球
			<input type="checkbox" name="aihao"/> 乒乓球
			<input type="checkbox" name="aihao"/> 打豆豆
		</p>
		复选框，虽然他不需要互斥，但是也要有相同的name
	
		不过现在，我们就先学习这四个。
		<input type="text" /> 文本框
		<input type="password" /> 密码框
		<input type="radio"> 单选按钮
		<input type="checkbox" /> 复选框
	
	6.下拉列表
		select就是“选择”，option“选项”
		<select>
			<option>北京</option>
			<option>河北</option>
			<option>河南</option>
			<option>山东</option>
			<option>山西</option>
			<option>湖北</option>
			<option>安徽</option>
		</select>
	
	7.多行文本框（文本域）
		text就是“文本”，area就是“区域”。
		<textarea cols="30" rows="10"></textarea>
		这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。
	
		cols属性表示columns“列”，rows属性表示rows“行”。
		值就是一个数，表示多少行，多少列。
	
	8.三种按钮
		按钮也是input标签，一共有三种按钮：
		普通按钮：
		<input type="button" value="我是一个普通按钮" />
		button就是英语“按钮”的意思。value就是“值”的意思，按钮上面显示的文字。
	
		提交按钮：
		<input type="submit" />
		submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。
		这个按钮点击，表单真的能提交。这个表单就会被提交到，form标签的action属性中的那个页面中去。
	
		重置按钮：
		<input type="reset" />
		reset就是“复位”的意思。定义重置按钮。重置按钮会清除表单中的所有数据。
	
	9.总结input的类型有
		1.text      文本框
		2.password  密码框
		3.radio		单选
		4.checkbox	多选
		5.button	普通按钮
		6.submit	提交按钮
		7.reset		重置
	
	10.label标签
		本质上讲，“男”、“女”这两个汉字，和input元素没有关系。
		<input type="radio" name="sex" /> 男
		<input type="radio" name="sex" /> 女
	
		label就是解决这个问题的。
		<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
		<input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>
	
		input元素要有一个id，然后label标签就有一个for属性，和id相同，就表示绑定了，这个label和input就有绑定关系了。
	
		复选框也有label：
		<input type="checkbox" id="kk" />
		<label for="kk">10天内免登陆</label>  
		什么表单元素都可以有label。

test.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 表单 -->
		<div id="">
			<h3>欢迎注册本网站</h3>
			<form action="" method="post">
				<!-- action提交表单的地址，method请求方式：get、post -->
				<!-- 所有的表单内容，都要写在form标签里面 -->
				<br>文本框type="text"
				<!-- value:就是传给后台的值，name就是后台接受的名字 -->
				<input type="text" value="默认有的值" name="text" />
				<br>密码框type="password"：
				<input type="password" value="默认有的值" name="password" />
				<br>
				单选按钮：相同的name属性才能互斥 checked：默认被选中
				<input type="radio" name="xingbie" id="nan" value="1" checked="checked" /><label for="nan">男</label><!-- label的for属性绑定对应的单选按钮 -->
				<input type="radio" name="xingbie" id="nv" value="2" /><label for="nv">女</label>


				复选框type="checkbox"多选
				<p>
					请选择你的爱好：
					<input type="checkbox" name="aihao" id="aihao" value="睡觉" />睡觉
					<input type="checkbox" name="aihao" id="aihao" value="吃饭" />吃饭
					<input type="checkbox" name="aihao" id="aihao" value="足球" />足球
					<input type="checkbox" name="aihao" id="aihao" value="篮球" />篮球
					<input type="checkbox" name="aihao" id="aihao" value="乒乓球" />乒乓球
					<input type="checkbox" name="aihao" id="aihao" value="打豆豆" />打豆豆

				</p>


				下拉列表<br>
				<select name="diqu">
					<option value="1">北京</option>
					<option value="2">上海</option>
					<option value="3">河北</option>
					<option value="4">河南</option>
					<option value="5">山西</option>
					<option value="6">安徽</option>
				</select>

				多行文本框（文本域）rows:行数 cols：列数<br>
				<textarea rows="10" cols="30" name="text">

				</textarea>
				<br>

				三种按钮<br>
				普通按钮：<br>
				<button>普通按钮1</button>
				<input type="button" name="anniu1" id="anniu1" value="按钮2" /> <br>

				提交按钮：把表单信息提交给后台<br>
				<input type="submit" name="tijiao" id="tijiao" value="提交按钮" />
				<br>
				重置按钮：重置表单所有的内容<br>
				<input type="reset" name="chongzhi" id="chongzhi" value="重置按钮" />


				input的类型有<br>
				1.text 文本框<br>
				2.password 密码框<br>
				3.radio 单选<br>
				4.checkbox 多选<br>
				5.button 普通按钮<br>
				6.submit 提交按钮<br>
				7.reset 重置<br>
			</form>
		</div>
	</body>
</html>