this is a simple html form：
<form action="/info" method="post">
<div >
<input type="" name="name">
</div>
<div>
<label>
<input type="radio" name="sex" checked > woman
</label>
<label>
<input type="radio" name="sex" > man
</label>
</div>
<button type="submit" >Conform</button>
</form>
after click submits button, this is post request's body:
as you can see, this post cannot distinguish if the user is woman or man.
How to conform which box does user choice in this form post?
<form action="/info" method="post">
<div >
<input type="" name="name">
</div>
<div>
<label>
<input type="radio" name="sex" checked value="woman"> woman
</label>
<label>
<input type="radio" name="sex" value="man"> man
</label>
</div>
<button type="submit" >Conform</button>
</form>
You should be able to get value now
You need to set the value of each radio input accordingly
<input type="radio" name="sex" value="woman" checked> woman
<input type="radio" name="sex" value="man"> man
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.
I have a form with four checkboxes, however it could happen that some checkboxes are hidden using style="display: none". Which ones these are, is not known upfront. It could be checkbox 3 for example, or checkbox 2 and 3.
However, this results in undesirable white space between the remaining boxes (as seen in the code example below).
How can I make sure remaining boxes are aligned nicely below each other; thus effectively removing big gaps of white space between them?
<!DOCTYPE html>
<html>
<body>
<h1>Show Checkboxes</h1>
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" >
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car" >
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" style="display: none">
<label for="vehicle3" style="display: none"> I have a boat</label><br>
<input type="checkbox" id="vehicle4" name="vehicle4" value="Motor">
<label for="vehicle4"> I have a motor</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Beginner with HTML/CSS, please bear with me.
Option 1:
Add style="display:none" to the br tag as well:
<h1>Show Checkboxes</h1>
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label>
<br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label>
<br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" style="display: none">
<label for="vehicle3" style="display: none"> I have a boat</label>
<br style="display:none">
<input type="checkbox" id="vehicle4" name="vehicle4" value="Motor">
<label for="vehicle4"> I have a motor</label>
<br>
<br>
<input type="submit" value="Submit">
</form>
Option 2:
Place each input and br tag inside the label tags, and removestyle="display:none" from the input tag.
Added bonus: with this method, you can also remove the for and id attributes.
<h1>Show Checkboxes</h1>
<form action="/action_page.php">
<label>
<input type="checkbox" name="vehicle1" value="Bike" >
I have a bike<br>
</label>
<label>
<input type="checkbox" name="vehicle2" value="Car">
I have a car<br>
</label>
<label style="display: none">
<input type="checkbox" name="vehicle3" value="Boat">
I have a boat<br>
</label>
<label>
<input type="checkbox" name="vehicle4" value="Motor">
I have a motor<br>
</label>
<br>
<input type="submit" value="Submit">
</form>
The same way you hide your input and label hide a br tag as well.
<!DOCTYPE html>
<html>
<body>
<h1>Show Checkboxes</h1>
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" >
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car" >
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" style="display: none">
<label for="vehicle3" style="display: none"> I have a boat</label><br style="display: none">
<input type="checkbox" id="vehicle4" name="vehicle4" value="Motor">
<label for="vehicle4"> I have a motor</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
I am creating a survey form just for a project on FCC.
I tried putting the <input> tag inside <label>, also used <fieldset> but nothing worked.
<p id="purpose">
<label for="business"><input id="business" type="radio" name="purpose" value="business" checked> business</label>
<label for="leisure"><input type="radio" id="leisure" name="purpose" value="leisure">Leisure</label>
<label for="passingby"><input type="radio" id="passingby" name="purpose" value="passingby">Passing by</label>
<label for="others"><input type="radio" id="others" name="purpose" value="others">others</label>
</p>
<p class="improve">What do we need to improve?</p>
<label for="food"><input type="checkbox" id="food" name="food">Food</label>
<label for="rooms"><input type="checkbox" id="rooms" name="rooms">Rooms</label>
<label for="service"><input type="checkbox" id="service" name="service">Service</label>
<label for="none"><input type="checkbox" id="none" name="none">None</label>
Try out this
<form action="">
<input type="radio" name="purpose" value="business"> business<br>
<input type="radio" name="purpose" value="leisure"> leisure<br>
<input type="radio" name="purpose" value="passingby"> passingby<br>
<input type="radio" name="purpose" value="others"> others<br>
</form>
<p class="improve">What do we need to improve?</p>
<label for="food"><input type="checkbox" id="food" name="food">Food</label> <br>
<label for="rooms"><input type="checkbox" id="rooms" name="rooms">Rooms</label><br>
<label for="service"><input type="checkbox" id="service" name="service">Service</label><br>
<label for="none"><input type="checkbox" id="none" name="none">None</label><br>
Label should be sibling of input
<p id="purpose">
<input id="business" type="radio" name="purpose" value="business" checked><label for="business"> business</label>
<input type="radio" id="leisure" name="purpose" value="leisure"><label for="leisure">Leisure</label>
<input type="radio" id="passingby" name="purpose" value="passingby"><label for="passingby">Passing by</label>
<input type="radio" id="others" name="purpose" value="others"><label for="others">others</label>
</p>
<p class="improve">What do we need to improve?</p>
This is the code that I've used, but I don't think it is something wrong with the code, as it works well in Safari but not Chrome.The left hand is Chrome and the other is Safari. As you can see, the radio, submit, reset type somehow disappeared in Chrome.
Check out this image Normally there should be various checkboxes that I can select on or off. But in my browser it doesn't work.
<form method="GET">
<input type="radio" name="gender" value="male">Male <br>
<input type="radio" name="gender" value="female">Female <br>
<input type="radio" name="gender" value="other">Other <br>
Pets <br>
<input type="checkbox" name="dog" value=""> Dogs<br>
<input type="checkbox" name="cat" value=""> Cats<br>
Cars <br>
<select class="" name="cars">
<option value="volvo" name="volvo">Volvo</option>
<option value="Audi" name="audi">Audi</option>
</select><br>
<input type="submit" name="" value="Register">
<input type="reset" name="" value="Reset">
</form>
Your input selectors
<input type="submit" name="" value="Register">
<input type="reset" name="" value="Reset">
should be stated as buttons. Chrome wants them to be explicitly declared as <button>.
<button type="submit">Register</button>
<button type="reset">Reset</button>
Here's an improved version of your provided code with some fixes. You can follow how to properly structure a <form> via MDN.
<form method="GET">
<input type="radio" name="gender" value="male" id="male"><label for="male">Male</label> <br>
<input type="radio" name="gender" value="female" id="female"><label for="female">Female</label> <br>
<input type="radio" name="gender" value="other" id="other"><label for="other">Other</label> <br> Pets <br>
<input type="checkbox" name="dog" value="" id="dogs"><label for="dogs">Dogs</label><br>
<input type="checkbox" name="cat" value="" id="cats"><label for="cats">Cats</label>
<br> Cars <br>
<select class="" name="cars">
<option value="volvo" name="volvo">Volvo</option>
<option value="Audi" name="audi">Audi</option>
</select><br>
<button type="submit">Register</button>
<button type="reset">Reset</button>
</form>
I have the following form code in the nav bar:
<form id="form">
<p>
<label for="textarea"></label>
<textarea name="textarea" id="textarea" cols="100" rows="5">
Post here
</textarea>
<input id="button" type="submit" value="Submit!" name="submit" onclick = "get('textfield')"/>
</p>
<p>
<input type="radio" name="radio" id="radio-1" />
<label for="radio-1">Section 1</label>
<input type="radio" name="radio" id="radio-2" />
<label for="radio-2">Section 2</label>
<input type="radio" name="radio" id="radio-3" />
<label for="radio-3">Section 3</label>
<input type="radio" name="radio" id="radio-4" />
<label for="radio-4">Section 4</label>
<input type="radio" name="radio" id="radio-5" />
<label for="radio-5">Section 5</label>
<input type="radio" name="radio" id="radio-6" />
<label for="radio-6">Section 6</label>
</p>
</form>
And in the main body within the webpage,I have 6 sections. What I am trying to achieve is if I select one of the radio buttons, write something in the text area and click submit, it should appear within the selected section. So If write hello world and mark section 5, hello world should appear under section 5.
Is there any naive way of achieving this purely in HTML5? If there isn't, can anyone point to any tutorials/links or offer any suggestions?
Thanks in advance!
try to use this Example
<p>
<label for="textarea"></label>
<textarea name="textarea" id="textarea" cols="100" rows="5"></textarea>
<input id="button" type="submit" value="Submit!" name="submit"
</p>
<p>
<input type="radio" name="radio" id="radio-1" />
<label for="radio-1">Section 1</label>
<input type="radio" name="radio" id="radio-2" />
<label for="radio-2">Section 2</label>
<input type="radio" name="radio" id="radio-3" />
<label for="radio-3">Section 3</label>
<input type="radio" name="radio" id="radio-4" />
<label for="radio-4">Section 4</label>
<input type="radio" name="radio" id="radio-5" />
<label for="radio-5">Section 5</label>
<input type="radio" name="radio" id="radio-6" />
<label for="radio-6">Section 6</label>
</p>
<ul>
<li><section id="radio-1"></section></li>
<li><section id="radio-2"></section></li>
<li><section id="radio-3"></section></li>
<li><section id="radio-4"></section></li>
<li><section id="radio-5"></section></li>
<li><section id="radio-6"></section></li>
</ul
JS
$(function () {
$("#button").click(function(){
var txt = $("#textarea").val();
if(txt.length > 0)
{
var id = $("input[type='radio']:checked").attr("id");
$("li section").text("");
$("li #"+id).text(txt);
}
});
});
for solve this you better use simplejavascript code in your form that do this operation with id of radio buttons