TechCodeview

In HTML is een belangrijk element van HTML-vorm. Het 'type'-attribuut van het invoerelement kan van verschillende typen zijn, wat het informatieveld definieert. Zoals een tekstvak geeft.

Hieronder volgt een lijst met alle soorten HTML-elementen.

HTML5 heeft nieuwe typen aan elementen toegevoegd. Hieronder volgt de lijst met typen elementen van HTML5

Hieronder volgt een beschrijving van de typen elementen met voorbeelden.

1. :

element van het type 'tekst' worden gebruikt om een ​​invoertekstveld van één regel te definiëren.

Voorbeeld:

 Enter first name <br> <br> Enter last name <br> <br> <p> <strong>Note:</strong> The default maximum cahracter lenght is 20.</p> 

Uitgang:

Invoertype 'tekst':

De 'tekst' veld definieert een invoertekstveld op één regel.

Opmerking: De standaard maximale karakterlengte is 20.

2. :

Met het element van het type 'wachtwoord' kan een gebruiker het wachtwoord veilig invoeren op een webpagina. De ingevoerde tekst in het wachtwoordbestand wordt omgezet in '*' of '.', zodat deze niet door een andere gebruiker kan worden gelezen.

Voorbeeld:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

Uitgang:

Type 'wachtwoord' invoeren:

De 'wachtwoord' veld definieert een wachtwoordveld voor invoer op één regel, waarin u het wachtwoord veilig kunt invoeren.

min. max

3. :

Het element van het type 'submit' definieert een verzendknop waarmee het formulier naar de server kan worden verzonden wanneer de 'klik'-gebeurtenis plaatsvindt.

Voorbeeld:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

Uitgang:

Type 'verzenden' invoeren:

Nadat u op de knop Verzenden hebt geklikt, wordt het formulier naar de server verzonden en wordt de pagina ernaar doorgestuurd actie waarde. We zullen in latere hoofdstukken meer leren over het kenmerk 'actie'

4. :

Het type 'reset' wordt ook gedefinieerd als een knop, maar wanneer de gebruiker een klikgebeurtenis uitvoert, worden standaard alle ingevoerde waarden gereset.

Voorbeeld:

 User id: Password: <br> <br> 

Uitgang:

Invoertype 'reset':

Probeer de invoerwaarden van gebruikers-ID en wachtwoord te wijzigen. Als u vervolgens op reset klikt, worden de invoervelden opnieuw ingesteld met de standaardwaarden.

5. :

Het type 'radio' definieert de keuzerondjes, waarmee u een optie kunt kiezen uit een reeks gerelateerde opties. Er kan slechts één keuzerondje tegelijk worden geselecteerd.

int te verdubbelen

Voorbeeld:

Selecteer alstublieft uw favoriete kleur

Uitgang:

Voer het type 'radio' in

Selecteer alstublieft uw favoriete kleur

6. :

Het type 'checkbox' wordt weergegeven als vierkante vakjes die kunnen worden aangevinkt of uitgeschakeld om de keuzes uit de gegeven opties te selecteren.

Opmerking: De 'keuzerondjes' lijken op selectievakjes, maar er is een belangrijk verschil tussen beide typen: met keuzerondjes kan de gebruiker slechts één optie tegelijk selecteren, terwijl met een selectievakje een gebruiker nul tot meerdere opties tegelijk kan selecteren. .

Voorbeeld:

 Enter your Name: <p>Kindly Select your favourite sports</p> Cricket <br> Tennis <br> Football <br> Baseball <br> Badminton <br> <br> 

Uitgang:

kaart versus set

Voer het type 'selectievakje' in

Registratieformulier

Selecteer alstublieft uw favoriete sporten

7. :

Het type 'knop' definieert een eenvoudige drukknop, die kan worden geprogrammeerd om functioneel een gebeurtenis te bedienen, zoals een klikgebeurtenis.

Let op: Het werkt voornamelijk met JavaScript.

Voorbeeld:

Uitgang:

Type 'knop' invoeren.

Klik op de knop om het resultaat te zien:

Let op: In het bovenstaande voorbeeld hebben we de 'alert' van JS gebruikt, die je leert in onze JS-tutorial. Het wordt gebruikt om een ​​pop-venster weer te geven.

8. :

Het element met het type 'file' wordt gebruikt om een ​​of meer bestanden uit de opslag van het gebruikersapparaat te selecteren. Nadat u het bestand heeft geselecteerd en na verzending kan dit bestand met behulp van JS-code en bestands-API naar de server worden geüpload.

Voorbeeld:

 Select file to upload: 

Uitgang:

Voer het type 'bestand' in.

We kunnen elk type bestand kiezen totdat we het niet specificeren! Het geselecteerde bestand verschijnt naast de optie 'Bestand kiezen'

