Hvordan stille opp tekstbokser i HTML-koden

HTML gir koder som brukes for å lage skjemaer, som inkluderer tekstbokser, avmerkingsbokser, radioknapper og valgboksene. Designere pleide å bruke tabeller for å stille opp skjemaelementer, sette dem i kolonner og rader. Siden overgangen til CSS styling, ett problem designere står overfor er hvordan man skal stille opp skjemaelementer uten å bruke tabeller. Den beste måten å stille opp tekstbokser med etiketter er å bruke <label> -taggen i forbindelse med en <span> tag for hver tekstboks og etiketten. Bruk flytende teknikker for å stille alle etikettene opp på den ene siden og alle tekstbokser på den andre siden.

Bruksanvisning

1 Åpne HTML-fil i en kode editor og legge til tekstbokser sammen med sine etiketter som så:

Navn: <input type = "text" name = "navn" id = "navn" />

E-post: <input type = "text" name = "email" id = "email" />

De ovennevnte linjer med kode gå mellom <form> tags. Hvis HTML-koden mangler disse, legg dem. Sett åpningen <form> før det første skjemafeltet, og deretter legge den avsluttende </ form> tag et sted under den siste formen knappen.

2 Pakk hver etikett og tekstboks pair i et <label> tag. Selv <label> er ment for bruk med enhver tekst merking et skjemafelt, innpakning den rundt både tekst og feltet gjør ting lettere å stil i CSS og gir ekstra brukervennlighet ved å gjøre teksten klikkbar. Når en bruker klikker på teksten, vil nettleseren sette markøren i tekstboksen. Her er koden:

<Label for = "name"> Navn: <input type = "text" name = "navn" id = "navn" /> </ label>

Matche verdien av "for" attributt til verdien av "navn" attributtet i <input> tag.

3 Pakk tekst merking tekstboksen i <span> koder, slik at du kan målrette bare teksten i CSS-koden. Her er resultatet:

<Label for = "name"> <span> Navn: </ span> <input type = "text" name = "navn" id = "navn" /> </ label>

4 Rull opp til toppen av HTML-filen, se etter en <link> tag med en "rel" attributtet satt til "stylesheet" og deretter åpne filen den refererer til. Hvis du ikke finner denne, så se etter <style> tags eller legge dem selv. Legg CSS kode i stilarket eller mellom <style> koder.

5 Sett "display" attributt for både span og label tags til "block". Tildele en bredde til både "navn" og "e-post" felt, velge dem ved deres ID. Sett "skjerm" til "block" for de to tekstboksene også. Still "flyte" til venstre for <span> tag og sette begge tekstboksene til "flyte" til høyre. Tildele en total bredde på <label> -taggen. Her er en CSS-kode:

label {display: block; width: 300px;}

span {display: block; float: left;}

navn, #email {display: block; width: 150px; float: right;}

Hint

• Unngå å tildele "display: block" til <input> tag vanligvis fordi det vil også påvirke din "Send" -knappen. Det er derfor du bør velge tekstbokser av sine ID-navn.
• Alltid sikkerhetskopiere HTML og CSS-filer før du redigerer dem.