实现一个填写用户信息页,包括姓名、年龄、性别、邮编、地址、自我介绍等,点击“提交”按钮,在当前页或另一页显示输入的相关信息。
时间: 2023-07-10 11:13:09 浏览: 120
好的,以下是一个示例的 HTML 文件,可以实现填写用户信息页,包括姓名、年龄、性别、邮编、地址、自我介绍等,点击“提交”按钮,在当前页或另一页显示输入的相关信息:
```html
<!DOCTYPE html>
<html>
<head>
<title>User Information</title>
</head>
<body>
<h1>User Information</h1>
<form id="userinfo-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age"><br><br>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<label for="postcode">Postcode:</label>
<input type="text" id="postcode" name="postcode"><br><br>
<label for="address">Address:</label>
<textarea id="address" name="address"></textarea><br><br>
<label for="intro">Introduction:</label>
<textarea id="intro" name="intro"></textarea><br><br>
<input type="button" value="Submit" onclick="showUserInfo()">
</form>
<div id="userinfo"></div>
<script>
function showUserInfo() {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var gender = document.querySelector('input[name="gender"]:checked').value;
var postcode = document.getElementById("postcode").value;
var address = document.getElementById("address").value;
var intro = document.getElementById("intro").value;
var userinfo = "<h2>User Information</h2>";
userinfo += "<p>Name: " + name + "</p>";
userinfo += "<p>Age: " + age + "</p>";
userinfo += "<p>Gender: " + gender + "</p>";
userinfo += "<p>Postcode: " + postcode + "</p>";
userinfo += "<p>Address: " + address + "</p>";
userinfo += "<p>Introduction: " + intro + "</p>";
document.getElementById("userinfo").innerHTML = userinfo;
}
</script>
</body>
</html>
```
可以将上述代码保存为一个名为 `userinfo.html` 的文件,然后在浏览器中打开即可看到一个用户信息输入界面。用户在填写完信息后,点击“提交”按钮,页面会显示用户输入的相关信息。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)