HTML5 實(shí)戰(zhàn)PHP之Web頁面表單設(shè)計(jì)
我要評(píng)論表單的設(shè)計(jì)草圖
由于本文不是教photoshop制作的文章，因此只是把設(shè)計(jì)的表單的草圖設(shè)計(jì)出來，然后去使用HTML5，CSS3和PHP去實(shí)現(xiàn)，我們要設(shè)計(jì)的表單草圖如下圖所示：
▲
可以看到，在這個(gè)設(shè)計(jì)草圖中，我們期望實(shí)現(xiàn)的效果是：當(dāng)用戶輸入姓名時(shí)，NAME字段的文本框會(huì)以焦點(diǎn)的形式顯示出來，而email的輸入框仔細(xì)看，是一個(gè)圓角邊框的輸入框，而message的文本區(qū)域輸入框中，可以看到有一張背景底圖。而提交按鈕則是一個(gè)自定義的按鈕。
開始動(dòng)手設(shè)計(jì)
接下來我們開始進(jìn)行表單的設(shè)計(jì)。本文要使用的是php，因此可以用任何的PHP編程工具先建立一個(gè)index.php文件，然后開始編寫符合HTML5標(biāo)準(zhǔn)的表單。
1)關(guān)于DOCTYPE
在HTML5中，關(guān)于DOCTYPE的聲明將變得十分簡單，代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Contact Form</title>
</head>
<body>
</body>
</html>
看到了么?在HTML5中，對(duì)頁面首部的類型聲明，現(xiàn)在只需要一句：
就可以了，而對(duì)比下以前的HTML4，需要比較麻煩地去聲明，如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.
接下來，我們開始設(shè)計(jì)頁面表單的結(jié)構(gòu)，我們先來看下如下圖，表單的結(jié)構(gòu)：
可以看到，我們分為Header頭部區(qū)域，Main Body的表單主區(qū)域，F(xiàn)ooter area則是表單的底部區(qū)域。而HTML5中，實(shí)現(xiàn)這一切其實(shí)十分簡單，如下代碼：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Contact Form</title>
</head>
<body>
<header class="body">
</header>
<section class="body">
</section>
<footer class="body">
</footer>
</body>
</html>
可以看到，在這里沒有了傳統(tǒng)的div，取而代之的是，HTML5中新的標(biāo)簽元素header,footer和section，這些標(biāo)簽中的header標(biāo)簽是指定了頁面頭部區(qū)域，section則指定了頁面的主體區(qū)域，footer部分則指定了頁面的尾部區(qū)域，相比div，它們的含義更加清晰，從語義上更符合使用習(xí)慣。這里同時(shí)為它們指定了css類body，以統(tǒng)一它們的風(fēng)格。
表單部分設(shè)計(jì)
接下來看下表單部分的設(shè)計(jì)，先看下代碼如下：
<form>
<label>Name</label>
<input name="name" placeholder="Type Here">
<label>Email</label>
<input name="email" type="email" placeholder="Type Here">
<label>Message</label>
<textarea name="message" placeholder="Type Here"></textarea>
<input id="submit" name="submit" type="submit" value="Submit">
</form>
下面介紹在HTML5中，input標(biāo)簽跟HTML4中的不同。在HTML5中，input標(biāo)簽同樣有name和id等屬性。而最大的不同，是HTML5中的type屬性中，新增了很多類型，以適應(yīng)用戶的需求，但很遺憾的是，目前不是所有瀏覽器都支持這些新增的type屬性，因此本文只講解其中一些大部分瀏覽器都支持的新增type屬性，比如其中上面例子中談到的type=email,則是一個(gè)只允許用戶輸入email的文本框。即使有部分瀏覽器不支持email文本框的話也無所謂，因?yàn)闀?huì)將其識(shí)別為一個(gè)傳統(tǒng)的type=text的文本框，而在iOS系統(tǒng)上，當(dāng)遇到type=email屬性時(shí)，將會(huì)打開方便輸入email的鍵盤布局，如下圖所示：
▲
而在type=email標(biāo)簽中，請(qǐng)留意其中的placeholder屬性，這里設(shè)置為”type here”,意思是當(dāng)用戶沒有在這個(gè)email框輸入內(nèi)容時(shí)，自動(dòng)會(huì)出現(xiàn)提示用戶輸入的文字，這里很好地起到提醒的作用，比用一大堆javascript編寫的效果要好，如下圖：
相關(guān)文章
HTML5實(shí)現(xiàn)的移動(dòng)端購物車自動(dòng)結(jié)算功能示例代碼
本文介紹HTML5實(shí)現(xiàn)移動(dòng)端購物車自動(dòng)結(jié)算,通過WebStorage、事件監(jiān)聽、DOM操作等技術(shù),確保實(shí)時(shí)更新與數(shù)據(jù)同步,優(yōu)化性能及無障礙性,提升用戶體驗(yàn)，感興趣的朋友一起看看吧2025-06-18- 在HTML5中，<button>標(biāo)簽用于定義一個(gè)可點(diǎn)擊的按鈕，它是創(chuàng)建交互式網(wǎng)頁的重要元素之一，本文將深入解析HTML5中的<button>標(biāo)簽，詳細(xì)介紹其屬性、樣式以及實(shí)際2025-06-18
基于 HTML5 Canvas 實(shí)現(xiàn)圖片旋轉(zhuǎn)與下載功能(完整代碼展示)
本文將深入剖析一段基于 HTML5 Canvas 的代碼，該代碼實(shí)現(xiàn)了圖片的旋轉(zhuǎn)（90 度和 180 度）以及旋轉(zhuǎn)后圖片的下載功能,通過對(duì)代碼的解讀，我們可以學(xué)習(xí)到如何利用 Canvas API2025-06-18
HTML5 getUserMedia API網(wǎng)頁錄音實(shí)現(xiàn)指南示例小結(jié)
本教程將指導(dǎo)你如何利用這一API，結(jié)合Web Audio API，實(shí)現(xiàn)網(wǎng)頁錄音功能,從獲取音頻流到處理和保存錄音，整個(gè)過程將逐步詳解,此外，還討論了getUserMedia API的使用限制和最2025-06-16- HTML5的搜索框是一個(gè)強(qiáng)大的工具，能夠有效提升用戶體驗(yàn),通過結(jié)合自動(dòng)補(bǔ)全功能和適當(dāng)?shù)臉邮剑梢詣?chuàng)建出既美觀又實(shí)用的搜索界面,這篇文章給大家介紹HTML5 搜索框Search Box2025-06-13
- Checkbox是HTML5中非常重要的表單元素之一，通過合理使用其屬性和樣式自定義方法，可以為用戶提供豐富多樣的交互體驗(yàn)，這篇文章給大家介紹HTML5中Checkbox標(biāo)簽的深入全面解2025-06-13
HTML5無插件拖拽圖片上傳功能實(shí)現(xiàn)過程
本實(shí)例展示了一種基于HTML5技術(shù)的圖片上傳功能，無需外部插件即可通過拖放圖片實(shí)現(xiàn)上傳,涉及到HTML5的拖放API和File API，以及使用CSS來增強(qiáng)用戶界面的交互性和視覺反饋，2025-05-16HTML5 定位大全之相對(duì)定位、絕對(duì)定位和固定定位
在HTML5和CSS中，定位(positioning)是控制元素在頁面上位置的重要機(jī)制,主要有四種定位方式：靜態(tài)定位(static)、相對(duì)定位(relative)、絕對(duì)定位(absolute)和固定定位(fixed),2025-05-13- Microdata作為HTML5新增的一個(gè)特性，它允許開發(fā)者在HTML文檔中添加更多的語義信息，以便于搜索引擎和瀏覽器更好地理解頁面內(nèi)容，本文將探討HTML5中Microdata的使用方法以及2025-04-21
在HTML語法中，表格主要通過< table >、< tr >和< td >3個(gè)標(biāo)簽構(gòu)成,本文通過實(shí)例代碼講解HTML5表格語法格式，感興趣的朋友一起看看吧2025-04-21
