Html/Css

漂亮的form表单样式

具体样式见附件源码:formStyle.zip

<!DOCTYPE html>
<!--
	作者:me@longlonggo.com
	时间:2017-05-15
	描述:更改form表单类名,可得到不同样式效果,可选类名:
		basic-grey 	基础样式
		elegant-aero优雅的aero样式
		smart-green 简洁的绿色
		white-pink	优雅的白色
		bootstrap-frm bootstarp式风格
		dark-matter 简洁黑色
		
-->
<html>
	<head>
		<meta charset="utf-8" />
		<title>漂亮form表单样例</title>
		<link rel="stylesheet" type="text/css" href="css/form.aero.css"/>
		<link rel="stylesheet" type="text/css" href="css/form.basic.css"/>
		<link rel="stylesheet" type="text/css" href="css/form.bootstarp.css"/>
		<link rel="stylesheet" type="text/css" href="css/form.dark.css"/>
		<link rel="stylesheet" type="text/css" href="css/form.green.css"/>
		<link rel="stylesheet" type="text/css" href="css/form.white.css"/>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>

	<body>
		<div id="">
			<button onclick="changeStyle('basic-grey')">基础样式</button>
			<button onclick="changeStyle('elegant-aero')">优雅的aero</button>
			<button onclick="changeStyle('smart-green')">简洁的绿色</button>
			<button onclick="changeStyle('white-pink')">优雅的白色</button>
			<button onclick="changeStyle('bootstrap-frm')">bootstarp式风格</button>
			<button onclick="changeStyle('dark-matter')">简洁黑色</button>
		</div>
		
		<form action="" method="post" class="elegant-aero">
			<h1>Contact Form
				<span>Please fill all the texts in the fields.</span>
			</h1>
			<label>
				<span>Your Name :</span>
				<input id="name" type="text" name="name" placeholder="Your Full Name" />
			</label>
			<label>
				<span>Your Email :</span>
				<input id="email" type="email" name="email" placeholder="Valid Email Address" />
			</label>
			<label><span>Message :</span>
				<textarea id="message" name="message" placeholder="Your Message to Us"></textarea>
			</label>
			<label>
				<span>Subject :</span>
				<select name="selection">
					<option value="Job Inquiry">Job Inquiry</option>
					<option value="General Question">General Question</option>
				</select>
			</label>
			<label>
				<span>&nbsp;</span>
				<input type="button" class="button" value="Send" />
			</label>
		</form>
		
	</body>
	<script type="text/javascript">
		function changeStyle(style){
			$("form").prop("class", style);
		}
	</script>
</html>

留言

您的电子邮箱地址不会被公开。 必填项已用*标注