Geek Answers Handbook

Creating a radio button as the required field using bootstrap

I create a login page using bootstrap, here is my code

<form class="form-signin" action="firstLogin.action" method="post"> <h2 class="form-signin-heading">Please sign in</h2> <input type="text" class="form-control" name="username" placeholder="User Name" required="required" autofocus> <br> <input type="password" class="form-control" name="password" required="required" placeholder="Password"> <br> <div class="btn-group" data-toggle="buttons-radio"> <button type="button" class="btn btn-primary" style="width: 150px">Admin</button> <button type="button" class="btn btn-primary" style="width: 150px">User</button> </div> <div><br></div> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> </form>

I want to make the switch field in the required field. any idea how to do this.?

+6
source share
2 answers

I understood!

All you have to do is

-create two divs, one for switching data and a child with btn-group

Thus, you get a group of buttons with a radio inside. set these btns radios to

class = "erased only"

 <form class="form-signin" action="firstLogin.action" method="post"> <h2 class="form-signin-heading">Please sign in</h2> <input type="text" class="form-control" name="username" placeholder="User Name" required autofocus> <br> <input type="password" class="form-control" name="password" required placeholder="Password"> <br> <div data-toggle="buttons"> <div class="btn-group"> <label class="btn btn-primary"> <input type="radio" name="type" id="type" value="admin" class="sr-only" required>Admin </label> <label class="btn btn-primary"> <input type="radio" name="type" id="type" value="user" class="sr-only" required>User </label> </div> </div> </div> <br> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>

http://jsfiddle.net/nteb4/23/

Working on bootstrap3

+6
source

To make the required input, the element must be an input element. Change your buttons to the inputs, give them a name, add the required one and change the type to "radio", and the required one should work ( see this script ):

 <div> <input type="radio" name="radio-choice" required>Admin</input> <input type="radio" name="radio-choice" required>User</input> </div>

Unfortunately, this means that they no longer look like cool buttons. You can stylize the radio buttons so that they look the way you want, and the required one will still prevent the form from being submitted, but you will not see a pop-up warning to select an option ( see This script ).

So, for what you want, it looks like you will need to do some basic programming. Here's a fiddle with basic validation using the original buttons.

+8
source

More articles:


All Articles