anyone know how to add an active state to the labeled radio-button?
HTML:
<label class="blacksize" for="XS">
<input type="radio" name="comment" value="XS" size="50" required checked>XS<br>
</label>
<label class="blacksize">
<input type="radio" name="comment" value="Small" size="50" required>S<br>
</label>
<label class="blacksize">
<input type="radio" name="comment" value="Medium" size="50" required>M<br>
</label>
<label class="blacksize">
<input type="radio" name="comment" value="Large" size="50" required>L<br>
</label>
<label class="blacksize">
<input type="radio" name="comment" value="XL" size="50" required>XL<br>
</label>
<label class="blacksize">
<input type="radio" name="comment" value="XXL" size="50" required>XXL<br>
</label>
Which CSS-styling can I use to make the selected radio's label have an "active"/"selected" state as you have in menus etc?
LIKE THIS: http://i.cubeupload.com/xURJ8M.jpg
Instead of "checked" try:
<input type="radio" name="comment" value="XS" size="50" required checked="checked">
For css styles you can just use :checked pseudo class.
input[type=radio]:checked {
box-shadow:red 0px 0px 0px 5px;
}
Check out this fiddle - http://jsfiddle.net/K2Kgf/
HTML:
<input type="radio"/>
<label></label>
CSS:
input[type="radio"]:checked + label {
}
Related
I have a form on a page in which the fieldsets create another scrollbar in the page, and makes the form scrollable. This is so weird, and its even weirder that I cant find any sort of information or solution on this anywhere. It should just continue on in the page, I have no size restriction for the form.
Here is my HTML for the form
<form>
<fieldset>
<legend>Customer Information:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="area">Please describe your concern:</label><br>
<textarea name="area" id="area" rows="5" cols="30"></textarea><br><br>
</fieldset><br>
<fieldset>
<legend>Product Information:</legend>
<label for="pname">Product name:</label>
<input type="text" id="pname" name="pname"><br><br>
<label for="date">Date of Purchase:</label>
<input type="date" id="date" name="date"><br><br>
<label>Select your warranty plan:</label> <br>
<input type="radio" id="none" name="plan" value="none">
<label for="none">None</label><br>
<input type="radio" id="six" name="plan" value="six">
<label for="css">6 Months</label><br>
<input type="radio" id="twelve" name="plan" value="twelve">
<label for="javascript">12 Months</label><br>
<input type="radio" id="eighteen" name="plan" value="eighteen">
<label for="css">18 Months</label><br>
<input type="radio" id="twentyfour" name="plan" value="twentyfour">
<label for="javascript">24 Months</label><br><br>
<label>Select which THE BOARD SHOP locations you have shopped at: </label><br>
<input type="checkbox" id="Toronto" name="Toronto" value="Toronto">
<label for="Toronto"> Toronto</label><br>
<input type="checkbox" id="Montreal" name="Montreal" value="Montreal">
<label for="Montreal"> Montreal</label><br>
<input type="checkbox" id="California" name="California" value="California">
<label for="California"> California</label><br>
<input type="checkbox" id="New York" name="New York" value="New York">
<label for="New York"> New York</label><br>
<input type="checkbox" id="Cairo" name="Cairo" value="Cairo">
<label for="Cairo"> Cairo</label><br>
</fieldset><br>
<input type="submit" value="Submit" id="submit">
</form>
and the CSS
form {
margin: 0 auto;
width: 50%;
}
textarea {
resize: none;
}
label,
legend,
input {
font-family: "Kanit", sans-serif;
}
I'm just learning how forms, inputs, and fieldsets are working, so I'm trying to make replicate the image above with my own code. So far, I have been able to figure out most of it, but I don't know how to properly put the button in line with the bottom of the third div. I tried a span tag with vertical-align: bottom, but that did not work. Also, I tried to make a div and use vertical-align bottom, which didn't work either. I think I just have a poor understanding of vertical-align, so if you could help it would be greatly appreciated.
<body style="background-color:#EEEEEE">
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
First Name: <input type="text" name="first" placeholder="Joey" size="25">
      Last Name: <input type="text" name="last" placeholder="Shmoey" size="25">
<br> <br> Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30">
State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2">
City: <input type="text" name="city" placeholder="York">
Zip:<input type="text" name="zip" placeholder="17402" maxlength="5" size="8">
</fieldset>
<fieldset style="width: 750px;">
<legend>Payment and Shipping</legend>
<div style="width: 250px; float: left;">Payment:<br>
<input type="radio" name="payment" value="Visa">Visa<br>
<input type="radio" name="payment" value="MasterCard">MasterCard<br>
<input type="radio" name="payment" value="Paypal">Paypal</div>
<div style="width: 250px; float: left;"> Shipping:<br>
<input type="radio" name="shipping" value="Priority $7.99">Priority %7.99<br>
<input type="radio" name="shipping" value="Standard $3.99">Standard $3.99<br>
<input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</div>
<div style="float: left;">Discounts:<br>
<input type="checkbox" name="discounts" value="AAA">AAA<br>
<input type="checkbox" name="discounts" value="AARP">AARP<br>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member</div>
<button type="button">Join Now!</button>
</fieldset>
</form>
</body>
3 issues:
1: you were missing a " on your body tag
2: when you use float:left you take the element out of the flow of the dom. In this case it's better to use display:inline-block
3: add display:block, margin-left: your a tag
NOTE: your form looks pretty good.
a{
display:inline-block;
margin-left:10px;
}
<body style="background-color:#EEEEEE">
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
First Name: <input type="text" name="first" placeholder="Joey" size="25">
      Last Name: <input type="text" name="last" placeholder="Shmoey" size="25">
