Hoe te tekstvakken Doe in een HTML5 Form

Veel van de vormelementen HTML5 toepassingen zijn gebaseerd op de input-tag. Deze web-pagina-gebouw werkpaard is een general-purpose tag gebruikt om een ​​aantal interessante ingang objecten te maken, maar het is niet het enige type tekstvak tot uw beschikking. U kunt ook een wachtwoord velden en meerdere regels tekstvakken maken, zoals weergegeven in het bovenste gedeelte van dit formulier demo.

Hoe te tekstvakken Doe in een HTML5 Form

De code voor de tekstvakken in deze figuur ziet er als volgt uit:

<! DOCTYPE HTML>
<Html lang = "nl">
<Head>
<Title> formDemo.html </ title>
<Meta charset = "UTF-8" />
</ Head>
<Body>
<H1> Formulier Demo </ h1>
<Form>
<Fieldset>
<Legende> Tekstinvoer </ legende>
<P>
<Label> Tekstvak </ label>
<Input type = "text"
id = "myText"
value = "text here" />
</ P>
<P>
<Label> Wachtwoord </ label>
<Input> type = "password"
id = "MijnWachtwoord"
value = "geheime" />
</ P>
<P>
<Label> Tekst en omgeving </ label>
<Textarea> id = "myTextArea"
rijen = "3"
cols = "80"> Uw tekst hier </ textarea>
</ P>
</ Fieldset>
</ Form>
</ Body>
</ Html>

Een basis tekstvak

Het bouwen van een basistekst doos is eenvoudig:

  1. Maak een input element.

    De tag <input> creëert de algemene structuur van het element.

  2. Stel het type "tekst" om aan te geven dat je het bouwen van een standaard tekst element, niet iets uitgebreider.
  3. Voeg een id attribuut om het element te noemen.

    Dit wordt zeer belangrijk wanneer u JavaScript toe te voegen aan de pagina omdat uw JavaScript-code van de ID zal gebruiken om gegevens te extraheren uit het formulier.

  4. Voeg standaard data.

    U kunt standaard gegevens toevoegen als je wilt, met behulp van het attribuut waarde. Alle tekst die u plaatst in de waarde wordt de standaard waarde van het formulier te worden.

De tekst element plaatst een klein vakje op het scherm. Wanneer een bezoeker van uw webpagina selecteert de doos, zal de cursor veranderen in een I-balk, en uw bezoeker in staat om tekst te typen in het vak zal zijn.

Een veld wachtwoord

Het wachtwoord veld in de figuur, lijkt op het tekstveld gewone, maar het heeft één primaire verschil: Wanneer de types gebruikersgegevens in het veld wachtwoord, de inhoud van het veld wordt vervangen door sterretjes.

Een veld wachtwoord gebruikt dezelfde ingang tag als een basistekst veld. Het enige verschil is dat je het id attribuut op "wachtwoord" in te stellen.

De vervanging sterretjes kan voorkomen dat een boze toeschouwer van uw wachtwoord te ontdekken, maar een password veld biedt geen echte veiligheid - vooral als u JavaScript, die het doorzoeken code vrij beschikbaar om de browser maakt gebruik. Javascript is niet de taal te gebruiken als je wilt veel geheimen te bewaren.

Een multi-line tekstvakje

Soms wil je bezoekers naar uw website de mogelijkheid om meerdere regels tekst te betreden. De HTML5 textarea element is perfect voor deze situatie. Hier is hoe je je eigen tekst gebied te maken:

  1. Beginnen met de tag <textarea> naar het begin van een multi-line tekstvak aan te geven.

    Gebruik de tag <label> om uw tekst gebied een naam geven als je wilt.

  2. Geef het aantal rijen.

    Geven het aantal rijen (of lijnen) van de tekst die u wilt dat de tekst gebied te bevatten. Grotere dozen geschikt voor meer tekst, maar vereisen meer ruimte op het scherm.

  3. Vermeld het aantal kolommen.

    Het aantal kolommen zien hoe breed (in karakters) het tekstvak moet zijn. Een pagina-breedte vorm is over het algemeen 80 tekens.

  4. Voeg de </ textarea> eindtag.