Top
Phpuniverset logo
 

INDHOLD

Forside

Job annoncer

Tips og Tricks

Konkurrence

Downloads

Dokumenter

PHP bog shop

Forum

Online udviklere


Propelcom

ARTIKLER

CSS

Diverse

E-handel / annoncer

Grafik

Html

Internet

Javascript

Linux

PHP/MySQL

Programmer

Flash

Søgemaskiner

Windows

C / C++


INFO

Information

Annoncering

Kontakt

Autoremove i input-felter

Forside Kategori HTML Autoremove i input-felter




 

Jeg vil her i min første artikel skrive lidt om, hvordan man kan tilføje en lille kode til tekstfelter (fx sin formmail), så det bliver nemmere for brugeren at se, hvad han skal indtaste uden at det forstyrrer al for meget. Formen skal fjerne et forudvalgt ord ved fokus og kun skrive det igen, hvis feltet er tomt. Jeg vil starte langsomt ud og tilføje noget hele vejen igennem...

Først skal vi lave et dokument med et input af en art. Jeg prøver at holde denne rimelig simpel, så det bliver mere overskueligt. Du kan jo altid selv tilføje i den:


<!--Eksempel 1-->
<html>
<body>
<input type="text" />
</body>
</html>


Meget kortere kan vi vist næppe gøre det. Vi fortæller browseren, at det er et html-dokument, der i kroppen skal have et tekst-input.

Som det ser ud nu, har brugeren ikke stor anelse om, hvad han skal skrive i feltet. Dette kunne vi nemt klare med en label-tag:


<!--Eksempel 2-->
<html>
<body>
<label>Login: </label><input type="text" />
</body>
</html>


I vores tilfælde står der ”Login: ”. Der kan man selvfølgelig skrive, hvad man vil. Man kunne også bare skrive ”Login: ” lige før selve input-tagen, men dér er label-tag bedre, da cursoren ikke skifter til en cursor, der indikerer tekst, altså I. Dette kunne evt. være med til at forvirre en utrænet bruger, men det ser klart mere professionelt ud, at bruge label-tags.

Hvis vi også gerne vil have indhold i input-feltet fra starten (hvilket er hele formålet med artiklen), kan vi angive en værdi for formen. Det gøres med 'value':


<!--Eksempel 3-->
<html>
<body>
<label>Login: </label><input type="text" value="Login" />
</body>
</html>


Nu står der ”Login” inde i selve formen. Dette kan dog irritere utrolig meget, hvis man, hver gang man vil skrive noget nyt, først skal slette eller markere ”Login” og så skrive. Det kan vi hurtigt gøre en lille smule bedre ved at tilføje en fokus-funktion:


<!--Eksempel 4-->
<html>
<body>
<label>Login: </label><input type="text" value="Login" onFocus="select()" />
</body>
</html>


Nu markeres teksten automatisk, hver gang feltet kommer i fokus, altså når man klikker på det. Det er imidlertid ikke nogen god løsning. Det kan nemt ske, at man klikker så hårdt (!), at det svarer til et dobbeltklik. I så fald fjernes markeringen og så står man i samme situation som før! Vi vil altså gerne have fjernet hele teksten lige fra starten af. Hvis vi ændrer en smule i fokus-funktionen, kan vi hurtigt fjerne teksten:


<!--Eksempel 5-->
<html>
<body>
<label>Login: </label><input type="text" value="Login" onFocus="this.value='' " />
</body>
</html>


Nu slipper vi for at skulle slette indholdet først. Ligeså snart feltet kommer i fokus skifter dets værdi til ’’, altså ingenting. Man skal dog ikke lege længe med det, før at man opdager, at det man lige har skrevet, bliver slette igen, så snart man kommer i nærheden af feltet. Det er jo meget upraktisk, hvis man skal skrive hele sit brugernavn om, hver gang man laver en lille fejl. Vi skal altså have feltet til at fjerne indholdet, hvis vi ikke har skrevet noget. Ved at tilføje en if-funktion, kan vi bestemme, hvornår feltet skal slette indholdet:


<!--Eksempel 6-->
<html>
<body>
<label>Login: </label><input type="text" value="Login" onFocus="if (this.value=='Login') {this.value=''}"/>
</body>
</html>


Nu fjernes indholdet kun, hvis der står ”Login”. Det vil sige, at vi sikrer os, at andet ikke bliver slettet. Dit brugernavn på 23 karakter bliver altså ikke slette, når du laver en fejl og vil rette det. Hvis vi gerne vil have, at der skal stå login, hvis feltet er tom (og det vil vi!) skal vi have en til funktion. Igen skal vi bruge et if-udsagn, men denne gang bruger vi onblur:


<!--Eksempel 7-->
<html>
<body>
<label>Login: </label><input type="text" value="Login" onFocus="if (this.value=='Login') {this.value=''}" onBlur="if (this.value=='') {this.value='Login'}" />
</body>
</html>


Nu sletter feltet indholdet, hvis det er ”Login”. Skrives der noget i feltet bliver det stående, også selvom man klikker på det igen. Skrives der ikke noget, bliver værdien af feltet igen ”Login”.

(Du kan selvfølgelig skifte "Login" ud med den tekst, du vil have.)

Vi har nu et felt, der let kan betjenes og man kan fx skrive "E-mail: " i label-tagen og "Skriv din e-mail-adresse her..." i selve feltet. Nu er det nemmere for brugere at se, hvad han skal skrive hvor.



Skrevet af: | Dato : 2006-05-16 23:1 | Læst : 8475 gange | Print

Din kommentar og karakter til artiklen

Din karakter:

1

2

3

4

5

6

7

8

9

10

Kommentar:

Log ind for at give en karakter og kommentar.

Kommentarer og karakterer til artiklen

 


8/10

"Rigtig god artikel. :) Nu fatter jeg meget mere! ;D... "

Yoh | 08.12.2007, 19:48

 


7/10

"Du bruger mange eksempler og det vil hjælpe nye meget. Men jeg savner nu et par visninger. Hvordan vil det så ud efter man har lavet dette? fx."

PHP-Jonas | 08.09.2007, 16:01

 


6/10

"Hvorfor alle de eksempler?"

Nicolai Olsen | 27.05.2006, 23:44

 

Send Artikel/anmeldelse til: phpuni@phpuniverset.dk

Tilbage til oversigt

FORUM

Nyeste forum indlæg :

PHP/Opencart import module

Opencart/php import modul hjælp

Lækkert kontor / kontorfællesskab i Helsingør

Opdatering af PHP

Vurdering af hjemmeside

Nyeste forum svar :

Lækkert kontor / kontorfællesskab i Helsingør

Android programmering

Joomla som CMS

Grafik problemer

Prissammenligningsside

 

MEDLEM

LOGIN ER IKKE MULIGT, MENS VI LAVER NYT SITE
 

NYHEDSBREV

Nyhedsbrev

Tilmeld dig vores nyhedsbrev og modtag nyheder om nye scripts og tips samt om mange andre nye tiltag på Phpuniverset.dk


 

© Copyright 2000 Propelcom Phpuniverset's politik om personlige oplysninger, artikler & Koder Phpuniverset er optimeret til Mozilla 1024 * 768 Phpuniverset version: 3.0 beta
Webhost : Ignesco.dk - android talk & help

Bund