css创建一个表单在页面上_如何创建基于AjaxHTML5 / CSS3联系人表单

本文是我们的“ HTML5 / CSS3教程系列”的一部分 -致力于帮助您成为更好的设计师和/或开发人员。 单击此处查看同一系列的更多文章。

对于任何网站，联系表格都是至关重要的，因为它充当了使网站管理员访问者的意见或查询传递的使者。网上已经有无数的联系表单，但是不幸的是，大多数联系表单并没有向您解释内部工作部分，因此这里有一个详细的教程，可以教您基于流行技术， HTML5和CSS3从头开始构建高级联系表单。。

考虑到基于Web的电子邮件联系表单的性质，我们还需要深入研究两个单独的应用程序字段，它们是用于发送电子邮件PHP后端代码和用于丰富用户界面的jQuery函数。到最后，我们将获得一个完全动态的，功能齐全的联系表，并考虑到以后的自定义。

立即开始构建自己的高级联系表！

演示 –预览构建的内容
下载 –下载所有文件（php + CSS）

构建应用程序

首先，您需要某种类型的Web服务器才能进行工作。如果您正在运行Windows计算机，则WAMP可能是您的最佳选择。 Mac用户有一个类似的名为MAMP的程序，它易于安装。

这些软件包将在您的计算机上设置具有对PHP的完全访问权限的本地服务器。或者，如果您拥有服务器空间或对远程位置具有完全的服务器访问权限，则可以使用它。我们将不需要任何MySQL数据库，这应该会简化一些事情。

设置服务器后， 创建一个新文件夹来容纳应用程序 。您可以根据自己的喜好命名，因为它不会损害甚至与最终产品无关。在Web浏览器中访问文件时，将使用文件夹结构。一个简单的例子是http：//localhost/ajaxcontact/contact.php

让我们来建立文件！

我们将只处理2个核心文件。首先，我们需要一个核心.php文件来容纳我们的应用程序逻辑和前端HTML标记。以下是从我们的起始文件中获取的示例代码。

<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en"> 
<head> 
<title>HTML5/CSS Ajax Contact Form with jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

首先，我们在文档中编写了一个简单的标题部分。这包括HTML5和一些HTML / XML文档元素的常规Doctype声明 。这些不是完全必需的，但是可以简化旧（和新）浏览器中的渲染过程。同样，提供更多信息也永远不会受到伤害。

再往下一点，我们可以在结束标题标记之前看到两行。第一个包括在线Google Code Repository中的jQuery脚本 。这是我们的动态页面错误起作用所必需的。在此之下，我们直接包含了一个包含所有页面样式的基本CSS文档 。

在我们的文档主体中，我们有几个包含主要联系表格的部门。它包含3个输入元素，用于输入用户名 ， 电子邮件地址和个人消息 。 HTML标记是相当标准的，不应使任何中级开发人员困惑。

<!-- @begin contact -->
<div id="contact" class="section">
 <div class="container content">
  
  <?php if(isset($emailSent) && $emailSent == true) { ?>
      <p class="info">Your email was sent. Huzzah!</p>
     <?php } else { ?>

在这里，我们在几个页面容器中嵌套了一个基本的PHP条件代码 。这将检查名为$emailSent的变量的设置值，如果该值等于true，则将显示成功消息。

在我们的表单HTML中

else语句将在第一页加载时运行，因为最初没有任何内容要发送。在这里，我们将包含表单元素的简短集合和一个提交按钮 。

<div id="contact-form">
 <?php if(isset($hasError) || isset($captchaError) ) { ?>
     <p class="alert">Error submitting the form</p>
    <?php } ?>
    
 <form id="contact-us" action="contact.php" method="post">
  <div class="formblock">
  <label class="screen-reader-text">Name</label>
  <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="txt requiredField" placeholder="Name:" />
        
  <?php if($nameError != '') { ?>
   <br /><span class="error"><?php echo $nameError;?></span> 
  <?php } ?>
        
  </div>
                        
  <div class="formblock">
  <label class="screen-reader-text">Email</label>
  <input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="txt requiredField email" placeholder="Email:" />
        
  <?php if($emailError != '') { ?>
   <br /><span class="error"><?php echo $emailError;?></span>
  <?php } ?>
        
  </div>
                        
  <div class="formblock">
   <label class="screen-reader-text">Message</label>
   <textarea name="comments" id="commentsText" class="txtarea requiredField" placeholder="Message:"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
            
  <?php if($commentError != '') { ?>
   <br /><span class="error"><?php echo $commentError;?></span> 
  <?php } ?>
  </div>
                        
  <button name="submit" type="submit" class="subbutton">Send us Mail!</button>
  <input type="hidden" name="submitted" id="submitted" value="true" />
 </form>   
</div>
    
<?php } ?>
</div>
</div><!-- End #contact -->

