<!
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>