Indlæs andet indhold på denne side:
Emnet bruger-input er så omfattende, at jeg har valgt at dele det op i mindre bidder:
Indlæs andet indhold på denne side:
Siden er opdateret 22. 8. 2009
Inputfelter af typen text lader sig let style med css. En definition i css på input 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.