制作一个登录表单,输入账号和密码,radio和checkbox。能够让用户选择性别“男”(“女”);还能够让用户选择“是否注册为会员”;若是,则在显示时增加文本“欢迎***先生(女士)注册为会员”。
时间: 2023-05-15 22:04:40 浏览: 57
好的,这是一个常见的前端开发问题,可以使用HTML和CSS来实现。以下是一个简单的示例代码:
```html
<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>性别:</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="member">是否注册为会员:</label>
<input type="checkbox" id="member" name="member" value="yes"><br><br>
<input type="submit" value="提交">
</form>
```
当用户选择注册为会员时,可以使用JavaScript来动态添加欢迎文本。以下是一个示例代码:
```html
<script>
const form = document.querySelector('form');
const memberCheckbox = form.querySelector('#member');
const welcomeText = document.createElement('p');
form.addEventListener('submit', (event) => {
event.preventDefault();
const username = form.querySelector('#username').value;
const gender = form.querySelector('input[name="gender"]:checked').value;
const isMember = memberCheckbox.checked;
welcomeText.textContent = `欢迎${username}${gender === "male" ? "先生" : "女士"}${isMember ? "注册为会员" : ""}!`;
form.appendChild(welcomeText);
});
</script>
```
这样,当用户提交表单时,会在表单下方动态添加欢迎文本。