HTML CSS 表单制作教程：美观半透明表单设计 | 学习B站风格 - 常规

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
	<title>表单</title>
	<style>
		body {
			background-image: url('bg.jpg');
			background-size: cover;
			font-family: Arial, sans-serif;
		}
		.container {
			width: 500px;
			margin: 50px auto;
			background-color: rgba(255, 255, 255, 0.7);
			padding: 20px;
			border: 1px solid black;
		}
		form {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		input {
			margin: 10px 0;
			padding: 10px;
			border: none;
			border-bottom: 1px solid black;
			width: 100%;
			box-sizing: border-box;
			font-size: 16px;
		}
		select {
			margin: 10px 0;
			padding: 10px;
			border: none;
			border-bottom: 1px solid black;
			width: 100%;
			box-sizing: border-box;
			font-size: 16px;
		}
		textarea {
			margin: 10px 0;
			padding: 10px;
			border: none;
			border-bottom: 1px solid black;
			width: 100%;
			height: 150px;
			box-sizing: border-box;
			font-size: 16px;
		}
		button {
			margin-top: 20px;
			padding: 10px;
			background-color: #4CAF50;
			color: white;
			border: none;
			cursor: pointer;
			font-size: 16px;
			border-radius: 5px;
			box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
		}
		button:hover {
			background-color: #3E8E41;
		}
		label {
			margin-bottom: 10px;
			font-size: 18px;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div class='container'>
		<form>
			<label for='name'>姓名</label>
			<input type='text' id='name' name='name' required>
<pre><code>		&lt;label for='gender'&gt;性别&lt;/label&gt;
		&lt;select id='gender' name='gender'&gt;
			&lt;option value='male'&gt;男&lt;/option&gt;
			&lt;option value='female'&gt;女&lt;/option&gt;
		&lt;/select&gt;

		&lt;label for='password'&gt;密码&lt;/label&gt;
		&lt;input type='password' id='password' name='password' required&gt;

		&lt;label for='education'&gt;学历&lt;/label&gt;
		&lt;select id='education' name='education'&gt;
			&lt;option value='college'&gt;大专&lt;/option&gt;
			&lt;option value='undergraduate'&gt;本科&lt;/option&gt;
		&lt;/select&gt;

		&lt;label for='resume'&gt;简历&lt;/label&gt;
		&lt;textarea id='resume' name='resume'&gt;&lt;/textarea&gt;

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