如何使用HTML5，CSS3和PHP创建一个联系表格
?
就個人而言，我覺得重要的是要注意的[積極]影響HTML5的形式和運作的方式，他們將在今后幾年將有。實際上，我們無法實現(xiàn)所有
的新功能，今天，但你不希望要落后其他行業(yè)落后時，這些功能最終成為廣泛支持。
盡管如此，本教程將集中在新的HTML5已經支持所有的主流瀏覽器的功能，或者至少雇用的瀏覽器，仍然試圖發(fā)揮趕上優(yōu)雅降級。
?
?
1。設計
?
?
首先，這是不是一個Photoshop教程。我設計的形式看，但我們要復制它使用最新的編碼技術，并使其正常。
2。HTML5的標記
?
?
現(xiàn)在我們有一個努力的設計，我們將使用HTML5的接觸形式，形成結構。首先，打開一個新的PHP文件并保存它作為index.php的。現(xiàn)在，因為我們需要使用PHP來使窗體功能，你將需要訪問Web服務器，以測試你的代碼。理想的情況下，你可以建立你自己的機器作為服務器使用XAMPP?;另外，如果你有一些網上的虛擬主機空間，你可以使用它，但是這種方法意味著你將不得不重新上傳文件，只要你想，以測試他們。
Doctype的
?
?
好了，現(xiàn)在我們已經得到了空白的PHP文件，讓我們開始用適當?shù)腄OCTYPE，這是簡單了很多，比以前的版本HTML5中，至少可以說！
<！的DOCTYPE html> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <TITLE>聯(lián)系表</ TITLE> </ HEAD> <BODY> </ BODY> </ HTML>沒錯，這是正確的。沒有什么可怕的字母和數(shù)字組合的HTML5的doctype要記住。只是簡單的DOCTYPE的HTML>?。
只是為了進行比較，這里的XHTML DOCTYPE;?<的DOCTYPE HTML PUBLIC“ - / / W3C / / DTD XHTML 1.0 Strict標準/ / EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict~~V DTD“?。
給我的感覺，我們這里有一個明顯的贏家？我認為這將HTML5的先例，許多新的標簽和屬性代表了簡化的方法做的事情，采取的兩倍金額的JavaScript代碼或幾行。
結構
?
?
下一步是要編寫頁面的基本結構，所以我們需要在設計的外觀，并劃分成邏輯部分。
?
?
?
?
?
?
?
?
?
?
?
?
?
因此，我們有一個頭部分，內容部分和頁腳節(jié)。一切都非常簡單吧？是的，但與HTML5，它更簡單。和多語義太多。
<！的DOCTYPE html> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <TITLE>聯(lián)系表</ TITLE> </HEAD> <BODY> <header class="body"></頭> <section class="body"></節(jié)> <footer class="body"></頁腳> </BODY> </HTML>這是正確的。div的。HTML5的不斷推出新的標簽，其實有真正的意義和目的，更不是簡單地使用所有的地方的div的
語義。我也給這些元素的每一個類的“身體”，以表明它們的主要內容身體的一部分，并可以這樣稱呼。當然，你可
以實現(xiàn)與格包裝，但只有少數(shù)幾個主體要素，它一樣容易在這種情況下，分配類。
我們得到了它是關于時間上的聯(lián)系方式，權利？顯然，形式的標記會去主要的<section>標簽內。
?
表格
<FORM><label>的名稱</標簽><input name="name" placeholder="Type Here"><label>的電子郵件</標簽><input name="email" type="email" placeholder="Type Here"><label>的消息</標簽><textarea name="message" placeholder="Type Here"> </ TEXTAREA><input id="submit" name="submit" type="submit" value="Submit"> </ FORM>
所以這是形式的標記，現(xiàn)在來解釋一些事情。
輸入標簽
你可能已經注意到，輸入標簽略有不同XHTML中，它們是封閉的地方，使用正斜杠字符;?<input />。在HTML5中，這個標簽再次被簡化為只<INPUT>。
輸入名稱
的所有<INPUT>標簽也有名稱屬性聲明。進場后，當我們創(chuàng)建的PHP腳本將處理表單數(shù)據。
輸入類型
該類型的屬性從XHTML過渡到HTML5中的一些重大改進。不幸的是，大多數(shù)新的<input>類型不能實際使用的尚未到期的最小支持，但它很高興知道，他們將在今后幾年我們的工作輕松了許多。
然而，也有一定的<input>類型，我們可以使用，現(xiàn)在看到的好處-無論這些利益可能是小。我已經包括類型=“電子郵件”在本教程中，因為沒有采用它的缺點-有只陽性。這可能不是什么令人興奮的，但它是值得推行，任何瀏覽器不支持這種新的輸入類型，只是承認，因為它的類型=“文本”。和iPhone上，這<INPUT>類型導致修改的鍵盤時出現(xiàn)的電子郵件字段被選中，其中包括減少空間酒吧和@符號中心焦點。
?
占位符屬性
?
<INPUT>屬性是另一個領域的重大創(chuàng)新，在HTML5中，使開發(fā)人員能夠實現(xiàn)的事情，以前只可能通過使用幾行JavaScript的。我們使用的是特定的一個占位符屬性，這是合理的，在最新的瀏覽器版本支持。它允許你指定一個值到一個文本字段，選擇的時候，消失，并已輸入的文本，如果沒有，將再次出現(xiàn)時再選擇。我用了很長時間現(xiàn)在這個想法，但它總是用一些笨重，丑陋的JavaScript代碼，使其工作。
3。的CSS
?
?
后的頁面中寫道的標記，是這樣的結果...
不是很漂亮嗎？這是我們可以使用一些CSS來美化了一點東西，使它看起來更接近原設計。首先，讓我們給的形式由更熟悉的感覺，使得它讀，而不是從上到下從左到右。
標簽{顯示：塊;保證金：20像素;字母間距：2px的; }給予的標簽元素的屬性和值顯示：塊;使他們能夠像一個塊級元素，從而迫使到下一行文本框。我還申請了幾個間距和審美目的不言自明的其他屬性。
下一步，我們需要中心和形式，我們要風格的<INPUT>盒，之后我們將真正開始看到的網頁轉換。
/ *中心頁面* / 。身體{顯示：塊;保證金：0汽車;寬度：576px; } / *中心內頁的形式* / 形式{保證金：0汽車;寬度：459px; } / *樣式的文本框* / 輸入，textarea的{寬度：439px;高度：27px;背景：efefef;邊界：1px固體＃dedede;填充：10px;保證金：3px;字體大小：0.9em;顏色：＃3a3a3a; } textarea的{高度：213px;背景：網址（圖像/ TEXTAREA-bg.jpg）權不重復＃efefef; }上述所有是相當標準的CSS寬度元素的身體。類以及保證金：0汽車;將中心的網頁，同樣的技術中心內頁的形式。
輸入和textarea的元素有著許多相同的CSS值，但也有幾個區(qū)別于主消息文本框的文本字段的屬性。顯然需要更多的textarea的高度，但我們也申請一個非常微妙的背景圖片，這個元素。要做到這一點，我們只是說明圖像的源和位置設置其他背景值是正確的權利并沒有重復。
好吧，現(xiàn)在我們可以添加收尾有點對CSS3文本框。
輸入，textarea的{寬度：439px;高度：27px;背景：efefef;邊界：1px固體＃dedede;填充：10px;保證金：3px;字體大小：0.9em;顏色：＃3a3a3a;邊界半徑：5px;-MOZ-邊界半徑：5PX;WebKit的邊界半徑：5PX; }你可以看到，我們已經加入了三個新的生產線將呈現(xiàn)圓角，在所有主要瀏覽器的Internet Explorer 8及以下課程除外...我們的CSS。標準的邊界半徑財產將工作在Opera，Chrome和Safari和-webkit的前綴工程-莫茲前綴的呈現(xiàn)在Firefox的圓角。
以解決有關的文本框的最后一件事是為它們分配一個非常微妙：焦點狀態(tài)，以提供一些視覺反饋用戶行為。這，再次，不能是簡單的。
輸入：重點，textarea的：集中{邊界：1px固體＃97d6eb; }你可以看到我們剛才給的<INPUT>和<TEXTAREA>元素時，他們目前正在選擇一個微妙的藍色邊框。
最后，我們要創(chuàng)建我們的自定義提交按鈕。submit按鈕是<INPUT>元素，所以我們給它自己的ID =“提交”，以覆蓋一些我們已經分配給CSS?<INPUT>元素，如下所示。
＃提交{寬度：127px;高度：38px;背景：網址（/ submit.jpg）;的text-indent：-9999px;邊框：無;保證金：20像素;光標：指針; } ＃提交：懸停{透明度：0.9;}首先，我們分配適當?shù)膶挾群透叨鹊陌粹o，我們在設計中創(chuàng)建的按鈕之前，設置其背景圖像。文本縮進：-9999px;行是一個小竅門，隱藏按鈕從實際的“提交”文本，并只顯示背景圖像。
最后，我們指定的按鈕1?：懸停狀態(tài)，在我們利用不透明財產，因而被廣泛支持的主流瀏覽器之間，除了從...沒錯，對CSS3的另一個小的形式方面，你已經猜到了。
4。用PHP的函數(shù)形式
第一件事首先，我們需要重新審視的HTML，所以我們可以添加一個情侶位，將允許PHP腳本的形式來溝通。
<form METHOD="POST" action="index.php"><label>的名稱</標簽><input name="name" placeholder="Type Here"><label>的電子郵件</標簽><input name="email" type="email" placeholder="Type Here"><label>的消息</標簽><textarea name="message" placeholder="Type Here"> </ TEXTAREA><input id="submit" name="submit" type="submit" value="Submit"> </ FORM>因此，什么被添加？采取在開幕外觀的<form>的標簽。我們增加了兩個新的屬性，方法和行動。
方法=“郵報”的屬性提供的PHP腳本從表格中提取的值的方法，使腳本可以做什么，它希望這些價值觀。行動=“index.php”的屬性，只是告訴我們的PHP腳本的位置，在這種情況下，因為它只有幾行代碼，我們要略高于我們的index.php文件的形式插入。所以，當提交表單時，它會去到index.php，找到該腳本。
再看看上面的HTML，你會看到，每個表單元素有名稱屬性。PHP使用此屬性，每個表單元素中提取數(shù)據。讓我們來看看如何做...
<？PHP名稱=的$ _POST ['名稱'];$電子郵件= $ _POST ['電子郵件'];$消息= $ _POST ['消息']; ？>如果你從來沒有使用PHP之前，它可能看起來有點混亂-但它實際上是非常簡單的。$ _POST，部分是一個內置PHP函數(shù)，這是用來收集數(shù)據的形式使用方法=“POST”像我們這樣做。緊隨此功能的部分，['名稱']必須對應的名稱從屬性的形式輸入;在一審中，名稱=“名稱”！
因此，這將收集已進入名稱字段輸入任何數(shù)據-現(xiàn)在我們需要的東西。這是存儲數(shù)據的變量開始發(fā)揮作用。在這種情況下，美元的名稱是可變的，我們將使用從名稱字段中存儲的數(shù)據。然后，我們可以做相同的電子郵件和即時消息領域。簡單！
現(xiàn)在，我們要添加一些變量的形式要求才能正常。
<？PHP名稱=的$ _POST ['名稱'];$電子郵件= $ _POST ['電子郵件'];$消息= $ _POST ['消息'];$ ='從：TangledDemo“; $ ='contact@tangledindesign.com'; $主題='你好'; ？>這些新的變量，確定目的地，電子郵件的主題字段和電子郵件已經從。下一步，我們將在一個變量中存儲的所有數(shù)據從形式為了簡化一點東西。
<？PHP名稱=的$ _POST ['名稱'];$電子郵件= $ _POST ['電子郵件'];$消息= $ _POST ['消息'];$ ='從：TangledDemo“; $ ='contact@tangledindesign.com'; $主題='你好'; $身體=“從：$ NAME \ N電子郵件：$電子郵件的\ n消息：\ n $的消息”; ？>你可以看到從上面的片段中，我們采取了我們先前聲明的變量，現(xiàn)在已經存儲在一個名為變量所有身體，這將是實際的電子郵件內容。
這幾乎是一次使用的mail（）函數(shù)發(fā)送電子郵件！但首先，我們需要解釋如何執(zhí)行此功能只當表單被提交，而不是每次用戶負載的index.php。
<？PHP （$ _POST ['提交']）{/ *凡是在這里只進行形式提交* / } ？>基本上，如果上面的代碼內的任何語句將只進行一次submit按鈕已被按下。再次，['提交']部分必須對應在您的表單提交按鈕的名稱。
現(xiàn)在，我們可以繼續(xù)使用的mail（）函數(shù)。
<？PHP （$ _POST ['提交']）{（郵件（$，$主題，身體，美元從））{ 回聲“<p>您的消息已被發(fā)送</ P>！”;}否則{ 回聲“<P>出了錯，回去再試一次</ P>'; } } ？>郵件（）函數(shù)是一個內置在實際執(zhí)行任務到適當?shù)氖占税l(fā)送電子郵件的PHP函數(shù)。上面的代碼中使用了一個聲明，基本上規(guī)定的郵件功能，如果正確執(zhí)行，然后告訴用戶的消息已發(fā)送;如果沒有執(zhí)行正確的郵件功能，然后通知用戶，一直是一個難題。
現(xiàn)在，如果您的服務器上測試的形式，你應該找到能夠正常工作！的形式，以確保工作的最佳方式是把它上傳到網上的服務器，并設置在同一服務器上托管的電子郵件收件人的電子郵件地址。
防止垃圾郵件
之前我們完成了，我們要看看在防止垃圾郵件的一個非常簡單的方法。要開始這一進程，我們必須再次重溫的HTML，并在一個多添加<INPUT>元素到我們的表格。我們要插入這個元素，只是之前提交按鈕。
的<label> * 2 +2的是什么？（反垃圾郵件）</標簽> <input name="human" placeholder="Type Here">現(xiàn)在回PHP，我們需要使用POST方法提取任何用戶進入到這個領域。因為我們給“人”的元素名稱，我們添加以下行到我們的PHP;?人類$ = $ _POST ['人';
記住PHP?聲明，如果我們開展功能只有一次的形式已提交？我們需要稍微修改現(xiàn)在該聲明。
<？PHP （$ _POST [“'] && $人類== '4'）{（郵件（$，$主題，身體，美元從））{ 回聲“<p>您的消息已被發(fā)送</ P>！”;}否則{ 回聲“<P>出了錯，回去再試一次</ P>'; } } ？>現(xiàn)在該聲明要求的'人'的價值（防垃圾郵件的問題的回應）必須以'4'進行郵件功能。現(xiàn)在我們需要添加一個代碼的最后一位，讓用戶知道他們是否已經回答了防垃圾郵件的問題不正確。
<？PHP （$ _POST [“'] && $人類== '4'）{（郵件（$，$主題，身體，美元從））{ 回聲“<p>您的消息已被發(fā)送</ P>！”;}否則{ 回聲“<P>出了錯，回去再試一次</ P>'; } }否則，如果（$ _POST [“'] && $人！= '4'）{回聲“<p>您的防垃圾郵件的問題回答不正確</ P>！”; } ？>我們已經加入到我們if語句使用，其他如指出，在這種情況下，如果已提交的表格和防垃圾郵件的問題的答案是不是?'4'，那么不執(zhí)行的mail（）函數(shù)，并通知用戶，他們的答案是錯誤的。
與...是！最終的PHP代碼可以發(fā)現(xiàn)，可以發(fā)現(xiàn)下面進一步演示和CSS文件的鏈接。感謝您的閱讀。如果你讀它 - 好功夫！并讓我知道你是怎么留下了以下評論。
<？PHP名稱=的$ _POST ['名稱'];$電子郵件= $ _POST ['電子郵件'];$消息= $ _POST ['消息'];$ ='從：TangledDemo“; $ ='contact@tangledindesign.com'; $主題='你好';為人類= $ _POST ['人權'];$身體=“從：$ NAME \ N電子郵件：$電子郵件的\ n消息：\ n $的消息”;（$ _POST [“'] && $人類== '4'）{ （郵件（$，$主題，身體，美元從））{ 回聲“<p>您的消息已被發(fā)送</ P>！”;}否則{ 回聲“<P>出了錯，回去再試一次</ P>'; } }否則，如果（$ _POST [“'] && $人！= '4'）{回聲“<p>您的防垃圾郵件的問題回答不正確</ P>！”;} ？>更新
一個或兩個人都問的形式工作所需的領域。下面是你需要的名稱和電子郵件領域，在我的例子如果兩者都需要領域的腳本...
（$ _POST ['提交']）{（$名稱='' && $電子郵件！=''）{（人類== '4'）{ （郵件（$，$主題，身體，美元從））{ 回聲“<p>您的消息已被發(fā)送</ P>！”;}否則{ 回聲“<P>出了錯，回去再試一次</ P>'; } }否則，如果（$ _POST [“'] && $人！= '4'）{回聲“<p>您的防垃圾郵件的問題回答不正確</ P>！”;}}否則{回聲“<p>您需要填寫所有必需的字段</ P>！';} }轉載于:https://www.cnblogs.com/jessiecaisme/archive/2012/08/01/2618268.html
總結
以上是生活随笔為你收集整理的如何使用HTML5，CSS3和PHP创建一个联系表格的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 10件开发者和老板都要知道的HTML5的
- 下一篇： DIV弹出层