HTML5 班级信息收集表单 - 简单易用 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>班级信息收集</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #F0F2F5;
		}
		h1 {
			text-align: center;
			color: #333;
			margin-top: 50px;
		}
		form {
			width: 500px;
			margin: 0 auto;
			background-color: #fff;
			padding: 20px;
			border-radius: 10px;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
			margin-top: 30px;
			margin-bottom: 50px;
		}
		label {
			display: block;
			margin: 10px 0;
			font-size: 16px;
			color: #555;
		}
		input[type='text'], input[type='number'], select {
			width: 100%;
			padding: 8px;
			border: 1px solid #ccc;
			border-radius: 4px;
			box-sizing: border-box;
			font-size: 16px;
			margin-bottom: 20px;
		}
		input[type='radio'] {
			margin-right: 10px;
		}
		input[type='submit'] {
			background-color: #4CAF50;
			color: white;
			padding: 10px 20px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 16px;
			margin-top: 20px;
		}
		input[type='submit']:hover {
			background-color: #45a049;
		}
	</style>
</head>
<body>
	<h1>班级信息收集</h1>
	<form>
		<label for='name'>姓名:</label>
		<input type='text' id='name' name='name' required>
<pre><code>	&lt;label for='class'&gt;班级:&lt;/label&gt;
	&lt;input type='text' id='class' name='class' required&gt;

	&lt;label for='gender'&gt;性别:&lt;/label&gt;
	&lt;input type='radio' id='male' name='gender' value='male' required&gt;
	&lt;label for='male'&gt;男&lt;/label&gt;
	&lt;input type='radio' id='female' name='gender' value='female' required&gt;
	&lt;label for='female'&gt;女&lt;/label&gt;

	&lt;label for='height'&gt;身高:&lt;/label&gt;
	&lt;input type='number' id='height' name='height' required&gt;

	&lt;label for='weight'&gt;体重:&lt;/label&gt;
	&lt;input type='number' id='weight' name='weight' required&gt;

	&lt;input type='submit' value='提交'&gt;
&lt;/form&gt;
</code></pre>
</body>
</html>