Hello Can you tell why I am allowed to select two radio buttons in this code
<html>
<head><title>Survey</title>
<body>
<h3>Please Enter the following Information: </h3>
<form method= "post" action="/~fmccown/cgi-bin/printinfo.cgi">
<input type ="hidden" name="input-source" value="survey2.html" />
<p>
Name: <input type="text" name="name" size="30" />
</p><p>
Classification:
<select name="class">
<option>Freshman</option>
<option selected="selected">Sophomore</option>
<option>Junior</option>
<option>Senior</option>
</select>
</p><p>
Gender:
<input type="radio" name="gender" value="M" checked="checked" />Male
<input type="radio" name="gender" value="F" />Female
</p><p>
Email address: <input type="text" name="email" size="30" />
</p><p>
Password: <input type="password" name="pword" />
</p><p>
What are your favorite computer classes?
<br />
<label>
<input type="checkbox" name="class-int" />Internet Development
</label>
<label>
<input type="checkbox" name="class-net" />Networking
</label>
<label>
<input type="checkbox" name="class-gui" />GUI
</label>
<label>
<input type="checkbox" name="class-oop" />OOP
</label>
</p><p>
Are you graduating this spring?
<label>
<input type="radio" name="grad-yes" value="Yes" />Yes
</label>
<label>
<input type="radio" name="grad-no" value="Yes" />No
</label>
</p><p>
<input type="submit" value="Submit Survey" />
<input type="reset" value="Clear Form" />
</p>
</form>
<p>
Thank You!
</p>
</body>
</html>
These two elements should probably have the same name:
<input type="radio" name="grad-yes" value="Yes" />
<input type="radio" name="grad-no" value="Yes" />
Radio buttons get grouped together if and only if they share a common name.
The first pair is called gender, so it works.
The second pair doesn't, since one is called grad-yes and the other grad-no.
The way to go would be:
<label>
<input type="radio" name="grad" value="Yes" />Yes
</label>
<label>
<input type="radio" name="grad" value="No" />No
</label>
Related
What is the most accessible way to split a single radio form (same name) into groups? For example, choosing a time with the groups Today or Tomorrow?
Perhaps split them into two fieldsets?
<h3>Select a time and we'll give you a call</h3>
<form>
<fieldset>
<legend>Today</legend>
<input type="radio" name="phone" id="a" value="a"/>
<label for="a">9am</label>
<input type="radio" name="phone" id="b" value="b"/>
<label for="b">12pm</label>
<input type="radio" name="phone" id="c" value="c"/>
<label for="c">5pm</label>
</fieldset>
<fieldset>
<legend>Tomorrow</legend>
<input type="radio" name="phone" id="d" value="d"/>
<label for="d">9am</label>
<input type="radio" name="phone" id="e" value="e"/>
<label for="e">12pm</label>
<input type="radio" name="phone" id="f" value="f"/>
<label for="f">5pm</label>
</fieldset>
</form>
The best approach seems to be using multiple fieldsets and in this particular example we want to clarify the legends as Graham Ritchie suggested. VoiceOver repeats the legend on each radio so it was redundant to add it to the label as well.
<h3>Select a time and we'll give you a call</h3>
<form>
<fieldset>
<legend><span class="visually-hidden">Call me</span> Today</legend>
<input type="radio" name="phone" id="a" value="a"/>
<label for="a">9am</label>
<input type="radio" name="phone" id="b" value="b"/>
<label for="b">12pm</label>
</fieldset>
<fieldset>
<legend><span class="visually-hidden">Call me</span> Tomorrow</legend>
<input type="radio" name="phone" id="d" value="d"/>
<label for="d">9am</label>
<input type="radio" name="phone" id="e" value="e"/>
<label for="e">12pm</label>
</fieldset>
</form>
I updated the answer. Not sure you can do this with radio buttons but checkboxes and some javascript should do the trick.
function group1(e){
var id = e.target.id;
var boxes = document.getElementsByTagName('input');
for(let i=0;i<3;i++){
if (boxes[i].id != id)boxes[i].checked=false;
}
}
function group2(e){
var id = e.target.id;
var boxes = document.getElementsByTagName('input');
for(let i=3;i<6;i++){
if (boxes[i].id != id)boxes[i].checked=false;
}
}
<h3>Select a time and we'll give you a call</h3>
<form>
<fieldset>
<legend>Today</legend>
<input type="checkbox" name="phone[]" onClick='group1(event)' id="a" value="a"/>
<label for="a">9am</label>
<input type="checkbox" name="phone[]" onClick='group1(event)' id="b" value="b"/>
<label for="b">12pm</label>
<input type="checkbox" name="phone[]" onClick='group1(event)' id="c" value="c"/>
<label for="c">5pm</label>
</fieldset>
<fieldset>
<legend>Tomorrow</legend>
<input type="checkbox" name="phone[]" onClick='group2(event)' id="d" value="d"/>
<label for="d">9am</label>
<input type="checkbox" name="phone[]" onClick='group2(event)' id="e" value="e"/>
<label for="e">12pm</label>
<input type="checkbox" name="phone[]" onClick='group2(event)' id="f" value="f"/>
<label for="f">5pm</label>
</fieldset>
</form>
I need some help. The question is how to put in the "for" attribute two "id" parameters from input? or how a can do with label in other way?
<label for="address">Address: </label>
<input class="form-style" type="text" name="address" id="address"/>
<label for="gender1 gender2">Gender:</label>
<input class="gender" type="radio" name="gender" id="gender1" value="Male"/>Male
<input class="gender" type="radio" name="gender" id="gender2" value="Female"/>Female
You can't. A label is for a single form control. Each radio button should have its own label.
Use a fieldset to group multiple controls, and a legend to describe the controls with it in.
<label for="address">Address: </label>
<input class="form-style" type="text" name="address" id="address" />
<fieldset>
<legend>Gender</legend>
<input class="gender" type="radio" name="gender" id="gender1" value="Male" />
<label for="gender1">Male</label>
<input class="gender" type="radio" name="gender" id="gender2" value="Female" />
<label for="gender2">Female</label>
<input class="gender" type="radio" name="gender" id="gender3" value="Other" />
<label for="gender3">Other</label>
<input class="gender" type="radio" name="gender" id="gender4" value="Prefer not to say" />
<label for="gender4">Prefer not to say</label>
</fieldset>
I want to have four separate forms right under one another. However, when I enter the code below I get four nested forms. The first form nests the next three forms. The following form nests the next two forms, etc...
<form name="my form" method="get">
<div id="contactInfo">
<p><fieldset><legend><strong>Contact Info</legend></strong></p>
<label>Name</label><input type="text" name="FullName" style="width: 300px;" value="First and last name" /> <br>
<label>Street Address</label><input type="text" name="Address" style="width: 300px;"/> <br>
<label>Zip Code</label><input type="text" name="ZipCode" /> <br>
<label>Email</label><input type="text" name="EmailAddress"style="width: 300px;" value="address#example.com" /> <br>
<label>Phone</label><input type="text" name="PhoneNumber" />
<p><fieldset><legend><strong>Best day(s) to schedule a visit</strong></legend></p>
<input type="checkbox" name="date" id="date1" value="Mon" /> Monday
<input type="checkbox" name="date" id="date2" value="Tues" /> Tuesday
<input type="checkbox" name="date" id="date3" value="Wed" /> Wednesday
<input type="checkbox" name="date" id="date4" value="Thur" /> Thursday
<input type="checkbox" name="date" id="date5" value="Fri" /> Friday
<input type="checkbox" name="date" id="date6" value="Sat" /> Saturday
<input type="checkbox" name="date" id="date7" value="Sun" /> Sunday
<p><fieldset><legend><strong>Project Area</strong></legend></p>
<input type="radio" name="choice" id="choice1" value="frontOfHouse" /> Front of House <br>
<input type="radio" name="choice" id="choice2" value="Border" /> Border of Property <br>
<input type="radio" name="choice" id="choice3" value="multipleAreas" /> Multiple Areas (please specify in Notes box below) <br>
<input type="radio" name="choice" id="choice4" value="Other" /> Other (please specify in Notes box below) <br>
<p><fieldset><legend><strong>Additional Information</strong></legend></p>
Notes <br>
<textarea name="comments" align="left" rows="5" cols="50"></textarea>
<p></fieldset></p>
<input type="submit" value="Submit Request"/>
You've got one </fieldset> tag, but four <fieldset> tags. Make sure to close each one up, and you'll avoid the nesting issue!
Edit:
A nesting issue shown in CodePen: http://codepen.io/cam5/pen/vXdGQz
That pen, forked, with closing tags: http://codepen.io/cam5/pen/QKQNzw
Get the Fiddle. https://jsfiddle.net/7p0g2hq9/
Be attentive with the tags.
<form name="my form" method="get">
<div id="contactInfo">
<fieldset><p><legend>
<strong>Contact Info</strong></legend>
</p>
<label>Name</label><input type="text" name="FullName" style="width: 300px;" value="First and last name" /> <br>
<label>Street Address</label><input type="text" name="Address" style="width: 300px;"/> <br>
<label>Zip Code</label><input type="text" name="ZipCode" /> <br>
<label>Email</label><input type="text" name="EmailAddress"style="width: 300px;" value="address#example.com" /> <br>
<label>Phone</label><input type="text" name="PhoneNumber" />
</fieldset>
<fieldset><p><legend><strong>Best day(s) to schedule a visit</strong></legend></p>
<input type="checkbox" name="date" id="date1" value="Mon" /> Monday
<input type="checkbox" name="date" id="date2" value="Tues" /> Tuesday
<input type="checkbox" name="date" id="date3" value="Wed" /> Wednesday
<input type="checkbox" name="date" id="date4" value="Thur" /> Thursday
<input type="checkbox" name="date" id="date5" value="Fri" /> Friday
<input type="checkbox" name="date" id="date6" value="Sat" /> Saturday
<input type="checkbox" name="date" id="date7" value="Sun" /> Sunday
</fieldset>
<fieldset><p><legend><strong>Project Area</strong></legend></p>
<input type="radio" name="choice" id="choice1" value="frontOfHouse" /> Front of House <br>
<input type="radio" name="choice" id="choice2" value="Border" /> Border of Property <br>
<input type="radio" name="choice" id="choice3" value="multipleAreas" /> Multiple Areas (please specify in Notes box below) <br>
<input type="radio" name="choice" id="choice4" value="Other" /> Other (please specify in Notes box below) <br>
</fieldset>
<fieldset><p><legend><strong>Additional Information</strong></legend></p>
Notes <br>
<textarea name="comments" align="left" rows="5" cols="50"></textarea>
</fieldset>
<input type="submit" value="Submit Request"/>
If I helped, don't forget to mark as correct
If i have two inputs of type text with the same name, like this:
<input type="text" name="task" id="task1" value="begin">
<input type="text" name="task" id="task2" value="end">
When i submit the form task is automatically sent as an array (task[0]='begin', task[1]='end').
This is very useful for many reasons, for instance i don't have to worry about serializing the result, I can use a sortable to re-sort and when I submit it's already in the right order.
But if i want to use radio buttons, i have to use several inputs with the same name already.
Is there a way I could keep this functionality with radio buttons?
For instance:
<input type="text" name="task" id="task1" value="begin">
<input type="radio" name="time" id="time11" value="early" checked="checked">
<input type="radio" name="time" id="time12" value="noon">
<input type="radio" name="time" id="time13" value="late">
<input type="text" name="task" id="task2" value="end">
<input type="radio" name="time" id="time21" value="early">
<input type="radio" name="time" id="time22" value="noon" checked="checked">
<input type="radio" name="time" id="time23" value="late">
I want that when submitted i get time[0]='early' and time[1]='noon'
Try this:
<input type="text" name="task[0]" id="task1" value="begin">
<input type="radio" name="time[0]" id="time11" value="early" checked="checked">
<input type="radio" name="time[0]" id="time12" value="noon">
<input type="radio" name="time[0]" id="time13" value="late">
<input type="text" name="task[1]" id="task2" value="end">
<input type="radio" name="time[1]" id="time21" value="early">
<input type="radio" name="time[1]" id="time22" value="noon" checked="checked">
<input type="radio" name="time[1]" id="time23" value="late">
Then you'd get: task[0]=begin, time[0]=early, task[1]=end and time[1]=noon.
add.html
#{form id:'addUserForm', action:#Users.Submit()}
#{field 'user.firstName'}
<div class="field">
<label for="${field.id}">First name : </label>
<input id="${field.id}" type="text" name="${field.name}" size="30" value="${field.value}" class="${field.errorClass}" /><span class="error">${field.error}</span>
</div>
#{/field}
this works
#{list user.department, as:'dep'}
#{field 'dep.id'}
<strong>Name: ${dep.name} </strong>
<input type="radio" name="${field.number}" value="0" checked>
<input type="radio" name="${field.number}" value="1">
#{/field}
#{/list }
this does not work :(
my problem is how to save a list in to the database
thanks