常见的简易表单和输入标签

最新推荐文章于 2022-09-30 20:58:29 发布

leasin_

最新推荐文章于 2022-09-30 20:58:29 发布

阅读量982

点赞数

分类专栏： Html-5

本文链接：https://blog.csdn.net/XiaoBuHome/article/details/53005830

版权

Html-5 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<!-- base 是页面的基准路径，如果页面中的路径有 明确指向 某个目录那它的路径会直接生效，如果是在本及路径下面的相对路径就可以省去这个基准路径 -->
	<style type="text/css">		
	</style>
</head>

<body>

	<!-- form是表单元素，用来获取用户录入的信息，并且具体提交到目标页面的功能 -->
	<form action="res/neighbor.html">
		<fieldset>
			<legend>基本信息</legend>
			<br>
			<!-- 文本框 -->
			<label>用户：</label><input type="text"><br><br>	
			<!-- 密码框 -->
			<label>密码：</label><input type="password"><br><br>	
		</fieldset>

		<fieldset>
			<legend>高级信息</legend>
			<br>
			<!-- 单选框 -->
			<label>性别：</label> 
			<input type="radio" name="sex" id="male"><label for="male">男</label> 
			<input type="radio" name="sex" id="female"><label for="female">女</label><br><br>	
			<!-- 复选框 -->
			<label>爱好：</label>
			<input type="checkbox" name="interest">LOL
			<input type="checkbox" name="interest">DOTA
			<input type="checkbox" name="interest">CF
			<input type="checkbox" name="interest">DNF
			<input type="checkbox" name="interest">CODING
			<input type="checkbox" name="interest">2333<br><br>

			<!-- 下拉列表 -->
			<label>学校：</label>
			<select>
				<option>洛阳理工</option>
				<option>郑州信息工程学院</option>
				<option>河南建筑职业学院</option>
				<option>郑州理工</option>
			</select><br><br>
		</fieldset>
		<!-- 按钮 --><br>
		<input type="button" value="普通按钮">
		<input type="submit" value="登录">
		<input type="reset" value="重置">
	</form>	

</body>
</html>

知识点：

1.fieldset属性表示外围框，fieldset可以将表单内的相关元素分组，legend 为 fieldset 定义标题。

2.label标签为input定义标注(标记)。
3.input，以收集用户的信息为主，根据不同的type类型，分为单选框、复选框、按钮等等。
① radio，单选框，代码29、30行，两行对比，name表示，把选项绑定到性别里面，并且只能选一个，id和for有点定位的概念，点击后面的内容即可选中前面的单选框。
② checkbox，复选框，代码33到38行,name同上。
③ button，普通按钮，代码50行，value为显示的文字。
④ submit，提交按钮，代码51行，value为显示的文字。
⑤ reset，重置按钮，代码52行，value为显示的文字。
4.select，创建单选或多选菜单，option可设置选项。