css verschil tussen checkbox en text input

Door Gertjan Wachtmeester op 18-04-2009 12:38

1.950 views

Ik ben momenteel bezig om een formulier netjes te krijgen met
<fieldset>
<legend>
<label>

Dit lukt opzich goed.
Maar nu ik meerdere checkboxes toevoeg. Komen deze niet meer netjes onder elkaar te staan.
Wat is het verschil tussen een textbox en een checkbox netjes te stijlen?

http://roozeboom.service-4u.nl/?page=caravan_add
Hier kun je kijken voor een voorbeeld.
(In IE staat de textarea ook niet goed. Maar dit is een later punt)

Mark PHP

18-04-2009 13:23

Als je alle labels netjes in een lijst zet en dat opmaakt, komen ze prima onder elkaar.

PS, je CSS kan een stuk overzichtelijker en makkelijker te onderhouden worden als je het een beetje gaat groeperen.

Gertjan Wachtmeester

18-04-2009 13:29

Begrijp ik het goed dat je<li> gaat gebruiken om ze allemaal netjes onder elkaar te laten komen? Is dit niet erg omslachtig?

Ik weet dat css beter en makkelijker kan.
Maar css is voor mij nogal lastig. Kan er niet echt mee overweg.
Maar ben er wel druk mee bezig om het te verbeteren.
Wanneer ik alles heb zoals ik het wil hebben. Dan wou ik me gaan verdiepen om de css netter te maken.

Maar waarom reageert de <input type="checkbox" /> anders dan <input type="text" />

Dit zou toch hetzelfde moeten zijn?

Mark PHP

18-04-2009 16:13

Persoonlijk vind ik het gebruik van lijsten binnen een formulier juist een nette manier van structureren. Beter dan tables of vele div's.

Waarom ze anders reageren zou ik ook niet zo weten. Sowieso vind ik het raar (lees: lelijk) als je zo'n brede width aan de checkbox meegeeft.

Ik heb even snel wat geprobeerd met lijsten, succes!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<form action="?page=caravan_form_handle" method="post">
	<fieldset class="short"><legend>Voeg een caravan Toe</legend>

		<ul>
			<li>
				<label class="short" for="merk">merk</label>
				<input type="text" id="merk" name="merk" class="short" value="" />
			</li>
			<li>
				<label class="short" for="type">type</label>
				<input type="text" id="type" name="type" class="short" value="" />
			</li>
			<li>
				<label class="short" for="kleur">kleur</label>
				<input type="text" id="kleur" name="kleur" class="short" value="" />
			</li>
			<li>
				<label class="short" for="brandstof">Brandstof</label>
				<select class="short" id="brandstof" name="brandstof">
					<option value="diesel">diesel</option>
					<option value="gas">gas</option>
					<option value="benzine">benzine</option>
				</select>
			</li>
			<li>
				<label class="short" for="transmissie">Transmissie</label>
				<select class="short" id="transmissie" name="transmissie">
					<option value="hangeschakeld">hangeschakeld</option>
					<option value="automaat">automaat</option>
				</select>
			</li>
			<li>
				<label class="short" for="voortent">voortent</label>
				<input type="checkbox" id="voortent" name="voortent" class="short" />
			</li>
			<li>
				<label class="short" for="afstap">afstap</label>
				<input type="checkbox" id="afstap" name="afstap" class="short" />
			</li>
			<li>
				<fieldset class="nood">
					<textarea class="short" name="omschrijving" rows="" cols=""></textarea>
				</fieldset>
			</li>
			<li><input class="button" type="submit" value="verzend" /></li>
		</ul>
		
	</fieldset>
</form>

</body>
</html>

Mitchell

18-04-2009 16:58

GeWa schreef op 18.04.2009 13:29
Dit zou toch hetzelfde moeten zijn?

Tuurlijk!

Net zoals dat Internet explorer goed hoort te werken! (Niet dus.)

Forms stylen is gewoon nogal ingewikkeld, je kan het beste al je soorten inputs classes mee geven en ze afzonderlijk stylen, krijg je een beter resultaat van dan ze allemaal te proberen te stylen met alleen input {}.

Verder raad ik het net zoals al eerder is gezegd een unordered list te gebruiken om je form te maken inplaats van divs of tables. Het is iets moeilijker, maarja uiteindelijk een beter resultaat.

Zoek ook even op Google naar CSS tutorials van het stylen van forms.

Onbekende gebruiker

18-04-2009 17:00

Een CSS framework kan ook nog wel eens helpen.

Gertjan Wachtmeester

18-04-2009 17:55

Ik begrijp alleen persoonlijk niet waarom je extra lists gaat toevoegen.
Als je gewoon de label hebt om te stylen en de input.
Ik heb al eerder met dit probleem gezeten. Toen gewoon een extra class aangemaakt om het wel goed te krijgen.
Maar ik kan gewoon niet begrijpen. Waarom een checkbox anders reageert dan een text.

Wat betreft de breedte die lelijk wordt. In IE is dit idd zo. In FF niet.
Hiervoor zijn ook oplossingen heb ik ergens gelezen die in css te doen zijn.

Ik ga me ook eens verdiepen in die lijsten.
Maar blijf het een vreemde manier vinden.
maar misschien werkt het idd makkelijker.
Dat ga ik dus nog eens even ondervinden.
in ieder geval bedankt voor jullie reacties.

Reageren

Inloggen om te reageren