<br> <br> Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30">
State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2">
City: <input type="text" name="city" placeholder="York">
Zip:<input type="text" name="zip" placeholder="17402" maxlength="5" size="8">
</fieldset>
<fieldset style="width: 750px;">
<legend>Payment and Shipping</legend>
<div style="width: 250px; float: left;">Payment:<br>
<input type="radio" name="payment" value="Visa">Visa<br>
<input type="radio" name="payment" value="MasterCard">MasterCard<br>
<input type="radio" name="payment" value="Paypal">Paypal</div>
<div style="width: 250px; float: left;"> Shipping:<br>
<input type="radio" name="shipping" value="Priority $7.99">Priority %7.99<br>
<input type="radio" name="shipping" value="Standard $3.99">Standard $3.99<br>
<input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</div>
<div style="display:inline-block;">Discounts:<br>
<input type="checkbox" name="discounts" value="AAA">AAA<br>
<input type="checkbox" name="discounts" value="AARP">AARP<br>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member</div>
<button type="button">Join Now!</button>
</fieldset>
</form>
</body>
But a better way is to use flex:
#container{
display:flex;
justify-content:space-around;
align-items:bottom;
align-items:flex-end;
}
<body style="background-color:#EEEEEE">
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
First Name: <input type="text" name="first" placeholder="Joey" size="25">
      Last Name: <input type="text" name="last" placeholder="Shmoey" size="25">
<br> <br> Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30">
State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2">
City: <input type="text" name="city" placeholder="York">
Zip:<input type="text" name="zip" placeholder="17402" maxlength="5" size="8">
</fieldset>
<fieldset style="width: 750px;">
<legend>Payment and Shipping</legend>
<div id='container'>
<div >Payment:<br>
<input type="radio" name="payment" value="Visa">Visa<br>
<input type="radio" name="payment" value="MasterCard">MasterCard<br>
<input type="radio" name="payment" value="Paypal">Paypal</div>
<div > Shipping:<br>
<input type="radio" name="shipping" value="Priority $7.99">Priority %7.99<br>
<input type="radio" name="shipping" value="Standard $3.99">Standard $3.99<br>
<input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</div>
<div> Discounts:<br>
<input type="checkbox" name="discounts" value="AAA">AAA<br>
<input type="checkbox" name="discounts" value="AARP">AARP<br>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member</div>
<button type="button">Join Now!</button> </div>
</fieldset>
</form>
</body>
You should use label tags here for all your field label.
Each radio button list should also bee in it's own fieldset
Also don't use tags like br or elements like for spacing, user margin or padding instead.
Let's now encapsulate the radio buttons and the labels in a label tag. That will help up align the link. Don't use a button in a link, it's invalid HTML and can result in odd behavior. Instead, style the link appropriately, I'd keep it looking like a link as it is an actual link to an external site opening in a new tab.
body {
background-color: #EEEEEE
}
.flex {
display:flex;
}
label.wide {
padding-right: 1em;
}
label {
white-space:nowrap;
padding-bottom:0.5em;
display:inline-block;
}
fieldset fieldset {
border: none;
padding-bottom:0;
}
#paymentShippingFields fieldset label {
display: block;
padding-bottom:0;
}
#paymentShippingFields fieldset {
border:none;
width:33%;
}
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
<fieldset id="nameField">
<label class="wide">First Name: <input type="text" name="first" placeholder="Joey" size="25"></label>
<label>Last Name: <input type="text" name="last" placeholder="Shmoey" size="25"></label>
</fieldset>
<fieldset id="addressField">
<label>Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30"></label>
<label>State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2"></label>
<label>City: <input type="text" name="city" placeholder="York"></label>
<label>Zip: <input type="text" name="zip" placeholder="17402" maxlength="5" size="8"></label>
</fieldset>
</fieldset>
<fieldset style="width: 750px;" id="paymentShippingFields">
<legend>Payment and Shipping</legend>
<div class="flex">
<fieldset>
<legend>Payment:</legend>
<label><input type="radio" name="payment" value="Visa">Visa</label>
<label><input type="radio" name="payment" value="MasterCard">MasterCard</label>
<label><input type="radio" name="payment" value="Paypal">Paypal</label>
</fieldset>
<fieldset>
<legend>Shipping:</legend>
<label><input type="radio" name="shipping" value="Priority $7.99">Priority %7.99</label>
<label><input type="radio" name="shipping" value="Standard $3.99">Standard $3.99</label>
<label><input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</label>
</fieldset>
<fieldset>
<legend>Discounts:</legend>
<label><input type="checkbox" name="discounts" value="AAA">AAA</label>
<label><input type="checkbox" name="discounts" value="AARP">AARP</label>
<label>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member
Join Now!
</label>
</fieldset>
</div>
</fieldset>
</form>
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>
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.