Sådan sættes tekstbokse i en HTML5-formular - dummier

Mange af formelementerne HTML5-anvendelser er baseret på input-taggen. Denne web-side-arbejdshest er en almindelig tag, der bruges til at lave en række interessante indgangsobjekter, men det er ikke den eneste type tekstboks til din rådighed. Du kan også oprette adgangskodefelter og multiline tekstbokse, som vist i den øverste del af denne formular demo.

Koden til tekstbokse i denne figur ser sådan ud:

formDemo. html

Form Demo
Tekstindtastning
Tekstboks
Adgangskode type = "Adgangskode" id = "myPwd" værdi = "hemmelig" />
Tekstområde id = "myTextArea" rows = " 3 "cols =" 80 "> Din tekst her

En grundlæggende tekstboks

Opbygning af en grundlæggende tekstboks er ligefrem:

1. Opret et inputelement.

   Taggen skaber elementets generelle struktur.

2. Indstil typen til " tekst " for at angive, at du opbygger et standard tekstelement, ikke noget mere udførligt.

3. Tilføj en id attribut for at navngive elementet.

   Dette bliver meget vigtigt, når du tilføjer JavaScript til siden, fordi din JavaScript-kode vil bruge ID'et til at udtrække data fra formularen.

4. Tilføj standarddata .

   Du kan tilføje standarddata, hvis du vil, ved hjælp af værdiattributten. Enhver tekst, du placerer i værdien, bliver standardværdien af ​​formularen.

Tekstelementet placerer en lille boks på skærmen. Når en besøgende på din webside vælger boksen, vil cursoren skifte til en I-stråle, og din besøgende vil kunne skrive tekst i boksen.

Et adgangskodefelt

Løshedsfeltet, der er vist i figuren, ligner det almindelige tekstfelt, men det har en primær forskel: Når brugeren indtaster data i adgangskodefeltet, erstattes indholdet af feltet med asterisker.

Et adgangskodefelt bruger det samme input tag som et grundlæggende tekstfelt. Den eneste forskel er, at du angiver id-attributten til "adgangskode".

Udskiftningsstjernerne kan forhindre en ondskabsviser i at opdage dit kodeord, men et adgangskodefelt giver ingen reel sikkerhed - især hvis du bruger JavaScript, hvilket gør hentningskoden frit tilgængelig for browseren. JavaScript er ikke det sprog, du skal bruge, hvis du vil beholde mange hemmeligheder.

En tekstlinje med flere linjer

Nogle gange vil du give besøgende på din webside mulighed for at indtaste flere linjer med tekst. HTML5 textarea elementet er perfekt til denne situation. Sådan laver du dit eget tekstområde:

1. Begynd med -koden for at angive begyndelsen af ​​en tekstlinje med flere linjer.

   Brug tagget til at give dit tekstområde et navn, hvis du vil.

2. Angiv antallet af rækker.

   Angiv antallet af rækker (eller linjer) med tekst, som tekstområdet skal indeholde. Større bokse rummer mere tekst, men kræver mere plads på skærmen.

3. Angiv antallet af kolonner.

   Antallet af kolonner viser, hvor bredt (i tegn) tekstboksen skal være. En sidebreddeformular er generelt 80 tegn.

4. Tilføj lukkekoden.