個性原創,打造品牌

拒絕模仿抄襲、拒絕模板建站;
多位資深網頁設計師同時設計,讓您優中選優;
網站獨一無二,品牌輕易提升...

了解詳情 >

代碼規范,國際標準

后臺php+mysql動態管理,功能強大,千萬級數據;
前臺div+css生成靜態,代碼精簡,訪問速度快,
符合w3c國際標準,兼容ie/火狐/蘋果等任意瀏覽器...

了解詳情 >

細微高效,全程無憂

域名一個,主機一臺;
主機BGP多線路,5G存儲空間,流量不限;
新聞錄入、圖片處理、數據備份、安全監測、網站升級...

了解詳情 >

移動時代,機不可失

全新視覺、創新操作;
跨平臺兼容,微信無縫對接;
不容錯過的手機網絡商機,不能錯過的手機網站時代...

了解詳情 >

搜索領先,鎖定訪客

在主流搜索引擎的搜索結果中,
網站的名稱,排在第一頁的第一名,
網站其他相關的3-5個關鍵詞,排在第一頁...

了解詳情 >

營銷利器,決勝千里

全國統一呼叫,品牌企業的象標志。
中國電信4008/4009、中國聯通4000/4006,號碼任選;
通話資費預存...

了解詳情 >
以“信”為主的服務理念,“源”為標桿的服務特點351532641點擊咨詢010-86203368聯系電話
CSS問題設計問題程序問題優化問題

HTML5和css3實例:制作HTML5驗證的網頁表單

發布時間:2017-10-31      瀏覽次數:1104

今天我們一起來看看如何創建一個實用并且功能強大的表單,表單使用如今最熱門的技術HTML5css3來創建,并且可以通過HTML5進行客戶端驗證。

查看預覽下載附件

第一步:策劃表單功能

首先,我們得為我們的表單策劃一下該有什么功能,用什么形式表現。在這個示例中,我們就制作一個比較簡單的留言表單。需要的功能如下:

我們都希望用戶能夠填寫正確的信息再提交,要實現這一點,我們可以使用HTML5客戶端驗證新技術。那怎么樣使用這個功能呢?在這里簡單的使用服務器驗證,不做進一步的深入了解。

第二步:策劃表單形式

在我心中,憧憬著一個美麗而簡約的提交表單。雖然現在很丑,但是他不是野雞是鳳凰。


就像上圖顯示的,包含下面幾個部分:

現在我們已經確定好了表單的形式,就開始創建HTML結構代碼。

第三步:創建HTML結構代碼

根據上面確定的形式來創建最基本的HTML代碼。

在這里頁面還是空白的。這只是一個網頁最基本的代碼。

第四步:HTML表單

開始在頁面中創建表單。

第五步:HTML表單元素

為了更好的理解和維持表單的形式,我們將一步一步的添加表單里面的元素。
那最先開始的是創建表單表頭和第一個輸入框:

   

  •         

    聯系我們

            * 表示必填項

       

       

  •        

           

        


    表單提示

    根據我們的策劃圖來看,我們要給表單的“電子郵件”、“網站”增加提示語,所以我們要在input下面增加提示語區域,再將他們統一樣式處理。

  •    

       

       正確格式為:[email protected]


    其余的表單輸入元素

    繼續添加其他的表單輸入元素。

  •    

       

       正確格式為:http://www.jiawin.com

  •    

       

  •    


    第六步:添加占位符屬性

    作為HTML5的改進之一的網頁表單可以設置placeholder占位符屬性。占位符字段會在輸入區域為空時或者不處于焦點時顯示的,在以前我們只能用javascript來實現。增加占位符字段可以引導用戶正確的輸入信息。

    提示技巧:placeholder文本風格定義:

    這里給大家一個小技巧,如果你想改變占位符的默認風格,可以通過下面的代碼方式修改(注意瀏覽器的前綴):

    :-moz-placeholder {

       color: blue;

    }

    ::-webkit-input-placeholder {

       color: blue;

    }

    在現代的瀏覽器中一般都支持placeholder,除了IE9。如果你需要他在所有的瀏覽器中都支持的話,可以考慮用javascript解決方案。

    第七步:定義基本的CSS

    接下來定義下基本的CSS樣式。

    1、格式化 :focus 的樣式

    Webkit內核瀏覽器會自動給添加一些焦點樣式,我們要自定義風格,所以需要把它給去掉默認值。

    *:focus {outline: none;}

     

    上一篇:CSS之nth-child用法
    下一篇:CSS標簽語法:詳解選擇符中的關系選擇符

    Copyright©2016  xinycx.com  All Rights Reserved  北京信源創想科技有限公司  備案號:京ICP備17071760號
    地址:北京市海淀區閔莊路門頭馨村北二區33號樓3單元102室  電話:010-86203368  

    北京網站建設 北京網站制作 信源創想 品牌網站建設 企業網站建設 網站設計 APP開發 微信開發 前端切圖 DIV+CSS html5切圖 APP切圖

    海南七星彩玩法