您可能已经注意到，在起始表格之后有另一个条件块 。这将检查名为$hasError的变量，并在确认后显示错误消息。仅当在浏览器中禁用JavaScript从而不会产生动态错误时， 才使用此后备方法。

一直到我们可以找到要检查的单个PHP变量 。这些语句用于规范是否只提交了部分数据就提交了表单。这是另一个回退系统，它显示已填写的字段的内容–这是获得正确用户体验的一个好技巧！

表单完成后，便是我们编写的几个jQuery函数 。我们将首先讨论这些内容，因为它们是pageload的默认实现。但是，如果浏览器不接受JavaScript，则默认情况下，我们可以依赖我们PHP代码。

开启jQuery

开始讨论该主题的最简单方法是直接深入研究。我将逐行细分各个块，以便您可以查看脚本实际检查的内容。

但是，如果您迷路了，只需查看项目代码文件 。所有完整的块均已预先编写，并在jQuery网站上有详细记录。首先，我们打开与其他代码相似的代码：

<script type="text/javascript">
<!--//--><![CDATA[//><!--
$(document).ready(function() {
 $('form#contact-us').submit(function() {

前几行检查特定事件的发生 。在用CDATA注释将代码隐藏在较旧的，有缺陷的浏览器中之后，我们开始检查就绪事件。

第一位检查文档是否已完全加载并准备好进行操作 。这是一种经典技术，也是开始编写jQuery项目的最简单方法。

进入内部后，我们正在检查ID为“ contact-us ”下的表单元素，我们想知道何时提交 。这样做之后，我们调用另一个函数以在成功显示错误消息或slideUp() 。

$('form#contact-us .error').remove();
var hasError = false;
$('.requiredField').each(function() {
    if($.trim($(this).val()) == '') {
        var labelText = $(this).prev('label').text();
        $(this).parent().append('<span class="error">Your forgot to enter your '+labelText+'.</span>');
        $(this).addClass('inputError');
        hasError = true;
    } else if($(this).hasClass('email')) {
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        if(!emailReg.test($.trim($(this).val()))) {
            var labelText = $(this).prev('label').text();
            $(this).parent().append('<span class="error">Sorry! You\'ve entered an invalid '+labelText+'.</span>');
            $(this).addClass('inputError');
            hasError = true;
        }
    }
});

首先，我们删除所有先前存在的错误，这样我们就不会保留以前的任何先前的消息。几行之后，我们可以看到“ requiredField ”类下所有元素的选择器。这些是我们所有必填的字段元素-name ， e-mail和message 。

jQuery将获取每个字段的值，并从该值中删除所有空格。如果内容等于空，那么我们会在该字段旁边显示一条错误消息， 警告用户填写一些值 。在我们逻辑的结尾之前，有一些正则表达式代码可以验证电子邮件值。

最后，我们可以查看是否未设置错误并检查完整的输入内容。如果是这种情况，我们将调用一个名为post()的jQuery方法 。这将提交我们的表格，并在PHP代码中检查是否有任何错误。假设未找到任何动画，则会调用slideUp()动画来隐藏我们的联系表单并显示“ 成功！ “ 信息。

if(!hasError) {
 var formInput = $(this).serialize();
 $.post($(this).attr('action'),formInput, function(data){
 $('form#contact-us').slideUp("fast", function() {       
  $(this).before('<p class="tick"><strong>Thanks!</strong> Your email has been delivered. Huzzah!</p>');
  });
 });
 }
   
 return false; 
});
});
//-->!]]>
</script>

