Hvordan lage skjemafelter som ser ryddige ut?

[Lurifaksen]

Jeg trenger litt hjelp til å lage felter i et skjema.

 

Problemet er at jeg ikke får de til å se spesielt ryddig ut...

 

Jeg skal skrive foran feltet hva det er. Problemet blir da at den horisontale avstanden fra venstre til feltet avhenger av hvor lang teksten foran er. Da ser det utrolig uryddig ut. Hvordan får jeg alle feltene til å være like langt ute, uavhengig av lengden på teksten foran? (tabulator?)

 

For å illustrere:

 

Tekst:[_____]

Lengre tekst [_____]

Kort:[_____]

Kjempelangtekst:[_____]

 

Det ser lite ryddigt/oversiktlig ut.

 

Slik vil jeg ha det:

 

Edit: det var ikke lett å illustrere det... (forskjellig vist i opera og IE) Jeg vil ha selve feltene rett justert verticalt.

 

Finnes det en lett måte å gjøre dette på?

Endret 5. september 2004 av GeeZuZz

[Cucum(r)]

Du kan sette bredde på label-elementet.

 

label {
width: 200px;
float: left;
}

<label for="tekstfelt">Navn</label>
<input type="text" name="tekstfelt" />

[Lurifaksen]

Det var kjapt!

 

Av en eller annen grunn ser ikke det label greiene ut til å ha noen effekt...

Feltene er justert helt inntil "Navn:"

 

HTML: <label for="navn">Navn:</label><input type="text" name="navn" maxLength="15" value="">

 

CSS filen: .label { float: left; width: 200px; }

Endret 5. september 2004 av GeeZuZz

[svamp]

Selv om det sannsynligvis er veldig usemantisk, så kan du sette opp skjemaet i en definisjonsliste, slik:

 

<dl>
  <dt>Navn</dt>
  <dd>felt</dd>
  <dt>Adresse</dt>
  <dd>felt</dd>
</dl>

 

Edit: Forresten, ta vekk punktumet foran "label" i CSS'en din, så virker det nok

Endret 5. september 2004 av svamp

[Cucum(r)]

Det kommer av at du har laget en klasse som heter label.

Fjern punktumet forann label, så skal det nok funke.

 

Eventuellt bare kopier koden min.

[Lurifaksen]

Haha! Det var nok punktumet som var synderen ja...

Nå så det straks mye mer ryddig ut

 

Tusen takk for hjelpen!

Endret 5. september 2004 av GeeZuZz

[Cucum(r)]

Du kan jo også ta en titt på Trimming form fields og Accessible, stylish form layout

[Smidt]

er det feil å legge inn en span?

<span class="text">teksten min her</span>
<input type="text" name="tekstfelt" />

.text {
width: 100px;
float: left;
}

 

edit: semantisk feil?

Endret 5. september 2004 av Smidt

[Cucum(r)]

Legg det heller i label, da blir skjemaet mer brukervennlig.

[Lurifaksen]

Du kan jo også ta en titt på Accessible, stylish form layout

Er i utgangspunktet litt skeptisk til å lære HTML fra sider som ser totalt ødelagt ut i Opera...

 

Edit: Merkelig. Når jeg prøvde linken nå rendret den siden skikkelig... Nesten i alle fall.

Endret 5. september 2004 av GeeZuZz

[Cucum(r)]

Vel, du har ingen grunn til å rynke på nesa.

Cameron Adams er et kjent ansikt innen webstandard-verdenen.

Det som får meg til å stusse litt er at siden ser helt fin ut i IE og FF, men ikke Opera