第一部分表单进阶和H5

最新推荐文章于 2024-10-09 23:31:03 发布

猛女永不落泪

最新推荐文章于 2024-10-09 23:31:03 发布

阅读量213

点赞数 10

分类专栏： Web前端基础笔记文章标签：前端开发语言 html html5

本文链接：https://blog.csdn.net/weixin_71027798/article/details/134780332

版权

Web前端基础笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

0095 表单进阶-单选框

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			
		</style>
	</head>
	<body>
		<h1>表单进阶-单选框</h1>
		
		<div>你对于京东首页满意度如何？</div>
		
		<div>
			<!-- <input type="radio" name="aaa" checked="checked"/>非常满意 -->
			<input type="radio" name="aaa" checked/>非常满意
		</div>
		<div>
			<input type="radio" name="aaa"/>满意
		</div>
		<div>
			<input type="radio" name="aaa"/>一般
		</div>
		<div>
			<input type="radio" name="aaa"/>不满意
		</div>
		
		<div>
			<div>你的性别？</div>
			<div>
				<input type="radio" name="bbb" id="man"/>
				<label for="man">男</label>
			</div>
			<div>
				<input type="radio" name="bbb" id="woman"/>
				<label for="woman">女</label>
			</div>
		</div>
	</body>
</html>

0096 表单进阶-复选框

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			
		</style>
	</head>
	<body>
		<h1>表单进阶-复选框(多选)</h1>
		<div>
			<div>你的兴趣爱好：</div>
			
			<div>
				<input type="checkbox" name="aaa" checked/>抽烟
				<input type="checkbox" name="aaa" checked/>喝酒
				<input type="checkbox" name="aaa" checked/>烫头
			</div>
		</div>
		
		<div>
			<div>你擅长的技术：</div>
			
			<div>
				<input type="checkbox" name="bbb" id="html" />
				<label for="html">html</label>
				<input type="checkbox" name="bbb" id="js" />
				<label for="js">js</label>
				<input type="checkbox" name="bbb" id="css" />
				<label for="css">css</label>
			</div>
		</div>
	</body>
</html>

0097 表单进阶-上传文件和隐藏字段

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			
		</style>
	</head>
	<body>
		<div>
			<div>请截图说明</div>
			
			<div>
				<!-- 上传文件 -->
				<input type="file" name="" id=""/>
			</div>
		</div>
		
		<div>
			<div>图片按钮-代替提交按钮（input type="submit"）</div>
			
			<div action="">
				<!-- 上传文件 -->
				<input type="image" src="图片路径"/>
			</div>
		</div>
		
		<div>
			<div>隐藏按钮</div>
			<!-- 隐藏 -->
			<input type="hidden" name="" id="" value="带给后端的个人信息,,"/>
		</div>
		
		<div>
			<div>禁用disabled，只读readonly</div>
			
			<div>
				<button disabled="disabled">注册</button>
				<br>
				<input type="radio" disabled/>不满意
				
				<br />
				<input type="text" disabled value="111111"/>
				<input type="text" readonly value="222222"/>
			</div>
		</div>
	</body>
</html>

0098 表单进阶-下拉菜单

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			
		</style>
	</head>
	<body>
		<h1>表单进阶-下拉菜单</h1>
		<div>
			<div>你的收货地址</div>
			<!-- select 支持的属性
			1. size 显示几个
			2. multiple -->
			
			<!-- option 支持的属性
			1.value,提供给后端需要用的value值
			2.select -->
			<select size="3">
				<option value="ln">辽宁</option>
				<option value="sd">山东</option>
				<option>山西</option>
				<option>河南</option>
				<option selected>河北</option>
			</select>
		</div>
		
		<div>
			<select size="3" multiple>
				<option>桌子</option>
				<option selected>椅子</option>
				<option selected>凳子</option>
				<option selected>电脑</option>
			</select>
		</div>
	</body>
</html>

0099 表单进阶-文本域

多行文本输入框

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			textarea{
				width: 300px;
				height: 300px;
				resize: none;
				/* resize 重新设置大小,vertical,horizontal,both,none */
			}
		</style>
	</head>
	<body>
		<h1>多行文本输入框-文本域</h1>
		<div>
			<!-- <textarea cols="10" rows="10"></textarea> -->
			
			<!--
			 placeholder:提示文字，
			 
			 默认value：写在双标签内部，注意空格问题
			-->
			<!-- <input type="text" value="aaaaa"/> -->
			<textarea cols="10" rows="10" placeholder="请输入你的意见">提前设置好的value</textarea>
		</div>
	</body>
</html>

