如何使无线电输入成为必需? [英] How to make radio inputs required?
问题描述
我有一个表格,供用户选择性别的无线电输入.如何将性别作为必填项(用户必须选择女性还是男性,否则他们会按照通常的required
提示输入).
I have radio inputs in a form for the user to select their gender. How do I make gender a required input (user must select either female or male or they get a prompt as per the usual required
).
我尝试如下所示添加required
,但是它不起作用(用户可以继续选择而不选择女性或男性).
I tried adding required
as shown below but it doesn't work (user can continue without selecting either female or male).
<div class="form-group btn-group" data-toggle="buttons">
<label class="btn btn-default btn-lg">
<input type="radio" name="gender" value="Female" required><i class="fa fa-female"></i> Female
</label>
<label class="btn btn-default btn-lg">
<input type="radio" name="gender" value="Male" required><i class="fa fa-male"></i> Male
</label>
</div>
更新1
根据答案中的建议,我更新了代码,以便只有一个无线电输入包含required
,但仍然无法正常工作.
Update 1
As suggested in the answers I updated the code so that only one radio input contains required
however it still doesn't work.
<div class="form-group btn-group" data-toggle="buttons">
<label class="btn btn-default btn-lg">
<input type="radio" name="gender" value="Female" required><i class="fa fa-female"></i> Female
</label>
<label class="btn btn-default btn-lg">
<input type="radio" name="gender" value="Male"><i class="fa fa-male"></i> Male
</label>
</div>
更新2
请按以下要求提供完整的代码:
Update 2
As requested here is the complete code:
<form action="/client/index.php" method="post" role="form">
<fieldset>
<div class="form-group">
<input class="form-control input-lg" placeholder="Nickname" name="nickname" type="text" autofocus required>
</div>
<div class="form-group btn-group" data-toggle="buttons">
<label class="btn btn-default btn-lg">
<input type="radio" name="gender" value="Female" required><i class="fa fa-female"></i> Female
</label>
<label class="btn btn-default btn-lg">
<input type="radio" name="gender" value="Male"><i class="fa fa-male"></i> Male
</label>
</div>
<h4>Options</h4>
<div class="form-group">
<div class="row">
<div class="col-md-6">
Block private chats
</div>
<div class="col-md-6">
<input type="checkbox" name="block" data-on-text="Yes" data-off-text="No">
</div>
</div>
</div>
<button type="submit" name="submit" class="btn btn-lg btn-primary btn-block">Start</button>
</fieldset>
</form>
推荐答案
只需为无线电组的一个输入设置required
属性,
Just set the required
attribute for one input of the radiogroup,
例如:
<form>
<label for="input1">1:</label><input type="radio" name="test" id="input1" required value="1" /><br />
<label for="input2">2:</label><input type="radio" name="test" id="input2" value="2" /><br />
<label for="input3">3:</label><input type="radio" name="test" id="input3" value="3" /><br />
<input type="submit" value="send" />
</form>
更新
我刚刚注意到,您在代码中编写的代码效果很好..请参见小提琴.
I just noticed that what you have written in your code works perfectly..See the fiddle..
这篇关于如何使无线电输入成为必需?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!