今天把之前学的之前所学的表单和表格的知识做出了一个个人信息表单

最新推荐文章于 2023-03-23 20:31:01 发布

依本多情

最新推荐文章于 2023-03-23 20:31:01 发布

阅读量478

点赞数 1

分类专栏：【HTML5】

本文链接：https://blog.csdn.net/qq_36520235/article/details/74781663

版权

【HTML5】专栏收录该内容

2 篇文章 0 订阅

订阅专栏

表单知识的总结：

1. form是表单标签action他的属性值是用来指向服务器的url地址，还有name属性（是提交到服务器）、enctpy（二进制传输）、 method(包括post比较安全可以隐藏输入的密码并且上传到服务器的文件大小也比较大，而get不安全，而且能上传的文件也比较小)

   2. 一个完整的表单是由表单标签、表单域、表单按钮三部分表单标签子标签主要是以input标签为主，input（type必写属性）是他的类型
   3. 单选是input里面的radio属性、多选按钮是checkbox属性.如果在input加name属性且命名相同意思就是两者只能选一个。但是在多选按钮里面加name属性也没用，照样是可以多选的
4. 要想实现点击字就能选中，不用点那个框就能选中。需要用label标签来实现，需要在input标签里面加一个id属性，然后在label标签里面加一个for属性把其属性值等于id的属性值
   5. form还有一个属性是type="file"可以上传文件,但是前提必须form属性type="post"类型和enctype="multipart/form-data"
6. 想要设置一个提交按钮可以用submit、button、img（后面跟图片的链接src），还有一个重置reset后面用value为其命名
7. input里面还有一个是默认选项的属性check=“check”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	<form action="" method="post">
		<br><h1 align="center">欢迎来到王伟的表单小项目练习</h1><hr />
	
		<table>
			<tr>
				<td>用户名：</td>
				<td><input type="text"></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td>
					<input type="password" />
				</td>
			</tr>
			<tr>
				<td>确认密码：</td>
				<td>
					<input type="password" />
				</td>
			</tr>
			<tr>
				<td>请选择你的地区：</td>
				<td>
					<select>
						<optgroup label="河南">
							<option value="1">郑州</option>
							<option value="2">驻马店</option>
							<option value="3">焦作</option>
						</optgroup>
						<optgroup label="浙江">
							<option value="4">宁波</option>
							<option value="5">杭州</option>
							<option value="6">余姚</option>
						</optgroup>
					</select>
				</td>
			</tr>
			<tr>
				<td>请选择你的性别：</td>
				<td>
					<label for="xingbie">男</label><input type="radio" id="xingbie" name="group" />
					<label for="girl">女</label><input type="radio" id="girl" name="group" />不好说
				</td>
				
			</tr>
			<tr>
				<td>请选择你的职业：</td>
				<td>
					学生<input type="radio" name="group1"/>
					老师<input type="radio" name="group1"/>
					其他<input type="radio" name="group1"/>
				</td>
			</tr>
			<tr>
				<td>请选择爱好：</td>
				<td>
					<fieldset>
						<legend>你的爱好</legend>
						<input type="checkbox" />打篮球
						<input type="checkbox" />跑步
						<input type="checkbox" />听音乐
						<input type="checkbox" />打游戏
					</fieldset>
				</td>
			</tr>
			<tr>
				<td>备注：</td>
				
				<td>
					<textarea placeholder="请输入你需要补充的东西"></textarea>
					<input type="submit" value="提交" />
					<input type="reset" value="重置" />
				</td>
				
			</tr>
		</table>
	</form>
	</body>
</html>