HTML / CSS / PHP Скрыть значения формы с помощью радиокнопок
Я пытался создать несколько вариантов формы входа. Я хочу, чтобы в моей форме было два варианта: вход по имени пользователя или вход по электронной почте. Я хочу использовать радиокнопки, чтобы пользователь мог выбрать способ входа в систему. Мне было интересно, есть ли способ сделать это с помощью 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>
@MagnusEriksson, извини. Я был в потоке jQuery. Я изменю свой комментарий.
Ответы 1
Вы можете в значительной степени сделать это с помощью простого 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>
Используйте методы javascript, чтобы отображать / скрывать элементы «Имя пользователя» и «Электронная почта» при нажатии переключателей.