版權聲明:轉載時(shí)請以超鏈接形式標明文章原始出處和作者信息及本聲明
http://monw3c.blogbus.com/logs/18105651.html
表單需要有一個(gè)穩固的視覺(jué)結構,完整的層次組成元素(輸入框、提示文本、提交按鈕等) ,強大的技術(shù)和功能(Ajax)使表單更加易于使用并看上去更加漂亮。下面是一些Ajax效果的CSS表單,可以用來(lái)美化你的網(wǎng)站表單。
樣式化表單
1) Uni Form
一個(gè)規范的表單,結構良好,高度可定制,交互友好,非常實(shí)用。
2) CSS-Only, Table-less Forms這是一個(gè)很好的CSS表單設計實(shí)例,使用了表格。它良好運行在 IE6/Firefox1.0+/Opeara v8.0和Safari ,盡管可能在不同的瀏覽器下有細微的出入,但基本不影響使用。
3) Tableless Forms一個(gè)非常漂亮的表單,例如在輸入框的最左邊有一個(gè)小圖形,這樣看起來(lái)挺精致漂亮。
4) A form with style 如何把一個(gè)難看的表單通過(guò)CSS樣式化讓它好看起來(lái)。
樣式化表單元素
這是一個(gè)腳本,取代常用的表單元素,其中對復選框和下拉選擇框的改非常值得一用,突中顯示當前選擇,這樣看上去很友好。
6) Fancy Form
Fancyform是一個(gè)功能強大的多選框替換腳本,極具靈活性,改變了HTML表單元素的外觀(guān)和功能。它不僅便于使用,并且支持各種不同的瀏覽器。
7) Styling form controls with CSS, revisited
使用不同的CSS規則定制出224種不同的畫(huà)面顯示效果的表單。
8 ) Showing Good Form - 用語(yǔ)義標記達到的比較簡(jiǎn)潔的CSS表單,有點(diǎn)像表格哦。呵呵。
9) Styling the Button Element with Sliding Doors
一個(gè)滑動(dòng)門(mén)技術(shù)和按鈕美化的示例。
實(shí)用且兼容各大瀏覽器的表單
10) Prettier Accessible Forms
12) Sensible Forms
網(wǎng)站可用性-Roger Hudson提供了一個(gè)非常有用的教程,就如何創(chuàng )建一種良好布局的表單。
Ajax表單
13) AJAX Contact Form
Dustin Diaz設計的一個(gè)出色的Ajax聯(lián)系表單,使用了javascript.
14) AutoSuggest: An AJAX auto-complete text field -
這個(gè)表單比較特別的地方在于,它為文本輸入框增加了一個(gè)彈出下拉菜單中的文本建議。用戶(hù)可直接點(diǎn)擊選擇其中的文本建議,支持Tab鍵的選擇。
15) FancyUpload using Mootools - 基于Mootools構建的一個(gè)漂亮的文件上傳表單。
使用AJAX技術(shù)讓您輕松管理HTML表單,以方便從表單元素中搜集資料,確定如何來(lái)管理提交過(guò)程,讓你對如何提交數據能有充分的控制權。
17) Cforms
這是一個(gè)Ajax的Wordpress聯(lián)系表單插件,可以為你的博客用戶(hù)聯(lián)系你時(shí)提供更多的方便。
優(yōu)秀的表單驗證
18 ) Really Easy Field validation with Prototype - 這是一個(gè)非常簡(jiǎn)單的表單驗證腳本。
19) Live Validation
這是一個(gè)很小巧的開(kāi)放源代碼的Javascript效果,當用戶(hù)在提交表單時(shí),提供實(shí)時(shí)的表單驗證。
學(xué)習如何使用Ajax技術(shù),以便處理和校驗你的表單。
21) fValidator
fValidator是一個(gè)開(kāi)源免費的Javascript腳本,當用戶(hù)在提交表單時(shí),提供實(shí)時(shí)的表單驗證。
表單提示信息
22) Validation Hints for your form
這篇文章將解釋如何使用JavaScript和CSS達到輸入提示的效果。
一個(gè)新鮮的技術(shù),為你的用戶(hù)在輸入表單時(shí)提供幫助信息,用不使用彈出窗口。
隱藏表單域
24) Trimming form fields
利用Javascript,DOM和CSS,讓用戶(hù)自主選擇是否選擇哪些表單內容。
創(chuàng )建表單的一些技巧
25) Tips For Creating Great Web Forms
這是一篇對所有設計師來(lái)說(shuō)都值得一學(xué)的表單設計技巧。
聯(lián)系客服