欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

0008 前端 Html 07 表单 框架 文本 输入 密码 单选 多选 下拉框 上传文件 多行文本 按钮 表格 里 添加 表单

程序员文章站 2022-05-29 23:09:28
...

以下为学习笔记，用来备忘、交流

工具：Sublime Text 3
渲染：谷歌浏览器

表单

框架

<form action="http://www.baidu.com" method="post"> </form>

表单的内容都包含在form标签内，action参数是输入的内容要传递的目的地。 method="post"如果不写就默认使用get方式提交表单，可以在地址栏看到提交的信息。

文本 输入

	<div>
		<label for="u_name_id">注册名(文本):</label>
		<input type="text" name="u_name" id="u_name_id" value="好学生">
	</div>

input 标签选择text，在label的for属性值设置成 文本框的 id 的时候，点网页上显示的文字也能选择相应的文本框。value就是这个文本框的值，value的值会默认显示在文本框里，是文本框的默认值。

密码 输入

	<div>
		<label for="passwd_id">密码(密码):</label>
		<input type="password" name="passwd" id="passwd_id">
	</div>

单选

	<div>
		<label for="">平台(单选)：</label>
		<input type="radio" name="pingtai" id="qq_id" value="qq">  <label for="qq_id">QQ</label>
		<input type="radio" name="pingtai" id="weixin_id" value="weixin"> <label for="weixin_id">微信</label>
		<input type="radio" name="pingtai" id="weibo_id" value="weibo"> <label for="weibo_id">微博</label>
	</div>

多选

	<div>
		<label for="">为何要注册(多选)：</label>
		<input type="checkbox" name="yuanyou" id="haoqi_id" value="haoqi"> <label for="haoqi_id">好奇</label>
		<input type="checkbox" name="yuanyou" id="xuexi_id" value="xuexi"> <label for="xuexi_id">学习</label>
		<input type="checkbox" name="yuanyou" id="zhanshi_id" value="zhanshi"> <label for="zhanshi_id">展示自己</label>
	</div>

下拉框选择

	<div>
		<label for="">年龄(下拉框)：</label>
		<select name="nianling" id="nianling_id">
			<option value="80">80后</option>
			<option value="90">90后</option>
			<option value="00">00后</option>
			<option value="10">10后</option>
			<option value="20">20后</option>
		</select>
	</div>

上传文件

	<div>
		<label for="">护照/扫描件(文件)：</label>
		<input type="file">
	</div>

多行文本

	<div>
		<label for="">备注(多行文本)：</label>
		<textarea name="" id="" cols="30" rows="10"></textarea>
	</div>

按钮

	<input type="button" name="" value="自定义按键">
	<input type="reset" name="" value="清空">
	<input type="submit" name="" value="注册">
	<input type="hidden" name="buxianshi" value="123">

说明：hidden方式不会将任何信息显示在网页上，用于暂时存的从数据库获取的不需要显示的数据，可以有多个hidden，name不同就可以。

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册</title>
</head>
<body>
	<form action="http://www.baidu.com" method="post">
		<div>
			<label for="u_name_id">注册名(文本):</label>
			<input type="text" name="u_name" id="u_name_id" value="好学生">
		</div>
		<br>
		<div>
			<label for="passwd_id">密码(密码):</label>
			<input type="password" name="passwd" id="passwd_id">
		</div>
		<br>
		<div>
			<label for="">平台(单选)：</label>
			<input type="radio" name="pingtai" id="qq_id" value="qq">  <label for="qq_id">QQ</label>
			<input type="radio" name="pingtai" id="weixin_id" value="weixin"> <label for="weixin_id">微信</label>
			<input type="radio" name="pingtai" id="weibo_id" value="weibo"> <label for="weibo_id">微博</label>
		</div>
		<br>
		<div>
			<label for="">为何要注册(多选)：</label>
			<input type="checkbox" name="yuanyou" id="haoqi_id" value="haoqi"> <label for="haoqi_id">好奇</label>
			<input type="checkbox" name="yuanyou" id="xuexi_id" value="xuexi"> <label for="xuexi_id">学习</label>
			<input type="checkbox" name="yuanyou" id="zhanshi_id" value="zhanshi"> <label for="zhanshi_id">展示自己</label>
		</div>
		<br>
		<div>
			<label for="">年龄(下拉框)：</label>
			<select name="nianling" id="nianling_id">
				<option value="80">80后</option>
				<option value="90">90后</option>
				<option value="00">00后</option>
				<option value="10">10后</option>
				<option value="20">20后</option>
			</select>
		</div>
		<br>
		<div>
			<label for="">护照/扫描件(文件)：</label>
			<input type="file">
		</div>
		<br>
		<div>
			<label for="">备注(多行文本)：</label>
			<textarea name="" id="" cols="30" rows="10"></textarea>
		</div>
		<br>
		<input type="button" name="" value="自定义按键">
		<input type="reset" name="" value="清空">
		<input type="submit" name="" value="注册">
		<input type="hidden" name="buxianshi" value="123">
	</form>
</body>
</html>

