html5 main form 结合,web组件之表单（HTML5）

话说表单在html5之前，如果想交互验证的话，需要js、jquery脚本来支撑，更别提日期控件，颜色控件，数字控件了。

最近系统的学习了HTML5的表单，外加CSS3(不得不说CSS3真的是吊炸天啊 )，于是乎就有了web组件之表单。

废话就不多说了，分享上来主要是让大家能够用的。关于表单中的日期控件，数字，颜色，进度条，大家可以在github上尝试。

啰嗦两句的是，为了适应IE8，以及一些浏览器的兼容，用了腻子脚本

这样这个表单可以在低版本浏览器里，不暴露丑陋的外表了。

样式中用到了css3的背景渐变，其中按钮用到了浮雕设计。

在此感谢 《响应式Web设计：HTML5和CSS3实战》让我受益匪浅，也欢迎大家购买阅读。

html代码片段：

HTML5 Form

Here's the HTML5 Form controlers Let's try ...

About the HTML (part 1 of 3)

The HTML Name

Year

Datalist

Textarea

Range

5

function showValue(newValue)

{

document.getElementById("range").innerHTML=newValue;

}

About the HTML (part 2 of 3)

HTML

Textarea

Number Step

About the HTML (part 3 of 3)

Your Name

Your favorite color

Date/Time

Telephone

Your Email address

Your Web address

css代码片段：

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

font-family: inherit;

vertical-align: baseline;

}

/* remember to define focus styles! */

:focus {

outline: 0;

}

body {

line-height: 1;

color: black;

}

ol, ul {

list-style: none;

}

/* tables still need 'cellspacing="0"' in the markup */

table {

border-collapse: separate;

border-spacing: 0;

}

caption, th, td {

text-align: left;

font-weight: normal;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: "";

}

blockquote, q {

quotes: "" "";

}

/* self-clear floats */

.group:after {

content: ".";

display: block;

height: 0px;

clear: both;

visibility: hidden;

}

/* wrap url's */

pre {

white-space: pre; /* CSS 2.0 */

white-space: pre-wrap; /* CSS 2.1 */

white-space: pre-line; /* CSS 3.0 */

white-space: -pre-wrap; /* Opera 4-6 */

white-space: -o-pre-wrap; /* Opera 7 */

white-space: -moz-pre-wrap; /* Mozilla */

white-space: -hp-pre-wrap; /* HP Printers */

word-wrap: break-word; /* IE 5+ */

}

/* @group Fonts Group */

@font-face {

font-family: 'BitstreamVeraSansRoman';

src: url('../fonts/Vera-webfont.eot');

src: url('../fonts/Vera-webfont.eot?#iefix') format('embedded-opentype'),

url('../fonts/Vera-webfont.woff') format('woff'),

url('../fonts/Vera-webfont.ttf') format('truetype'),

url('../fonts/Vera-webfont.svg#BitstreamVeraSansRoman') format('svg');

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: 'BebasNeueRegular';

src: url('../fonts/BebasNeue-webfont.eot');

src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),

url('../fonts/BebasNeue-webfont.woff') format('woff'),

url('../fonts/BebasNeue-webfont.ttf') format('truetype'),

url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: 'ColaborateThinRegular';

src: url('../fonts/ColabThi-webfont.eot');

src: url('../fonts/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),

url('../fonts/ColabThi-webfont.woff') format('woff'),

url('../fonts/ColabThi-webfont.ttf') format('truetype'),

url('../fonts/ColabThi-webfont.svg#ColaborateThinRegular') format('svg');

font-weight: normal;

font-style: normal;

}

/* @end */

#content{

width:72%;

margin:0 auto;

height:100%;

}

#content h1 {

text-transform: uppercase;

font-family: 'BebasNeueRegular';

font-size: 6.375em; /* 102 ÷ 16 */

text-shadow: 0px 1px white,4px 4px 0px #dad7d7 ; /* 4 ÷ 102 */

}

* {

-webkit-transition: all 1s;

}

#content a span {

font-size: 1.3em;

}

#content p i {

font-weight: normal;

font-style: normal;

}

#content h2 {

font-family: 'BebasNeueRegular'; font-size: 1.875em/* 30px ÷ 16 */; text-transform: uppercase;

}

#redemption {

width: 100%;

font-family: 'ColaborateThinRegular';

font-weight: 400;

}

#redemption hgroup{

margin-bottom: 20px;

}

#redemption div {

width: 100%;

margin-bottom: 15px;

float: left;

}

#redemption span#range {

float: left;

font-size: 3em;

width: 100%;

color: red;

clear: both;

text-align: center;

}

#h_number,#h_Year {

text-align: right;

}

#redemption fieldset{

border: 1px dotted #ccc;

padding: 2%;

margin-bottom: 20px;

background: #ffffff;

background: -moz-linear-gradient(top, #ffffff 77%, #f2f2f2 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(77%,#ffffff), color-stop(100%,#f2f2f2));

background: -webkit-linear-gradient(top, #ffffff 77%,#f2f2f2 100%);

background: -o-linear-gradient(top, #ffffff 77%,#f2f2f2 100%);

background: -ms-linear-gradient(top, #ffffff 77%,#f2f2f2 100%);

background: linear-gradient(top, #ffffff 77%,#f2f2f2 100%);

border-radius: 4px;

box-shadow: 2px 2px 5px hsla(0, 0%, 16.6667%, 0.3);

}

#redemption legend{

font-style: italic;

margin-bottom: 20px;

float: left;

color:#434242;

width:100%;

font-size: 0.8em;

}

#redemption label {

width: 40%;

float: left;

}

input {

height: 20px;

font-size: 1em;

width: 40%;

float: right;

}

#redemption textarea {

height: 60px;

font-size: 1em;

width: 40%;

float: right;

}

#redemption input#submit {

text-decoration: none;

height: 34px;

font: 1.25em /* 36px ÷ 16 */ 'BebasNeueRegular';

background-color: #b01c20;

border-radius: 8px;

color: white;

float: right;

margin-bottom: 10px;

background: -moz-linear-gradient(top, rgb(241,92,96) 0%, rgb(176,28,32) 100%);

background: -webkit-linear-gradient(top, rgb(241,92,96) 0%,rgb(176,28,32) 100%);

margin-top: 10px;

box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);

text-shadow: 0px 1px black;

border: 1px solid #bfbfbf;

}

input:not([type="range"]), textarea, select {

border: 1px solid #bfbfbf;

padding: 0.2em;

font-size: 1.1em;

line-height: 1.2em;

background: #ffffff;

background: -moz-linear-gradient(top, #ffffff 0%, #ededed 8%, #ffffff 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(8%,#ededed), color-stop(100%,#ffffff));

background: -webkit-linear-gradient(top, #ffffff 0%,#ededed 8%,#ffffff 100%);

background: -o-linear-gradient(top, #ffffff 0%,#ededed 8%,#ffffff 100%);

background: -ms-linear-gradient(top, #ffffff 0%,#ededed 8%,#ffffff 100%);

background: linear-gradient(top, #ffffff 0%,#ededed 8%,#ffffff 100%);

border-radius: 4px;

/* -webkit-appearance: none; */

box-shadow: 2px 2px 5px hsla(0, 0%, 16.6667%, 0.1);

}

.polyfill-important .input-range,.polyfill-important .step-controls {

float: right;

}

input:required {

border: 1px solid rgba(253, 8, 8, 0.29);

}