In this blog we will provide the some basic to advance html form design sample which can help you to design html form for your project task.
Admin Login Page
Code to create above form:(adminlogin.html)
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Admin Login Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!--Please Login into your account first -->
<h2>Admin Login Page </h2>
<form action="adminHomePage.html" method="post">
<table border="0" cellpadding="4" cellspacing="4">
<tbody>
<tr>
<td>Username: </td>
<td><input type='text' name='userName' required></td>
</tr>
<tr>
<td>Password: </td>
<td><input type='password' name='passWord'></td>
</tr>
<tr>
<td> <input type ="submit" value="Submit"><input type ="reset" value="Reset"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>adminHomePage.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Admin Homepage</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Homepage </h2>
Welcome Admin,
<p> </p>
<a href="updateAdmin.html">Update Profile </a> <br/>
<a href="changePassword.html">Change Password </a> <br/>
<a href="feedbackResult.html">Feedback Result </a> <br/>
<a href="staffList.html">Staff List</a> <br/>
<a href="deptList.html">Department List</a>
</body>
</html>updateAdmin.html
<html>
<head>
<title> Update Profile </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1> Edit your Details </h1>
<form action='adminHomePage.html' method='POST'>
<br>
<table border="0" cellpadding="4" cellspacing="4">
<tbody>
<tr>
<td>Username: </td>
<td><input type='text' name='username'></td>
</tr>
<tr>
<td>Password: </td>
<td><input type='password' name='password'></td>
</tr>
<tr>
<td>Full Name: </td>
<td><input type='text' name='fullName'></td>
</tr>
<tr>
<td>Email: </td>
<td><input type='text' name='email'></td>
</tr>
<tr>
<td>Phone Number: </td>
<td><input type='text' name='phoneNum'></td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='address'></td>
</tr>
<tr>
<td>Hotel Branch: </td>
<td><select name='Branch'>
<option value='Terengganu'> Terengganu</option>
<option value='Pahang'> Pahang</option>
<option value='Kuala Lumpur'> Kuala Lumpur</option>
<option value='Selangor'>Selangor</option>
</select></td>
</tr>
<tr>
<td><input type ="submit" value="Update"><input type ="reset" value="Delete"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>changePassword.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Change Password</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form action="" method="post">
<table>
<h1>Change Password</h1>
<tr>
<td> UserName</td> <td><input type="text" name="username" ></td>
</tr>
<tr>
<td> Old Password</td> <td><input type="password" name="password"></td>
</tr>
<tr>
<td> New Password</td> <td><input type="password" name="newpass" required=""></td>
</tr>
<tr>
<td> Confirm New Password</td> <td><input type="password" name="confirmPass" required=""></td>
</tr>
<tr>
<td> </td> <td><input type="submit" value="Submit"><input type="reset" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>feedbackResult.html
<!DOCTYPE html>
<html>
<style>
.column {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<head>
<title>Feedback Result</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1> Feedback result </h1>
<div class="row">
<div class="column">
<table border="1" cellpadding="3" cellspacing="0">
<tbody>
<tr>
<th colspan="2"> Q1: Was this your first visit? </th>
</tr>
<tr>
<td> Yes </td>
<td> 10 </td>
<tr>
<td> No </td>
<td> 4 </td>
</tr>
<tr>
<th colspan="2"> Q2: How did you hear about our hotel? </th>
</tr>
<tr>
<td> Magazine </td>
<td> 1 </td>
</tr>
<tr>
<td> Search Engine </td>
<td> 2 </td>
</tr>
<tr>
<td> Media Social </td>
<td> 5 </td>
</tr>
<tr>
<td> Other </td>
<td> 1 </td>
</tr>
<tr>
<th colspan="2"> Q3: How did you make your reservation? </th>
</tr>
<tr>
<td> Travel Agency </td>
<td> 3 </td>
</tr>
<tr>
<td> Website </td>
<td> 5 </td>
</tr>
<tr>
<td> Other </td>
<td> 2 </td>
</tr>
<tr>
<th colspan="2"> Q4: What is your purpose of visit? </th>
</tr>
<tr>
<td> Travel </td>
<td> 3 </td>
</tr>
<tr>
<td> Wedding </td>
<td> 2 </td>
</tr>
<tr>
<td> Business </td>
<td> 1 </td>
</tr>
<tr>
<td> Other </td>
<td> 3 </td>
</tr>
<tr>
<th colspan="2"> Q5: Any other comments or recommendation? </th>
</tr>
<tr>
<td> No of responded</td>
<td> 20 </td>
</tr>
</tbody>
</table>
<p>
<a href="">Home</a>
</p>
</div>
<div class="column">
<table border="1"cellpadding="3" cellspacing="0">
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Front Office Staff</td>
<td>0</td>
<td>0</td>
<td>3</td>
<td>17</td>
</tr>
<tr>
<td>Someone was available to assist with my luggage</td>
<td>0</td>
<td>0</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>Restaurant Staff</td>
<td>0</td>
<td>1</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>Restaurant Food</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>15</td>
</tr>
<tr>
<td>House Keeping</td>
<td>0</td>
<td>0</td>
<td>17</td>
<td>3</td>
</tr>
<tr>
<td>Cleanliness of Room</td>
<td>0</td>
<td>0</td>
<td>13</td>
<td>7</td>
</tr>
<tr>
<td>Spa</td>
<td>0</td>
<td>2</td>
<td>8</td>
<td>10</td>
</tr>
<tr>
<td>Swimming Pool</td>
<td>0</td>
<td>0</td>
<td>13</td>
<td>7</td>
</tr>
<tr>
<td>Business Center</td>
<td>0</td>
<td>0</td>
<td>12</td>
<td>8</td>
</tr>
<tr>
<td>The hotel felt safe</td>
<td>0</td>
<td>0</td>
<td>7</td>
<td>13</td>
</tr>
<tr>
<td>Overall hotel rating</td>
<td>0</td>
<td>0</td>
<td>13</td>
<td>7</td>
</tr>
</tbody>
</table>
<p></p>
Rate:
<p> </p>
4[Excellent]
3[Good]
2[Fair]
1[Poor]
</div>
</div>
</body>
</html>
staffList.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Staff List</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1> Staff List </h1>
<table border="1" cellpadding="3" cellspacing="0">
<tbody>
<tr>
<th colspan='2'> Search: </th> <th colspan='6'><select name='Dept'>
<option value='Management'> Management</option>
<option value='Accounts'> Accounts</option>
<option value='Housekeeping'> Housekeeping</option>
<option value='Information Technology'>Information Technology (IT)</option>
<option value='Kitchen'> Kitchen</option>
</select></th>
</tr>
<tr>
<th colspan='8'> </th>
</tr>
<tr>
<td> </td>
<td> Full Name</td>
<td> Department </td>
<td> Hotel Branch</td>
<td> Email</td>
<td> Phone Number</td>
<td> </td>
</tr>
<tr>
<td> 1 </td>
<td> Siti Shahada binti Shamshuddin </td>
<td> Kitchen </td>
<td> Kuala Lumpur</td>
<td> shahadashamshuddin@gmail.com</td>
<td> 0199052439</td>
<td> <input type="submit" value="Delete" name="Delete" /></td>
</tr>
</tbody>
</table>
<p> </p>
<a href="staffRegister.html"> Add New Staff</a>
</body>
</html>staffRegister.html
<!DOCTYPE html>
<!--
Staff Page
-->
<html>
<head>
<title> Staff Registration </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1> Register new Staff </h1>
<form action='staffList.html' method='POST'>
<br>
<table border="0" cellpadding="4" cellspacing="4">
<tbody>
<tr>
<td>Username: </td>
<td><input type='text' name='username'></td>
</tr>
<tr>
<td>Password: </td>
<td><input type='password' name='password'></td>
</tr>
<tr>
<td>Full Name: </td>
<td><input type='text' name='fullName'></td>
</tr>
<tr>
<td>Email: </td>
<td><input type='text' name='email'></td>
</tr>
<tr>
<td>Phone Number: </td>
<td><input type='text' name='phoneNum'></td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='address'></td>
</tr>
<tr>
<td>Designation: </td>
<td>
<select name='desingation'>
<option value='General Manager'>General Manager </option>
<option value='Housekeeper'> Housekeeper </option>
<option value='Waiter'> Waiter</option>
<option value='HelpDesk'> Help Desk Analyst</option>
</select>
Other: <input type='text' name='OtherDes'>
</td>
</tr>
<tr>
<td>Department: </td>
<td><select name='Dept'>
<option value='Management'> Management</option>
<option value='Accounts'> Accounts</option>
<option value='Housekeeping'> Housekeeping</option>
<option value='Information Technology'>Information Technology (IT)</option>
<option value='Kitchen'> Kitchen</option>
</select></td>
</tr>
<tr>
<td>Hotel Branch: </td>
<td><select name='Branch'>
<option value='Terengganu'> Terengganu</option>
<option value='Pahang'> Pahang</option>
<option value='Kuala Lumpur'> Kuala Lumpur</option>
<option value='Selangor'>Selangor</option>
</select></td>
</tr>
<tr>
<td><input type ="submit" value="Submit"><input type ="reset" value="Reset"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>deptList.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Department List</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1> Department List </h1>
<table border="1" cellspacing="0" cellpadding="3">
<tbody>
<tr>
<th colspan='1'> Search: </th> <th colspan='5'><select name='Dept'>
<option value='Management'> Management</option>
<option value='Accounts'> Accounts</option>
<option value='Housekeeping'> Housekeeping</option>
<option value='Information Technology'>Information Technology (IT)</option>
<option value='Kitchen'> Kitchen</option>
</select></th>
</tr>
<tr>
<th colspan='6'> </th>
</tr>
<tr>
<td> ID</td>
<td> Department Name</td>
<td> Address</td>
<td> Description </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> 1 </td>
<td> Kitchen </td>
<td> Kuala Lumpur</td>
<td> Manage all the things related to the kitchen.</td>
<td> <a href="updateDept.html">Update</a></td>
<td> <input type="submit" value="Delete" name="Delete" /></td>
</tr>
</tbody>
</table>
<p> </p>
<a href="deptAdd.html">Add New Department</a>
</body>
</html>deptAdd.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Add New Department</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1> Register New Department </h1>
<form action='deptList.html' method='POST'>
<br>
<table border="0" cellpadding="4" cellspacing="4">
<tbody>
<tr>
<td>Department Name: </td>
<td><input type='text' name='deptName'></td>
</tr>
<tr>
<td>Address: </td>
<td><input type='password' name='deptAddress'></td>
</tr>
<tr>
<td>Description: </td>
<td><input type='text' name='deptDesc'></td>
</tr>
</tbody>
<tr>
<td><input type ="submit" value="Submit"><input type ="reset" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>
Realcode4you expert team has a deep knowledge in HTML related topics. If you face any issue in html project assignment to deign the html web pages then our expert provide full support to complete your project.
Only you need to send your requirement details at:
Our expert covers all other part which help to design html page like; javascript, ajax, css. Hire us and get instant help with an affordable price,
Comments