Menu
Community /Pin to ProfileBookmark
@cootheadJan 17.2017 — #Hi there JMRKER,
[indent]
my personal preference is keeping the elements separate.
I have two reasons for this assertion...
[/indent]
[i]coothead[/i]@cootheadJan 18.2017 — #Hi there JMRKER,
[indent]
As mentioned in my previous post...
If either of those two elements are confined within the label element,
then the cascading effect of CSS nullified
Here is an type="radio" example...
[/indent]
[i]coothead[/i]
Correct use of the <label> tag?
Aside from the ‘id’ values, ?
1. Is there any difference in the structure or execution of the following scripts?
2. Since they work the same, does one form have an advantage over the other?
[code]
<input type=”radio” name=”question1″ id=”q1a1″> <label for=”q1a1″>Answer 1</label><br>
<input type=”radio” name=”question1″ id=”q1a2″> <label for=”q1a2″>Answer 2</label><br>
<input type=”radio” name=”question1″ id=”q1a3″> <label for=”q1a3″>Answer 3</label><br>
<input type=”radio” name=”question1″ id=”q1a4″> <label for=”q1a4″>Answer 4</label><br>
<input type=”radio” name=”question1″ id=”q1a5″> <label for=”q1a5″>Answer 5</label>
[code]
<label> <input type=”radio” name=”question1″> Answer 1 </label><br>
<label> <input type=”radio” name=”question1″> Answer 2 </label><br>
<label> <input type=”radio” name=”question1″> Answer 3 </label><br>
<label> <input type=”radio” name=”question1″> Answer 4 </label><br>
<label> <input type=”radio” name=”question1″> Answer 5 </label>
Sign in
to post a comment6 Comments(s) ↴
0
@cootheadJan 17.2017 — #Hi there JMRKER,[indent]
my personal preference is keeping the elements separate.
I have two reasons for this assertion...
- [list=1]
[/list]
[/indent]
[i]coothead[/i]
0
@cootheadJan 18.2017 — #Hi there JMRKER,[indent]
[color=navy]I can visualize the benefits of the label being outside the checkbox element, [/quote]
but I don't see any for the radio button elements. [/color]
As mentioned in my previous post...
[color=navy]it enables CSS toggling effects for type="radio" an type="checkbox"[/color] [/quote]
If either of those two elements are confined within the label element,
then the cascading effect of CSS nullified
Here is an type="radio" example...
[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<!--<link rel="stylesheet" href="yourpage.css" media="screen">-->
<style media="screen">
body {
font: 100%/150% arial,helvetica,sans-serif;
background-color: #f0f0f0;
}
h1 {
text-align: center;
}
#par {
display: inline-block;
padding: 0;
margin: 0 0 1em;
border: 1px solid #999;
border-radius: 0.5em;
list-style: none;
background-color: #fff;
}
#par li {
padding: 0.25em 0.5em;
margin: 0.5em 0;
}
#par label {
font-weight: bold;
cursor: pointer;
}
#par label:hover {
color: #c00;
}
#box {
width: 90%; /* adjust to suit */
margin: auto;
border: 1px solid #999;
border-radius: 1em;
overflow: hidden;
background-color: #fff;
box-shadow: inset 0 0 1em rgba(0,0,0,0.4),
0.25em 0.25em 0.25em rgba(0,0,0,0.4);
}
#box input {
position: absolute;
left: -999em;
}
#inner {
width: 300%;
margin: 0;
transition: margin 1s ease-in-out;
}
#inner div {
float: left;
width: 33.333%;
padding: 1.5%;
box-sizing: border-box;
font-size: 80%;
}
#inner h2 {
text-align: center;
}
#inner h3 {
text-align: right;
}
#inner h3 span {
margin-left: 1em;
font-weight: normal;
}
#r1:checked~#inner {
margin-left: 0;
}
#r2:checked~#inner {
margin-left: -100%;
}
#r3:checked~#inner {
margin-left: -200%;
}
</style>
</head>
<body>
<h1>CSS content changer</h1>
<ul id="par">
<li><label for="r1">Paragraph One</label></li>
<li><label for="r2">Paragraph Two</label></li>
<li><label for="r3">Paragraph Three</label></li>
</ul>
<div id="box">
<input id="r1" name="r" type="radio">
<input id="r2" name="r" type="radio">
<input id="r3" name="r" type="radio">
<div id="inner">
<div>
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh,
posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat.
Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta,
sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo
odio. Sed porttitor augue velit, quis placerat diam sodales ac.
</p>
</div><div>
<h2>Donec vehicula</h2>
<p>
Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra
purus vitae lobortis. Sed et libero non diam tempor sagittis. Quisque vel egestas ipsum.
Integer sed elit eu orci blandit commodo in in erat. Donec blandit, mi at gravida varius,
nulla tellus vulputate ex, vitae euismod erat lectus rutrum diam. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tristique
varius ullamcorper.
</p>
</div><div>
<h2>Nam venenatis diam</h2>
<p>
Nam venenatis diam ante, et cursus elit porttitor at. Morbi mattis leo at ex vehicula, non
vestibulum ligula aliquam. Maecenas non nibh sollicitudin, porttitor odio in, elementum arcu.
Donec pulvinar orci enim. In pulvinar congue ante, ac rutrum odio bibendum volutpat.
Phasellus ac sem consequat lorem congue malesuada vitae vitae diam. Donec eu imperdiet
augue. Curabitur ullamcorper sit amet libero in ullamcorper. Donec sed laoreet quam.
Phasellus malesuada libero felis, non elementum ex tincidunt eget. Quisque cursus arcu vel
diam consectetur, ac imperdiet est cursus. Fusce id nunc nibh.
</p>
<h3>Some Author <span> c. 1260 – c. 1327</span></h3>
</div>
<!-- #inner --></div>
<!-- #box --></div>
</body>
</html>[/color][/indent]
[i]coothead[/i]