<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>你的第一个 HTML 表单（添加样式后）</title>
		<style>
			form {
				/* 将表单在页面内居中 */
				margin: 0 auto;
				width: 400px;
				/* 为表单添加边框 */
				padding: 1em;
				border: 1px solid #ccc;
				border-radius: 1em;
			}

			ul {
				list-style: none;
				padding: 0;
				margin: 0;
			}

			form li + li {
				margin-top: 1em;
			}

			label {
				/* 确保所有标签等宽且排列整齐 */
				display: inline-block;
				width: 90px;
				text-align: right;
			}

			input,
			textarea {
				/* 确保所有文本框字体一致设置为默认字体，textarea为默认等宽字体 */
				font: 1em sans-serif;
				/* 确保所有文本框字号一致 */
				width: 300px;
				box-sizing: border-box; 
				/* 设置文本框边框的外观 */
				border: 1px solid #999;
			}

			input:focus,
			textarea:focus {
				/* 为当前元素设置强调色 */
				border-color: #000;
			}

			textarea {
				/* 让多行文本框中的文字与标签对齐 */
				vertical-align: top;
				/* 留足空间以便输入文字 */
				height: 5em;
			}

			.button {
				/* 将按钮与文本框对齐 */
				padding-left: 90px;	 /* 与标签元素大小一致 */
			}

			button {
				/* 上部外边距与标签和文本框之间的距离基本一致 */
				margin-left: 0.5em;
			}
		</style>
	</head>

	<body>
		<form action="/my-handling-form-page" method="post">
			<ul>
				<li>
					<label for="name">名字：</label>
					<input type="text" id="name" name="user_name" />
				</li>
				<li>
					<label for="mail">电子邮件：</label>
					<input type="email" id="mail" name="user_mail" />
				</li>
				<li>
					<label for="msg">信息：</label>
					<textarea id="msg" name="user_message"></textarea>
				</li>
				<li class="button">
					<button type="submit">发送信息</button>
				</li>
			</ul>
		</form>
	</body>
</html>
