Formulier; Radiobuttons & CSS

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Arjan Kapteijn

Arjan Kapteijn

08/12/2008 11:56:00
Quote Anchor link
Een formulier opmaken met CSS is leuk, ik heb vaker met veel plezier daarmee gestoeid. Maar nu ik bezig ben met een soort vragenlijst moet ik gebruik maken van radiobuttons en dat is opeens een stuk minder leuk.

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)
PHP script in nieuw venster Selecteer het PHP script
1
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 />
 
PHP hulp

PHP hulp

28/03/2024 22:05:34
 
Robert Deiman

Robert Deiman

08/12/2008 12:36:00
Quote Anchor link
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?


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?
 
Arjan Kapteijn

Arjan Kapteijn

08/12/2008 12:50:00
Quote Anchor link
Indien ik bij iedere radiobutton een label plaats, wat opzich wel logisch is, dan moet ik dat label linken aan de 'value' van een radiobutton neem ik aan? Want de name van een radiobutton komt meerdere keren voor (daarom is het een groep).

Ik heb even een voorbeeldje gemaakt, wat er nu uit komt rollen;

Afbeelding

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.
 
Robert Deiman

Robert Deiman

08/12/2008 12:55:00
Quote Anchor link
Zoals ik al aangaf in mijn vorige post, je koppelt het label via het ID van een button. (dus je moet elke button een id geven)

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.
 
Arjan Kapteijn

Arjan Kapteijn

08/12/2008 13:34:00
Quote Anchor link
Check, de HTML klopt nu.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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 />


Alleen de CSS nog, met een display: block; komt het antwoord namelijk onder de radiobutton te staan als deze te 'lang' is.
 
Robert Deiman

Robert Deiman

08/12/2008 13:41:00
Quote Anchor link
Hebben ze een bepaalde vaste breedte in pixels? Zo ja, dan geef je de width gewoon op in je css. (als ze voor bij de radiobuttons een vaste breedte hebben, dan geef je de labels een class mee. Voor Deze class geef je dan in je css de breedte op.)
 
Mitchell

Mitchell

08/12/2008 13:44:00
Quote Anchor link
Float: left op je input en margin-left op je labels? n_n
 
Arjan Kapteijn

Arjan Kapteijn

08/12/2008 14:47:00
Quote Anchor link
Afbeelding

Dan krijgen we dus de volgende situatie.
 
Mitchell

Mitchell

08/12/2008 14:50:00
Quote Anchor link
Mh, toch wel jammer dat inline-block nog niet bruikbaar is. :)

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
 
Arjan Kapteijn

Arjan Kapteijn

08/12/2008 15:01:00
Quote Anchor link
Door die 100% komen -alle- antwoorden op een volgende regel te staan.
 
Mitchell

Mitchell

08/12/2008 15:08:00
Quote Anchor link
Zou een online voorbeeldje mogelijk zijn? Dan kan ik zelf er even mee gaan rotzooien. 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..
 
Arjan Kapteijn

Arjan Kapteijn

08/12/2008 15:10:00
Quote Anchor link
@ 08.12.2008 13:34 staat een stukje HTML, succes, ik blijf het lastig vinden :P.
 
Mitchell

Mitchell

08/12/2008 15:26:00
Quote Anchor link
CSS
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}


HTML
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


Werkt voor mij in FF 3.0 en IE 7.. n_n
 
Arjan Kapteijn

Arjan Kapteijn

08/12/2008 15:30:00
Quote Anchor link
Thats it! Thanks! Nu kan ik gewoon lekker aan de slag met wat margins/paddings en andere leuke meuk!
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.