Form Design in HTML CSS
Form Design in HTML CSS normally used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button. If the data entered by a client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information. This was really a lengthy process which used to put a lot of burden on the server.
JavaScript provides a way to validate form’s data on the client’s computer before sending it to the web server. Form validation generally performs two functions.
- Basic Validation − First of all, the form must be checked to make sure all the mandatory fields are filled in. It would require just a loop through each field in the form and check for data.
- Data Format Validation − Secondly, the data that is entered must be checked for correct form and value. Your code must include appropriate logic to test correctness of data.
<!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">
<title>taj Hotel</title>
<!--ion-icon script file link-->
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<!--main css file link-->
<link rel="stylesheet" href="form.css">
</head>
<body>
<section class="header" id="header">
<nav class="navbar" id="navbar">
<div class="logo">
<h1>taj hotel</h1>
</div>
<div class="link" id="link">
<a href="#home">home</a>
<a href="#layout">layout</a>
<a href="#features">features</a>
<a href="#elements">elements</a>
<a href="#pages">pages</a>
<a href="#portfolio">portfolio</a>
<a href="#blog">blog</a>
<a href="#shop">shop</a>
</div>
<div class="icon">
<ion-icon name="search-outline"></ion-icon>
<ion-icon name="globe-outline"></ion-icon>
<ion-icon name="menu-outline" id="menu-btn" onclick="openmenu()"></ion-icon>
<ion-icon name="close-outline" id="close" onclick="closemenu()"></ion-icon>
</div>
</nav>
<div class="header_content">
<div class="heading">
<h1>5 star Hotel Wonderful Feelings</h1>
</div>
<div class="form">
<form id="myForm">
<div>
<label>Check in</label><br>
<input type="date">
</div>
<div>
<label>Check out</label><br>
<input type="date">
</div>
<br>
<div>
<label>Adults</label><br>
<input type="number">
</div>
<div>
<label>Children</label><br>
<input type="number">
</div><br>
<div>
<label for="type">Room type</label><br>
<select id="type">
<option>Select room type</option>
<option>Simgle Room</option>
<option>Double Room</option>
<option>King Double Room</option>
</select>
</div><br>
<center><button type="submit"onclick="myFunction()"value="Reset form"id="myBtn">submit</button></center>
</form>
</div>
</div>
</section>
<!--================================javascript start============================-->
<script>
let menu = document.getElementById('link')
let open = document.getElementById('menu-btn')
let close = document.getElementById('close')
let color = document.getElementById('navbar')
function openmenu() {
menu.style.top = "100%";
open.style.display = "none";
close.style.display = "inline-block"
color.style.background = "#1d3557"
color.style.transition = "1s"
}
function closemenu() {
menu.style.top = "-1100%";
open.style.display = "inline-block";
close.style.display = "none";
color.style.background = "none"
}
var scrollTrigger = 100;
let nav = document.getElementById('navbar');
</script>
<script>
var scrollTrigger = 100;
let nava = document.getElementById('navbar');
let mybutton = document.getElementById("myBtn");
let heading3 = document.getElementById("head");
window.onscroll = function () {
// We add pageYOffset for compatibility with IE.
if (window.scrollY >= scrollTrigger) {
nava.style.background = "#1d3557";
nava.style.zIndex = "999999";
nava.style.boxShadow = "0px 0px 10px black";
} else {
nava.style.background = "none";
nava.style.zIndex = "999999";
nava.style.boxShadow = "none";
}
};
</script>
<!--================================javascript end============================-->
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
/*font-family: 'Roboto', sans-serif;*/
:root{
--main-color:#1d3557;
--main-color2:rgba(29, 53, 87, 0.829);
}
*{
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
transition: .3s linear;
}
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 9rem;
scroll-behavior: smooth;
}
html::-webkit-scrollbar {
width: .8rem;
}
html::-webkit-scrollbar-track {
background: transparent;
}
html::-webkit-scrollbar-thumb {
background: var(--main-color);
border-radius: 4rem;
}
.header{
width: 100%;
height: 100vh;
padding: 0 5%;
background-image: url(background1.jpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: changeImages 10s ease-in-out infinite;
position: relative;
}
.header::before{
content: " ";
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;right: 0;
left: 0;bottom: 0;
}
@keyframes changeImages {
25% {
background-image: url(background2.jpeg);
}
50% {
background-image: url(background3.png);
}
75% {
background-image: url(background4.png);
}
100% {
background-image: url(background1.jpeg);
}
}
.navbar{
width: 100%;
padding: 30px 5%;
position: fixed;
top: 0;
right: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar .logo h1{
text-transform: uppercase;
font-family:Baskerville Old Face;
color: #eee;
font-size: 30px;
letter-spacing: 3px;
}
.navbar .link{
position: relative;
left: 150px;
z-index: 99999;
}
.navbar .link a{
color: #eee;
text-decoration: none;
font-family: Arial Rounded MT;
text-transform: uppercase;
padding: 10px 10px;
font-weight: 400;
font-size: 14px;
letter-spacing: 1px;
position: relative;
transition: .5s;
}
.link a::before{
content: " ";
width: 100%;
height: 0%;
position: absolute;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transition: .5s;
z-index: -1;
}
.link a:hover::before{
width: 100%;
height: 100%;
}
.navbar .icon ion-icon{
font-size: 20px;
color: #eee;
padding: 5px;
font-weight: 600;
cursor: pointer;
}
#menu-btn,
#close {
display: none;
}
.header_content{
width: 100%;
height: 90vh;
position: relative;
top: 100px;
display: flex;
align-items: center;
justify-content: space-between;
}
.heading{
width: 50%;
height: 100%;
}
.heading h1{
font-size: 90px;
padding: 70px 0 0 0;
color: #eee;
}
.form{
width: 50%;
height: 80%;
display: flex;
align-items: center;
justify-content: center;
}
.form form{
display: inline-block;
width: 70%;
height: 100%;
padding: 20px 20px 30px 20px;
backdrop-filter: blur(3px);
position: relative;
top: -50px;
border-radius: 10px;
border: 10px solid rgba(0, 0, 0, 0.3);
}
.form form div{
width: 100%;
display: inline-block;
padding: 10px;
}
.form form div label{
color: black;
font-size: 15px;
}
.form form div input{
width: 100%;
padding: 10px;
border-radius: 5px;
background: #eee;
}
.form form div select{
width: 100%;
padding: 10px;
border-radius: 5px;
background: #eee;
}
.form form div select option{
font-size: 15px;
background: #eee;
}
.form form button{
width: 95%;
padding: 10px;
background: var(--main-color);
color: #eee;
text-transform: uppercase;
font-size: 20px;
border-radius: 10px;
}
.form form button:hover{
cursor: pointer;
}
@media only screen and (max-width: 991px) {
#menu-btn {
display: inline-block;
}
#header{
height: 120vh;
}
#navbar{
z-index: 99999;
}
#navbar .link {
position: absolute;
top: -1100%;
left: 0%;
width: 100%;
height: 80vh;
background: var(--main-color2);
padding: 2rem;
transition: 1s;
border-radius:0px 0 200px 0;
overflow: hidden;
z-index: 99999;
}
#navbar .link a {
display: block;
padding: 1.5rem;
margin: 1rem;
font-size: 20px;
text-align: center;
z-index: 99999;
}
#navbar .icon ion-icon{
padding: 20px 10px;
font-size: 30px;
}
.header_content{
display: flex;
align-items: center;
justify-content: center;
}
.heading{
display: none;
}
.form{
width: 80%;
}
.form form{
position: relative;
top: -10px;
}
}
@media only screen and (max-width: 768px) {
html {
font-size: 55%;
}
.header{
padding: 0;
margin: 0;
}
.navbar{
padding: 0;
margin: 0;
}
#menu-btn {
display: inline-block;
}
#navbar{
display: block;
}
#navbar .link {
position: absolute;
top: -1100%;
left: 0%;
width: 100%;
height: 80vh;
background: var(--main-color2);
padding: 2rem;
transition: 1s;
border-radius:0px 0 200px 0;
overflow: hidden;
z-index: 99999;
}
#navbar .link a {
display: block;
padding: 1.5rem;
margin: 1rem;
font-size: 20px;
text-align: center;
z-index: 9999;
}
#navbar .icon{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#navbar .logo{
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
#navbar .logo h1{
z-index: 9999;
padding: 20px 0;
}
#navbar .icon ion-icon{
padding: 20px 10px;
font-size: 30px;
}
/* 768 */
.header_content{
position: relative;
top: 150px;
}
.header_content{
display: flex;
align-items: center;
justify-content: center;
}
.heading{
display: none;
}
.form{
width: 80%;
}
}
@media only screen and (max-width: 591px){
.form{
width: 100%;
}
.form form{
width: 90%;
}
}