HTML5——form表单

最新推荐文章于 2021-10-07 11:06:07 发布

is_Del

最新推荐文章于 2021-10-07 11:06:07 发布

阅读量211

点赞数

分类专栏： HTML5 文章标签： html

本文链接：https://blog.csdn.net/del1026/article/details/115707961

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Day1

看了VUE官方文档，上面说学习VUE需要H5的基础，那先复习一遍吧~

form表单

表单控件
表单属性
表单控件的属性
表单验证方法

内容

内容包含文本框(text、date、time)、列表（select）、按钮(button)、邮箱(email)、滑动条(range)

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="cap3.css"/>
	</head>
	<body>
		<form action="" method="post" class="basic-grey">
			<h1>联系方式<span>请填写下列选项，以便更好的与您联系!</span></h1>
			<label>
				<span>用户名：</span>
				<input type="text" name="name" id="" value="" placeholder="请输入用户名"/>
			</label>
			<label>
				<span>邮箱地址：</span>
				<input type="email" name="email" id="" value="" placeholder="请输入有效邮箱地址"/>
			</label>
			<label>
				<span>留言信息：</span>
				<textarea rows="" cols="" name="massage" placeholder="请填写您的留言信息"></textarea>
			</label>
			<label>
				<span>留言类型：</span>
				<select name="selection">
					<option value ="业务咨询">业务咨询</option>
					<option value ="售后服务">售后服务</option>
				</select>
			</label>
			<label>
				<span>&nbsp;</span>
				<input type="submit" name="" id="" class="button" value="提交" />
			</label>
		</form> -->
		
		<form action="" method="post" id="chartRoomForm" onsubmit="return submitChartMsg()"></form>
		<form action="" method="post" id="LeavingMsgeForm" onsubmit="return submitLeavingMsg()"></form>
		<div id="" class="basic-grey">
			
			<h1><img src="images3/chartRoom.jpg" >在线聊天<span>实时在线沟通！</span></h1>
			<label>
				<span>用户名：</span>
				<input type="text" name="name" form="chartRoomForm" />
			</label>
			<label>
				<span>聊天内容：</span>
				<textarea name="message" form="chartRoomForm"></textarea>
			</label>
			<label>
				<span>&nbsp;</span>
				<input type="submit" class="button" value="发送" form="chartRoomForm" />
			</label>
			
		</div>
		
		<div class="basic-grey">
			<h1><img src="images3/LeavingMessage.jpg" >离线留言<span>请填写留言信息，我们将在第一时间解决您的问题！</span></h1>
			<label>
				<span>用户名：</span>
				<input type="text" name="name" form="LeavingMsgeForm" />
			</label>
			<label>
				<span>留言信息：</span>
				<textarea name="message" form="LeavingMsgeForm"></textarea>
			</label>
			<label>
				<span>&nbsp;</span>
				<input type="submit" value="留言" form="LeavingMsgeForm" />
			</label>
		</div>
		<script>
			function submitChartMsg(){
				alert("您以发送聊天信息");
				return false;
			}
			function submitLeavingMsg(){
				alert("您提交留言信息");
				return false;
			}
		</script>
		
		<form action="" method="post" class="basic-grey">
			<h1>直播平台</h1>
			<label>
				<span>直播日期：</span>
				<input type="date" name="" id="broadcastDate" value="" />
			</label>
			<label>
				<span>直播日期：</span>
				<input type="time" name="" id="broadcastTime" value="" />
			</label>
			<label>
				<span>&nbsp;</span>
				<input type="submit" name="" id="" value="注册" class="button" />
			</label>
		</form>
		
		<form action="" method="post" class="basic-grey">
			<h1>直播设置<span>请认真填写一下选项！</span></h1>
			<label>
				<span>直播时长：</span>
				<input id="duration" type="range" min="0" max="100" step="1"
				 onchange = "changeRange()" οninput="changeRange()"/>
			</label>
			<label>
				<span>时长为：</span>&nbsp;
				<input type="text" id="rangeResult"/>
			</label>
		</form>
		<script>
			function changeRange(){
				var duration = document.getElementById("duration");
				var rangeResult = document.getElementById("rangeResult");
				rangeResult.value = duration.value;
				var red = (100 - duration.value) * 255 / 100;
				rangeResult.style.backgroundColor = 'rgb('+red+',255,0)';
			}
		</script>
		
		<form action="http://www.w3school.com.cn/example/html5/demo_form.asp" 
		method="get" class="basic-grey">
			<h1>用户密匙</h1>
			<label><span>用户名：</span><input type="text" name="usr_name" id="" value="" /></label>
			<label><span>密匙方式：</span><keygen name="security" /></label>
			<label><span>&nbsp;</span>
				<input type="submit"class="button" value="提交密匙" />
			</label>
		</form>
		
	</body>
</html>

结果

在这里插入图片描述

PS

想着代码敲下去总不能白敲吧~~不能以后清理电脑时把之前的学习记录扔了，索性就给它们搬个家到这里吧。

第一次写CSDN的博客，之后会熟练运用哒~

好好学习，天天向上！

is_Del

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML5——form表单

Day1看了VUE官方文档，上面说学习VUE需要H5的基础，那先复习一遍吧~form表单表单控件表单属性表单控件的属性表单验证方法内容内容包含文本框(text、date、time)、列表（select）、按钮(button)、邮箱(email)、滑动条(range)代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title>
复制链接

扫一扫