Related posts

• HTML Lektion 1 – Start på HTML (0)
• En simpel table reference. [BEGINNER] (0)
• DOCTYPE og valid kode – ens udseende i Internet Explorer og FireFox (0)
• Create a Professional Web 2.0 Layout (0)
• Cool META-tag til overgangs-effekt på internet-sider (0)

Related posts

• Protect Your Flash Files From Decompilers by Using Encryption (0)
• How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout (0)
• Create a Professional Web 2.0 Layout (0)
• Coding your First jQuery UI Plugin (0)
• Scripting Illustrator Part 1 – How to Convert a Flat Process Color into its Matching Gradient (0)

Related posts

• Create a Professional Web 2.0 Layout (0)
• The Simple, Quick, and Small jQuery HTML Form Validation Solution (0)
• Protect Your Flash Files From Decompilers by Using Encryption (0)
• jQuery AJAX Validation Contact Form with Modal + Slide-in Transition (0)
• How to Make a CSS Sprite Powered Menu (0)

Related posts

• How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout (0)
• How to Make a CSS Sprite Powered Menu (0)
• How to Code up a Web Design from PSD to HTML (0)
• Design and Code a Cool iPhone App Website in HTML5 (0)
• Coding a CSS3 & HTML5 One-Page Website Template (0)

Så godt som alle af disse spørgsmål kan besvares med en eller begge af følgende løsninger;

- har du sørget for at skrive valid kode?
- har du husket en DOCTYPE?

Valid kode

HTML, XHTML og for den sags skyld også CSS er ikke bare tilfældige kode-elementer man frit kan sætte sammen som man lyster – der ligger nogle regler til grund for sprogene, og følger man ikke disse regler kan det meget let have konsekvenser fx i form af, at siden ikke helt får det udseende man egentlig forestillede sig eller at hver browser fortolker og ikke mindst forsøger at rette op på fejlene på hver sin måde så udseendet dermed bliver forskellige fra den ene til en anden.

