<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laboratory 7</title>
<style>
body {
font-family: Calibri, sans-serif;
h1 {
text-align: center;
font-family: Calibri, sans-serif;
form {
border: 1px solid #cccccc;
padding: 16px;
font-size: 14px;
font-weight: bold;
font-family: Calibri, sans-serif;
.inputformat {
width: 100%;
padding: 20px;
display: inline-block;
margin: 8px 0px;
border: 1px solid #cccccc;
}
#signup {
color: white;
padding: 12px;
margin: 8px 0px;
border: none;
width: 50%;
float: left;
background-color: #4caf50;
#clear {
color: white;
padding: 12px;
margin: 8px 0px;
border: none;
width: 50%;
background-color: #f44336;
</style>
</head>
<body>
<h1>Signup Form</h1>
<form action="#">
<input type="text" class="inputformat" placeholder="First name"
required><br>
<input type="text" class="inputformat" placeholder="Middle name"><br>
<input type="text" class="inputformat" placeholder="Last name"
required><br>
<input type="text" class="inputformat" placeholder="Username"
required><br>
<input type="password" class="inputformat" placeholder="Password"
required><br>
<input type="email" class="inputformat" placeholder="Email"
required><br>
<input type="radio" name="sex" value="Male"> Male
<input type="radio" name="sex" value="Female"> Female<br>
<input type="date" class="inputformat" placeholder="Birthday"
required><br>
<select class="inputformat">
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Separated">Separated</option>
<option value="Widowed">Widowed</option>
</select><br>
<input type="submit" id="signup" value="Signup">
<input type="reset" id="clear" value="Clear">
</form>
</body>
</html>