第二个课程训练完成。

SurveyForm/index.html

@@ -1,12 +1,67 @@
 <style type="text/css">
 	body {
-		background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg30.51tietu.net%2Fpic%2F2016-090107%2F20160901070215elvhx1yovqm145170.jpg&refer=http%3A%2F%2Fimg30.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624704316&t=c902e04ad6a4ca7e1a3200c896bf3a04);
-		color: white;
+		background-color:rgb(23, 110, 145);
+		color:white;
+		font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 	}
 
 	#title-div {
+		width: 800px;
 		margin: auto;
+		text-align: center;
 	}
+
+	#form-div {
+		background-color: hsla(276, 31%, 20%, 0.8);
+		width: 800px;
+		margin: 40px auto 40px auto;
+		padding-top: 40px;
+		border-radius: 4px;
+	}
+
+	form {
+		width: 90%;
+		margin: auto;
+	}
+
+	textarea {
+		width: 100%;
+		height: 200px;
+	}
+
+	.input-text {
+		width: 100%;
+		height: 32px;
+		margin: 2px 0 10px 0 ;
+		border-radius: 2px;
+		font-size: 18px;
+	}
+
+	.input-radio {
+		font-size: 18px;
+		margin-top: 10px;
+	}
+
+	.input-label {
+		font-size: 20px;
+	}
+
+	.div-margin {
+		margin-bottom: 20px;
+	}
+
+	button {
+		background-color: rgb(71, 133, 71);
+		color: aliceblue;
+		height: 40px;
+		width: 90%;
+		border-radius: 2px;
+		font-size: 24px;
+		outline: none;
+		border:none;
+		margin: 5% 20px 5% 20px;
+	}
+
 </style>
 
 <main>
@@ -15,24 +70,52 @@
 		<p id="description">Thank you for taking the time to help us improve the platform</p>
 	</div>
 
-	<form id="survey-form">
-		<label id="name-label" for="name">Name</label><br>
-		<input id="name" type="text" placeholder="Enter your name">
+	<div id="form-div">
+		<form id="survey-form">
+			<div class="div-margin">
+				<label id="name-label" class="input-label" for="name">Name</label><br>
+				<input id="name" class="input-text" type="text" placeholder="Enter your name" required><br>
+			</div>
+			<div class="div-margin">
+				<label id="email-label" class="input-label" for="email">Email</label><br>
+				<input id="email" class="input-text" type="email" placeholder="Enter your email" required><br>
+			</div>
+			<div class="div-margin">
+				<label id="number-label" class="input-label" for="number">Age(option)</label><br>
+				<input id="number" class="input-text" type="number" placeholder="10" min="10" max="100"><br>
+			</div>
 
-		<label id="email-label" for="email">Email</label><br>
-		<input id="email" type="text" placeholder="Enter your email"><br>
+			<div class="div-margin">
+				<label class="input-label" for="dropdown">Which option best describes your current role?</label><br>
+				<select class="input-text" id="dropdown" >
+					<optgroup label="can no choose"></optgroup> 
+					<option value="volvo">Volvo</option>
+					<option value="saab">Saab</option>
+					<option value="mercedes">Mercedes</option>
+					<option value="audi">Audi</option>
+				</select>
+			</div>
 
-		<label id="number-label" for="number">Age(option)</label><br>
-		<input id="number" type="number" placeholder="10"><br>
+			<div class="div-margin">
+				<label class="input-label"> the radio choose here:</label><br>
+				<label for="one-radio"><input class="input-radio" id="one-radio" value="one" type="radio" name="radio-select" > radio-choose-one</label><br>
+				<label for="two-radio"><input class="input-radio" id="two-radio" value="two" type="radio" name="radio-select" > radio-choose-two</label><br>
+				<label for="three-radio"><input class="input-radio" id="three-radio" value="three" type="radio" name="radio-select" > radio-choose-three</label><br>
+			</div>
 
-		<label for="describes">Which option best describes your current role?</label><br>
-		<input id="dropdown" type="text" list="optionlist" name="describes" placeholder="10"><br>
-		<datalist id="optionlist">
-			<option>one</option>
-			<option>one</option>
-			<option>one</option>
-			<option>one</option>
-		</datalist>
+			<div class="div-margin">
+				<label class="input-label"> the radio choose here:</label><br>
+				<label for="one-checkbox"><input class="input-radio" id="one-checkbox" value="one1" type="checkbox" name="checkbox-select"> checkbox-choose-one</label><br>
+				<label for="two-checkbox"><input class="input-radio" id="two-checkbox" value="two1" type="checkbox" name="checkbox-select"> checkbox-choose-two</label><br>
+				<label for="three-checkbox"><input class="input-radio" id="three-checkbox" value="three1" type="checkbox" name="checkbox-select"> checkbox-choose-three</label><br>
+			</div>
 
-	</form>
+			<div class="div-margin">
+				<label class="input-label">the checkbox choose here:</label><br>
+				<textarea class="input-label" id="commonts" placeholder="Enter your commonts..."></textarea>
+			</div>
+
+			<button id="submit" type="submit">Submit</button>
+		</form>
+	</div>
 </main>