用HTML5写一个注册表分别有用户名,密码,再次输入密码,性别,出生日期,年收入,所在城市,爱好,主业风格,自我说明。最后和一张表格一样,带有框架结构
时间: 2023-05-18 21:03:00 浏览: 99
非常感谢您的提问!以下是一个简单的HTML5注册表的代码,包括用户名、密码、再次输入密码、性别、出生日期、年收入、所在城市、爱好、主业风格和自我说明:
```
<!DOCTYPE html>
<html>
<head>
<title>注册表</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
</style>
</head>
<body>
<h1>注册表</h1>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<label for="confirm_password">再次输入密码:</label>
<input type="password" id="confirm_password" name="confirm_password"><br><br>
<label for="gender">性别:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label><br><br>
<label for="birthdate">出生日期:</label>
<input type="date" id="birthdate" name="birthdate"><br><br>
<label for="income">年收入:</label>
<input type="number" id="income" name="income"><br><br>
<label for="city">所在城市:</label>
<input type="text" id="city" name="city"><br><br>
<label for="hobbies">爱好:</label>
<textarea id="hobbies" name="hobbies"></textarea><br><br>
<label for="style">主业风格:</label>
<select id="style" name="style">
<option value="casual">休闲</option>
<option value="formal">正式</option>
<option value="business">商务</option>
</select><br><br>
<label for="description">自我说明:</label>
<textarea id="description" name="description"></textarea><br><br>
<input type="submit" value="提交">
</form>
<table>
<tr>
<th>用户名</th>
<th>性别</th>
<th>出生日期</th>
<th>年收入</th>
<th>所在城市</th>
<th>爱好</th>
<th>主业风格</th>
<th>自我说明</th>
</tr>
<tr>
<td id="username_output"></td>
<td id="gender_output"></td>
<td id="birthdate_output"></td>
<td id="income_output"></td>
<td id="city_output"></td>
<td id="hobbies_output"></td>
<td id="style_output"></td>
<td id="description_output"></td>
</tr>
</table>
<script>
const form = document.querySelector('form');
const usernameOutput = document.querySelector('#username_output');
const genderOutput = document.querySelector('#gender_output');
const birthdateOutput = document.querySelector('#birthdate_output');
const incomeOutput = document.querySelector('#income_output');
const cityOutput = document.querySelector('#city_output');
const hobbiesOutput = document.querySelector('#hobbies_output');
const styleOutput = document.querySelector('#style_output');
const descriptionOutput = document.querySelector('#description_output');
form.addEventListener('submit', (event) => {
event.preventDefault();
usernameOutput.textContent = form.elements.username.value;
genderOutput.textContent = form.elements.gender.value;
birthdateOutput.textContent = form.elements.birthdate.value;
incomeOutput.textContent = form.elements.income.value;
cityOutput.textContent = form.elements.city.value;
hobbiesOutput.textContent = form.elements.hobbies.value;
styleOutput.textContent = form.elements.style.value;
descriptionOutput.textContent = form.elements.description.value;
});
</script>
</body>
</html>
```
希望这个代码能够帮助您!