Formulier; Radiobuttons & CSS
Ik heb de volgende HTML code, is deze basis al goed? Heb ik een label nodig voor iedere radiobutton? Of voor een groep...
En hoe kan ik dit op een nette manier met CSS stylen, zodat de tekst die bij een radiobutton hoort niet 'onder' de radio button komt als die tekst te lang is?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<p><label for="1">Sed scelerisque sollicitudin turpis. Quisque in arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</label></p>
<input type="radio" name="1" value="1" />
Sed scelerisque sollicitudin turpis<br />
<input type="radio" name="1" value="2" />
volutpat condimentum, malesuada sed, neque<br />
<input type="radio" name="1" value="3" />
sit amet lacus<br />
<p><label for="2">Duis odio augue, ullamcorper non, eleifend ac, malesuada tincidunt, massa. Sed pulvinar dolor sed neque.</label></p>
<input type="radio" name="2" value="4" />
Aliquam purus nisi, rutrum eget, gravida non, laoreet vel, nisi<br />
<input type="radio" name="2" value="5" />
Quisque ac sapien ut orci placerat vestibulum<br />
<input type="radio" name="2" value="6" />
Curabitur turpis elit, scelerisque eget<br />
<input type="radio" name="1" value="1" />
Sed scelerisque sollicitudin turpis<br />
<input type="radio" name="1" value="2" />
volutpat condimentum, malesuada sed, neque<br />
<input type="radio" name="1" value="3" />
sit amet lacus<br />
<p><label for="2">Duis odio augue, ullamcorper non, eleifend ac, malesuada tincidunt, massa. Sed pulvinar dolor sed neque.</label></p>
<input type="radio" name="2" value="4" />
Aliquam purus nisi, rutrum eget, gravida non, laoreet vel, nisi<br />
<input type="radio" name="2" value="5" />
Quisque ac sapien ut orci placerat vestibulum<br />
<input type="radio" name="2" value="6" />
Curabitur turpis elit, scelerisque eget<br />
Arjan Kapteijn schreef op 08.12.2008 11:56:
Ik heb de volgende HTML code, is deze basis al goed? Heb ik een label nodig voor iedere radiobutton? Of voor een groep...
En hoe kan ik dit op een nette manier met CSS stylen, zodat de tekst die bij een radiobutton hoort niet 'onder' de radio button komt als die tekst te lang is?
En hoe kan ik dit op een nette manier met CSS stylen, zodat de tekst die bij een radiobutton hoort niet 'onder' de radio button komt als die tekst te lang is?
Volgens mij moet je de for van een label aan het ID hangen van een input, wat ook automatisch betekend dat je voor iedere radiobutton een label moet gebruiken.
Een radiogroup houdt in dat het een groep buttons is waarvan er maar 1 geselecteerd mag worden. Elke button heeft zijn eigen unieke waarde (value). De label koppel je aan een button (of input geldt hetzelfde voor) en als je op het label klikt wordt het bijbehorende inputveld geselecteerd, of de bijbehorende radio button geselecteerd.
Voor wat betreft de tekst: Iets meer uitleg is welkom denk ik:
- Mag de tekst wel 2 regelig worden?
- Hebben alle teksten eenzelfde breedte?
Ik heb even een voorbeeldje gemaakt, wat er nu uit komt rollen;
Wat ik eigenlijk wil is het wat 'mooier' maken en dat begint bij het feit dat sommige mogelijke 'antwoorden', die op de volgende regel komen, een stukje naar rechts geschopt moeten worden.
Daarnaast kan je het label stylen door het een display:block; mee te geven (of inline-block), die je rechts naast de radio-button positioneert. Wordt de tekst dan "meer regelig", zal die niet ineens naar links verschuiven.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<p>Sed scelerisque sollicitudin turpis. Quisque in arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<input type="radio" name="1" value="2" id="12" />
<label for="12">Sed scelerisque sollicitudin turpis</label><br />
<input type="radio" name="1" value="3" id="13" />
<label for="13">volutpat condimentum, malesuada sed, neque</label><br />
<input type="radio" name="1" value="1" id="11" />
<label for="11">sit amet lacus</label><br />
<input type="radio" name="1" value="2" id="12" />
<label for="12">Sed scelerisque sollicitudin turpis</label><br />
<input type="radio" name="1" value="3" id="13" />
<label for="13">volutpat condimentum, malesuada sed, neque</label><br />
<input type="radio" name="1" value="1" id="11" />
<label for="11">sit amet lacus</label><br />
Alleen de CSS nog, met een display: block; komt het antwoord namelijk onder de radiobutton te staan als deze te 'lang' is.
Dan krijgen we dus de volgende situatie.
Maak van de labels een float right, width 100%, display block en vervolgens die margin-left? Lijkt me gaaf als het werkt, nog nooit geprobeerd. n_n
Werkt een display: block en die margin-left gezamelijk ook niet? Zou vreemd zijn, aangezien een gewone 2 kolom div layout ook zo werkt..
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
.radio-segment {
clear: both;
}
.radio-segment input {
float: left;
width: 20px;
}
.radio-segment label {
margin-left: 24px;
display: block;
}
clear: both;
}
.radio-segment input {
float: left;
width: 20px;
}
.radio-segment label {
margin-left: 24px;
display: block;
}
HTML
Code (php)
1
2
3
4
2
3
4
<div class="radio-segment">
<input type="radio" name="1" value="2" id="12" />
<label for="12">Sed scelerisque sollicitudin turpis. Quisque in arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed scelerisque sollicitudin turpis. Quisque in arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</label>
</div>
<input type="radio" name="1" value="2" id="12" />
<label for="12">Sed scelerisque sollicitudin turpis. Quisque in arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed scelerisque sollicitudin turpis. Quisque in arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</label>
</div>
Werkt voor mij in FF 3.0 en IE 7.. n_n