Hvordan Sett tekstbokser i en HTML5 Form

April 29  by Eliza

Mange av skjemaelementer HTML5 bruker er basert på inngangssignalet. Denne web-side-bygningen arbeidshest er en generell tag brukes til å lage en rekke interessante innspill objekter, men det er ikke den eneste typen tekstboksen til din disposisjon. Du kan også opprette passordfeltene og multiline tekstbokser, som vist i den øverste delen av dette skjemaet demo.

Hvordan Sett tekstbokser i en HTML5 Form

Koden for tekstboksene i dette tallet ser slik ut:

<! DOCTYPE HTML>
<Html lang = "no">
<Head>
<Title> formDemo.html </ title>
<Meta charset = "UTF-8" />
</ Head>
<Body>
<H1> Form Demo </ h1>
<Form>
<Fieldset>
<Legend> Tekst innspill </ legend>
<P>
<Label> Tekstboks </ label>
<Input type = "text"
id = "myText"
value = "tekst her" />
</ P>
<P>
<Label> Passord </ label>
<Input> type = "passord"
id = "myPwd"
value = "hemmelig" />
</ P>
<P>
<Label> Tekst-området </ label>
<Textarea> id = "myTextArea"
rader = "3"
cols = "80"> Din tekst her </ textarea>
</ P>
</ Fieldset>
</ Form>
</ Body>
</ Html>

En grunnleggende tekstboks

Bygge en enkel tekstboks er enkel:

  1. Lag en inngang element.

    Den <input> tag skaper den generelle strukturen av elementet.

  2. Still typen til "tekst" for å indikere at du bygger en standard tekst element, ikke noe mer forseggjort.
  3. Legg en id-attributt for å nevne elementet.

    Dette blir svært viktig når du legger Javascript til side fordi Javascript-koden vil bruke ID for å hente ut data fra skjemaet.

  4. Legg standarddata.

    Du kan legge til standarddata hvis du vil, ved hjelp av verdien attributtet. All tekst du plasserer i verdien vil bli standardverdien av skjemaet.

Teksten element plasserer en liten boks på skjermen. Når en besøkende på nettsiden din velger boksen, vil markøren endres til en I-bjelke, og de besøkende vil være i stand til å skrive tekst inn i boksen.

En passordfeltet

Passordfeltet, vist i figuren, ligner på vanlige tekstfeltet, men den har en primær forskjell: Når brukeren skriver inn data i passordfeltet, er innholdet av feltet erstattet med stjerner.

Et passord feltet bruker samme inngang tag som en vanlig tekstfelt. Den eneste forskjellen er at du setter id-attributtet til "passord".

Utskifting stjernetegn kan hindre en ond tilskuer fra å oppdage passordet ditt, men et passordfelt gir ingen reell sikkerhet - spesielt hvis du bruker Javascript, noe som gjør gjenfinning koden fritt tilgjengelig for leseren. Javascript er ikke språket å bruke hvis du ønsker å holde en masse hemmeligheter.

En multi-linje tekstboksen

Noen ganger ønsker du å gi besøkende til nettsiden din evne til å legge inn flere linjer med tekst. HTML5 textarea element er perfekt for denne situasjonen. Her er hvordan du lager din egen tekst område:

  1. Begynn med den <textarea> -taggen for å angi begynnelsen av en multi-linje tekstboksen.

    Bruk <label> -taggen for å gi din tekst området et navn hvis du vil.

  2. Angi antall rader.

    Angir antall rader (eller linjer) med tekst vil du tekstområdet for å inneholde. Større boksene romme mer tekst, men krever mer plass på skjermen.

  3. Angir antall kolonner.

    Antall kolonner viser hvor bred (i tegn) tekstboksen skal være. En sidebredde form er vanligvis 80 tegn.

  4. Legg til </ textarea> lukking tag.