HTML代码:输入姓名框选择谁夸你框选择项包括:孙悟空 唐僧 猪八戒 沙僧 玉皇大帝 观音菩萨 如来佛祖 白骨精 女儿国国王 牛魔王 夏海生。页面布局优美网页背景页面为北极熊
以下是一个使用HTML代码实现的输入姓名框和选择框的示例:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("北极熊.jpg");
background-size: cover;
}
.container {
width: 300px;
margin: 0 auto;
margin-top: 100px;
padding: 20px;
background-color: white;
border-radius: 10px;
text-align: center;
}
input[type="text"], select {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h2>输入姓名</h2>
<form>
<input type="text" name="name" placeholder="请输入姓名">
<select name="praise">
<option value="孙悟空">孙悟空</option>
<option value="唐僧">唐僧</option>
<option value="猪八戒">猪八戒</option>
<option value="沙僧">沙僧</option>
<option value="玉皇大帝">玉皇大帝</option>
<option value="观音菩萨">观音菩萨</option>
<option value="如来佛祖">如来佛祖</option>
<option value="白骨精">白骨精</option>
<option value="女儿国国王">女儿国国王</option>
<option value="牛魔王">牛魔王</option>
<option value="夏海生">夏海生</option>
</select>
<br>
<input type="submit" value="提交">
</form>
</div>
</body>
</html>
在这个示例中,使用了一个容器(class="container")来包裹输入框和选择框。通过CSS样式设置了容器的布局、背景图片和输入框的样式。在选择框中,使用了<option>标签来定义每个可选项的值和显示文本。
请注意,为了显示背景图片,你需要将名为北极熊.jpg的图片文件放置在与HTML文件相同的目录中。你还可以根据需要修改背景图片的路径和名称。
原文地址: https://www.cveoy.top/t/topic/hFku 著作权归作者所有。请勿转载和采集!