通过属性选择器获取表单对象

最新推荐文章于 2023-05-05 01:13:18 发布

petterp

最新推荐文章于 2023-05-05 01:13:18 发布

阅读量643

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/petterp/article/details/81709739

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

通过一个简单的联系表单，通过表单对象属性选择器获取表单对象。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设计表单样式</title>
	<style type="text/css">
	/*清除常用标签对象的默认边框，编剧和焦点线样式*/
		body,div,h1,form,fieldset,input,textarea{margin：0; padding: 0;border: 0; outline: none;}
		/*定义网页高度为窗口高度*/
		html{height: 100%;}
		/*设计网页基本显示效果，如背景色，并添加渐变背景色效果*/
		body{background:linear-gradient(#25303c,#728EAA);  font-family: sans-serif;}
		
		/*对表单结构样式进行初步设计，添加阴影，定义背景色和浅色边框，定义表单标题样式*/
		#contact{width: 430px; margin: 10px auto; padding: 20px;
		background: #c9d0de; border: 1px solid #e1e1e1;
			box-shadow: 0px 0px 8px #444;

		}
		h1{
			font-size: 34px; color: #445668;
			text-align: center; margin: 0 0 35px 0; text-shadow: 0px 1px 0px #f2f2f2;
		}
		
		/*设计表单的标签文本，文本框和文本区域样式*/
		
		label{/*标签文本样式：向左浮动，右对齐文本，定义文本投影特效*/
			float: left; clear: left; margin: 11px 20px 0 0; width: 95px;
			text-align: left; font-size: 16px; color: #445668;
			text-transform: uppercase; text-shadow: 0px 1px 0px #f2f2f2;
		}
		input{/*文本框样式：固定宽和高，增加边界，定义渐变背景色，设计圆角样式*/
			width: 260px; height: 35px; padding: 5px 20px 0px 20px; margin: 0 0 20px 0;
			background: linear-gradient(#546A7F 0%,#5E768D 20%);
		/*	background: -Webkit-gradient(linear, left top,left bottom, 0% #546A7F,20% #5E768D);			老版写法 */  
			
			border-radius: 5px;
			box-shadow: 0px 1px 0px #f2f2f2;
			
			font-family: "楷体"; font-size: 16px; color: #f2f2f2; text-transform: 
				uppercase; text-shadow: 0px -1px 0px #334f71;}
			input::placeholder{
				color:#a1b2c3; text-shadow: 0px -1px 0px #35806b;
			}
		textarea{/*文本区域样式：固定宽和高，增加边界，定义渐变颜色，设计圆角，设计阴影特效*/
			width: 260px; height: 130px; padding: 12px 20px 0px 20px; margin: 0 0 20px 0;
			background: linear-gradient(#546A7f 0%,#5E768D 20%);
		
			border-radius: 5px;
			box-shadow: 0px 1px 0px #f2f2f2;
			font-family: "楷体" ; font-size: 16px; color: #f2f2f2; text-transform: uppercase; text-shadow: 0px -1px 0px #334f71;
		}
		textarea::input-placeholder{
			color:#a1b2c3; text-shadow: 0px -1px 0px #38506b;
		}
			
		input[type=submit]{
			width: 120px; height: 42px; float: right; padding: 5px 10px; margin: 0 15px 0 0;
			box-shadow: 0px 0px 5px #999;
			border: 1px solid #556f8c;
			background: linear-gradient(#718DA9 0%,#415D79 100%);
			cursor: pointer;
		}
		input[disabled] {color: #aaa;}
	</style>
</head>

<body>
	<div id="contact">
	<h1>联系表</h1>
		<form action="#" method="post">
		<fieldset>
		<label for="name">昵称</label>
			<input type="text" id="name" disabled placeholder="请输入你的账号"/>
			<label for="email">Email:</label>
			<input type="email" id="email" placeholder="请输入你的邮箱"/>
			<label for="message">反馈信息</label>
			<textarea id="message" placeholder="请留下你的意见和建议？"></textarea>
			<input type="submit" value="发送信息">
		</fieldset>
			</form>
	</div>
</body>
</html>