如何使用HTML5，CSS3和PHP创建一个联系表格
就个人而言，我觉得重要的是要注意的[积极]影响HTML5的形式和运作的方式，他们将在今后几年将有。实际上，我们无法实现所有
的新功能，今天，但你不希望要落后其他行业落后时，这些功能最终成为广泛支持。
尽管如此，本教程将集中在新的HTML5已经支持所有的主流浏览器的功能，或者至少雇用的浏览器，仍然试图发挥赶上优雅降级。
1。设计
首先，这是不是一个Photoshop教程。我设计的形式看，但我们要复制它使用最新的编码技术，并使其正常。
2。HTML5的标记
现在我们有一个努力的设计，我们将使用HTML5的接触形式，形成结构。首先，打开一个新的PHP文件并保存它作为index.php的。现在，因为我们需要使用PHP来使窗体功能，你将需要访问Web服务器，以测试你的代码。理想的情况下，你可以建立你自己的机器作为服务器使用XAMPP ;另外，如果你有一些网上的虚拟主机空间，你可以使用它，但是这种方法意味着你将不得不重新上传文件，只要你想，以测试他们。
Doctype的
好了，现在我们已经得到了空白的PHP文件，让我们开始用适当的DOCTYPE，这是简单了很多，比以前的版本HTML5中，至少可以说！
<！的DOCTYPE html>
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>联系表</ TITLE>
</ HEAD>
<BODY>
</ BODY>
</ HTML>
没错，这是正确的。没有什么可怕的字母和数字组合的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代码或几行。
结构
下一步是要编写页面的基本结构，所以我们需要在设计的外观，并划分成逻辑部分。
因此，我们有一个头部分，内容部分和页脚节。一切都非常简单吧？是的，但与HTML5，它更简单。和多语义太多。
<！的DOCTYPE html>
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>联系表</ TITLE>
</HEAD>
<BODY>
<header class="body">
</头>
<section class="body">
</节>
<footer class="body">
</页脚>
</BODY>
</HTML>
这是正确的。div的。HTML5的不断推出新的标签，其实有真正的意义和目的，更不是简单地使用所有的地方的div的
语义。我也给这些元素的每一个类的“身体”，以表明它们的主要内容身体的一部分，并可以这样称呼。当然，你可
以实现与格包装，但只有少数几个主体要素，它一样容易在这种情况下，分配类。
我们得到了它是关于时间上的联系方式，权利？显然，形式的标记会去主要的<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>
所以这是形式的标记，现在来解释一些事情。
输入标签
你可能已经注意到，输入标签略有不同XHTML中，它们是封闭的地方，使用正斜杠字符; <input />。在HTML5中，这个标签再次被简化为只<INPUT>。
输入名称
的所有<INPUT>标签也有名称属性声明。进场后，当我们创建的PHP脚本将处理表单数据。
输入类型
该类型的属性从XHTML过渡到HTML5中的一些重大改进。不幸的是，大多数新的<input>类型不能实际使用的尚未到期的最小支持，但它很高兴知道，他们将在今后几年我们的工作轻松了许多。
然而，也有一定的<input>类型，我们可以使用，现在看到的好处-无论这些利益可能是小。我已经包括类型=“电子邮件”在本教程中，因为没有采用它的缺点-有只阳性。这可能不是什么令人兴奋的，但它是值得推行，任何浏览器不支持这种新的输入类型，只是承认，因为它的类型=“文本”。和iPhone上，这<INPUT>类型导致修改的键盘时出现的电子邮件字段被选中，其中包括减少空间酒吧和@符号中心焦点。
占位符属性
<INPUT>属性是另一个领域的重大创新，在HTML5中，使开发人员能够实现的事情，以前只可能通过使用几行JavaScript的。我们使用的是特定的一个占位符属性，这是合理的，在最新的浏览器版本支持。它允许你指定一个值到一个文本字段，选择的时候，消失，并已输入的文本，如果没有，将再次出现时再选择。我用了很长时间现在这个想法，但它总是用一些笨重，丑陋的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值，但也有几个区别于主消息文本框的文本字段的属性。显然需要更多的textarea的高度，但我们也申请一个非常微妙的背景图片，这个元素。要做到这一点，我们只是说明图像的源和位置设置其他背景值是正确的权利并没有重复。
好吧，现在我们可以添加收尾有点对CSS3文本框。
输入，textarea的{
宽度：439px;
高度：27px;
背景：efefef;
边界：1px固体＃dedede;
填充：10px;
保证金：3px;
字体大小：0.9em;
颜色：＃3a3a3a;
边界半径：5px;
-MOZ-边界半径：5PX;
WebKit的边界半径：5PX;
}
你可以看到，我们已经加入了三个新的生产线将呈现圆角，在所有主要浏览器的Internet Explorer 8及以下课程除外...我们的CSS。标准的边界半径财产将工作在Opera，Chrome和Safari和-webkit的前缀工程-莫兹前缀的呈现在Firefox的圆角。
以解决有关的文本框的最后一件事是为它们分配一个非常微妙：焦点状态，以提供一些视觉反馈用户行为。这，再次，不能是简单的。
输入：重点，textarea的：集中{
边界：1px固体＃97d6eb;
}
你可以看到我们刚才给的<INPUT>和<TEXTAREA>元素时，他们目前正在选择一个微妙的蓝色边框。
最后，我们要创建我们的自定义提交按钮。submit按钮是<INPUT>元素，所以我们给它自己的ID =“提交”，以覆盖一些我们已经分配给CSS <INPUT>元素，如下所示。
＃提交{
宽度：127px;
高度：38px;
背景：网址（/ submit.jpg）;
的text-indent：-9999px;
边框：无;
保证金：20像素;
光标：指针;
}
＃提交：悬停{
透明度：0.9;
}
首先，我们分配适当的宽度和高度的按钮，我们在设计中创建的按钮之前，设置其背景图像。文本缩进：-9999px;行是一个小窍门，隐藏按钮从实际的“提交”文本，并只显示背景图像。
最后，我们指定的按钮1 ：悬停状态，在我们利用不透明财产，因而被广泛支持的主流浏览器之间，除了从...没错，对CSS3的另一个小的形式方面，你已经猜到了。
4。用PHP的函数形式
第一件事首先，我们需要重新审视的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使用此属性，每个表单元素中提取数据。让我们来看看如何做...
<？PHP
名称=的$ _POST ['名称'];
$电子邮件= $ _POST ['电子邮件'];
$消息= $ _POST ['消息'];
？>
如果你从来没有使用PHP之前，它可能看起来有点混乱-但它实际上是非常简单的。$ _POST，部分是一个内置PHP函数，这是用来收集数据的形式使用方法=“POST”像我们这样做。紧随此功能的部分，['名称']必须对应的名称从属性的形式输入;在一审中，名称=“名称”！
因此，这将收集已进入名称字段输入任何数据-现在我们需要的东西。这是存储数据的变量开始发挥作用。在这种情况下，美元的名称是可变的，我们将使用从名称字段中存储的数据。然后，我们可以做相同的电子邮件和即时消息领域。简单！
现在，我们要添加一些变量的形式要求才能正常。
<？PHP
名称=的$ _POST ['名称'];
$电子邮件= $ _POST ['电子邮件'];
$消息= $ _POST ['消息'];
$ ='从：TangledDemo“;
$ ='contact@tangledindesign.com';
$主题='你好';
？>
这些新的变量，确定目的地，电子邮件的主题字段和电子邮件已经从。下一步，我们将在一个变量中存储的所有数据从形式为了简化一点东西。
<？PHP
名称=的$ _POST ['名称'];
$电子邮件= $ _POST ['电子邮件'];
$消息= $ _POST ['消息'];
$ ='从：TangledDemo“;
$ ='contact@tangledindesign.com';
$主题='你好';
$身体=“从：$ NAME \ N电子邮件：$电子邮件的\ n消息：\ n $的消息”;
？>
你可以看到从上面的片段中，我们采取了我们先前声明的变量，现在已经存储在一个名为变量所有身体，这将是实际的电子邮件内容。
这几乎是一次使用的mail（）函数发送电子邮件！但首先，我们需要解释如何执行此功能只当表单被提交，而不是每次用户负载的index.php。
<？PHP
（$ _POST ['提交']）{
/ *凡是在这里只进行形式提交* /
}
？>
基本上，如果上面的代码内的任何语句将只进行一次submit按钮已被按下。再次，['提交']部分必须对应在您的表单提交按钮的名称。
现在，我们可以继续使用的mail（）函数。
<？PHP
（$ _POST ['提交']）{
（邮件（$，$主题，身体，美元从））{
回声“<p>您的消息已被发送</ P>！”;
}否则{
回声“<P>出了错，回去再试一次</ P>';
}
}
？>
邮件（）函数是一个内置在实际执行任务到适当的收件人发送电子邮件的PHP函数。上面的代码中使用了一个声明，基本上规定的邮件功能，如果正确执行，然后告诉用户的消息已发送;如果没有执行正确的邮件功能，然后通知用户，一直是一个难题。
现在，如果您的服务器上测试的形式，你应该找到能够正常工作！的形式，以确保工作的最佳方式是把它上传到网上的服务器，并设置在同一服务器上托管的电子邮件收件人的电子邮件地址。
防止垃圾邮件
之前我们完成了，我们要看看在防止垃圾邮件的一个非常简单的方法。要开始这一进程，我们必须再次重温的HTML，并在一个多添加<INPUT>元素到我们的表格。我们要插入这个元素，只是之前提交按钮。
的<label> * 2 +2的是什么？（反垃圾邮件）</标签>
<input name="human" placeholder="Type Here">
现在回PHP，我们需要使用POST方法提取任何用户进入到这个领域。因为我们给“人”的元素名称，我们添加以下行到我们的PHP; 人类$ = $ _POST ['人';
记住PHP 声明，如果我们开展功能只有一次的形式已提交？我们需要稍微修改现在该声明。
<？PHP
（$ _POST [“'] && $人类== '4'）{
（邮件（$，$主题，身体，美元从））{
回声“<p>您的消息已被发送</ P>！”;
}否则{
回声“<P>出了错，回去再试一次</ P>';
}
}
？>
现在该声明要求的'人'的价值（防垃圾邮件的问题的回应）必须以'4'进行邮件功能。现在我们需要添加一个代码的最后一位，让用户知道他们是否已经回答了防垃圾邮件的问题不正确。
<？PHP
（$ _POST [“'] && $人类== '4'）{
（邮件（$，$主题，身体，美元从））{
回声“<p>您的消息已被发送</ P>！”;
}否则{
回声“<P>出了错，回去再试一次</ P>';
}
}否则，如果（$ _POST [“'] && $人！= '4'）{
回声“<p>您的防垃圾邮件的问题回答不正确</ P>！”;
}
？>
我们已经加入到我们if语句使用，其他如指出，在这种情况下，如果已提交的表格和防垃圾邮件的问题的答案是不是 '4'，那么不执行的mail（）函数，并通知用户，他们的答案是错误的。
与...是！最终的PHP代码可以发现，可以发现下面进一步演示和CSS文件的链接。感谢您的阅读。如果你读它 - 好功夫！并让我知道你是怎么留下了以下评论。
<？PHP
名称=的$ _POST ['名称'];
$电子邮件= $ _POST ['电子邮件'];
$消息= $ _POST ['消息'];
$ ='从：TangledDemo“;
$ ='contact@tangledindesign.com';
$主题='你好';
为人类= $ _POST ['人权'];
$身体=“从：$ NAME \ N电子邮件：$电子邮件的\ n消息：\ n $的消息”;
（$ _POST [“'] && $人类== '4'）{
（邮件（$，$主题，身体，美元从））{
回声“<p>您的消息已被发送</ P>！”;
}否则{
回声“<P>出了错，回去再试一次</ P>';
}
}否则，如果（$ _POST [“'] && $人！= '4'）{
回声“<p>您的防垃圾邮件的问题回答不正确</ P>！”;
}
？>
更新
一个或两个人都问的形式工作所需的领域。下面是你需要的名称和电子邮件领域，在我的例子如果两者都需要领域的脚本...
（$ _POST ['提交']）{
（$名称='' && $电子邮件！=''）{
（人类== '4'）{
（邮件（$，$主题，身体，美元从））{
回声“<p>您的消息已被发送</ P>！”;
}否则{
回声“<P>出了错，回去再试一次</ P>';
}
}否则，如果（$ _POST [“'] && $人！= '4'）{
回声“<p>您的防垃圾邮件的问题回答不正确</ P>！”;
}
}否则{
回声“<p>您需要填写所有必需的字段</ P>！';
}
}
