CODEWITHSUNDEEP
phphtmlcssforms
Bobby Lefto
Bobby Lefto

Reputation: 43

HTML/CSS/PHP Hide Form Values with Radio Buttons

I was trying to make multiple options for a sign-in form. I want my form to have two options, either sign in by username or sign in by email. I want to use radio buttons for the user to select which method they choose to sign in. I was wondering if there is a way with html/css/php to do this or if I must learn to use something else? I am not seeing any examples of this.

Here are some visuals with examples of what I am wanting:

By default I want it to look like this:
1

When Radio buttons are selected, I want it to look like this:
2

3

My current code just looks something like this (this is my code with both text boxes)

<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>

Upvotes: 1

Views: 127

Answers (1)

Professor Abronsius
Professor Abronsius

Reputation: 33813

You can pretty much do this just with some simple CSS that makes use of a sibling selector and the :checked attribute combined. You can't select a previous element but you can select the following element using +

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>

Upvotes: 1

Related Questions