Fix HTML doctype casing and add CSS styles for form layout

Author: AkliluMihtsun

Form-Controls/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

Form-Controls/style.css

@@ -0,0 +1,79 @@
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f2f2f2;
+  margin: 0;
+}
+
+header {
+  background-color: #333;
+  color: white;
+  text-align: center;
+  padding: 20px;
+}
+
+header h1 {
+  margin: 0;
+}
+
+main {
+  max-width: 600px;
+  margin: 30px auto;
+  padding: 0 20px;
+}
+
+fieldset {
+  background-color: white;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+legend {
+  font-weight: bold;
+  padding: 0 20px;
+}
+
+fieldset p {
+  margin-bottom: 15px;
+}
+
+input[type="text"],
+input[type="email"] {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  margin-top: 6px;
+  border: 1px solid #bbb;
+  border-radius: 5px;
+}
+
+select {
+  display: block;
+  margin-top: 6px;
+  padding: 10px;
+  border: 1px solid #bbb;
+  border-radius: 5px;
+}
+
+input[type="submit"] {
+  background-color: #bbb;
+  color: black;
+  font-weight: bold;
+  padding: 10px 20px;
+  border-radius: 5px;
+}
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="radio"]:focus,
+input[type="submit"]:focus,
+select:focus {
+  outline: 3px solid black;
+}
+
+footer {
+  font-weight: bold;
+  padding: 10px 20px;
+  margin-top: 6px;
+}