Det er organisationen W3 (World Wide Web Consortium på http://www.w3.org/), der styrer retningslinjerne/anbefalingerne for bl.a. HTML, XHTL og CSS – og når jeg siger retningslinjer og ikke standarder så skyldes det, at det teknisk set faktisk ikke er standarder men kun retningslinjer der udstedes, men reelt set skal de nu alligevel betragtes som standarder. Er man derfor i tvivl om hvad man kan og ikke kan inden for hver af retningslinjerne er deres site derfor et fremragende, omend måske knap så brugervenligt, opslagsværk.

Ved at overholde standarderne sikrer man bl.a. at man ikke koder til én specifik browser hvilket man let kunne komme til tidligere da hver browser-producent kunne opfinde og understøtte egne elementer (fx havde Internet Explorer <marquee> og Netscape have <ilayer> samt <blink>) og dette betød, at sider ikke ville virke hensigtsmæssigt i andre browsere. Ved overholdelse af standarderne sikrer man, at man udvikler til alle klienter, der understøtter standarderne og ydermere vil valid kode også sikre imod de mest oplagte visningsfejl – har man fx et start- eller et slut-tag for meget eller for lidt kan det have store konsekvenser for visningen i browseren og det kan virkelig spare tid hvis man i valideringen kan se, at det er en simpel validitetsfejl man skal rette op på og at det ikke en større hovsa-løsning man skal ud i for at få tilpasset siden. Endelig vil det være betydelig nemmere at få kode-hjælp på diverse fora da det i mange tilfælde vil være irrelevant at fejlsøge og give løsninger uden valid kode da fejlene oftes skyldes netop den invalide kode.

DOCTYPE

Som nævnt ovenover er (X)HTML ikke bare tilfældig kode sat sammen efter behag, derimod ligger der altså retningslinjer til grund sprogene – og det er for at fortælle browseren hvilken standard ens side, forhåbentlig, opfylder at man benytter en DOCTYPE. Benyttes en forkert eller i værste fald ingen DOCTYPE kan det give lige så uheldige bivirkninger på ens side som invalid kode – det kan fx betyde, at browseren vælger en forkert renderings-mode (læs mere om det længere nede i artiklen), at store dele af ens CSS sættes ud af drift og at siden læses langsommere af browseren. Mere eller mindre alt sammen noget, der også har betydning for, hvor crossbrowser siden fungerer.

Det er ikke kun vigtigt, at du har en DOCTYPE på din side – placeringen er også vigtigt; er DOCTYPE ikke det absolut første i dit dokument vil din side heller ikke blive tolket korrekt. Det vil altså sige, at hvis du placerer fx javascript-kode før din DOCTYPE eller, som nogle tror de skal når de laver XHTML, placerer en XML-deklaration som det første vælger browseren den forkert renderings-mode.

Et vigtig ting i forbindelse med valg DOCTYPE er hvorvidt man skal vælge at køre Frameset, Transitional eller Strict. Frameset burde give sig selv som valget til sider der indeholder frames, men dem holder vi os selvfølgelig langt fra – men hvornår skal man så vælge Transitional og hvornår skal man vælge Strict? Jeg vil til enhver en tid anbefale at man går efter at benytte Strict – dette dels fordi det er hvad sprogene som standard er konstrueret til og dels, at man ved at benytte Strict udelukker brugen af præsentations-attributter og -elementer hvilket tvinger en til at benytte CSS, altså opnår man en logisk opsplitning mellem indhold og præsentation hvilket igen gør koden mere overskuelig og gør præsentations-ændringer lettere. Transitional indeholder de samme muligheder som Strict – men åbner altså op for en lettere overgang fra ældre versioner, bl.a. i form af, at der kan benyttes attributter til at styre udseende.

Nederst i artiklen finder du link til hvilke DOCTYPEs du kan benytte – og det er vigtigt at de kopieres direkte og ikke tilpasses efterfølgende. For eksempel er XHTML case-sensitiv og jeg har set eksempler hvor “EN” var udskiftet med “DA” med tanke på at det jo var en side på dansk man skrev, men værdien hentyder ikke til sproget på sitet men derimod til det sprog definitionen er skrevet i, og de er skrevet på engelsk – og ændringer kan altså betyde, at den indsatte DOCTYPE bliver lige så forkert som var der slet ingen DOCTYPE.

Generelt er DOCTYPE en lidt sjov størrelse i og med at et korrekt udseende (altså i henhold til at undgå at gå i quirksmode) kan varierer meget. Eksempelvis vil en DOCTYPE uden URL være valid i XHTML og HTML4 Strict men ikke valid i HTML4 Transitional, så anbefalingen må være at gå ud fra de anbefalede du finder i linket nederst i artiklen.

En par rigtige DOCTYPEs:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

en forkert DOCTYPE:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

Det er vigtigt at lægge mærke til, at DOCTYPE altså ikke et HTML-tag, det er en instruktion til browseren omkring hvilken version siden er skrevet i.

Renderings-mode – !DOCTYPE “Switch”

Da browserne skal understøtte mange forskellige standarder, og specielt pga de helt gamle, kan der køres med 2 forskellige renderings-modes, nemlig standard- samt quirks-mode. Dette skift mellem standard- og quirks-mode bliver der oftet refereret til som The !Doctype Switch da det netop er vores DOCTYPE der er med til at bestemme renderingsmoden.

Den renderingsmode vi er interesseret i er uden tvivl standard-mode, da det er denne der håndterer W3-standarderne bedst muligt – kører siden i quirks-mode vil browserens fortolkning svare til helt gamle browseres fortolkninger og det er selvsagt meget uhensigtsmæssigt. Hvis du vil se hvilken renderings-mode dit site kører under kan du bl.a. se dette i Firefox ved vælge “Vis sideoplysninger” i højrekliksmenuen.

Et af de vigtigste punkter under The !Doctype Switch er den såkaldte boxmodel. Meget kort fortalt går boxmodellen ud på, hvordan højde og bredde af elementer sammensættes til det endelige visuelle resultat (ud fra height, width, padding, border samt margin), og da alle elementer i HTML i bund og grund er en firkantede byggeklodser kan man let gå galt i byen hvis ikke man har gennemskuet boxmodellen. Nederst i artiklen kan du finde links til længere forklaringer om boxmodellen.

Det kan nok være lidt svært at forestille sig hvilken betydning det reelt set har om man kører under den ene eller den anden renderingsmode, så betragt billeder på http://web-dev.dk/post/2009/06/DOCTYPE-og-valid-kode—ens-udseende-i-Internet-Explorer-og-FireFox.aspx , hvor den eneste forskel i den bagvedliggende kode er brugen af DOCTYPE eller ej så de dermed kører i hver sin renderings-mode.

Hverdagseksempel

En nok desværre for udbredt holdning er, at man kan bruge tid på at gøre sin kode valid så snart man har fået siden til at se ud som den skal – men ofte er den manglende validitet netop årsagen til, at siden ikke vises som ønsket og så er det jo som at angribe mod sit eget mål i fodbold; nemlig nærmest håbløst, i hvert fald hvis man vil vinde. For ganske kort tid siden sad jeg og fulgte en debat med netop denne problematik – udviklerens side blev på flere punkter ikke vist som ønsket og trods flere kommentarer om det irrelevante i at forsøge at rette op på visningen før end siden var valid blev dette ikke accepteret som værende en løsning, for selvfølgelig måtte der findes en mulighed uden at der skulle bruges tid på at lære standarderne at kende og ikke mindst følge dem… Det viste sig bare, at årsagen til hele problemet selvfølgelig var den invalide kode; der var – blandt flere andre fejl – brugt to <body> tags hvor kun ét er tilladt. Så snart det overskydende <body> var fjernet blev alle fejl i visningen løst – koden var stadig ikke helt valid (og blev det formentlig desværre aldrig), men det viser bare hvor lidt det nytter at gøre tingene i omvendt rækkefølge.

Jamen, det virker stadig ikke?

Nu gik vi lige og troede at brugen af DOCTYPE og valid kode var svaret på alle vore bønner – men sådan er det desværre ikke helt. Det skal nemlig også nævnes, at bare fordi koden er valid kan man desværre ikke altid forvente at siden vises helt ens i forskellige browsere – der kan let stadig være små eller i sjældne tilfælde måske endda store forskelle og i de tilfælde er der ikke andet for end at lære hvad forskellene går ud på så man ved det til en anden gang. Ofte er det en simpel ændring/tilføjelse der skal til for at løse problemet og det er bestemt også værd at nævne at det da heller ikke nødvendigvis skyldes dårlig kode men bare den enkelte browsers måde at fortolke den samme ting på. Valideringen af ens side kan lidt tolkes som stavekontrollen i Word – den sikrer imod stavefejl, men kan af naturlige årsager ikke validere på betydningen/visningen af dokumentet.

Husk også – god kode er altid valid, men valid kode er ikke altid god kode.

Gode link

W3C Markup Validation Service; http://validator.w3.org/ – brug denne service til at validere din (X)HTML kode, du kan validere både via en URL, filupload samt direkte kodeinput.

W3C CSS Validation Service; http://jigsaw.w3.org/css-validator/ – samme som ovenstående, bare til din CSS.

Anbefalede DOCTYPEs; http://www.w3.org/QA/2002/04/valid-dtd-list.html – er du i tvivl om hvordan din DOCTYPE skal se ud i specifikke tilfælde indeholder denne side de relevante svar.

Boxmodellen; http://www.w3.org/TR/css3-box/ samt http://www.w3.org/TR/CSS2/box.html

Lidt om både boxmodel og !DOCTYPE Switch; http://msdn.microsoft.com/en-us/library/bb250395(VS.85).aspx#cssenhancements_topic3

Related posts

• How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout (0)
• Design and Code a Cool iPhone App Website in HTML5 (0)
• How to Code up a Web Design from PSD to HTML (0)
• Design a Prettier Web Form with CSS 3 (0)
• Coding a CSS3 & HTML5 One-Page Website Template (0)

Hvad er en mailteance?

Mainteance er, at når du er igang med og lave din hjemmeside, er det første jo som reelt du skal gøre, er at sætte din forside op, hvor du eftergølgende lægger det online på nettet. Der skal du selvfølgelig undgå, at dirverse brugere og gæster kommer ind på siden, inden at det hele er klar. Derfor skal du lave en mainteance som forside. Mainteance er altså en forhindring der gør, at andre end dig ikke kan komme ind.

Ok, men hvordan ser Mainteance ud?

Mainteance ser akurat ud som en ganske normal login boks, der fylder hele siden. Denne login boks gør sådan, at man skal være registreret bruger, for og kunne logge ind. Samtidig vil den give denne gæst et indblik i hvad denne side omhandler, og hvad man kan forvente sig af den.

Hvordan logger jeg så selv ind?

Inden du lægger din side online, skal du huske og registrere dig selv som bruger! Det er vigtigt, fordi ellers kan du ikke logge ind på din side, og så skal du til og programere det hele om.

Lyder meget godt, men er det ikke svært?

Det er ikke svært, bare du kender lidt til html og php.

Okay jeg giver det en chance. Hvordan gør man?

Først skal du have et banner, og dermed er det grafik og der er jeg den forkete og spørge, så det håber jeg i selv kan klare, ellers må hyre en grafiker

Det skal jeg nok. Men hvad så?

Du skal først indsætte denne kode før du kan sætte dit banner ind:

[code]

[/code]

Så skulle det virke.

Related posts

• Nice URl (0)
• Lav et community i PHP (0)
• Lav en simpel mailform i PHP (0)
• Lav din helt egen gæstebog! (0)
• HTML standard (0)

[code]

[/code]

DOCTYPE
De fleste browsere kan køre i 2 forskellige modes, en hvor hvor W3C standarderne skal overholdes i koden og en som ikke er så striks.

Ønsker man at vælge at køre efter ”HTML 4.01 standarden Transitional” så skal du skrive følgene i toppen af dit HTMl dokument:

Hvis du ønsker at køre efter standarden så skal du skrive følgene i toppen af dit HTLM dokument.

Korrekt ZHTML
For at lave korrekt xhtml så skal du bruge style og ikke den gamle måde som det her:

Forkert : tekst

Rigtigt: tekst

Læs mere her:

http://www.w3.org

Related posts

• Design a Prettier Web Form with CSS 3 (0)
• Coding your First jQuery UI Plugin (0)
• Using SimpleXML To Read / Parse XML (0)
• Using Google Maps’ New Features for Flash (0)
• Scripting Illustrator Part 1 – How to Convert a Flat Process Color into its Matching Gradient (0)

KOM I GANG
For at komme i gang med at kode HTML skal du åbne Notesblok eller Notepad i den engelske version af Windows, som du finder under START-PROGRAMMER-TILBEHØR også er du faktisk allerede godt i gang. Hvis du ikke bruger Windows, og derfor ikke har Notesblok, så brug en tilsvarende, simpel tekst-editor.

VIGTIGE TAGS
For at kode et stykke HTML er der nogle tags, altså små stykker kode, som du altid skal bruge.

er det vigtigste tag, da dette tag fortæller at du lige nu sidder og skrive HTML. Hvis du ikke allerede har åbnet Notesblok, så gør det nu, og indsæt øverst i dit nye dokument.

Nu laver du et linjeskift og skriver . De fleste tags afsluttes med , men der er dog nogle undtagelser. Det taler vi mere om senere.

Efter endnu et linjeskift skriver du . Head må du selv bestemme om du vil bruge, men det er i hvert fald overskriften på siden. En god idé, hvis du vil have en god overskrift, er at skrive

DINTEKSTHER

eller DINTEKSTHER ind i mellem tagget, og afslutte det med .
EKSEMPEL:

[code]

Din tekst her

[/code]

ELLER

[code]

Din tekst her
[/code]

Koden

gør teksten, som du skriver med ekstra stor. Der findes flere koder med H (

,

,

osv.)

Koden gør teksten fed.

Det næste tag vi kommer til er , som du skriver efter et linjeskift. Body er selve sidens indhold, og det er nok her du får mest brug for ,

osv. Derfor vil jeg snart lære dig nogle tag, men husk, at efter du har lukket af med så lukker du lige af med , så vi kan komme videre.

GRUNDLÆGGENDE TAGS
De grundlæggende tags indenfor HTML er de, som jo på den simpleste måde ændrer på teksten.
Her er de simpleste koder:

Fed tekst
Kursiv tekst
Understreget tekst

Laver linjeskift

laver to linjeskift

Lod du mærke til at
og

ikke blev afsluttet? Det er fordi de ikke behøves.

Hvis du skrive

laver browseren selvfølgelig to linjeskift.

DIN FØRSTE SIDE
Nu er det din tur. Prøv at lave en side, hvor der i den blå linje står Min første side, og på selve siden står der Dette er min første side.
Tryk nu på ‘Filer’ og derefter på ‘Gem som…’ og dernede hvor der står ‘Tekstdokumenter (*.txt)’ trykker du på den nedadvendene pil og vælger ‘Alle filer’. Du gemmer nu filen som ‘Test.html’ og går ind under ‘Dokumenter’ og finder det, du lige har lavet. Prøv at åbne filen og se – hvis det ikke virker, så tjek om du har lavet nogen fejl.

Ellers, så prøv at tjekke efter (IKKE KOPIERE) koden hernede om du nu har gjort det hele rigtigt:

[code]

Dette er min første side.

[/code]

Det var jo ikke så svært – vel? Lad os nu lære lidt flere tags vi kan sætte ind.

gør teksten mindre, og er endnu et tag der ikke skal afsluttes.

---

laver en streg i gennem siden, og skal ikke afsluttes.

Det var to tags du sikkert kan bruge – men hvad skal du bruge det TIL? Jo, du skal selvfølgelig bruge dem til at få din hjemmeside til at se flot ud med.

Kan jeg bruge flere tags samtidig?
Ja, det kan du faktisk godt. Hvis du nu BÅDE vil have fed og kursiv tekst på en gang, for eksempel, så skriv:

[code]
Fed og kursiv tekst her
[/code]

IKKE SÅDAN:
[code]
FORKERT!!!
[/code]

Altså, det tag der åbnes først skal lukkes sidst.

DIN TUR IGEN!
Så er det endnu engang din tur. Lav en side der ser sådan ud:
I den blå linje skal stå ‘Min første side’.
Lav en overskrift der siger, med både kæmpestor og med fed skrift ‘Dette er min første side…’ og skriv så med kursiv OG understreget tekst ‘…Og dette er en test.’ Du afslutter med lille tekst hvor der står ‘Skrevet af mig.’

LISTER
Nu skal du til at lære at lave liste.
For at lave en uordnet liste skriv

og lav så en masse tags med
• .

  EKSEMPEL:

  [code]
  

  Her er en liste!
  

  • Punkt 1...
  • Punkt 2...

  [/code]

  For at lave en ordnet liste, skriv

  og så en masse punkter med
  1. .

     EKSEMPEL:
     [code]

     1. Punkt 1...
     2. Punkt 2...

     [/code]

     er et andet tag, som laver et slags indryk i din tekst, for eksempel

     [code]
     Også sagde han

     Åh nej! Det er HAM!

     Og ganske rigtigt, det VAR virkeligt ham!
     [/code]

     Her er et link er en kode, som laver et link til en anden side. Det var bare et nyttigt tag ;)

     Send en mail her er endnu en slags link, denne linker bare til en emailadresse.

     Hvad så nu?
     Ganske flot, hvis du allerede har lavet en side nu, men hvor skal du uploade den?
     www.frac.dk og dinhost.net er ganske gode og gratis hjemmesider, hvor du kan få lov til at hoste dine filer. Det kan jeg desværre ikke skrive mere om her, da dette er en HTML artikel.

     Tags: bunden, guide, HTML, tutorial
     

     Related posts

     • Nice URl (0)
     • Mainteance (0)
     • Lav et community i PHP (0)
     • Lav en simpel mailform i PHP (0)
     • Lav din helt egen gæstebog! (0)

     ]]> http://xguiden.dk/2010/02/09/html-fra-bunden/feed/ 0 http://xguiden.dk/2010/02/09/html-fra-begyndelsen/ http://xguiden.dk/2010/02/09/html-fra-begyndelsen/#comments Tue, 09 Feb 2010 10:05:39 +0000 admin http://xguiden.dk/?p=2177 Denne artikel er beregnet til de fleste ligesom mig der kommer fra Webbyen til at sted hvor man selv skal kode sine ting.
     I denne artikel lære i fra start at lave en simpel HTML side med noget tekst, billeder, og pynte siden lidt.
     Dette er min første artikel så den er sikkert ret dårlig, i må også undskylde hvis der er nogle få stavefejl hehe er kun 11 år men nok om det lad os komme igang.

     [code]
     <
     [/code]
     og sluttes sådan her
     [code]
     />
     [/code]
     et eks. på fed skrift kunne være

     [code]
     tekst
     [/code]

     < fortæller at vi starter et tag og B fortæller at det skal være fed skrift og > betyder vi stopper taget så man kan skrive sin skrift. så skal vi afslutte taget igen, så laver vi en < for at vise vi er færdige med at skrive vores tekst. så skal tegnet på at vi afslutter vores tag skriver det består af en / altså så nu skulle det gerne se sådan her ud:

     [code]
     Din tekst med fed
     [/code]

     så burde i have styr på det med tags lad og så få lidt mere bare uden en kæmpe forklaring så har vi tags men der skal puttes tal ind, der er 1 til 5. 1 er det højeste altså der vil komme større tekst og 5 er det mindste dvs. der vil komme lille tekst så skal det se sådan her ud

     [code]

     Din tekst som vil blive meget stor

     [/code]

     så har vi jo
     de er vigtige, de skal bruges til at skifte linie når du koder kan du ikke bare trykker enter og gå en linie ned så må du skrive en tag der hedder
     Så tager vi Kursiv skrift. det er det samme som det andet du har lavet bare med I altså igen vi starter med < ligger I i den og slutter med > og igen når vi afslutter starter vi med < fortæller den vi skal afslutte med et / og gir den et I så den ved hvad vi har arbejdet med og igen afslutter vi taget sådan her > nu vil det se sådan her ud

     [code]
     Din tekst med kursiv
     [/code]

     vi må da også heller tage Understreget med ikke?
     jo det er igen det samme bare med U altså det skal se sådan ud

     [code]
     din understregede tekst
     [/code]

     Nu bliver det en smule svære nu skal vi lære centrer det er lidt længere det vil se sådan ud

     [code]

     Din tekst
     [/code]

     vi kan også venstre stille og højre stille det ser sådan her ud

     [code]

     Din tekst

     [/code]

     og

     [code]

     Din tekst

     [/code]

     Nu må i da være ved at være trætte ikke? lad os tage den sidste ting det er nemmelig et billed det instættes sådan her:

     [code]
     
     [/code]

     sti/til/billedet skiftes ud med stien til dit billed, husk nu at dit billed skal ligge på din webserver og ikke bare på din computer.

     Det var alt for denne gang kan godt være artiklen er lidt kludret men har gjordt mit bedste :-)

     Tags: begyndelsen, HTML, script, tutorial
     

     Related posts

     • Using SimpleXML To Read / Parse XML (0)
     • Using Google Maps’ New Features for Flash (0)
     • The Simple, Quick, and Small jQuery HTML Form Validation Solution (0)
     • Sweet AJAX Tabs With jQuery 1.4 and CSS3 (0)
     • Quick Tip: Get a Random Number Within a Specified Range Using AS3 (0)

     ]]> http://xguiden.dk/2010/02/09/html-fra-begyndelsen/feed/ 0 http://xguiden.dk/2010/02/09/autoremove-i-input-felter/ http://xguiden.dk/2010/02/09/autoremove-i-input-felter/#comments Tue, 09 Feb 2010 10:01:46 +0000 admin http://xguiden.dk/?p=2175 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:

     [code]
     
     
     

     
     
     [/code]

     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:

     [code]
     
     
     
     Login:
     
     
     [/code]

     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’:

     [code]
     
     
     
     Login:
     
     
     [/code]

     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:

     [code]
     
     
     
     Login:
     
     
     [/code]

     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:

     [code]
     
     
     
     Login:
     
     
     [/code]

     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:

     [code]
     
     
     
     Login:
     
     
     [/code]

     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:

     [code]
     
     
     
     Login:
     
     
     [/code]

     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.

     Tags: Autoremove, guide, HTML, input, tutorial
     

     Related posts

     • Design a Prettier Web Form with CSS 3 (0)
     • The Simple, Quick, and Small jQuery HTML Form Validation Solution (0)
     • The Mysterious Pseudo Class in CSS (0)
     • Securing data in PHP (0)
     • Quick Tip: Get a Random Number Within a Specified Range Using AS3 (0)

     ]]> http://xguiden.dk/2010/02/09/autoremove-i-input-felter/feed/ 0