HTML5 實(shí)戰(zhàn)PHP之Web頁(yè)面表單設(shè)計(jì)

2020-03-24 18:49:49

字體：大中小

供稿：網(wǎng)友

HTML5在頁(yè)面結(jié)構(gòu)，多媒體處理等多方面都與以往的HTML有很大的不同。在本教程中，將帶領(lǐng)大家使用HTML5，CSS3及PHP實(shí)際設(shè)計(jì)一個(gè)符合HTML5標(biāo)準(zhǔn)的簡(jiǎn)單的表單提交網(wǎng)頁(yè)，讀者可以從中學(xué)習(xí)到HTML5 新的表單頁(yè)面的基本元素。本文的讀者為有一定HTML，CSS及PHP的讀者學(xué)習(xí) 表單的設(shè)計(jì)草圖由于本文不是教photoshop制作的文章，因此只是把設(shè)計(jì)的表單的草圖設(shè)計(jì)出來(lái)，然后去使用HTML5，CSS3和PHP去實(shí)現(xiàn)，我們要設(shè)計(jì)的表單草圖如下圖所示：

▲ 可以看到，在這個(gè)設(shè)計(jì)草圖中，我們期望實(shí)現(xiàn)的效果是：當(dāng)用戶輸入姓名時(shí)，NAME字段的文本框會(huì)以焦點(diǎn)的形式顯示出來(lái)，而email的輸入框仔細(xì)看，是一個(gè)圓角邊框的輸入框，而message的文本區(qū)域輸入框中，可以看到有一張背景底圖。而提交按鈕則是一個(gè)自定義的按鈕。開(kāi)始動(dòng)手設(shè)計(jì) 接下來(lái)我們開(kāi)始進(jìn)行表單的設(shè)計(jì)。本文要使用的是php，因此可以用任何的PHP編程工具先建立一個(gè)index.php文件，然后開(kāi)始編寫(xiě)符合HTML5標(biāo)準(zhǔn)的表單。 1)關(guān)于DOCTYPE 在HTML5中，關(guān)于DOCTYPE的聲明將變得十分簡(jiǎn)單，代碼如下：

復(fù)制代碼代碼如下:
!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ì)頁(yè)面首部的類(lèi)型聲明，現(xiàn)在只需要一句：
就可以了，而對(duì)比下以前的HTML4，需要比較麻煩地去聲明，如下：

復(fù)制代碼代碼如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" .

接下來(lái)，我們開(kāi)始設(shè)計(jì)頁(yè)面表單的結(jié)構(gòu)，我們先來(lái)看下如下圖，表單的結(jié)構(gòu)：

可以看到，我們分為Header頭部區(qū)域，Main Body的表單主區(qū)域，F(xiàn)ooter area則是表單的底部區(qū)域。而HTML5中，實(shí)現(xiàn)這一切其實(shí)十分簡(jiǎn)單，如下代碼：

復(fù)制代碼代碼如下:
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"
title Contact Form /title
/head
body
header
/header
section
/section
footer
/footer
/body
/html

可以看到，在這里沒(méi)有了傳統(tǒng)的div，取而代之的是，HTML5中新的標(biāo)簽元素header,footer和section，這些標(biāo)簽中的header標(biāo)簽是指定了頁(yè)面頭部區(qū)域，section則指定了頁(yè)面的主體區(qū)域，footer部分則指定了頁(yè)面的尾部區(qū)域，相比div，它們的含義更加清晰，從語(yǔ)義上更符合使用習(xí)慣。這里同時(shí)為它們指定了css類(lèi)body，以統(tǒng)一它們的風(fēng)格。
表單部分設(shè)計(jì)
接下來(lái)看下表單部分的設(shè)計(jì)，先看下代碼如下：

復(fù)制代碼代碼如下:
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屬性中，新增了很多類(lèi)型，以適應(yīng)用戶的需求，但很遺憾的是，目前不是所有瀏覽器都支持這些新增的type屬性，因此本文只講解其中一些大部分瀏覽器都支持的新增type屬性，比如其中上面例子中談到的type=email,則是一個(gè)只允許用戶輸入email的文本框。即使有部分瀏覽器不支持email文本框的話也無(wú)所謂，因?yàn)闀?huì)將其識(shí)別為一個(gè)傳統(tǒng)的type=text的文本框，而在iOS系統(tǒng)上，當(dāng)遇到type=email屬性時(shí)，將會(huì)打開(kāi)方便輸入email的鍵盤(pán)布局，如下圖所示：

▲ 而在type=email標(biāo)簽中，請(qǐng)留意其中的placeholder屬性，這里設(shè)置為 type here ,意思是當(dāng)用戶沒(méi)有在這個(gè)email框輸入內(nèi)容時(shí)，自動(dòng)會(huì)出現(xiàn)提示用戶輸入的文字，這里很好地起到提醒的作用，比用一大堆javascript編寫(xiě)的效果要好，如下圖：html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：WEB開(kāi)發(fā)非常有用的9個(gè)PHP類(lèi)庫(kù)

下一篇：PHP實(shí)例教程-PHP采集程序的思路