效果：

0008 前端 Html 07 表单 框架 文本 输入 密码 单选 多选 下拉框 上传文件 多行文本 按钮 表格 里 添加 表单

将上一节 表格 里 添加 表单

完整代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>设备记录</title>
</head>
<body>
	<form action="http://www.baidu.com" method="post">
	<table width="700" border="0" cellpadding="0" cellspacing="0" align="center">
		<tr align="center">
			<td height="30" width="20%">
				<input type="button" name="" value="+新建记录+">
			</td>
			<td width="60%">
				<input type="text" name="u_name" id="u_name_id" value="输入***搜索">
			</td>
			<td width="30%">
				<input type="submit" name="" value="搜索">
			</td>
		</tr>
		<tr>
			<td colspan="3">
				<hr>
				<table width="700" border="1" cellpadding="0" cellspacing="0" >
					<tr align="center">
						<td height="30" width="20%">产品名称：</td>
						<td width="30%">吹风机</td>
						<td width="20%">产品批次/***：</td>
						<td width="30%">CF201912220368</td>
					</tr>
					<tr align="center">
						<td height="30">主板型号：</td>
						<td>2368</td>
						<td>主板批次/***</td>
						<td>569872156</td>
					</tr>
					<tr align="center">
						<td height="30">电机厂家：</td>
						<td>专业电机厂</td>
						<td>电机批次/***：</td>
						<td>8625456875</td>
					</tr>
					<tr align="center">
						<td height="30">软件版本：</td>
						<td>1.0</td>
						<td>组装日期：</td>
						<td>19.12.12</td>
					</tr>
					<tr align="center">
						<td height="30">组装人员：</td>
						<td>装三</td>
						<td>检验人员：</td>
						<td>检二</td>
					</tr>
				</table>
				<table width="700" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td height="10" colspan="5"></td>
					</tr>
					<tr align="center">
						<td height="30" width="10%">更新类型</td>
						<td height="30" width="55%">内容</td>
						<td height="30" width="10%">使用时间</td>
						<td height="30" width="10%">记录人</td>
						<td height="30" width="15%">更新时间</td>
					</tr>
				</table>
				<hr>
				<table width="700" border="0" cellpadding="0" cellspacing="0">
					<tr align="center">
						<td width="10%">更新系统</td>
						<td width="55%">将系统更新成2.0</td>
						<td width="10%">8小时</td>
						<td width="10%">技术员</td>
						<td width="15%">2019.12.13</td>
					</tr>
				</table>
				<hr>
				<table width="700" border="0" cellpadding="0" cellspacing="0">
					<tr align="center">
						<td width="10%">更换电机</td>
						<td width="55%">电机更换厂家为：电机专营厉害，批次换成165895478962，轴承加注油脂等</td>
						<td width="10%">80000小时</td>
						<td width="10%">技术员3</td>
						<td width="15%">2019.12.18</td>
					</tr>
				</table>
				<hr>
				<table width="700" border="0" cellpadding="0" cellspacing="0">
					<tr align="center">
						<td width="10%">报废</td>
						<td width="55%">超过寿命报废</td>
						<td width="10%">900000小时</td>
						<td width="10%">技术员8</td>
						<td width="15%">2019.12.19</td>
					</tr>
				</table>
				<hr>
				<table width="700" border="0" cellpadding="0" cellspacing="0">
					<tr align="center">
						<td width="10%">
							<select name="nianling" id="nianling_id">
								<option value="80">升级</option>
								<option value="90">更换</option>
								<option value="00">出售</option>
								<option value="10">维修</option>
								<option value="20">报废</option>
							</select>
						</td>
						<td width="55%">
							<textarea name="" id="" cols="30" rows="3"></textarea>
						</td>
						<td width="10%">
							<textarea name="" id="" cols="6" rows="1"></textarea>
							<label for="xiaoshi_id">小时</label>
						</td>
						<td width="10%">
							<select name="nianling" id="nianling_id">
								<option value="80">技术员1</option>
								<option value="90">技术员2</option>
								<option value="00">技术员3</option>
								<option value="10">技术员4</option>
								<option value="20">技术员5</option>
							</select>
						</td>
						<td width="15%">
							<input type="submit" name="" value="添加记录">
						</td>
					</tr>
				</table>
				<hr>
			</td>
		</tr>
	</table>
	</form>
</body>
</html>

效果如下：

0008 前端 Html 07 表单 框架 文本 输入 密码 单选 多选 下拉框 上传文件 多行文本 按钮 表格 里 添加 表单
还有
0008 前端 Html 07 表单 框架 文本 输入 密码 单选 多选 下拉框 上传文件 多行文本 按钮 表格 里 添加 表单

相关标签： 前端 html html5

上一篇： 应用程序 docker_使轻松交付Docker应用程序变得容易

下一篇： 小程序-文本输入框input+表单组件组合+开关选择器按钮+滑动选择器按钮slider+文本输入框+单选按钮radio+多选按钮checkbox+添加手机联系人+input绑定事件处理函数+剪贴板

推荐阅读