HTML 5和CSS3表單示例和詳細(xì)教程匯總
為Web開發(fā)人員提供了詳細(xì)參考指南。以下是文章摘要：
本教程演示如何使用HTML5創(chuàng)建既時(shí)尚又好用的郵箱注冊(cè)表單。引導(dǎo)大家一步一步創(chuàng)建占位符文本、表單域、郵箱+網(wǎng)絡(luò)+手機(jī)、日程選擇器等功能。有大部分的表單為了增強(qiáng)功能卻降低輸入框的標(biāo)準(zhǔn)。雖然在舊版本的瀏覽器中并不完全支持HTML5特性，但在教程中會(huì)演示如何解決和正確添加新功能。 【示例】
此教程屬于中等難度，演示如何創(chuàng)建一個(gè)具有滑動(dòng)效果、數(shù)字微調(diào)、日期、顏色選取器、文本字段、提交按鈕的表單。使用工具：Webforms2、Modernizr、jQuery 【示例】
此教程屬于中等難度，演示如何創(chuàng)建一個(gè)干凈并時(shí)尚的聯(lián)系表單：姓名、郵箱、電話、下拉菜單查詢、消息和提交。除了使用HTML5以外，還使用了以下工具：JQuery，Modernizer，AJAX，PHP。
本教程教您如何使用先進(jìn)的CSS和最新的CSS3技術(shù)打造漂亮的HTM5表單。示例是一個(gè)購(gòu)物車表單，需要用戶填充自己的詳細(xì)資料，送貨地址和信用卡資料。 【示例】
Richard Bradshaw帶來(lái)了一個(gè)簡(jiǎn)單的HTML5表格演示，演示中如何使用一些新的功能：輸入類型(郵件、URL、數(shù)量和范圍)，偽類(有效、無(wú)效)和限制用戶提交表單等功能。HTML5表單添加了CSS3轉(zhuǎn)換和偽類，看起來(lái)更加漂亮和干凈 【示例】
本教程將演示如何創(chuàng)建自己的簡(jiǎn)單時(shí)尚的聯(lián)系表單，如何使用HTML5的新功能。表單如何使用CSS3屬性風(fēng)格，就好比用Photoshop設(shè)計(jì)一樣，但無(wú)需使用任何圖片 【示例】
#p#
本教程教您如何使用HTML5和CSS3設(shè)計(jì)搜索框。采用了三種不同的例子，并給出每個(gè)例子的源代碼。每個(gè)搜索框風(fēng)格不同，可以隨意從中選擇適合自己網(wǎng)站的。
本教程向您展示如何創(chuàng)建一個(gè)干凈簡(jiǎn)潔的登錄表單。文中有代碼片段和手寫的注解，很容易看明白每個(gè)代碼的用途。
使用HTML5、CSS3和PHP創(chuàng)建聯(lián)系表單
本教程向您演示如何使用HTML5、CSS3和PHP創(chuàng)建一個(gè)干凈的登錄表單。一步一步教您如何設(shè)計(jì)表單，使用HTML5標(biāo)記，CSS屬性和PHP功能【演示】
本教程演示如何制作不使用圖片的信封式聯(lián)系表。表單使用純HTML5結(jié)構(gòu)和特性，用CSS3屬性設(shè)計(jì)制定信封外觀，并且提供每一步的代碼【示例】
如何逐步提高HTML5和CSS技巧的教程。某些瀏覽器不支持HTML5特性，使用JavaScript代替。使用工具：Yepnope.js，Modernizr。
原文：http://speckyboy.com/2011/06/26/html5-and-css3-form-references-resources-and-tutorials/
【編輯推薦】