9. :

Het type 'afbeelding' wordt gebruikt om een ​​verzendknop weer te geven in de vorm van een afbeelding.

Voorbeeld:

 <h2>Input &apos;image&apos; type.</h2> <p>We can create an image as submit button</p> User id: <br> <br> <br> 

HTML5 nieuw toegevoegd type-element

1. :

Het type 'kleur' ​​wordt gebruikt om een ​​invoerveld te definiëren dat een kleur bevat. Hiermee kan een gebruiker de kleur specificeren via de visuele kleurinterface in een browser.

Opmerking: het type 'kleur' ​​ondersteunt alleen de kleurwaarde in hexadecimaal formaat en de standaardwaarde is #000000 (zwart).

Voorbeeld:

 Pick your Favorite color: <br> <br> Upclick <br> <br> Downclick 

Uitgang:

Invoer 'kleur'-types:

Opmerking: De standaardwaarde van het type 'kleur' ​​is #000000 (zwart). Het ondersteunt alleen de kleurwaarde in hexadecimaal formaat.

2. :

Het element van het type 'date' genereert een invoerveld, waarmee een gebruiker de datum in een bepaald formaat kan invoeren. Een gebruiker kan de datum invoeren via een tekstveld of via de datumkiezerinterface.

Voorbeeld:

 Select Start and End Date: <br> <br> Start date: <br> <br> End date: <br> <br> 

Uitgang:

Voer het type 'datum' in

3. :

Het element van het type 'datetime-local' creëert invoerbestanden waarmee een gebruiker zowel de datum als de lokale tijd in uren en minuten kan selecteren zonder tijdzone-informatie.

Java inschakelen

Voorbeeld:

 Select the meeting schedule: <br> <br> Select date &amp; time: <br> <br> 

Uitgang:

Voer het type 'datetime-local' in

4. :

Het type 'e-mail' creëert een invoerbestand waarmee een gebruiker het e-mailadres met patroonvalidatie kan invoeren. Dankzij de meerdere kenmerken kan een gebruiker meer dan één e-mailadres invoeren.

Voorbeeld:

 <b>Enter your Email-address</b> <p> <strong>Note:</strong> User can also enter multiple email addresses separating by comma or whitespace as following: </p> <b>Enter multiple Email-addresses</b> 

Uitgang:

Voer het type 'e-mail' in

Opmerking: De gebruiker kan ook meerdere e-mailadressen invoeren, gescheiden door komma's of witruimte, als volgt:

5. :

Het type 'maand' creëert een invoerveld waarmee een gebruiker eenvoudig de maand en het jaar kan invoeren in het formaat 'MM, JJJJ', waarbij MM de maandwaarde definieert en JJJJ de jaarwaarde definieert. Nieuw

Voorbeeld:

 Enter your Birth Month-year: 

Uitgang:

Type 'maand' invoeren:

6. :

Het elementtypenummer creëert een invoerbestand waarmee een gebruiker de numerieke waarde kan invoeren. U kunt ook het invoeren van een minimum- en maximumwaarde beperken met behulp van de min- en max-attributen.

Voorbeeld:

 Enter your age: 

Uitgang:

Voer het type 'nummer' in

Opmerking: Hiermee kunt u een getal tussen 50 en 80 invoeren. Als u een ander nummer dan het bereik wilt invoeren, wordt er een foutmelding weergegeven.

7. :

Het element van het type 'url' creëert een invoerveld waarin de gebruiker de URL kan invoeren.

Voorbeeld:

 Enter your website URL: <br> 

Uitgang:

Voer het 'url'-type in

8. :

Het type week creëert een invoerveld waarmee een gebruiker een week en een jaar kan selecteren uit de vervolgkeuzelijst zonder tijdzone.

Voorbeeld:

 <b>Select your best week of year:</b> <br> <br> 

Uitgang:

nieuwe regel in python

Voer het type 'week' in

9. :

Het type 'zoeken' creëert een invoerbestand waarin een gebruiker een zoekreeks kan invoeren. Deze zijn functioneel symmetrisch ten opzichte van het tekstinvoertype, maar kunnen anders worden vormgegeven.

Voorbeeld:

 Search here: 

Uitgang:

Voer het type 'zoeken' in

10. :

Het element van het type ?tel? creëert een invoerveld om het telefoonnummer in te voeren. Het type 'tel' kent geen standaardvalidatie zoals e-mail, omdat het telefoonnummerpatroon wereldwijd kan variëren.

Voorbeeld:

 <b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b> <br> <br> 

Uitgang:

Voer het type 'tel' in

Opmerking: Hier gebruiken we twee attributen: 'patroon' en 'vereist', waarmee de gebruiker het getal in een bepaald formaat kan invoeren en het getal in het invoerveld moet worden ingevoerd.