我正在使用bootstrap创建登录页面,这是我的代码
<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>
我想将单选按钮字段设为必填字段。任何想法怎么做。?
答案 0 :(得分:10)
为了使输入成为必需,元素必须是输入元素。将您的按钮更改为输入,为其指定名称,添加所需内容,并将类型更改为“广播”,并且必须应用(see this fiddle):
<div>
<input type="radio" name="radio-choice" required>Admin</input>
<input type="radio" name="radio-choice" required>User</input>
</div>
不幸的是,这意味着它们看起来不再像酷炫的按钮了。您可以将单选按钮设置为您想要的样式,并且必需仍然会停止提交表单,但您不会看到弹出警告以选择选项(see this fiddle)。
所以,对于你想要的,看起来你将不得不做一些基本的编程。 Here's a fiddle使用原始按钮进行基本检查。
答案 1 :(得分:7)
我明白了!
您需要做的就是
- 创建两个div,一个用于数据切换,另一个用于btn-group
因此,你会得到一组带收音机的按钮。设置那些无线电btns
类= “SR-只有”
<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>
它正在使用bootstrap3