Slik setter du tekstbokser i et HTML5-skjema - dummier

Mange av formelementene HTML5 bruker er basert på input-taggen. Denne web-side-arbeidshorse er en generell brukerkode som brukes til å lage en rekke interessante inngangsobjekter, men det er ikke den eneste typen tekstboks til din disposisjon. Du kan også opprette passordfelt og multiline tekstbokser, som vist i den øverste delen av dette skjemaet demo.

Koden for tekstbokser i denne figuren ser slik ut:

formDemo. html

Form Demo
Tekstinngang
Tekstboks
Passordtype = "Passord" id = "myPwd" value = "secret" />
Tekstområde id = "myTextArea" rows = " 3 "cols =" 80 "> Teksten din her

En grunnleggende tekstboks

Å bygge en grunnleggende tekstboks er enkel:

1. Opprett et innspillingselement.

   Koden skaper elementets generelle struktur.

2. Angi typen til " tekst " for å indikere at du bygger et standard tekstelement, ikke noe mer forseggjort.

3. Legg til et id attributt for å navngi elementet.

   Dette blir svært viktig når du legger til JavaScript på siden fordi JavaScript-koden din vil bruke ID til å trekke ut data fra skjemaet.

4. Legg til standarddata .

   Du kan legge til standarddata hvis du vil, ved hjelp av verdienattributtet. Enhver tekst du plasserer i verdien blir standardverdien av skjemaet.

Tekstelementet plasserer en liten boks på skjermen. Når en besøkende på din nettside velger boksen, endres markøren til en I-stråle, og din besøkende vil kunne skrive inn tekst i boksen.

Et passordfelt

Passordfeltet, som vises i figuren, ligner det vanlige tekstfeltet, men det har en primær forskjell: Når brukeren skriver inn data i passordfeltet, erstattes innholdet i feltet av stjerner.

Et passordfelt bruker samme inntagsmerke som et grunnleggende tekstfelt. Den eneste forskjellen er at du angir idattributtet til "passord".

De erstattende stjernene kan forhindre at en ond å se på passordet ditt, men et passordfelt gir ingen ekte sikkerhet - spesielt hvis du bruker JavaScript, noe som gjør hentekoden fritt tilgjengelig for nettleseren. JavaScript er ikke språket du vil bruke hvis du vil ha mange hemmeligheter.

En tekstlinje med flere linjer

Noen ganger vil du gi besøkende til nettsiden din muligheten til å skrive inn flere linjer med tekst. HTML5 textarea-elementet er perfekt for denne situasjonen. Slik lager du ditt eget tekstområde:

1. Begynn med -koden for å indikere begynnelsen på en tekstlinje med flere linjer.

   Bruk taggen til å gi tekstområdet et navn hvis du vil.

2. Angi antall rader.

   Angi antall rader (eller linjer) med tekst du vil at tekstområdet skal inneholde. Større bokser imøtekomme mer tekst, men krever mer plass på skjermen.

3. Angi antall kolonner.

   Antall kolonner viser hvor bredt (i tegn) tekstboksen skal være. En sidebreddeform er vanligvis 80 tegn.

4. Legg til lukkerkoden.