Scribd
Upload
68 views8 pages

Table Booking Form HTML Template

The document contains an HTML structure for a restaurant booking form, including a navigation header with links to various sections. The form allows users to input details such as date, time, number of guests, name, email, and phone number to book a table. Additionally, there is a CSS stylesheet that styles the layout, navigation, and form elements for both desktop and mobile views.

Uploaded by

Abhishek Tak
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
68 views8 pages

Table Booking Form HTML Template

The document contains an HTML structure for a restaurant booking form, including a navigation header with links to various sections. The form allows users to input details such as date, time, number of guests, name, email, and phone number to book a table. Additionally, there is a CSS stylesheet that styles the layout, navigation, and form elements for both desktop and mobile views.

Uploaded by

Abhishek Tak
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<link rel="stylesheet" href="[Link]" />
<title>Document</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Reservations</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="main">
<form action="[Link]" method="post">
<h2>Book a table</h2>
<div class="form-group">
<label for="date">Date:</label>
<input type="date" id="date" name="date" required
/>
</div>
<div class="form-group">
<label for="time">Time:</label>
<input type="time" id="time" name="time" required
/>
</div>
<div class="form-group">
<label for="guests">Number of guests:</label>
<input
type="number"
id="guests"
name="guests"
min="1"
max="10"
required
/>
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required
/>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email"
required />
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone"
required />
</div>
<button type="submit">Book now</button>
</form>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
overflow: hidden;
}
header {
background-color: #222;
height: 50px;
}

nav ul {
list-style: none;
margin: 0;
padding: 17px;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}

nav li {
margin: 0 1rem;
}

nav a {
color: #fff;
text-decoration: none;
font-size: 1.2rem;
font-weight: bold;
text-transform: uppercase;
padding: 0.5rem;
transition: all 0.3s ease-in-out;
}
nav a:hover {
background-color: #444;
}

@media screen and (max-width: 768px) {


nav ul {
flex-direction: column;
height: auto;
}

nav li {
margin: 0;
text-align: center;
}
}
.main{
height: 100vh;
width: 100vw;
background-image: url('[Link]');
background-repeat: no-repeat;
background-size: cover;
overflow-x: hidden;

}
form{
margin-left: 34%;
margin-top: 2%;
}
form h2{
margin-left: 14%;
color: burlywood;
font-size: 200%;
}

.form-group {
margin-bottom: 1rem;
}

label {
display: block;
font-weight: bold;
margin-bottom: 0.5rem;
color: floralwhite;

input {
padding: 0.5rem;
border-radius: 0.25rem;
border: 1px solid #ccc;
font-size: 1rem;
width: 100%;
max-width: 400px;
}

button {
background-color: #007bff;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
border: none;
font-size: 1rem;
cursor: pointer;
}

button:hover {
background-color: #0069d9;
}

@media screen and (max-width: 480px) {


input {
max-width: 100%;
}
}

Output

You might also like