网页制作做一个游戏表单代码
时间: 2024-10-27 10:04:07 浏览: 14
创建一个简单的网页游戏表单通常涉及HTML、CSS和JavaScript。下面是一个基本的示例,用于收集用户的游戏姓名和得分:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>简单游戏表单</title>
<style>
.form-container {
width: 300px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="form-container">
<h2>游戏表单</h2>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br>
<label for="score">得分:</label>
<input type="number" id="score" name="score" min="0" required><br>
<button onclick="submitScore()">提交分数</button>
<p id="message"></p>
</div>
<script>
function submitScore() {
const name = document.getElementById('name').value;
const score = document.getElementById('score').value;
if (name && score) { // 验证输入是否为空
document.getElementById('message').innerText = `您的姓名 ${name},得分 ${score} 已经提交。`;
} else {
document.getElementById('message').innerText = '请输入完整的姓名和得分.';
}
}
</script>
</body>
</html>
```
在这个例子中:
- HTML部分定义了表单结构,包括文本输入框用于姓名和数字输入框用于得分,以及提交按钮。
- CSS提供了一些基本样式,使表单看起来更美观。
- JavaScript函数`submitScore`会在用户点击提交按钮时触发,验证输入并显示提交消息。
阅读全文