Informatics Institute of Technology
Department of Computing
([Link].) in Software Engineering
Module: 4COSC0011C Web Design & Development
Module Leader: Ms. Janani Harischandra
Tutorial NO-06
d Date of Submission -16.11.2019
Student ID-2019100
Student UoW ID - W1761186
Student First Name - Gangezwer
Student Surname - Uthayakumar
1
Contents
Introduction-------------------------------------------------------------------------------------------------------------3
Implementation and output-----------------------------------------------------------------------------------------4
Conclusion----------------------------------------------------------------------------------------------------------------9
References---------------------------------------------------------------------------------------------------------------10
2
INTRODUCTION
*In this part i am going to give an introduction to above tutorial which I did
in the web development [Link] basically in the above tutorial I tried to
create a hotel reservation form with a help of html langague.
*So in this tutorial I learned to insert a bullets in html and learned to put
some new tags like <dt>,<dl>,<dd>.
3
IMPLEMENTATION & OUTPUT
HTML Code (this may include internal/inline css and JavaScript embedded)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hotel Reservation</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h2>Hotel Reservation System</h2>
<form action="#" method="get">
<fieldset>
<legend>Personal Details</legend>
<div class="row">
<div class="col-25">
<label for="fname">
First Name :
</label>
</div>
<div class="col-75">
<input type="text" id="fname"
name="fname" placeholder="gangezwer" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="sname">
Surname :
</label>
</div>
<div class="col-75">
<input type="text" id="sname"
name="sname" placeholder="uthayakumar" required>
</div>
</div>
4
</fieldset>
<fieldset>
<legend>Account Details</legend>
<div class="row">
<div class="col-25">
<label for="email">
Email :
</label>
</div>
<div class="col-75">
<input type="email" id="email"
name="email" placeholder=gangezwer@[Link]" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="upass">Password :
</label>
</div>
<div class="col-75">
<input type="password" id="upass"
name="upass" placeholder="example : ilovemywife1234" required>
</div>
</div>
</fieldset>
<fieldset>
<legend>Room Details</legend>
<div class="row">
<div class="col-25">
<label for="hotel">Hotel : </label>
</div>
<div class="col-75">
<select id="hotel" name="hotel"
required>
<option
value="hotel1">Heritance Kandalama</option>
<option value="hotel2">Aliya
Resort & Spa</option>
<option value="hotel3">Liyya
Water Villas</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="roomtype">Room Type :
</label>
</div>
5
<div class="col-75">
<input type="radio" id="roomtype"
name="roomtype" value="single" checked> Single Room
<input type="radio" id="roomtype"
name="roomtype" value="double"> Double Room
</div>
</div>
<div class="row">
<div class="col-25">
<label for="comments">Any Comments :
</label>
</div>
<div class="col-75">
<textarea id="comments"
name="comments" placeholder="Any comments">
</textarea>
</div>
</div>
</fieldset>
<input type="reset" value="reset">
<input type="submit" value="submit">
</form>
</body>
</html>
CSS of above web page
* {
box-sizing: border-box;
}
html{
background: #FFF;
padding: 2%;
font-family: Arial, Helvetica, sans-serif;
}
h2{
margin-left: 30px;
}
form{
width: 80%;
background-color: #1E90FF;
padding: 20px;
border-radius: 15px;
}
fieldset{
border: 2px solid #fff;
padding: 10px;
border-radius: 15px;
margin-bottom:10px;
}
6
legend{
color: #fff;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
color: #fff;
}
input[type=text], input[type=password], input[type=email], select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
input[type=submit]{
padding:10px;
font-weight: bold;
color: #fff;
background: #1E90FF;
border: 2px solid #fff;
}
input[type=reset]{
padding:10px;
font-weight: bold;
color: #1E90FF;
background: #FFF;
border: 2px solid #1E90FF;
}
input[type=submit]:hover{
background: #004f9c;
}
input[type=reset]:hover{
border: 2px solid #fff;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
7
}
8
CONCLUSION
So from this above tutorial I learned to create a form on the web page with a help of html language .
9
REFERENCES
So to do this work I got references from the website W3 schools.
10