如果您熟悉回调，则可能会注意到post()函数具有一组内置参数。回调是较小的函数，它们是在另一个函数的数据响应后调用的 。

因此，例如，当我们的jQuery.post()函数成功拍摄一封电子邮件时，它将调用其自己的内部函数来显示滑动动画。所有这些代码都可以编写在自己的块中，然后移到其他位置。但是，出于本教程的考虑，将回调作为内联函数编写要容易得多。

超越我们PHP

最后要提到的障碍是我们PHP处理器背后的逻辑。这是一个后端系统，实际上将调用邮件功能并发送消息 。以下示例中使用的所有代码都可以直接在我们的主.php文件顶部找到， 而不需要任何HTML输出。

还有一些内部样式可以刷新页面。这里没有什么特别新的东西，因此我们将不讨论任何细节。但是， styles.css文档包含在项目代码中，并且包含基本CSS3技术。

<?php 
//If the form is submitted
if(isset($_POST['submitted'])) {

首先，我们打开PHP子句并检查表单是否已提交 。 POST变量“ submitted ”实际上是在表单末尾添加的隐藏输入字段。这是检查用户是否已提交任何内容的有用方法，因此我们不会浪费服务器资源。

此后，我们有3个单独的if / else语句检查以查看是否已填写每个输入字段 。由于它们本质上都是非常重复的，因此在这里我不会包括每一个逻辑。但是，为了给您一个简短的示例，我在下面添加了电子邮件验证子句：

// need valid email
if(trim($_POST['email']) === '')  {
 $emailError = 'Forgot to enter in your e-mail address.';
 $hasError = true;
} else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
 $emailError = 'You entered an invalid email address.';
 $hasError = true;
} else {
 $email = trim($_POST['email']);
}

PHP将根据值修剪所有空格，并检查是否还有剩余。如果是这样，我们有一个详细的正则表达式（Regex），以查看我们用户的输入字符串是否与电子邮件模式匹配。

您当然不需要了解preg_match()如何构建此脚本。它是确定成功数据类型的规则和要求的有用功能，但可以真正掌握高级编程知识。在这种情况下，我们确保用户仅输入选择的几个字符，包括@符号，后跟2-4个代表顶级域的 字符。

在所有逻辑通过之后，我们没有返回任何错误，现在该发送信息了！这部分代码将设置各个变量，以自定义我们的电子邮件并为该过程设置一些邮件头 。

// upon no failure errors let's email now!
 if(!isset($hasError)) {
  $emailTo = 'youremailhere@googlemail.com';
  $subject = 'Submitted message from '.$name;
  $sendCopy = trim($_POST['sendCopy']);
  $body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
  $headers = 'From: ' .' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

  mail($emailTo, $subject, $body, $headers);
        
        // set our boolean completion value to TRUE
  $emailSent = true;
 }

如果您想知道代码将如何计算您的电子邮件地址，这是需要填写的部分。我们集合中的第一个变量标题为$emailTo ，应包含将要接收的任何电子邮件地址消息。

在$body变量内，我们利用\n分隔符在消息中添加新行。这样会在发件人的姓名 ， 电子邮件地址中添加一些小的位置，然后在其消息内容处添加一个分隔符。当然，您可以花一些时间来修饰显示器，但是这种结构可以正常工作。

结论

这将关闭本教程的高级联系表。如果您想相对于我的元素设置样式，可以在项目代码中查看我的示例styles.css 。但是，页面的结构足够好，您可以非常轻松地设计自己的外观。

随意下载源代码，并仔细研究一下我所做的事情。遵循教程是件好事，但是直接访问项目源代码可能非常宝贵。我还提供了一个简短的样式表，使定制变得轻而易举，谢谢您的看法！

翻译自: https://www.hongkiat.com/blog/ajax-html5-css3-contact-form-tutorial/