用css html js写一个表单
时间: 2023-11-22 21:05:36 浏览: 35
当然,以下是一个使用 HTML、CSS 和 JavaScript 编写的简单表单示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>表单示例</title>
<style>
.container {
width: 300px;
margin: 0 auto;
}
.form-group {
margin-bottom: 10px;
}
label {
display: block;
font-weight: bold;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
padding: 5px 10px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h2>表单示例</h2>
<form id="myForm">
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">留言:</label>
<textarea id="message" name="message" rows="4" required></textarea>
</div>
<button type="submit">提交</button>
</form>
</div>
<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 获取表单数据
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var message = document.getElementById("message").value;
// 在控制台打印表单数据
console.log("姓名: " + name);
console.log("邮箱: " + email);
console.log("留言: " + message);
// 清空表单
document.getElementById("myForm").reset();
});
</script>
</body>
</html>
```
此示例中的表单包含姓名、邮箱和留言字段,并使用 JavaScript 监听表单的提交事件,阻止默认的提交行为,并将表单数据打印到浏览器的开发者工具控制台中。最后,通过 `reset()` 方法清空表单。您可以根据需要进行相应的修改和扩展。