HTML表单学习打卡

最新推荐文章于 2022-12-31 21:01:25 发布

gegejiawei

最新推荐文章于 2022-12-31 21:01:25 发布

阅读量267

点赞数

分类专栏： Web前端开发工程文章标签： html

本文链接：https://blog.csdn.net/gegejiawei/article/details/105745137

版权

Web前端开发工程专栏收录该内容

27 篇文章 0 订阅

订阅专栏

介绍：掌握利用表单进行交互式的页面的设计

1、作用：用于收集用户的信息，进行人机交互的操作。人机交互：收集数据之后将其传递给后台，后台处理完再次返回响应到前台的过程。
2、包含元素：文本框、单选、复选、隐藏域、列表框、图片框等，统一称为控件。

表单控件的常用属性

1、name 指定控件的名称，可重复
2、id 指定标签的唯一识别（类似身份证）
3、value 输入的控件的值（收集，设置）用于传递到后台使用的
4、checked 复选框（单选）默认被选中的项目
5、selected 列表框默认被选中
6、src 图片框的图片来源
7、onclick 鼠标的单击事件
8、disabled 禁用该控件
9、multiple 允许多选（适用于普通列表框）
10、action 传递到后台的，收集数据传递到后台进行响应
11、method 包含两种 post表示隐式的提交，对安全信息保护的比较好；get表示显示的提交，对信息的保护不是特别好，会将数据显示在url地址上

<!DOCTYPE html>
<html>
<head>
	<title>review0423</title>
	<meta charset="utf-8">
</head>
<body>
	<!-- 表单 -->
	<form action="success.html" method="post">
	    <!-- action 传递到后台的，收集数据传递到后台进行响应 -->
		<!-- 将 请输入姓名 设置为label属性 -->
		<label>1.请输入姓名：</label>
			<input type="text" name="" id="" placeholder="请输入姓名">
			<br>
		<!-- 将 请输入密码 设置为label属性 -->
		<label>2.请输入密码：</label>
			<input type="password" name="" id="" placeholder="请输入密码">
			<br>
		<!-- 将 再次输入密码 设置为label属性 -->
		<label>3.再次输入密码：</label>
			<input type="password" name="" id="" placeholder="再次输入密码">
			<br>
		<!-- 将 性别 设置为label属性 -->
		<label>4.性别：</label>
			<input type="radio" name="xb" value="male" checked="checked">男
			<!-- 默认选中男 -->
			<input type="radio" name="xb" value="female">女
			<br>
		<!-- 将 兴趣爱好 设置为label属性 -->
		<label>5.兴趣爱好：</label>
			<input type="checkbox" name="ah" id="" value="1">游泳
			<input type="checkbox" name="ah" id="" value="2" checked="checked">看书
			<!-- cheecked 默认选中 -->
			<input type="checkbox" name="ah" id="" value="3">爬山
			<input type="checkbox" name="ah" id="" value="4">思考
			<br>
		<!-- 暂时这样写 以后会做动态的时间列表 -->
		<label>6.生日：</label>
			<select>
				<option value="1995">1995</option>
				<option value="1996">1996</option>
				<option value="1997" selected="selected">1997</option>
				<!-- selected 表示默认选中 -->
				<option value="1998">1998</option>
				<option value="1999">1999</option>
				<option value="2000">2000</option>
			</select>年
			<select>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3" selected="selected">3</option>
				<!-- 默认选中三月 -->
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>
			</select>月
			<select>
				<option value="1">1</option>
				<option value="2" selected="selected">2</option>
				<!-- 默认选中二号 -->
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>
				<option value="13">13</option>
				<option value="14">14</option>
				<option value="15">15</option>
				<option value="16">16</option>
				<option value="17">17</option>
				<option value="18">18</option>
				<option value="19">19</option>
				<option value="20">20</option>
				<option value="21">21</option>
				<option value="22">22</option>
				<option value="23">23</option>
				<option value="24">24</option>
				<option value="25">25</option>
				<option value="26">26</option>
				<option value="27">27</option>
				<option value="28">28</option>
				<option value="29">29</option>
				<option value="30">30</option>
				<option value="31">31</option>
				</select>日
			<br>
			<label>7.头像：</label><img src="headLogo/1.gif">
			<!-- 此处不能实现 不同的选项对应不同的图片功能 -->
			<select>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3" selected="selected">3</option>
				<option value="4">4</option>
			</select>
			<br>
			<!-- 添加按钮控件 -->
			<label>8.按钮：</label>
			<input type="button" value="普通按钮" name="">		
			<input type="submit" value="提交按钮" name="">		
			<input type="reset" value="重置按钮" name="">
			<!-- button普通按钮回和后面的JavaScript联动使用	 -->
			<!-- submit则是具有提交的功能 -->
			<br>
			<!-- 添加文本框 -->
			<label>9.备注：</label>
			<textarea rows="5" cols="30" placeholder="请输入"></textarea>
			<br>
			<!-- 添加上传 -->
			<!-- 选择文件和后台脚本联动上传 -->
			<label>10.文件上传功能：</label>
			<input type="file" name=""><input type="button" value="上传" name="">
			<br>
			<!-- 添加一个隐藏按钮 只想自己知道 不想被别人看到的 -->
			<label>11.隐藏按钮：</label>
			000<input type="hidden" name="" id="">000
			<br>
			<label>12.多选框：</label>
			<select size="4" multiple="true">
				<!-- size 表示一次显示几个 -->
				<!-- multiple 表示是否可以多选 -->
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>	
			</select>
			<br>
			<!-- 分组下拉菜单 optgroup -->
			<label>13.分组下拉菜单：</label>
			<select name="city">
				<option>请选择</option>
				<optgroup label="华北">
					<option value="bj">北京</option>
					<option value="tj">天津</option>
					<option value="hb">河北</option>
				</optgroup>
				<optgroup label="华东">
					<option value="sh">上海</option>
					<option value="fj">福建</option>
					<option value="xm">厦门</option>
				</optgroup>
			</select>
	</form>

