Formularer

Indlæs andet indhold på denne side:

Brugerfelter

Emnet bruger-input er så omfattende, at jeg har valgt at dele det op i mindre bidder:

Indlæs andet indhold på denne side:

input type="text"

Siden er opdateret 22. 8. 2009

Inputfelter af typen text lader sig let style med css. En definition i cssinput rammer alle elementer uanset type:

input {
  border: 1px solid #ccf;
  }

Skal kun input af denne type styles, specifiserer man det i css ved at skrive input[type="text"]:

input[type="text"] {
  border: 1px solid #ccf;
  }

<input type="text" name="foo" size="40" maxlength="60" />

Input-typen text laver et skrivefelt på én linje, med synlig længde på 40 karakterer (IKKE pixels) og med mulig maksimal tekstlængde på 60 karakterer.


<input type="text" class="borderdef" name="foo" size="40" maxlength="60" />

Længden og udseendet på et input af typen text kan også formateres med css. En sådan css-formatering vil have højere prioritet end definitionen i html, men definitionen i html er stadig obligatorisk.

input.borderdef{
width: 300px;
border: 1px solid #ccf;
font-size: 10px;
font-family: verdana, sans-serif;
}

<input type="text" name="url" size="40" maxlength="80" value="http://" />

Man kan i øvrigt ved at tilføje attributten value forudindskrive noget tekst i inputfeltet - se feltet URL i formularen øverst på siden.


<input type="text" name="foo" size="40" maxlength="80" value="Skriv her" onfocus="if(this.value=='Skriv her') this.value=''" />

Man kan få den forudindsatte tekst til at forsvinde, så snart brugeren klikker i inputfeltet.

Koden er udformet således, at man ikke senere i forløbet uforvarende kommer til at slette noget, man lige har skrevet (indholdet slettes kun, hvis det er det originale).


<input type="text" name="foo" size="40" maxlength="80" value="Skriv her" onfocus="if (this.value=='Skriv her') this.value = ''" onblur="if (this.value=='') this.value = 'Skriv her'" />

Koden kan også udformes sådan, at hvis feltet har været markeret og der ikke er blevet skrevet noget alligevel, genindsættes den oprindelige tekst (eller noget helt andet), når feltet forlades.


<input type="text" name="foo" size="40" maxlength="80" value="Skriv her" onfocus="this.select();" onchange="this.onfocus=null;" />

Man kan også få markeret feltets indhold, når der klikkes i feltet. Det giver brugeren mulighed for at tabbe forbi, uden at indholdet mistes. Når brugeren har ændret på indholdet, annulleres funktionen.


<input type="text" name="foo" size="40" readonly="readonly" value="xxxx" />

Endelig kan man ved at tilføje attributten readonly skrivebeskytte indholdet i inputfeltet.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen januar 2000
Hjemmesideskolen
Du er her: Forsiden - html - Formularer
Brugere lige nu: 1
Home Mail