HTML/CSS/PHP 使用单选按钮隐藏表单值答案

【问题标题】：HTML/CSS/PHP Hide Form Values with Radio ButtonsHTML/CSS/PHP 使用单选按钮隐藏表单值
【发布时间】：2021-06-27 03:47:53
【问题描述】：

我试图为登录表单设置多个选项。我希望我的表单有两个选项，通过用户名登录或通过电子邮件登录。我想使用单选按钮让用户选择他们选择登录的方法。我想知道 html/css/php 是否有办法做到这一点，或者我是否必须学习使用其他方法？我没有看到任何这样的例子。

以下是一些视觉效果以及我想要的示例：

默认情况下，我希望它看起来像这样：

当单选按钮被选中时，我希望它看起来像这样：

我当前的代码看起来像这样（这是我的带有两个文本框的代码）

<form method='post'>
    <input type="radio" name="reason" value="email">Login with Email<br> <input type="text" name="email_text"/><br>
    <input type="radio" name="reason" value="user">Login with Username<br> <input type="text" name="user_text"/><br>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

【问题讨论】：

请使用javascript方法在单击单选按钮时显示/隐藏用户名和电子邮件元素。
@MagnusEriksson，哦，对不起。我在 jQuery 流中。我会修改我的评论。

标签： php html css forms

【解决方案1】：

您几乎可以通过一些简单的 CSS 来做到这一点，这些 CSS 结合了 sibling 选择器和 :checked 属性。您不能选择前一个元素，但可以使用 + 选择以下元素

input[type='text'],
input[type='password']{display:none}

:checked + input{display:block;}

<form method='post'>
    <input type="radio" name="reason" value="email">Login with Email
    <input type="text" name="email_text"/>
    <br />
    
    <input type="radio" name="reason" value="user">Login with Username
    <input type="text" name="user_text"/>
    <br />
    
    <button type="submit" class="btn btn-primary">Login</button>
</form>

【讨论】：