initial form dev

gitsocko · Mar 13, 2024 · a38836d · a38836d
1 parent d035e54
commit a38836d
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 4 deletions.
diff --git a/asset/css/style.css b/asset/css/style.css
diff --git a/asset/css/style.css.map b/asset/css/style.css.map
diff --git a/asset/less/style.less b/asset/less/style.less
@@ -14,6 +14,59 @@ body {
 	color: #ddd;
 	margin:21px;
 
+	&#body009 {
+		form>div {
+			margin-bottom:7px;
+		}
+		input, textarea {
+			font-size: 100%;
+			padding:3px;
+		}
+		input:not([type=submit]),textarea {
+			width:231px;
+		}
+		input[type=submit] {
+			border:none;
+			background:white;
+			padding:7px 14px;
+			&:hover {
+				background-color:gray;
+				cursor:pointer;
+			}
+		}
+		label {
+			display: inline-block;
+			padding:5px 7px 5px 0;
+			text-align: right;
+			vertical-align: top;
+			width:182px;
+		}
+		textarea {
+			border:none;
+			height:56px;
+			margin-bottom:-3px;
+		}
+		.backoff label {
+			margin-top:-3px;
+		}
+		.radioGroup {
+			display: inline-block;
+			&>div {
+				position:relative;
+				label {
+					margin-left: 21px;
+					text-align: left;
+				}
+				input {
+					margin-top: 3px;
+					padding:3px;
+					position: absolute;
+					top:4px;
+					width:14px;
+				}
+			}
+		}
+	}
 	&#body007, &#body008 {
 		img {
 			&#iBeans, &#iDrink, &#iLogo {

diff --git a/exercise/009.html b/exercise/009.html
@@ -6,11 +6,71 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<link rel="stylesheet" href="../asset/css/style.css">
   </head>
-  <body>
+  <body id="body009">
 		<div><a href="../index.html">&lt; Home</a></div>
 		<div>
-			<h1>Exercise 9</h1>
-
+			<h1>Old-Time Computer Museum</h1>
+			<h2>Make a Pledge</h2>
+			<form action="?act=submit" method="GET">
+				<div>
+					<label for="fName">Your Full Name</label>
+					<input type="text" id="fName" name="fName">
+				</div>
+				<div class="backoff">
+					<label for="fAdStr">Street Address</label>
+					<textarea name="fAdStr" id="fAdStr"></textarea>
+				</div>
+				<div>
+					<label for="fAdCity">City</label>
+					<input type="text" id="fAdCity" name="fAdCity">
+				</div>
+				<div>
+					<label for="fAdSt">State</label>
+					<input type="text" id="fAdSt" name="fAdSt">
+				</div>
+				<div>
+					<label for="fAdZip">Zip Code</label>
+					<input type="text" id="fAdZip" name="fAdZip">
+				</div>
+				<div>
+					<label for="fPhone">Phone Number</label>
+					<input type="text" id="fPhone" name="fPhone">
+				</div>
+				<div>
+					<label for="fEmail">Email Address</label>
+					<input type="text" id="fEmail" name="fEmail">
+				</div>
+				<div>
+					<label for="fLvl">Donation Level</label>
+					<span class="radioGroup">
+						<div>
+							<input type="radio" name="fLvl" id="fLvlA" value="20">
+							<label for="fLvlA">Student (&dollar;20)</label>
+						</div>
+						<div>
+							<input type="radio" name="fLvl" id="fLvlB" value="45">
+							<label for="">Individual (&dollar;45)</label>
+						</div>
+						<div>
+							<input type="radio" name="fLvl" id="fLvlC" value="60">
+							<label>Family (&dollar;60)</label>
+						</div>
+						<div>
+							<input type="radio" name="fLvl" id="fLvlD" value="250">
+							<label for="fLvlD">Patron (&dollar;250)</label>
+						</div>
+						<div>
+							<input type="radio" name="fLvl" id="fLvlE" value="750">
+							<label for="fLvlE">Benefactor (&dollar;750)</label>
+						</div>
+					</span>
+				</div>
+				<div>
+					<label for="fFor">Honoree / In Memory of</label>
+					<input type="text" id="fFor" name="fFor" placeholder="Honoree / Decedent Full Name">
+				</div>
+				<input type="submit" value="Submit">
+			</form>
 		</div>
 	</body>
 </html>