图书订单表格模板

2025年6月14日 | 阅读6分钟

在本篇文章中，我们将借助 HTML、CSS 和 JavaScript 创建一个图书订单表单模板。通过一些 Web 技术，我们将学习这个概念的一些基础知识和一些图书订单表单模板的示例。

图书订单表单模板是什么意思？

图书订单表是客户填写他们希望订购的产品或服务的详细信息的印刷表格。这种表格主要用于电子商务网站，用于在线订购产品。例如，在线购买、在线房间预订、在线食品订单等。

让我们看一些图书订单表单模板的例子。

示例 1

<! DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">  
<meta charset="UTF-8">  
<title> Book Order Form template Example </title>   
 </head>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
body {
  font-family: 'Roboto Condensed', sans-serif;
  color: #262626;
  margin: 5% 0;
}
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 1200px)
{
  .container {
    max-width: 1140px;
  }
}
.d-flex {
  display: flex;
  flex-direction: row;
  background: #f6f6f6;
  border-radius: 0 0 5px 5px;
  padding: 25px;
}
form {
  flex: 4;
}
.Yorder {
  flex: 2;
}
.title {
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #5195A8), color-stop(100, #70EAFF));
  background: -moz-linear-gradient(top left, #5195A8 0%, #70EAFF 100%);
  background: -ms-linear-gradient(top left, #5195A8 0%, #70EAFF 100%);
  background: -o-linear-gradient(top left, #5195A8 0%, #70EAFF 100%);
  background: linear-gradient(to bottom right, #5195A8 0%, #70EAFF 100%);
  border-radius: 5px 5px 0 0 ;
  padding: 20px;
  color: #f6f6f6;
}
h2 {
  margin: 0;
  padding-left: 15px; 
}
.required {
  color: red;
}
label {
  display: block;
  margin: 15px;
}
table {
  display: block;
  margin: 15px;
}
label>span {
  float: left;
  width: 25%;
  margin-top: 12px;
  padding-right: 10px;
}
input[type="email"]
{
  width: 70%;
  height: 30px;
  padding: 5px 10px;
  margin-bottom: 10px;
  border: 1px solid #dadada;
  color: #888;
}
select
{
  width: 70%;
  height: 30px;
  padding: 5px 10px;
  margin-bottom: 10px;
  border: 1px solid #dadada;
  color: #888;
}
input[type="text"] {
  width: 70%;
  height: 30px;
  padding: 5px 10px;
  margin-bottom: 10px;
  border: 1px solid #dadada;
  color: #888;
}
input[type="tel"] 
{
  width: 70%;
  height: 30px;
  padding: 5px 10px;
  margin-bottom: 10px;
  border: 1px solid #dadada;
  color: #888;
}
select {
  width: 72%;
  height: 45px;
  padding: 5px 10px;
  margin-bottom: 10px;
}
.Yorder {
  margin-top: 15px;
  height: 600px;
  padding: 20px;
  border: 1px solid #dadada;
}
table {
  margin: 0;
  padding: 0;
}
th {
  border-bottom: 1px solid #dadada;
  padding: 10px 0;
}
tr>td:nth-child(1) {
  text-align: left;
  color: #2d2d2a;
}
tr>td:nth-child(2) {
  text-align: right;
  color: #52ad9c;
}
td {
  border-bottom: 1px solid #dadada;
  padding: 25px 25px 25px 0;
}
p {
  display: block;
  color: #888;
  margin: 0;
  padding-left: 25px;
}
.Yorder>div {
  padding: 15px 0; 
}
button {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: none;
  border-radius: 30px;
  background: #52ad9c;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
}
button:hover {
  cursor: pointer;
  background: #428a7d;
}
</style>
<body>
<div class="container">
  <div class="title">
      <h2> Book Order Form template Example </h2>
  </div>
<div class="d-flex">
  <form action="" method="">
    <label>
      <span class="fname"> First Name <span class="required"> * </span></span>
      <input type="text" name="fname">
    </label>
    <label>
      <span class="lname"> Last Name <span class="required"> * </span> </span>
      <input type="text" name="lname">
    </label>
    <label>
      <span> Company Name </span>
      <input type="text" name="cn">
    </label>
    <label>
      <span>Country <span class="required">*</span></span>
      <select name="selection">
        <option value="select"> Select a country... </option>
        <option value="AFG">Afghanistan</option>
        <option value="ALA">?land Islands</option>
        <option value="ALB">Albania</option>
        <option value="DZA">Algeria</option>
        <option value="ASM">American Samoa</option>
        <option value="AND">Andorra</option>
        <option value="BOL">Bolivia</option>
        <option value="BES">Bonaire</option>
        <option value="BIH">Bosnia</option>
        <option value="BWA">Botswana</option>
        <option value="BVT">Bouvet Island</option>
        <option value="BRA">Brazil</option>
        <option value="CUB">Cuba</option>
        <option value="CUW">Cura?ao</option>
        <option value="CYP">Cyprus</option>
        <option value="CZE">Czech Republic</option>
        <option value="EST">Estonia</option>
        <option value="ETH">Ethiopia</option>
        <option value="FLK">Falkland Islands (Malvinas)</option>
        <option value="LTU">Lithuania</option>
        <option value="LUX">Luxembourg</option>
        <option value="MAC">Macao</option>
        <option value="MKD">Macedonia, the former Yugoslav Republic of</option>
        <option value="MDG">Madagascar</option>
        <option value="MCO">Monaco</option>
        <option value="MNG">Mongolia</option>
        <option value="MNE">Montenegro</option>
        <option value="MSR">Montserrat</option>
        <option value="MAR">Morocco</option>
        <option value="NPL">Nepal</option>
        <option value="BLM">Saint Barth?lemy</option>
        <option value="SHN">Saint Helena, Ascension and Tristan da Cunha</option>
        <option value="KNA">Saint Kitts and Nevis</option>
        <option value="LCA">Saint Lucia</option>
        <option value="MAF">Saint Martin (French part)</option>
        <option value="SPM">Saint Pierre and Miquelon</option>
        <option value="VCT">Saint Vincent and the Grenadines</option>
        <option value="VNM">Viet Nam</option>
        <option value="VGB">Virgin Islands, British</option>
        <option value="VIR">Virgin Islands, U.S.</option>
        <option value="WLF">Wallis and Futuna</option>
        <option value="ESH">Western Sahara</option>
        <option value="YEM">Yemen</option>
        <option value="ZMB">Zambia</option>
        <option value="ZWE">Zimbabwe</option>
      </select>
    </label>
    <label>
      <span> Address <span class="required"> * </span></span>
      <input type="text" name="houseadd" placeholder="House number and street name" required>
    </label>
    <label>
      <span>�</span>
      <input type="text" name="apartment" placeholder="Apartment, suite, unit etc. (optional)">
    </label>
    <label>
      <span> Town / City <span class="required">*</span></span>
      <input type="text" name="city"> 
    </label>
    <label>
      <span> State / County <span class="required">*</span></span>
      <input type="text" name="city"> 
    </label>
    <label>
      <span> Postcode / ZIP <span class="required">*</span></span>
      <input type="text" name="city"> 
    </label>
    <label>
      <span> Phone Number <span class="required">*</span></span>
      <input type="tel" name="city"> 
    </label>
    <label>
      <span> Email Address <span class="required">*</span></span>
      <input type="email" name="city"> 
    </label>
  </form>
  <div class="Yorder">
    <table>
      <tr>
        <th colspan="2"> Your order </th>
      </tr>
      <tr>
        <td> Product Name x 2(Qty) </td>
        <td> $8.00 </td>
      </tr>
      <tr>
        <td> Subtotal </td>
        <td> $8.00 </td>
      </tr>
      <tr>
        <td> Shipping </td>
        <td> Free shipping </td>
      </tr>
    </table><br>
    <div>
      <input type="radio" name="dbt" value="dbt" checked> Direct Bank Transfer
    </div>
    <p>
        Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order will not be shipped until the funds have cleared in our account.
    </p>
    <div>
      <input type="radio" name="dbt" value="cd"> Cash on Delivery
    </div>
    <div>
      <input type="radio" name="dbt" value="cd"> Paypal <span>
      </span>
    </div>
    <button type="button"> Place Order </button>
  </div>
 </div>
</div>
</body>
</html>

说明

在上面的例子中，我们创建了一个产品订单表单。当用户在线订购产品时，他们的必要信息会存储在此表单中，然后产品将被预订。

输出

下图显示了该示例的输出

示例 2

<! DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">  
<meta charset="UTF-8">  
<title> Online Room Book Form template Example </title>   
 </head>
<style>
body {
  width: 500px;
  margin: 0 auto;
  padding: 50px;
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
div.elem-group {
  margin: 10px 0;
}
div.elem-group.inlined {
  width: 49%;
  display: inline-block;
  float: left;
  margin-left: 1%;
}
label {
  display: block;
  font-family: 'Nanum Gothic';
  padding-bottom: 8px;
  font-size: 1em;
}
input {
  border-radius: 2px;
  border: 2px solid #777;
  box-sizing: border-box;
  font-size: 1em;
  font-family: 'Nanum Gothic';
  width: 100%;
  padding: 10px;
}
select {
  border-radius: 2px;
  border: 2px solid #777;
  box-sizing: border-box;
  font-size: 1.25em;
  font-family: 'Nanum Gothic';
  width: 100%;
  padding: 8px;
}
textarea {
  border-radius: 2px;
  border: 2px solid #777;
  box-sizing: border-box;
  font-size: 1em;
  font-family: 'Nanum Gothic';
  width: 100%;
  padding: 8px;
}
div.elem-group.inlined input {
  width: 95%;
  display: inline-block;
}
h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
}
textarea {
  height: 250px;
}
h2 {
 font-style: italic;
font-family: "Playfair Display","Bookman",serif;
 color: #999; 
letter-spacing: -0.005em; 
word-spacing: 1px;
font-size: 1.75em;
font-weight: bold;
  }
hr {
  border: 1px dotted #ccc;
}
button {
  height: 50px;
  background: orange;
  border: none;
  color: white;
  font-size: 1.25em;
  font-family: 'Nanum Gothic';
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  border: 2px solid black;
}
</style>
<body>
 <h2> Online Room Book Form template Example </h2> 
<form action="#" method="post">
  <div class="elem-group">
    <label for="name"> Enter Your Name </label>
    <input type="text" id="name" name="visitor_name" placeholder="Rama Dev" pattern= [A-Z\sa-z]{3,20} required>
  </div>
  <div class="elem-group">
    <label for="email"> Enter Your E-mail </label>
    <input type="email" id="email" name="visitor_email" placeholder="RamaDev@email.com" required>
  </div>
  <div class="elem-group">
    <label for="phone"> Enter Your Phone Number </label>
    <input type="tel" id="phone" name="visitor_phone" placeholder="498-348-3872" pattern=(\d{3})-?\s?(\d{3})-?\s?(\d{4}) required>
  </div>
  <hr>
  <div class="elem-group inlined">
    <label for="adult"> Adults </label>
    <input type="number" id="adult" name="total_adults" placeholder="2" min="1" required>
  </div>
  <div class="elem-group inlined">
    <label for="child"> Children </label>
    <input type="number" id="child" name="total_children" placeholder="2" min="0" required>
  </div>
  <div class="elem-group inlined">
    <label for="checkin-date"> Check-in Date </label>
    <input type="date" id="checkin-date" name="checkin" required>
  </div>
  <div class="elem-group inlined">
    <label for="checkout-date"> Check-out Date </label>
    <input type="date" id="checkout-date" name="checkout" required>
  </div>
  <div class="elem-group">
    <label for="room-selection"> Select Room Preference </label>
    <select id="room-selection" name="room_preference" required>
        <option value=""> Choose a Room from the List </option>
        <option value="connecting"> Connecting </option>
        <option value="adjoining"> Adjoining </option>
        <option value="adjacent"> Adjacent </option>
    </select>
  </div>
  <hr>
  <div class="elem-group">
    <label for="message"> Message </label>
    <textarea id="message" name="visitor_message" placeholder="Tell us anything else that might be important." required> </textarea>
  </div>
  <button type="submit"> Book the Rooms </button>
</form>
<script>
var currentDateTime = new Date();
var year = currentDateTime.getFullYear();
var month = (currentDateTime.getMonth() + 1);
var date = (currentDateTime.getDate() + 1);
if(date < 10) {
  date = '0' + date;
}
if(month < 10) {
  month = '0' + month;
}
var dateTomorrow = year + "-" + month + "-" + date;
var checkinElem = document.querySelector("#checkin-date");
var checkoutElem = document.querySelector("#checkout-date");
checkinElem.setAttribute("min", dateTomorrow);
checkinElem.onchange = function () {
    checkoutElem.setAttribute("min", this.value);
}
</script>
</body>
</html>

说明

在上面的例子中，我们创建了一个在线房间预订表单模板。用户可以在其中根据自己的喜好选择房间，必要信息会存储在此表单中，然后房间将被预订。

输出

下图显示了该示例的输出

下一主题稀释性证券与股份

图书订单表格模板

图书订单表单模板是什么意思？

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

博客

图书订单表格模板

图书订单表单模板是什么意思？

示例 1

示例 2

相关帖子

数据库 Excel 模板

英国在印度的经济政策

一兆字节有多少兆比特

Firefox 在 Windows 上的安装

什么是 Docker Volume

太比特

信息技术的优缺点

爪哇咖啡

爪哇岛

Torch Auto grad Variable

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器