Tijden veranderen
radiobuttens juist opmaken
maar nu wil ik het opmaken zoals het hoort, dus met <label>.
nu lukt dit wel, alleen met radiobuttens gaat het fout.
mijn html, wat ik geprobeerd heb:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class = "form">
<form name = "registreren" action = "index.php?content=registreren.php" method = "post">
<fieldset>
<legend>
Hier kunt u alle gegevens invoeren om te registreren. <br>
De velden met een * zijn verplicht <br>
Met een account kunt u inloggen en voorstellingen reserveren.
</legend>
<label for = "setgeslacht">Geslacht:*</label>
<input type = "radio" name = "setgeslacht" value = "man">
<label for = "man">man</label>
<input type = "radio" name = "setgeslacht" value = "vrouw">
<label for = "vrouw">vrouw</label>
</fieldset>
<form name = "registreren" action = "index.php?content=registreren.php" method = "post">
<fieldset>
<legend>
Hier kunt u alle gegevens invoeren om te registreren. <br>
De velden met een * zijn verplicht <br>
Met een account kunt u inloggen en voorstellingen reserveren.
</legend>
<label for = "setgeslacht">Geslacht:*</label>
<input type = "radio" name = "setgeslacht" value = "man">
<label for = "man">man</label>
<input type = "radio" name = "setgeslacht" value = "vrouw">
<label for = "vrouw">vrouw</label>
</fieldset>
en de corrosponderende css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.form fieldset {
border : 1px solid #CDAD00;
}
.form legend {
border : 1px solid #CDAD00;
}
.form label {
width : 50%;
float : left;
text-align : center;
}
.form input {
border : 1px solid #CDAD00;
width : 200px;
text-align : left;
display : block;
margin : 5px;
}
border : 1px solid #CDAD00;
}
.form legend {
border : 1px solid #CDAD00;
}
.form label {
width : 50%;
float : left;
text-align : center;
}
.form input {
border : 1px solid #CDAD00;
width : 200px;
text-align : left;
display : block;
margin : 5px;
}
nu gebeurt er iets raars: de rondjes komen op de verkeerde plek, en de tekst zweeft daar achteraan, en op de volgende regel. ik wil er dus van maken :
Geslacht:* O man O vrouw
bij voorbaat dank
Gewijzigd op 14/02/2012 16:58:43 door Jeroen VD
name="val" en niet name = "val"
En in de legend doe je 1 klein keyword waar het over gaat. Als je bijv. voor een pizzakoerier bedrijfje een bestel formulier maak heb je 3 fieldsets:
1) Gebruikersinformatie, als adres/naam/enz. Legend kan hier iets van 'Persoonlijk' zijn
2) Informatie welke pizza je wilt. Dit stop je in een fieldset met de legend 'Bestelling'
3) Informatie over welk koeriersbedrijf uit de buurt de pizza moet bezorgen.
Wat er fout gaat is die float: left; gebeuren. Je wil de inputs op display block zetten om het op een andere lijn te plaatsen. Helaas hoort het niet zo en kun je beter gewoon een break tag toevoegen op de inputs.
Input with: 200px;? Je weet dat de input hier alleen maar dat rondje is? En dus zal dat rondje 200px breed zijn, wat strict genomen niet kan en dus zal je margin moeten gebruiken en het staat niet echt mooi.
en dat legend verhaal, klopt. maar ik vond het weer zo raar om eerst een uitleg te geven, om vervolgens dat in een keyword nogmaals te vertellen. dat vind ik verwarrend werken.
width: 200px is overgebleven van het eerdere testen, deze er nog niet uitgehaald.
ik zal zowel de float: left en de display : block eens weghalen, kijken wat er gebeurd.
Omdat er spaties tussen staan. Ik denk dat oude IE versies er problemen mee hebben.
>> en dat legend verhaal, klopt. maar ik vond het weer zo raar om eerst een uitleg te geven, om vervolgens dat in een keyword nogmaals te vertellen. dat vind ik verwarrend werken.
Je kan naar mijn mening beter de uitleg in de fieldset stoppen, in een alinea tag. Dat is stukken semantischer (eigenlijk zou het in een aside tag moeten).
Toevoeging op 14/02/2012 18:20:48:
btw ik heb ook de legend gefatsoeneerd;
en probeer het is gewoon zo:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
<style type="text/css">
.form fieldset {
border : 1px solid #CDAD00;
}
.form legend {
border : 1px solid #CDAD00;
}
</style>
</head>
<body>
<div class="form">
<form name="registreren" action ="index.php?content=registreren.php" method="post">
<fieldset>
<legend>
Hier kunt u alle gegevens invoeren om te registreren. <br>
De velden met een * zijn verplicht <br>
Met een account kunt u inloggen en voorstellingen reserveren.
</legend>
<label for = "setgeslacht">Geslacht:*</label>
<label for="man">man</label>
<input type="radio" name="setgeslacht" value="man">
<label for="vrouw">vrouw</label>
<input type="radio" name="setgeslacht" value="vrouw">
</fieldset>
</body>
</html
<head>
<style type="text/css">
.form fieldset {
border : 1px solid #CDAD00;
}
.form legend {
border : 1px solid #CDAD00;
}
</style>
</head>
<body>
<div class="form">
<form name="registreren" action ="index.php?content=registreren.php" method="post">
<fieldset>
<legend>
Hier kunt u alle gegevens invoeren om te registreren. <br>
De velden met een * zijn verplicht <br>
Met een account kunt u inloggen en voorstellingen reserveren.
</legend>
<label for = "setgeslacht">Geslacht:*</label>
<label for="man">man</label>
<input type="radio" name="setgeslacht" value="man">
<label for="vrouw">vrouw</label>
<input type="radio" name="setgeslacht" value="vrouw">
</fieldset>
</body>
</html
en nee ik gebruik standaard geen firefox, maar chrome
Toevoeging op 14/02/2012 18:31:12:
en ja, ze hebben dezelfde naam, dat hoort zo met radiobuttons.
je zegt dat je 2 kolommen wilt hebben met de naam van het veld en het veld hoebedoel je dit? welke css hoort hierbij? want je hebt er maar een gepost en een voorbeeld en die code wat ik gepost heb net is toch net als in het voorbeeld? of bedoelde je wat anders?
naam = [______]
waarin naam = de eerste kolom
en [______] de tweede kolom.
in de css die ik gepost heb werkte dit wil, omdat label de eerste helft van het scherm nam, en input de tweede helft.(beide hadden width = "50%"). nu is de width bij de input dus weg, en krijg ik geen kolommen meer
Gewijzigd op 16/02/2012 18:34:40 door Jeroen VD
Toevoeging op 16/02/2012 18:34:01:
de fieldset geeft overigens de background over de hele fieldset, dus ook naast de legend, boven de border van de fieldset. maar alleen in ie. kan ik dit wegkrijgen?
Gewijzigd op 16/02/2012 18:36:25 door Reshad F
maar een <input> hoeft niet afgesloten te worden?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
<head>
<style type="text/css">
.form fieldset {
border : 1px solid #CDAD00;
}
.form legend {
border : 1px solid #CDAD00;
}
#kolom1 {
text-align:center;
float:left;
}
#kolom2 {
float:left;
position:fixed;
right:50%;
top:55;
}
</style>
</head>
<body>
<div class="form">
<form name="registreren" action ="index.php?content=registreren.php" method="post">
<fieldset>
<legend>
Hier kunt u alle gegevens invoeren om te registreren. <br>
De velden met een * zijn verplicht <br>
Met een account kunt u inloggen en voorstellingen reserveren.
</legend>
<div id="kolom1">
<label for = "setgeslacht">Geslacht:*</label>
<label for="man">man</label>
<input type="radio" name="setgeslacht" value="man">
<label for="vrouw">vrouw</label>
<input type="radio" name="setgeslacht" value="vrouw">
</div>
<div id="kolom2">
<p>hier iets</p>
</div>
</fieldset>
</form>
</div>
</body>
</html>
<head>
<style type="text/css">
.form fieldset {
border : 1px solid #CDAD00;
}
.form legend {
border : 1px solid #CDAD00;
}
#kolom1 {
text-align:center;
float:left;
}
#kolom2 {
float:left;
position:fixed;
right:50%;
top:55;
}
</style>
</head>
<body>
<div class="form">
<form name="registreren" action ="index.php?content=registreren.php" method="post">
<fieldset>
<legend>
Hier kunt u alle gegevens invoeren om te registreren. <br>
De velden met een * zijn verplicht <br>
Met een account kunt u inloggen en voorstellingen reserveren.
</legend>
<div id="kolom1">
<label for = "setgeslacht">Geslacht:*</label>
<label for="man">man</label>
<input type="radio" name="setgeslacht" value="man">
<label for="vrouw">vrouw</label>
<input type="radio" name="setgeslacht" value="vrouw">
</div>
<div id="kolom2">
<p>hier iets</p>
</div>
</fieldset>
</form>
</div>
</body>
</html>
Toevoeging op 16/02/2012 18:50:12:
Jeroen vd op 16/02/2012 18:43:37:
de afsluiting van form zit wel in mn script, dit is maar een selectie, ben vergeten de </form> mee te nemen.
maar een <input> hoeft niet afgesloten te worden?
maar een <input> hoeft niet afgesloten te worden?
een input veld moet ook afgesloten worden idd met / voor de laatste >
wat ik bedoel, is dat in kolom 1 alle labels zitten, en in kolom 2 alle inputs zitten.
Toevoeging op 16/02/2012 18:52:28:
/> hoeft toch alleen maar in xhtml?
en ik denk dat je het anders met een table moet oplossen ik weet even geen andere oplossing dan die ik je al gegeven heb.
Quote:
/> hoeft toch alleen maar in xhtml?
Ja, en dat is totaal overbodig aangezien xhtml eigenlijk niet meer bestaat en browsers er niks mee doen.
Je kan de labels een width geven, hierdoor lijken de inputs in een aparte kolom te staan. Voorbeeldje: http://tinkerbin.com/SZM2feew
Tevens is het niet verstandig om dit te doen. Je kan beter een form maken waarbij de labels en inputs onder elkaar staan, deze worden over het algemeen sneller en makkelijker ingevuld. Voor uitleg zie Visual Direction in Web Design op webdesigntuts+ en dan het kopje Forms.
maar ik zal toch maar onder elkaar neerzetten, nu ik dit gezien heb.
en over die fieldsets?
Quote:
de fieldset geeft overigens de background over de hele fieldset, dus ook naast de legend, boven de border van de fieldset. maar alleen in ie. kan ik dit wegkrijgen?