HTML & CSS: 创建美观的下拉列表表单

使用 HTML 和 CSS 创建一个美观的下拉列表表单

本文将指导你如何使用 HTML 和 CSS 创建一个美观的下拉列表表单，包含标题为'请选择最新数字'的下拉选项，提交按钮，生成按钮和一个不可编辑的文本区域。

代码示例

<!DOCTYPE html>
<html>
<head>
	<title>Form表单示例</title>
	<style>
		form {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 50px;
		}
		label {
			font-size: 18px;
			margin-bottom: 10px;
		}
		select {
			padding: 5px;
			font-size: 16px;
			border-radius: 5px;
			border: none;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
			margin-right: 10px;
		}
		input[type="submit"] {
			padding: 5px 10px;
			font-size: 16px;
			border-radius: 5px;
			border: none;
			background-color: #007bff;
			color: #fff;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
			cursor: pointer;
		}
		input[type="submit"]:hover {
			background-color: #0062cc;
		}
		textarea {
			padding: 10px;
			font-size: 16px;
			border-radius: 5px;
			border: none;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
			resize: none;
			width: 100%;
			height: 150px;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<form>
		<label for="number">请选择最新数字：</label>
		<select name="number" id="number">
			<option value="0">0</option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
		</select>
		<input type="submit" value="提交">
		<div>
			<input type="button" value="生成">
		</div>
		<textarea readonly>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget ante id dolor consequat lobortis. In hac habitasse platea dictumst. Nullam euismod lorem eget risus tincidunt, vel tincidunt risus tincidunt.</textarea>
	</form>
</body>
</html>

效果图

Form表单示例效果图

解释

使用 display: flex 和 flex-direction: column 将表单元素排列成垂直方向。
使用 align-items: center 将元素水平居中。
使用 CSS 样式来美化表单元素，如设置字体大小、颜色、边框、阴影等。
readonly 属性使文本区域不可编辑。

小结

通过简单的 HTML 和 CSS 代码，你可以轻松创建美观的下拉列表表单。你可以根据需要调整样式，创建更符合你需求的表单。