首页手记 web组件之表单（HTML5）

web组件之表单（HTML5）

标签：

Html/CSS Html5 CSS3

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

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

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

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

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js-webshim/minified/extras/modernizr-custom.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js-webshim/minified/polyfiller.js"></script>

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

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

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

html代码片段：

<div id="content" class="group" role="main">

        <form id="redemption" method="post">
            <hgroup>
                <h1>HTML5 Form</h1>
                <h2>Here's the HTML5 Form controlers Let's try ...</h2>
            </hgroup>
            <fieldset>
                <legend>About the HTML (part 1 of 3)</legend>
                <div>
                    <label for="h_Name">The HTML Name</label>
                    <input id="h_Name" name="h_Name" type="text" placeholder="HTML5" required aria-required="true">
                </div>
                <div>
                    <label for="h_Year">Year</label>
                    <input id="h_Year" name="h_Year" type="number" min="1929" max="2015" required aria-required="true">
                </div>
                <div>
                    <label for="h_data">Datalist</label>
                    <input id="h_data" name="h_data" type="text" list="awards">
                    <datalist id="awards">
                        <select>                    
                            <option value="Best Picture"></option>
                            <option value="Best Director"></option>
                            <option value="Best Adapted Screenplay"></option>
                            <option value="Best Original Screenplay"></option>
                        </select>
                    </datalist>
                </div>
                <div>
                    <label for="h_text">Textarea</label>
                    <textarea id="h_text" name="h_text" placeholder="textarea..." required aria-required="true" ></textarea>
                </div>
                <div>
                    <label for="h_range">Range</label>
                    <input id="h_range" name="h_range" type="range" min="1" max="10" value="5" onchange="showValue(this.value)"><span id="range">5</span>

                </div>
                <script>
                function showValue(newValue)
                {
                    document.getElementById("range").innerHTML=newValue;
                }
                </script>

            </fieldset>

            <fieldset>
                <legend>About the HTML (part 2 of 3)</legend>

                <div>
                    <label for="h2_name">HTML</label>
                    <input id="h2_name" name="h2_name" type="text" placeholder="HTML5" required aria-required="true" >
                </div>

                <div>
                    <label for="h2_text">Textarea</label>
                    <textarea id="h2_text" name="h2_text" placeholder="Lorem ipsum dolor sit amet, distinctio." required aria-required="true" ></textarea>
                </div>
                <div>
                    <label for="h_number">Number Step</label>
                    <input id="h_number" name="h_number" type="number" min="1" max="10" value="5" required aria-required="true" step="2">
                </div>

            </fieldset>

            <fieldset>
                <legend>About the HTML (part 3 of 3)</legend>

                <div>
                    <label for="name">Your Name</label>
                    <input id="name" name="name" pattern="([a-zA-Z]{3,30}\s*)+[a-zA-Z]{3,30}" placeholder="Marlboro" required aria-required="true" >
                </div>
                <div>
                    <label for="color">Your favorite color</label>
                    <input id="color" name="color" type="color">
                </div>
                <div>
                    <label for="date">Date/Time</label>
                    <input id="Employee_hireDate" class="pickDate" type="month" name="Employee[hireDate]" />
                </div>
                <div>
                    <label for="tel">Telephone </label>
                    <input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required aria-required="true" >
                </div>
                <div>
                    <label for="email">Your Email address</label>
                    <input id="email" name="email" type="email" placeholder="Marlboro@163.com" required aria-required="true">
                </div>
                <div>
                    <label for="web">Your Web address</label>
                    <input id="web" name="web" type="url" placeholder="www.mysite.com">
                </div>

            </fieldset>
            <input type="submit" id="submit" value="submit">
        </form>

    </div>

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);    
}

演示地址：https://marlborokay.github.io/FormDemo/
下载地址：https://github.com/marlboroKay/FormDemo

点击查看更多内容