<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<style>
*{
margin: 0%;
}
nav{
height: 60px;
width: 100%;
background-color: rgb(233, 72, 152);
color: white;
display: flex;
justify-content: center;
align-items: center;
background-attachment: fixed;
}
body{
background-image:
url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_640.jpg");
background-repeat: no-repeat;
background-size: 100% 100vh;
background-attachment: fixed;
}
div{
width: 100%;
height: 40vh;
background-image:
url("https://cdn.pixabay.com/photo/2020/12/29/16/22/flamingos-5870957_640.jpg");
background-repeat: no-repeat;
background-size: 100% 50vh;
}
font{
font-size: xx-large;
font-family: 'Times New Roman', Times, serif;
font-weight: 200;
color: rgb(17, 194, 248);
}
</style>
<body>
<div>login page</div>
<center>
<font >
<nav>
welcome to login page
</nav>
<form action="" autocomplete="on">
<br>
<legend>FORM</legend>
<table>
<tr>
<td>
<label for="user">Username</label>
</td>
<td>
<input type="text" id="user" placeholder="Enter the Username" required>
</td>
</tr>
<br>
<tr>
<td>
<label for="pass">Password</label>
</td>
<td>
<input type="password" id="pass" placeholder="Enter the Password"
required colo >
</td>
</tr>
<tr>
<td>
<label for="mail">E-mail</label>
</td>
<td>
<input type="email" id="mail" placeholder="Enter the Email-id"
required>
</td>
</tr>
<tr>
<td>
<label for="">Number</label>
</td>
<td>
<input type="number" placeholder="enter the number">
</td>
</tr>
<tr>
<td>
<label for="">DOB</label>
</td>
<td>
<input type="date">
</td>
</tr>
<tr>
<td>
<label for="">interest</label>
</td>
<td>
<select name="" id="">
<option value=""></option>
<option value="basketball">basketball</option>
<option value="dance" >dance</option>
<option value="singing" >singing</option>
<option value="travelling" selected >travelling</option>
<option value="reading books">reading books</option>
</select>
</td>
</tr>
<tr>
<td>
<button>Submit</button>
</td>
<td>
<button type="reset">Cancel</button>
</td>
</tr>
</table>
</fieldset>
</form>
</font>
</center>
</head>
</body>
</html>
