4.如图6-37所示,单击【提交】按钮后在窗体下端显示不同的欢迎词,如果是男士,页面出现“欢迎你,***先生!";如果是女士,页面出现“欢迎你,***女士!”,其中***和代表登录者的姓名。
时间: 2023-06-24 10:09:29 浏览: 160
可以通过以下代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>欢迎页面</title>
<meta charset="utf-8">
<script>
function submitForm() {
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
var welcomeMsg = "";
if (gender === "male") {
welcomeMsg = "欢迎你," + name + "先生!";
} else if (gender === "female") {
welcomeMsg = "欢迎你," + name + "女士!";
}
document.getElementById("welcomeMsg").innerHTML = welcomeMsg;
}
</script>
</head>
<body>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="gender">性别:</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select><br><br>
<input type="button" value="提交" onclick="submitForm()">
</form>
<div id="welcomeMsg"></div>
</body>
</html>
```
该页面使用了 HTML、CSS 和 JavaScript 技术。
在 HTML 中定义了一个表单,其中包含姓名和性别两个输入框以及一个提交按钮。当用户单击提交按钮时,会调用 JavaScript 函数 `submitForm()`。
在 `submitForm()` 函数中,首先获取用户输入的姓名和性别,然后根据性别不同构造不同的欢迎信息,最后将欢迎信息显示在页面上。具体来说,当性别是“男”时,欢迎信息为“欢迎你,姓名先生!”;当性别是“女”时,欢迎信息为“欢迎你,姓名女士!”。
阅读全文