`

html 5 表单

html5css3form 
阅读更多

 

看到一篇关于html5 表单的文章，美化后的效果还不错，于是保存了，以备不时只需可以参考一下。

 


 

下面的例子中用到了 

一   html5 表单中input type 新增了一些常用的类型，email，tel，number等

 

二   css3中新增加的一些选择器，和一些修饰显示效果的属性

 

 border-radius 圆角，box-shadow 盒子阴影,text-shadow 文本阴影

 

last-of-type 选择同类型标签的最后一个元素

 

form#payment fieldset:last-of-type {
	margin-bottom: 0;
}

 

下面是源代码

<!DOCTYPE html>

<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">

	<head>
		
		<meta charset=utf-8 />
		
		<title>Form | 24ways.org</title>
		
		<link rel=stylesheet href=style.css type=text/css>
	
	</head>
	
	<body>
	
		<h1>Payment form</h1>
	
		<form id=payment>
		
			<fieldset>
			
				<legend>Your details</legend>
		
				<ol>
					
					<li>
						<label for=name>Name</label>
						<input id=name name=name type=text placeholder="First and last name" required autofocus>
					</li>
					
					<li>
						<label for=email>Email</label>
						<input id=email name=email type=email placeholder="example@domain.com" required>
					</li>
					
					<li>
						<label for=phone>Phone</label>
						<input id=phone name=phone type=tel placeholder="Eg. +447500000000" required>
					</li>
						
				</ol>
			
			</fieldset>
			
			<fieldset>
			
				<legend>Delivery address</legend>
				
				<ol>
				
					<li>
						<label for=address>Address</label>
						<textarea id=address name=address rows=5 required></textarea>
					</li>
					
					<li>
						<label for=postcode>Post code</label>
						<input id=postcode name=postcode type=text required>
					</li>
					
					<li>
						<label for=country>Country</label>
						<input id=country name=country type=text required>
					</li>
				
				</ol>
			
			</fieldset>
			
			<fieldset>
			
				<legend>Card details</legend>
				
				<ol>
				
					<li>
					
						<fieldset>
							
							<legend>Card type</legend>
							
							<ol>
								
								<li>
									<input id=visa name=cardtype type=radio>
									<label for=visa>VISA</label>
								</li>
								
								<li>
									<input id=amex name=cardtype type=radio>
									<label for=amex>AmEx</label>
								</li>
								
								<li>
									<input id=mastercard name=cardtype type=radio>
									<label for=mastercard>Mastercard</label>
								</li>
								
							</ol>
							
						</fieldset>
						
					</li>
					
					<li>
						<label for=cardnumber>Card number</label>
						<input id=cardnumber name=cardnumber type=number required>
					</li>
					
					<li>
						<label for=secure>Security code</label>
						<input id=secure name=secure type=number required>
					</li>
					
					<li>
						<label for=namecard>Name on card</label>
						<input id=namecard name=namecard type=text placeholder="Exact name as on the card" required>
					</li>
				
				</ol>
				
			</fieldset>
			
			<fieldset>
			
				<button type=submit>Buy it!</button>
			
			</fieldset>
		
		</form>
	
	</body>

</html>

 

style.css

 

html, body, h1, form, fieldset, legend, ol, li {
	margin: 0;
	padding: 0;
	}

body {
	background: #ffffff;
	color: #111111;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding: 20px;
	}

	h1 {
		font-size: 28px;
		margin-bottom: 20px;
		}
	
	form#payment {
		background: #9cbc2c;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-khtml-border-radius: 5px;
		border-radius: 5px;
		counter-reset: fieldsets;
		padding: 20px;
		width: 400px;
		}
		
		form#payment fieldset {
			border: none;
			margin-bottom: 10px;
			}
		
		form#payment fieldset:last-of-type {
			margin-bottom: 0;
			}
			
			form#payment legend {
				color: #384313;
				font-size: 16px;
				font-weight: bold;
				padding-bottom: 10px;
				text-shadow: 0 1px 1px #c0d576;
				}
				
				form#payment > fieldset > legend:before {
					content: "Step " counter(fieldsets) ": ";
					counter-increment: fieldsets;
					}
				
				form#payment fieldset fieldset legend {
					color: #111111;
					font-size: 13px;
					font-weight: normal;
					padding-bottom: 0;
					}
			
			form#payment ol li {
				background: #b9cf6a;
				background: rgba(255,255,255,.3);
				border-color: #e3ebc3;
				border-color: rgba(255,255,255,.6);
				border-style: solid;
				border-width: 2px;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				-khtml-border-radius: 5px;
				border-radius: 5px;
				line-height: 30px;
				list-style: none;
				padding: 5px 10px;
				margin-bottom: 2px;
				}
							
				form#payment ol ol li {
					background: none;
					border: none;
					float: left;
					}
			
			form#payment label {
				float: left;
				font-size: 13px;
				width: 110px;
				}
				
			form#payment fieldset fieldset label {
				background:none no-repeat left 50%;
				line-height: 20px;
				padding: 0 0 0 30px;
				width: auto;
				}
					
				form#payment label[for=visa] {
					background-image: url(visa.gif);
					}
				form#payment label[for=amex] {
					background-image: url(amex.gif);
					}
				form#payment label[for=mastercard] {
					background-image: url(mastercard.gif);
					}
					
				form#payment fieldset fieldset label:hover {
					cursor: pointer;
					}
				
			form#payment input:not([type=radio]),
			form#payment textarea {
				background: #ffffff;
				border: none;
				-moz-border-radius: 3px;
				-webkit-border-radius: 3px;
				-khtml-border-radius: 3px;
				border-radius: 3px;
				font: italic 13px Georgia, "Times New Roman", Times, serif;
				outline: none;
				padding: 5px;
				width: 200px;
				}
					
				form#payment input:not([type=submit]):focus,
				form#payment textarea:focus {
					background: #eaeaea;
					}
					
				form#payment input[type=radio] {
					float: left;
					margin-right: 5px;
					}
						
			form#payment button {
				background: #384313;
				border: none;
				-moz-border-radius: 20px;
				-webkit-border-radius: 20px;
				-khtml-border-radius: 20px;
				border-radius: 20px;
				color: #ffffff;
				display: block;
				font: 18px Georgia, "Times New Roman", Times, serif;
				letter-spacing: 1px;
				margin: auto;
				padding: 7px 25px;
				text-shadow: 0 1px 1px #000000;
				text-transform: uppercase;
				}
					
				form#payment button:hover {
					background: #1e2506;
					cursor: pointer;
					}

 

 


 

  • 大小: 25.7 KB
分享到：
| css color keyword
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    html5表单增强，html5

    HTML5 表单增强是现代网页开发中的一个重要进步，它为开发者提供了更多元化和功能丰富的表单元素，以及更强大的验证和交互能力。在HTML5之前，表单功能相对有限，而HTML5的出现极大地扩展了这些功能，使得表单不仅在...

    bootstrap风格的html5表单验证示例

    HTML5则引入了一系列新的表单元素和属性，使得网页表单的设计和验证更加便捷。在这个“bootstrap风格的html5表单验证示例”中，我们将深入探讨如何结合这两者来创建高效且用户友好的表单。 1. **HTML5表单元素**：...

    一个HTML5表单验证效果.rar

    HTML5表单验证是现代网页开发中的重要组成部分，它允许开发者在客户端实现数据验证，从而提高用户体验并减轻服务器端的压力。这个"一个HTML5表单验证效果.rar"压缩包文件包含了一个实例，演示了如何使用HTML5的内置...

    html5表单元素及验证

    自己总结的一些html5表单元素以及表单验证，希望对大家有用！！

    HTML5表单API项目.rar

    用户注册页面的设计与实现:使用HTML5表单技术实现用户注册页面，要求用户可以输入用户名、密码、真实姓名和电子邮箱等信息进行注册。...以手机移动支付业务为例，使用HTML5表单技术实现相关业务的问卷调查页面。

    HTML5表单验证

    HTML5表单验证，有效验证email，数字，字母，数字+字母，位数

    html5表单动态添加工作事项代码

    HTML5是Web开发中的一个重要里程碑，它引入了许多新特性，其中就包括对表单功能的增强，使得在网页上创建动态、交互性更强的工作事项管理变得更加便捷。在本主题中，我们将深入探讨如何利用HTML5的特性来实现动态...

    证提示HTML5表单.rar_doorevd_证提示HTML5表单

    HTML5表单是现代网页设计中的重要组成部分，它极大地增强了用户与网站的交互性，并提供了更丰富的数据验证功能。在“证提示HTML5表单.rar_doorevd_证提示HTML5表单”这个资源中，我们可以看到一个专门针对登录表单...

    第3章 HTML5表单及文件处理.ppt

    第3章 HTML5表单及文件处理.ppt 供大家查阅！属于课件类型。

    HTML5表单及其8种验证方法

    HTML5是Web开发中的一个重要里程碑，它为网页设计师和开发者带来了许多新的特性和改进，其中HTML5表单和其强大的内置验证机制就是显著的一环。本文将深入探讨HTML5表单及其8种验证方法，帮助你更好地理解和运用这些...

    html5表单提交按钮圆形进度条加载动画

    HTML5是现代网页开发的重要标准，它引入了许多新特性，如语义化元素、离线存储、媒体元素以及更强大的表单控制等。在“html5表单提交按钮圆形进度条加载动画”这个主题中，我们将深入探讨如何利用HTML5的表单特性，...

    华丽的CSS3+HTML5表单客户端验证

    在现代Web开发中，CSS3和HTML5的引入为创建美观且功能丰富的表单提供了前所未有的可能性。"华丽的CSS3+HTML5表单客户端验证"这篇文章深入探讨了如何利用这两种技术来提升用户体验，同时确保数据的有效性。下面将详细...

    HTML5系列教程-HTML5表单提交和PHP环境搭建

    在"HTML5系列教程-HTML5表单提交和PHP环境搭建"中，我们将深入探讨两个核心主题：HTML5表单的新特性以及如何配置PHP开发环境。 首先，HTML5对表单元素进行了大幅度的升级，提供了更多的输入类型，如`...

    应用HTML5表单属性实现多文件上传

    HTML5 表单属性实现多文件上传 HTML5 的出现带来了许多新的特性和属性，其中一些表单属性特别有用，例如 multiple、required、autocomplete、placeholder 和 autofocus 等。下面我们将详细介绍这些属性的用法和...

    HTML5 好看的注册表单

    注册表单在网页应用中十分重要，今天要向大家分享一款...该HTML5表单使用了很多CSS3属性，从而在表单切换时拥有弹性的动画，是一款很不错的HTML5表单。建议使用支持HTML5与CSS3的火狐或谷歌等浏览器预览本实例源码。

    基于Bootstrap5的Tab标签页的小组件，能让HTML5表单验证的提示信息在Bootstrap5的Tab标签页能正常显示

    在这个基于Bootstrap5的Tab标签页小组件中，我们专注于如何让HTML5表单验证的提示信息在Tab标签页内正确地显示，这对于提升用户体验至关重要。 HTML5是现代网页开发的标准，它引入了许多新的元素和功能，其中就包括...

    HTML5基础知识-HTML5表单.pptx

    以下是一些关于HTML5表单的基础知识： 1. **表单元素**： 表单是HTML中用于收集用户信息的基本结构，由`&lt;form&gt;`标签定义。`&lt;form&gt;`元素可以包含各种表单控件，如输入字段、按钮等。`action`属性指定了表单数据提交...

    HTML5表单新特征简介与举例

    `type="number"`的HTML表单元素允许用户通过点击或键盘操作来调整数值。这是一种常见的交互方式，在Windows等操作系统中广泛使用。例如： ```html 人数：&lt;input type="number" value="1" /&gt;&lt;/p&gt; ``` 在Chrome...

    Tooltip验证提示HTML5表单.zip

    HTML5表单是现代网页开发中的重要组成部分，它提供了丰富的内置验证功能，使得用户输入的数据在提交前可以得到有效的检查。Tooltip验证提示则是增强用户体验的一种方式，它可以在用户输入时提供实时反馈，指示输入...

    实验4 通过HTML5表单与用户交互（4学时）.zip

    HTML5是Web开发中的一个重要里程碑，它为网页设计师和开发者带来了许多新的特性和改进，特别是在表单处理方面。本实验4的主题是“通过HTML5表单与用户交互”，旨在帮助学习者掌握如何利用HTML5的新功能来创建更高效...

Magicbox
Global site tag (gtag.js) - Google Analytics