0100 表单进阶-字段集

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			fieldset{
				border: 1px solid blue;
				width: 400px;
				height: 200px;
			}
			legend{
				border: 1px solid red;
				text-align: center;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<h1>表单进阶-字段集</h1>
		
		<fieldset>
			<legend>性别</legend>
			
			<input type="radio" name="aa"/>男
			<br />
			<input type="radio" name="aa"/>女
		</fieldset>
		
		<fieldset>
			<legend>爱好</legend>
			
			<input type="checkbox" name="bb"/>抽烟
			<br />
			<input type="checkbox" name="bb"/>喝酒
		</fieldset>
	</body>
</html>

0101 H5基础与语法

0102 H5新增语义化标签

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			header,footer{
				height: 50px;
				line-height: 50px;
				text-align: center;
				background: orange;
			}
			section{
				height: calc(100% - 100px);
			}
			nav,aside{
				width: 100px;
				height: 100%;
				background: #cccccc;
				float: left;
			}
			main{
				float: left;
				width: calc(100% - 200px);
				background: white;
				height: 100%;
			}
			main .article1{
				height: 60%;
			}
			main .article2{
				height: 40%;
			}
		</style>
	</head>
	<body>
		<!-- 这是头部 -->
		<header>header</header>
		<section>
			<nav>
				<figure>
					nav
					<ul>
						<li>111</li>
						<li>111</li>
						<li>111</li>
						<li>111</li>
					</ul>
				</figure>
			</nav>
			<main>
				<article class="article1">
					<header>article-header</header>
					<p>Lorem ipsum dolor sit amet consectetur 
					adipisicing elit. Quod, ex. Nam possimus vel, 
					enim quidem, harum quo exercitationem 
					architecto, distinctio consequatur doloremque 
					at debitis explicabo perferendis optio iusto 
					minima dolorem.</p>
					<footer>article-footer</footer>
				</article>
				<article class="article2">
					<header>article-header</header>
					<p>Lorem ipsum dolor sit amet consectetur 
					adipisicing elit. Quod, ex. Nam possimus vel, 
					enim quidem, harum quo exercitationem 
					architecto, distinctio consequatur doloremque 
					at debitis explicabo perferendis optio iusto 
					minima dolorem.</p>
					<footer>article-footer</footer>
				</article>
			</main>
			<aside>
				<figure>aside</figure>
				<p class="aside">Lorem ipsum, dolor sit amet 
				consectetur adipisicing elit. Distinctio autem 
				voluptas odio nulla eum hic qui, perspiciatis 
				quos perferendis ducimus dignissimos et! Odio 
				dolores velit, cumque iste non commodi inventore!</p>
			</aside>
		</section>
		<footer>footer</footer>
	</body>
</html>

0103 H5新增音频标签

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			
		</style>
	</head>
	<body>
		<p>
			之前的霸主flash，由于安全性、计算资源使用效率低，被抛弃了
		</p>
		<h1>音频</h1>
		
		<audio src="音频路径" controls loop autoplay muted></audio>
		
		<!-- controls 控制栏
		loop 循环
		autoplay 自动播放
		muted：静音
		-->
	</body>
</html>

0104 H5新增视频标签

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			video{
				width: 300px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<!-- <video src="视频路径" controls loop autoplay muted></video> -->
		<video src="视频路径" controls loop poster="海报图片路径" ></video>
		<!-- controls 控制栏
		
		loop：循环
		
		autoplay：自动播放
		
		muted：静音
		 
		poster:属性海报
		width
		height
		 -->
	</body>
</html>

0105 增强表单-input

Type=“color”生成一个颜色选择的表单

Type= "tel”唤起拨号盘表单

Type=“search”产生一个搜索意义的表单

Type=“range”产生一个滑动条表单

Type=“number”产生一个数值表单

Type=“email"限制用户必须输入email类型

Type=“url"限制用户必须输入url类型

Type="date"限制用户必须输入日期

Type=“month” 限制用户必须输入月类型

Type=“week”限制用户必须输入周类型

Type=“time”限制用户必须输入时间类型

Type=“datetime-local” 选取本地时间

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			
		</style>
	</head>
	<body>
		<form action="">
			<div>
				颜色选择：<input type="color" name="color"/>
			</div>
			<div>
				邮箱：<input type="email" name="myemail">
			</div>
			<div>
				url地址(完整地址)：<input type="url" />
			</div>
			<div>
				电话号码：<input type="tel" />
			</div>
			<div>
				滑块效果：<input type="range" name="range" min="100" max="200" value="100" step="10"/>
			<!-- step步长 -->
			</div>
			<div>
				数字类型：<input type="number" min="0" max="10" step="2" name="age"/>
			</div>
			<div>
				搜索：<input type="search" />
			</div>
			
			<div>
				日期选择：<input type="date" />
				月份选择：<input type="month" />
				周数选择：<input type="week" >
				<input type="datetime-local" name="datetime">
			</div>
			<input type="submit">
		</form>
	</body>
</html>

0106 增强表单-数据列表

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			
		</style>
	</head>
	<body>
		<input type="text" list="mylist">
		
		<datalist id="mylist">
			<option value="手机"></option>
			<option value="手表"></option>
			<option value="手环"></option>
			<option value="手镯"></option>
		</datalist>
	</body>
</html>

0107 增强表单-属性

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			
		</style>
	</head>
	<body>
		<form action="">
			<div>
				用户名：<input type="text" autofocus required pattern="[0-9][A-Z]{3}">
				<!-- autofocus 获取焦点 -->
			</div>
			<div>
				邮箱：<input type="email" name="email" required multiple/>
				
				<!-- required 必填项，不能为空 -->
				
				<!-- multiple 支持多个地址，用逗号隔开 -->
			</div>
			<input type="submit" />
		</form>
	</body>
</html>