表单的其他控件

普通列表框(非下拉列表框)
隐藏域 – 虽然是隐藏的，但是主要作为前台不方便被其他人看到，但是需要传递到后台的数据
上传控件 – 选择文件和后台脚本联动上传
多行文本域 – 用于论坛发帖，长文档的输入

扩展：用表格实现布局

<table border="0" width="500px">
		<tr>
			<td align="right">请输入用户名：</td>
			<td>
				<input type="text" name="user" id="user">
			</td>
		</tr>
		<tr>
			<td align="right">请输入密码：</td>
			<td>
				<input type="password" name="pwd" id="pwd">
			</td>
		</tr>
		<tr>
			<td align="right">再次输入密码：</td>
			<td>
				<input type="password" name="pwd" id="pwd">
			</td>
		</tr>
		<tr>
			<td align="right">性别：</td>
			<td>
				<label><input type="radio" name="xb">男</label>
				<label><input type="radio" name="xb">女</label>
				<label><input type="radio" name="xb" checked="checked">保密</label>
			</td>
		</tr>
		<tr>
			<td align="right">兴趣爱好：</td>
			<td>
				<input type="checkbox" name="ah" id="">游泳
				<input type="checkbox" name="ah" id="" checked="checked">爬山
				<input type="checkbox" name="ah" id="">看书
				<input type="checkbox" name="ah" id="">思考
			</td>
		</tr>
		<tr>
			<td align="right">生日：</td>
			<td>
				<select>
					<option value="1995">1995</option>
					<option value="1996">1996</option>
					<option value="1997" selected="selected">1997</option>
					<!-- selected 表示默认选中 -->
					<option value="1998">1998</option>
					<option value="1999">1999</option>
					<option value="2000">2000</option>
				</select>年
				<select>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3" selected="selected">3</option>
					<!-- 默认选中三月 -->
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
				</select>月
				<select>
					<option value="1">1</option>
					<option value="2" selected="selected">2</option>
					<!-- 默认选中二号 -->
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					<option value="13">13</option>
					<option value="14">14</option>
					<option value="15">15</option>
					<option value="16">16</option>
					<option value="17">17</option>
					<option value="18">18</option>
					<option value="19">19</option>
					<option value="20">20</option>
					<option value="21">21</option>
					<option value="22">22</option>
					<option value="23">23</option>
					<option value="24">24</option>
					<option value="25">25</option>
					<option value="26">26</option>
					<option value="27">27</option>
					<option value="28">28</option>
					<option value="29">29</option>
					<option value="30">30</option>
					<option value="31">31</option>
				</select>日	
			</td>
		</tr>
		<tr>
			<td align="right">头像：</td>
			<td>
				<img src="headLogo/13.gif" alt="not find">
				<select name="" id="">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
				</select>
			</td>
		</tr>
		<tr>
			<td align="center" colspan="2">
				<input type="submit" value="注册">
			</td>
			<!-- <td></td> -->
		</tr>
	</table>
	<!-- 总结：表格是一种布局方式，但不是唯一的方式，美化效果还需要css样式来补充！ -->

思维导图

在这里插入图片描述

gegejiawei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表单学习打卡

介绍：掌握利用表单进行交互式的页面的设计1、作用：用于收集用户的信息，进行人机交互的操作。人机交互：收集数据之后将其传递给后台，后台处理完再次返回响应到前台的过程。2、包含元素：文本框、单选、复选、隐藏域、列表框、图片框等，统一称为控件。表单控件的常用属性1、name 指定控件的名称，可重复2、id 指定标签的唯一识别（类似身份证）3、value 输入的控件的值（收集，设置）用于传递...
复制链接

扫一扫