I am trying to get a radio button, dropdown, and checkbox on the same line for where the second radio button appears. I am using Bootstrap 4, but I do not need this to look or conform to bootstrap ideals. Plain looking html is fine.
I thought that display:inline, or display:inline-block using a div around the second radio group should have done it, but the stubborn checkbox remains in the line below, rather than inline.
What I want:
Line 1: Radio button (Popular)
Line 2: Radio button (Order), Dropdown, Checkbox
What I have:
Line 1: Radio button (Popular)
Line 2: Radio button (Order), Dropdown
Line 3: Checkbox
Code below:
<div class="form-check">
<label class="form-check-label">
<input style="height:1em; width:1em;" type="radio" class="form-check-input" value="popular" name="abc" checked>Popular
</label>
</div>
<div class="form-check">
<div style="display:inline-block;">
<label class="form-check-label">
<input style="height:1em; width:1em;" type="radio" class="form-check-input" value="order" name="abc" checked>Order
</label>
<select id="user_tag_dropdown">
<option>One</option>
<option>Two</option>
</select>
<div class="checkbox">
<label>
<input type="checkbox"> All
</label>
</div>
</div>
</div>
try using it like this..
<div class="form-check">
<label class="form-check-label">
<input style="height:1em; width:1em;" type="radio" class="form-check-input" value="popular" name="abc" checked>Popular
</label>
</div>
<div class="form-check">
<div style="display:inline-block;">
<label class="form-check-label">
<input style="height:1em; width:1em;" type="radio" class="form-check-input" value="order" name="abc" checked>Order
</label>
<select id="user_tag_dropdown">
<option>One</option>
<option>Two</option>
</select>
<div class="checkbox" style="display: inline">
<label>
<input type="checkbox"> All
</label>
</div>
</div>
</div>
Related
I have a form with several inputs, some text, some radio / dropdown fields. All fields are required. For the text input I get a nice message saying "Fill out this field", but for the Radio and Dropdown fields the message doesn't show. How can I show the error message for radio and dropdown fields? Below is my code:
<form action="" method="post" class="form" role="form">
<div class="form-group required"><label class="form-control-label" for="name">Name:</label>
<input class="form-control" id="name" name="name" required="" type="text" value="">
</div>
<!-- ^ this works -->
<div class="form-group required"><label class="form-control-label" for="gender">Gender</label>
<div class="form-check">
<input class="form-check-input" id="preference-0" name="preference" type="radio" value="male">
<label class="form-check-label" for="preference-0">Male</label>
</div>
<div class="form-check">
<input class="form-check-input" id="preference-1" name="preference" type="radio" value="female">
<label class="form-check-label" for="preference-1">Female</label>
</div>
<div class="form-check">
<input class="form-check-input" id="preference-2" name="preference" type="radio" value="other">
<label class="form-check-label" for="preference-2">Other</label>
</div>
</div>
<!-- ^ this does not work -->
<div class="form-group required"><label class="form-control-label" for="choice">
Please choose "A" or "B"</label>
<select class="form-control" id="which_day" name="which_day" required="">
<option value="a">A</option>
<option value="b">B</option><
</select>
</div>
<!-- ^ neither does this... -->
<input class="btn btn-primary btn-md" id="submit" name="submit" type="submit" value="Next">
</form>
I figured it out now, at least for You need to put "required" at one of the radio / one of the dropdown fields like so:
<div class="form-check">
<input class="form-check-input" id="preference-0" name="preference" type="radio" value="male" required>
<label class="form-check-label" for="preference-0">Male</label>
</div>
And for select fields here is an answer that shows how it can be done.
FORM
I am creating a form like this but i dont know how to place all radio buttons serially in a row. Could someone help me with this.
No. Of Guests
1
<input type="radio" name="opt2" class="form-control" id="opt2">
<label for="opt1">2</label>
<input type="radio" name="opt3" class="form-control" id="opt3">
<label for="opt3">3</label>
<input type="radio" name="opt4" class="form-control" id="opt4">
<label for="opt4">4</label>
<input type="radio" name="opt5" class="form-control" id="opt5">
<label for="opt5">5</label>
</div>
</div>
</form>
This is my code for the radio buttons.When i run this code all buttons are placed vertically.
please don't report this question. I am a noob on this platform so, i dont know exactly how it works.
Thank you in advance.
Use this code :
<div>
<div class="row">
<div class="form-check form-check-inline">
<input name="gruppo2" type="radio" id="radio4" checked>
<label for="radio4">Opzione 1</label>
</div>
<div class="form-check form-check-inline">
<input name="gruppo2" type="radio" id="radio5">
<label for="radio5">Opzione 2</label>
</div>
</div>
</div>
What change? if you use form-check-inline class input radio will display in one row.
I am trying to show validation message below horizontally aligned radio buttons in Bootstrap 4.1.3. Below is the default render:
<hr>
<div class="">
<div class="col-sm text-center">
Please confirm that your eye color is:<br>
<span class="response" id="eye_color"></span>
</div>
<div class="col-sm text-center">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_yes" value="yes" name="eye_color" required>
<label class="form-check-label" for="eye_color_yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_no" value="no" name="eye_color" required>
<label class="form-check-label" for="eye_color_no">No</label>
<div class="invalid-feedback">
Please select an option.
</div>
</div>
</div>
</div>
<hr>
I tried adding a break <br> and got this:
<hr>
<div class="">
<div class="col-sm text-center">
Please confirm that your eye color is:<br>
<span class="response" id="eye_color"></span>
</div>
<div class="col-sm text-center">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_yes" value="yes" name="eye_color" required>
<label class="form-check-label" for="eye_color_yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_no" value="no" name="eye_color" required>
<label class="form-check-label" for="eye_color_no">No</label>
<div class="invalid-feedback">
<br>Please select an option.
</div>
</div>
</div>
</div>
<hr>
But what I would really like is for the validation message to appear directly under the two horizontal radio buttons. I am using Bootstrap 4.1.3's validation for ease but for some reason can't figure this part out. Thanks!
I was just struggling with the same thing. This answer is probably too late for you, but hopefully it helps someone else. The validation message is displaying where it is because Bootstrap adds display: inline-flex; on a parent element when displaying horizontal forms, preventing it from dropping down to the next line.
I was able to relocate the invalid-feedback validation message outside the flex layout element, and have it continue to react to the validation (without any extra javascript) by placing a dummy radio button with the same name before it and hiding it with CSS. A bit hacky, but it works.
<div class="col-sm text-center">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_yes" value="yes" name="eye_color" required>
<label class="form-check-label" for="eye_color_yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_no" value="no" name="eye_color" required>
<label class="form-check-label" for="eye_color_no">No</label>
</div>
<input type="radio" name="eye_color" style="display:none;" required>
<div class="invalid-feedback">
Please select an option.
</div>
</div>
I created a form only using Bootstrap 4 class. You can use this snippet for your desired result.
<div class="container">
<form >
<div class="col-sm-6">
Please confirm that your eye color is:
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio1">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Blue
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio2">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Black
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input">Grey
</label>
</div>
<div class="text-danger">
Please select color.
</div>
</form>
</div>
On the place of below code:
<div class="text-danger">
Please select color.
</div>
You can use below snippet it will look better for showing error messages:
<div class="alert alert-danger">
<strong>Warning!</strong> Please select color.
</div>
I have an HTML form and I need to save the inserted data on a mongo database. What I have difficulties is to save data inserted by radio button and ckeckboxes.
Here is my HTML code:
<div class="form-group">
<label>Foto:</label>
<input class="form-control" type="text" name="animal[foto]" placeholder="image url">
</div>
<div class="form-group">
<label>Animal:</label>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[tipo]" type="radio" value="dog" > Dog</label>
</div>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[tipo]" type="radio" value="cat"> Cat</label>
</div>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[tipo]" type="radio" value="other"> Other:</label>
<input type="text" class="form-control" name="animal[tipo]" placeholder="Which?">
</div>
</div>
<div class="form-group">
<label>Gender:</label>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[sexo]" type="radio" value="Male"> Male</label>
</div>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[sexo]" type="radio" value="Female"> Female</label>
</div>
How can I save what is select in radio btn?
First you have to get the value from the radio buttons.
If you are using a javascript library like jQuery, it's very easy:
alert($('input[name=animal[tipo]]:checked').val());
This code will select the checked input with animal[tipo] name, and gets it's value. Simple isn't it?
Then you can save it as you normally do
After clicking on a radio button if i click on other radio button the checked value is not getting deselected , where am i going wrong ?
I have added a fiddle here http://jsfiddle.net/Lv8xzkhs/
<fieldset>
<legend>Property Info</legend>
<div class="row">
<div class="col-md-3 col-xs-12">
<label>I want To:</label>
<div class="radio">
<label><input class="radio-inline" type="radio" >Sale</label>
<label><input class="radio-inline" type="radio" >Rent Out</label>
</div>
</div>
<div class="col-md-3 col-xs-12">
<label for="sel1">Looking For:</label>
<select class="form-control" id="sel1">
<option>PentHouse</option>
<option>Villa</option>
<option>Plot</option>
<option>Studio</option>
</select>
</div>
<div class="col-md-3 col-xs-12">
<label>Location:</label>
<input type="text" class="form-control">
</div>
</div>
</fieldset>
Add name attribute to your radio btn
<label><input class="radio-inline" type="radio" name="yourgroup">Sale</label>
<label><input class="radio-inline" type="radio" name="yourgroup">Rent Out</label>
Fiddle: http://jsfiddle.net/Lv8xzkhs/1/
More info : http://www.w3.org/TR/html-markup/input.radio.html