看到一篇关于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; }
相关推荐
自己总结的一些html5表单元素以及表单验证,希望对大家有用!!
用户注册页面的设计与实现:使用HTML5表单技术实现用户注册页面,要求用户可以输入用户名、密码、真实姓名和电子邮箱等信息进行注册。...以手机移动支付业务为例,使用HTML5表单技术实现相关业务的问卷调查页面。
html5表单增强,最新hmtl5信息石周明
HTML5表单验证,有效验证email,数字,字母,数字+字母,位数
一个HTML5表单验证效果,本表单是验证用户输入的信用卡卡号是否正确,格式是否答,可为制作HTML5表单的朋友提供一些参考。
第3章 HTML5表单及文件处理.ppt 供大家查阅!属于课件类型。
bootstrap风格的html5表单验证示例
单元一 HTML5基础知识端基础前WebHTML5表单1表单元素2表单标记访问控制3HTML5新的input类型文本域textField 密码域Password field 单选按钮radioButton 复选框 checkBox下拉列表selcet多行文本框textArea按钮button1...
html5表单动态添加工作事项代码
HTML5表单是一款HTML5登录表单验证,表单默认只对输入的长度
html5圆形进度条加载按钮是一款modernizr html5表单提交按钮圆形进度条加载动画表单验证效果。
HTML5表单及其8种验证方法 非常的简单实用
html5表单注册进度条提示效果是一款用户注册表单填写的时候,进度提示效果下载。
华丽的CSS3+HTML5表单客户端验证 文章地址:http://blog.csdn.net/hacke2/article/details/8573413
应用HTML5表单属性实现多文件上传.关键词:multiple,required,autocomplete,placeholder,autofocus.
动态的html5表单检测验证功能实例,仿Ajax风格,若有项目未填写或不符合要求,则会适时显示出文字提示,带有渐变显示效果的内容提示,本表单验证比较经典,在移动端开发中,应用已经相当普遍,更多功能请下载实例...
modernizr html5表单提交按钮圆形进度条加载动画表单 modernizr html5表单提交按钮圆形进度条加载动画表单
一款html5表单样式美化select单选框表单提交代码.zip 一款html5表单样式美化select单选框表单提交代码.zip 一款html5表单样式美化select单选框表单提交代码.zip
Tooltip验证提示HTML5表单.zip