预订表格可以在网站上提供多种用途。您可以使用它们让您的访客预订酒店房间或热门活动的门票。它们还可以用于其他事情，例如与客户预约。
它们是人们简单地向您提供有关他们逗留或访问的所有必要信息并检查特定日期的可用性的好方法。这为您和您的客户节省了很多麻烦。
为什么要使用智能表格？
在我们开始深入探讨该主题之前，我想解释一下为什么我选择智能表单来完成这项任务。
您将在 Smart Forms 的描述页面上注意到的第一件事是它提供了许多功能并允许您创建各种表单。您正在创建的网站很有可能至少需要一些其他不同类型的表格，例如联系表格或评论表格。使用 Smart Forms，您将能够在很短的时间内创建所有这些。
在自定义和功能方面，您还可以获得很多选择。该脚本会定期更新并不断接收新功能。它还提供了大量具有不同形式的入门模板，具有三种独特的样式和配色方案。通过这种方式，您可以确定您创建的任何形式都与您的webp时代的其余部分完美融合。
我们将建造什么
让我们使用智能表单创建预订表单的前端。我们将创建一个表格来预订酒店房间。相同的原则将适用于为活动或任何其他类型的表格创建预订表格。您只需对输入字段进行适当的更改。
这是我们要做的：
入门
解压后下载的. zip文件，你会注意到它已经包含了很多模板，从简单的评论和联系表格到一些多步骤的表格。您可以简单地开始在您的项目中使用这些模板中的任何一个，并在 10 到 15 分钟内完成。
为了帮助您了解所有基础知识，我们将从头开始创建我们的预订表格。
创建预订表格
预订表单页面的标记在开始时应该看起来像这样。
<!DOCTYPE html> <html> <head> <title> Booking Form - XYZ Hotels </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="path/to/css/smart-forms.css"> <link rel="stylesheet" href="path/to/css/font-awesome.min.css"> </head> <body> <!-- OUR BOOKING FORM MARKUP --> </body> </html>
Smart Forms 依靠 Font Awesome 将所有图标添加到表单中，因此您必须加载这两个 CSS 文件。
现在，我们将继续讨论预订表格的内容。Smart Forms 框架将表单分为三个部分：表单标题、表单正文和表单页脚。
顶部的表单标题部分用于以可呈现的方式显示表单标题。对于预订表格，您可以说在线预订房间或在几分钟内进行预订。
表单正文将包含访问者填写的一堆元素。您可以在这里询问任何相关信息，例如***客人的人数和陪同他们的儿童人数。同样，您可以询问他们的逗留期限、联系信息和其他必要的详细信息。
表单页脚部分包含提交或取消表单的按钮。它显着地显示在表格的底部。
添加智能表单样板
这是我们需要在网页正文中添加的表单标记，以显示我们的预订表单。
<div class="smart-wrap"> <div class="smart-forms smart-container wrap-2"> <div class="form-header header-primary"> <h4><i class="fa fa-calendar"></i>Make Room Reservations in Minutes</h4> </div> <form method="post" action="/" id="booking-form"> <div class="form-body"> <!-- OUR FORM ELEMENTS WILL GO HERE --> </div> <div class="form-footer"> <button type="submit" class="button btn-primary">confirm Booking</button> <button type="reset" class="button">Cancel</button> </div> </form> </div> </div>
到目前为止，我们已经添加到页面中的所有标记，您应该会得到类似于下图的内容。
构建表单组件
现在让我们将我们的实际表单元素添加到预订表单中。这是您需要这样做的标记。它将进入div带有 class 的标签内form-body。
<div class="section"> <label for="guestname" class="field-label">Please Enter Your Name</label> <label for="guestname" class="field prepend-icon"> <input type="text" name="guestname" id="guestname" class="gui-input" required="" placeholder="John Doe/Jane Doe"> <span class="field-icon"><i class="fa fa-user"></i></span> </label> </div> <div class="frm-row"> <div class="section colm colm6"> <label for="guestemail" class="field-label">Email Address</label> <label for="guestemail" class="field prepend-icon"> <input type="email" name="guestemail" id="guestemail" class="gui-input" required="" placeholder="john@something.com"> <span class="field-icon"><i class="fa fa-envelope"></i></span> </label> </div> <div class="section colm colm6"> <label for="guestelephone" class="field-label">Telephone / Mobile</label> <label for="guestelephone" class="field prepend-icon"> <input type="text" name="guestelephone" id="guestelephone" class="gui-input" required="" placeholder="Telephone / Moble Number"> <span class="field-icon"><i class="fa fa-phone-square"></i></span> </label> </div> </div> <div class="frm-row"> <div class="section colm colm6"> <label for="adults" class="field-label">Number of Adults</label> <label for="adults" class="field prepend-icon"> <input type="number" id="adults" name="adults" class="gui-input" required="" placeholder="Number of adults"> <span class="field-icon"><i class="fa fa-users"></i></span> </label> </div> <div class="section colm colm6"> <label for="children" class="field-label">Number of Children</label> <label for="children" class="field prepend-icon"> <input type="number" id="children" name="children" class="gui-input" required="" placeholder="Number of children"> <span class="field-icon"><i class="fa fa-users"></i></span> </label> </div> </div> <div class="frm-row"> <div class="section colm colm6"> <label for="checkin" class="field-label">Check-in Date</label> <label for="checkin" class="field prepend-icon"> <input type="text" id="checkin" name="checkin" class="gui-input" required="" placeholder="mm/dd/yyyy"> <span class="field-icon"><i class="fa fa-calendar"></i></span> </label> </div> <div class="section colm colm6"> <label for="checkout" class="field-label">Check-out Date</label> <label for="checkout" class="field prepend-icon"> <input type="text" id="checkout" name="checkout" class="gui-input" required="" placeholder="mm/dd/yyyy"> <span class="field-icon"><i class="fa fa-calendar"></i></span> </label> </div> </div> <div class="spacer-t20 spacer-b30"> <div class="tagline"><span>Please answer these questions for a pleasant stay</span></div> </div> <div class="frm-row"> <div class="option-group field"> <div class="section colm colm6"> <label class="switch"> <input type="checkbox" name="switch1" id="switch1" value="switch1"> <span class="switch-label" data-on="YES" data-off="NO"></span> <span>Will you be bringing a pet?</span> </label> </div> <div class="section colm colm6"> <label class="switch"> <input type="checkbox" name="switch2" id="switch2" value="switch2"> <span class="switch-label" data-on="YES" data-off="NO"></span> <span>Do you need us to pick you up?</span> </label> </div> </div> </div> <div class="section"> <label for="comment" class="field-label">Anything else we should know about?</label> <label for="comment" class="field prepend-icon"> <textarea class="gui-textarea" id="comment" name="comment" placeholder="Let us know about any special accommodation needs"></textarea> <span class="field-icon"><i class="fa fa-comments"></i></span> <span class="input-hint"> <strong>Please:</strong> Be as descriptive as possible </span> </label> </div>
将所有标记添加到表单中后，它现在应该如下图所示。
现在看起来可能有很多代码，但您可以从不同的入门模板中复制其中的大部分。之后，您只需对标记进行少量更改即可对其进行自定义。例如，您可以轻松更改 Font Awesome 图标的类别，以更准确地表示输入字段。
重要的是要记住，在更改表单元素的某些属性时应该小心，因为这会影响表单的整体外观或行为。例如，您可以通过更改colm类来更改不同元素的宽度。当一行中的两个输入元素具有类colm8和colm4时，它们的宽度将是 2:1 的比率。如果数字加起来不等于 12，您还会在该行中看到一些空格。
每当您name在前端更改字段的属性值时，请务必更改后端php文件中的相应值。这样，您就不会丢失用户提供的任何表单数据。
在我们的预订表格中添加验证
Smart Forms 框架依赖于核心 jquery 和许多其他与 jQuery 相关的插件，为您提供不同的功能，例如月份和时间选择器或拖放文件的能力。共有 22 个不同的 javascript 文件可用于增强表单的功能。
确保只包含特定表单工作所需的文件。文档中提到了每个文件的功能。在我们的例子中，我们需要包含核心 jQuery 文件、jQuery UI 文件和表单验证文件。
您只需将以下代码添加到您的网页即可包含所有 JavaScript 文件。您可以将其放置在文档的开头或正文末尾之前。
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.form.min.js"></script> <script type="text/javascript" src="js/jquery-ui-custom.min.js"></script> <script type="text/javascript" src="js/jquery.validate.min.js"></script> <script type="text/javascript" src="js/additional-methods.min.js"></script>
添加文件后，您需要添加一些可以开始验证过程的代码，或者将日期范围选择器等其他元素添加到表单 UI。这是您需要添加的代码。
<script type="text/javascript">
$("#booking-form").validate();
$("#checkin").datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1,
prevText: '<i class="fa fa-chevron-left"></i>',
nextText: '<i class="fa fa-chevron-right"></i>',
onClose: function( selectedDate ) {
$( "#checkout" ).datepicker( "option", "minDate", selectedDate );
}
});
$("#checkout").datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1,
prevText: '<i class="fa fa-chevron-left"></i>',
nextText: '<i class="fa fa-chevron-right"></i>',
onClose: function( selectedDate ) {
$( "#checkin" ).datepicker( "option", "maxDate", selectedDate );
}
});
</script>您必须替换booking-form为您为表单设置的 id，它会自动开始验证字段。下图显示了在您开始验证后错误消息的默认显示方式。
初始化日期选择器时，您可以传递几个选项。他们将确定日历的 UI，例如要显示的月数或应显示日历的日期。例如，设置defaultDate为+100w将在未来 100 周后打开日历。
另一件值得注意的事情是，在您选择了日期后，签入日历会将结帐日历的最短日期设置为所选日期。这是由附加到事件的回调函数完成的。onClose结帐日历做类似的事情，但它设置了签入日历的最大日期。
使用不同的主题
使用 Smart Forms 脚本的优点之一是它允许您通过简单地包含相关主题文件并向不同元素添加适当的 CSS 类来快速更改您创建的任何表单的主题。我将在这里一步一步地解释这个过程。
1. 包含 CSS 主题文件
主题文件位于css/smart-themes目录中。您可以选择其中一个文件并将其包含在预订表格页面中。我们将在这个例子中使用red.css。您添加原始 CSS 文件的 HTML 代码现在应该类似于以下代码段。
<link rel="stylesheet" href="css/smart-forms.css"> <link rel="stylesheet" href="css/smart-themes/red.css"> <link rel="stylesheet" href="css/font-awesome.min.css">
2.添加适当的类
现在重新加载页面不会显示外观或配色方案的任何可见变化。但是，您可以单击日期选择器来查看月份名称现在确实是红色的。这确认 CSS 已正确加载。
您可以通过替换将标题更改为红色
<div class="form-header header-primary">
使用以下 HTML：
<div class="form-header header-red">
theme-red同样，您可以通过在旁边添加类来更改图标表单元素的颜色以及它们何时处于活动状态form-body。这是一个例子：
<div class="form-body theme-red">
btn-red最后，您可以分别使用类、option-red和来更改按钮、选项（复选框和单选按钮）和开关等剩余元素的颜色switch-red。
<button type="submit" class="button btn-red">Confirm Booking</button> <label class="switch switch-red">
添加验证码和验证表单字段
您可以添加更多增强功能，例如带有自定义错误消息的表单验证和基本的 CAPTCHA 保护。所有这些功能都内置在智能表单脚本中。您只需要弄清楚如何将它们集成到您的表单中。希望本节能帮助您更好地理解整个过程。
ajax功能和验证码基于同时使用 PHP 和 JavaScript，因此您需要确保将表单放置在 PHP 页面上。表单中 action 属性的值应该指向一个名为smartprocess.php的文件。
<form method="post" action="php/smartprocess.php" id="booking-form">
您可以通过在您希望 CAPTHCA 出现的任何位置添加以下 HTML 来将 CAPTCHA 添加到表单中。
<div class="section"> <div class="smart-widget sm-left sml-120"> <label class="field"> <input type="text" name="captcha" id="captcha" class="gui-input sfcode" maxlength="6" placeholder="Enter CAPTCHA"> </label> <label class="button captcode"> <img src="php/captcha/captcha.php?<?php echo time();?>" id="captchax" alt="captcha"> <span class="refresh-captcha"><i class="fa fa-refresh"></i></span> </label> </div> </div>
重新加载的表单页面现在应该包含类似于下图的验证码。
您还需要使用以下版本更新表单中的 JavaScript。
jQuery(document).ready(function($){
function reloadCaptcha(){ $("#captchax").attr("src","php/captcha/captcha.php?r=" + Math.random()); }
$('.captcode').click(function(e){
e.preventDefault();
reloadCaptcha();
});
function swapButton(){
var txtswap = $(".form-footer button[type='submit']");
if (txtswap.text() == txtswap.data("btntext-sending")) {
txtswap.text(txtswap.data("btntext-original"));
} else {
txtswap.data("btntext-original", txtswap.text());
txtswap.text(txtswap.data("btntext-sending"));
}
}
/* @custom validation method (smartCaptcha)
------------------------------------------------------------------ */
$.validator.methods.smartCaptcha = function(value, element, param) {
return value == param;
};
$("#booking-form").validate({
errorClass: "state-error",
validClass: "state-success",
errorElement: "em",
onkeyup: false,
onclick: false,
rules: {
guestname: {
required: true,
minlength: 3
},
guestemail: {
required: true,
email: true
},
guestphone: {
required: true
},
adults: {
required: true,
number: true
},
children: {
required: true,
number: true
},
checkin:{
required:true
},
checkout:{
required:true
},
captcha:{
required:true,
remote:'php/captcha/process.php'
}
},
messages:{
guestname: {
required: 'Please enter your name.',
minlength: 'Name must be at least 2 characters.'
},
guestemail: {
required: 'Please enter your email address.',
email: 'Please enter a valid email address.'
},
adults: {
required: 'Please enter the number of adult guests.',
number: 'Please enter a valid number.'
},
children: {
required: 'Confirm the number of child guests.',
number: 'Please enter a valid number.'
},
checkin:{
required: 'Please select a checkin date.'
},
checkout:{
required:'Please select a checkout date.'
},
captcha:{
required: 'You must enter the captcha code',
remote:'Captcha code is incorrect'
}
},
highlight: function(element, errorClass, validClass) {
$(element).closest('.field').addClass(errorClass).removeClass(validClass);
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.field').removeClass(errorClass).addClass(validClass);
},
errorPlacement: function(error, element) {
if (element.is(":radio") || element.is(":checkbox")) {
element.closest('.option-group').after(error);
} else {
error.insertAfter(element.parent());
}
},
submitHandler:function(form) {
$(form).ajaxSubmit({
target:'.result',
beforeSubmit:function(){
swapButton();
$('.form-footer').addClass('progress');
},
error:function(){
swapButton();
$('.form-footer').removeClass('progress');
},
success:function(){
swapButton();
$('.form-footer').removeClass('progress');
$('.alert-success').show().delay(7000).fadeOut();
$('.field').removeClass("state-error, state-success");
if( $('.alert-error').length == 0){
$('#booking-form').resetForm();
reloadCaptcha();
}
}
});
}
});
$("#checkin").datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1,
prevText: '<i class="fa fa-chevron-left"></i>',
nextText: '<i class="fa fa-chevron-right"></i>',
onClose: function( selectedDate ) {
$( "#checkout" ).datepicker( "option", "minDate", selectedDate );
}
});
$("#checkout").datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1,
prevText: '<i class="fa fa-chevron-left"></i>',
nextText: '<i class="fa fa-chevron-right"></i>',
onClose: function( selectedDate ) {
$( "#checkin" ).datepicker( "option", "maxDate", selectedDate );
}
});
});这将负责在未正确填写的表单元素下方显示更多有用的错误消息。表单元素输入被视为有效需要满足的要求列在下面rules，向用户显示的错误消息放置在messages对象内。
下图显示了如果用户尝试提交包含无效字段的表单，错误消息将如何显示。
最后的想法
在本教程中，我们学习了如何使用Smart Forms 脚本创建预订表单。在此过程中，我们介绍了一些基础知识，以帮助您快速入门并创建自己独特的表单。如您所见，使用智能表单创建带有输入验证和其他增强功能的漂亮表单非常容易。
- 添加智能表单样板
- 构建表单组件
- 1. 包含 CSS 主题文件
- 2.添加适当的类
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
