自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

HTML 5和CSS3表單示例和詳細教程匯總

開發(fā) 前端
作者Paul Andrew是Speckyboy設計雜志的創(chuàng)始人和編輯。他寫了一篇文章《HTML5 and CSS3 Form References, Resources and Tutorials》,在文中匯總幾個HTML5和CSS3資源教程網站,

為Web開發(fā)人員提供了詳細參考指南。以下是文章摘要:

郵箱注冊表單

 

 

本教程演示如何使用HTML5創(chuàng)建既時尚又好用的郵箱注冊表單。引導大家一步一步創(chuàng)建占位符文本、表單域、郵箱+網絡+手機、日程選擇器等功能。有大部分的表單為了增強功能卻降低輸入框的標準。雖然在舊版本的瀏覽器中并不完全支持HTML5特性,但在教程中會演示如何解決和正確添加新功能。 【示例】

如何使用HTML5創(chuàng)建跨瀏覽器的表單

 

 

此教程屬于中等難度,演示如何創(chuàng)建一個具有滑動效果、數字微調、日期、顏色選取器、文本字段、提交按鈕的表單。使用工具:Webforms2、Modernizr、jQuery 【示例】

聯(lián)系表單

 

 

此教程屬于中等難度,演示如何創(chuàng)建一個干凈并時尚的聯(lián)系表單:姓名、郵箱、電話、下拉菜單查詢、消息和提交。除了使用HTML5以外,還使用了以下工具:JQuery,Modernizer,AJAX,PHP。

購物車表單

 

 

本教程教您如何使用先進的CSS和最新的CSS3技術打造漂亮的HTM5表單。示例是一個購物車表單,需要用戶填充自己的詳細資料,送貨地址和信用卡資料。 【示例】

花式表格:HTML5+CSS3—JS

 

 

Richard Bradshaw帶來了一個簡單的HTML5表格演示,演示中如何使用一些新的功能:輸入類型(郵件、URL、數量和范圍),偽類(有效、無效)和限制用戶提交表單等功能。HTML5表單添加了CSS3轉換和偽類,看起來更加漂亮和干凈 【示例】

聯(lián)系表單

 

 

本教程將演示如何創(chuàng)建自己的簡單時尚的聯(lián)系表單,如何使用HTML5的新功能。表單如何使用CSS3屬性風格,就好比用Photoshop設計一樣,但無需使用任何圖片 【示例】

#p#

搜索框

 

 

本教程教您如何使用HTML5和CSS3設計搜索框。采用了三種不同的例子,并給出每個例子的源代碼。每個搜索框風格不同,可以隨意從中選擇適合自己網站的。

登陸表單

 

 

本教程向您展示如何創(chuàng)建一個干凈簡潔的登錄表單。文中有代碼片段和手寫的注解,很容易看明白每個代碼的用途。

使用HTML5、CSS3和PHP創(chuàng)建聯(lián)系表單

 

 

本教程向您演示如何使用HTML5、CSS3和PHP創(chuàng)建一個干凈的登錄表單。一步一步教您如何設計表單,使用HTML5標記,CSS屬性和PHP功能【演示】

信封聯(lián)系表單

 

 

本教程演示如何制作不使用圖片的信封式聯(lián)系表。表單使用純HTML5結構和特性,用CSS3屬性設計制定信封外觀,并且提供每一步的代碼【示例】

逐步提升使用HTML5制作表單技術

 

 

如何逐步提高HTML5和CSS技巧的教程。某些瀏覽器不支持HTML5特性,使用JavaScript代替。使用工具:Yepnope.js,Modernizr。

原文:http://speckyboy.com/2011/06/26/html5-and-css3-form-references-resources-and-tutorials/

【編輯推薦】

  1. HTML 5基礎之HTML 5 API的威力
  2. 五理由 .NET開發(fā)者應該關注HTML 5
  3. 29個非常實用的HTML 5實例、教程和技巧
  4. 六月最佳的HTML 5和CSS3教程強烈推薦
  5. HTML 5可以做五件事情 超出你的想象
責任編輯:陳貽新 來源: speckyboy.com
相關推薦

2011-03-22 08:54:02

HTML 5CSS3JavaScript

2012-05-11 09:37:34

HTML5

2012-04-10 10:31:07

2013-08-21 13:19:33

HTML5CSS3表單設計

2012-05-24 11:03:55

HTML5

2011-06-17 08:54:38

HTML 5CSS3

2011-01-25 09:16:33

HTML 5CSS3Web

2011-08-30 16:39:34

HTML 5

2012-05-30 09:22:56

Hybrid App助HTML5JavaScript

2013-07-09 09:24:29

響應式HTML5CSS3

2011-11-17 09:24:27

HTML 5

2010-03-22 08:56:12

2011-05-11 16:13:43

CSS3

2012-02-29 09:27:36

ibmdw

2011-11-25 13:18:40

HTML 5

2011-09-21 11:02:17

HTML 5

2011-11-18 13:25:48

HTML 5

2013-08-09 11:06:20

HTML5CSS3資源

2012-06-07 09:23:45

ibmdw

2012-11-15 09:41:43

jQuery
點贊
收藏

51CTO技術棧公眾號