编写一个HTML页面,包含一个表单,用户可以输入他们的姓名和电子邮件地址,并提交表单。
时间: 2024-11-09 19:19:24 浏览: 5
创建一个简单的HTML页面,用于接收用户的姓名和电子邮件地址,你可以使用下面的代码作为基础:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户信息表单</title>
<style>
/* 可选的样式 */
form {
width: 400px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type=text], input[type=email] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<h2>请输入您的信息</h2>
<form id="userForm" action="/submit" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email" required><br>
<button type="submit">提交</button>
</form>
<script>
// JavaScript 用于前端验证或处理其他逻辑 (这里仅提供HTML结构)
</script>
</body>
</html>
```
在这个示例中,我们有一个表单,包括两个输入字段(`<input>`标签),一个用于姓名,另一个用于电子邮件。`required`属性确保用户填写了这两个字段。当用户点击“提交”按钮(`<button>`标签)时,表单数据会被发送到`/submit`路径(实际应用中你需要替换为实际的提交处理URL)。如果你想要添加客户端验证,可以在`<script>`标签内添加JavaScript代码。
阅读全文