I HTML er et vigtigt element i HTML-form. Indtastningselementets 'type'-attribut kan være forskellige typer, som definerer informationsfeltet. Sådan som giver en tekstboks.

Følgende er en liste over alle typer HTML-elementer.

HTML5 tilføjede nye typer på element. Følgende er listen over typer af elementer i HTML5

Følgende er beskrivelsen af ​​typer af elementer med eksempler.

1. :

element af typen 'tekst' bruges til at definere et enkelt-linje input tekstfelt.

Eksempel:

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

Produktion:

Indtast 'tekst' type:

Det 'tekst' felt definerer et enkelt linje input tekstfelt.

Bemærk: Standard maksimale tegnlængde er 20.

forklare datauafhængighed

2.:

Elementet af typen 'adgangskode' tillader en bruger at indtaste adgangskoden sikkert på en webside. Den indtastede tekst i adgangskoden er konverteret til '*' eller '.', så den ikke kan læses af en anden bruger.

Eksempel:

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

Produktion:

Indtast 'adgangskode' type:

Det 'adgangskode' felt definerer et enkelt linje input password felt for at indtaste adgangskoden sikkert.

3. :

Elementet af typen 'submit' definerer en submit-knap til at sende formularen til serveren, når 'click'-hændelsen indtræffer.

Eksempel:

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

Produktion:

Indtast 'send' type:

Efter at have klikket på send-knappen, vil dette sende formularen til serveren og omdirigere siden til handling værdi. Vi vil lære om 'handling'-attributten i senere kapitler

4.:

Typen 'nulstil' er også defineret som en knap, men når brugeren udfører en klikhændelse, nulstiller den som standard alle indtastede værdier.

Eksempel:

 User id: Password: <br> <br> 

Produktion:

Indtast 'nulstil' type:

Prøv at ændre inputværdierne for bruger-id og adgangskode, så når du klikker på nulstil, nulstilles inputfelter med standardværdier.

5.:

Typen 'radio' definerer radioknapperne, som gør det muligt at vælge en indstilling mellem et sæt relaterede indstillinger. Der kan kun vælges én alternativknap ad gangen.

Eksempel:

Vælg venligst din yndlingsfarve

Produktion:

Indtast 'radio' type

Vælg venligst din yndlingsfarve

6.:

Typen 'afkrydsningsfelt' vises som firkantede felter, der kan markeres eller fjernes for at vælge valgene fra de givne muligheder.

Bemærk: 'Radioknapperne' ligner afkrydsningsfelter, men der er en vigtig forskel mellem begge typer: radioknapper tillader brugeren kun at vælge én mulighed ad gangen, hvorimod afkrydsningsfeltet tillader en bruger at vælge nul til flere muligheder ad gangen .

Eksempel:

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

Produktion:

Indtast 'afkrydsningsfelt'-type

Tilmeldingsblanket

Vælg venligst din yndlingssport

7.:

Typen 'knap' definerer en simpel trykknap, som kan programmeres til at styre en funktionel på enhver begivenhed, såsom klikhændelse.

liste over skrifttyper i gimp

Bemærk: Det fungerer primært med JavaScript.

Eksempel:

Produktion:

Indtast 'knap' type.

Klik på knappen for at se resultatet:

Bemærk: I ovenstående eksempel har vi brugt 'alarm' af JS, som du vil lære i vores JS tutorial. Det bruges til at vise et pop-vindue.

8.:

Elementet med typen 'fil' bruges til at vælge en eller flere filer fra brugerenhedens lager. Når du har valgt filen, og efter indsendelse, kan denne fil uploades til serveren ved hjælp af JS-kode og fil-API.

Eksempel:

 Select file to upload: 

Produktion:

Indtast 'fil' type.

Vi kan vælge enhver filtype, indtil vi ikke angiver den! Den valgte fil vises ved siden af ​​'vælg fil'.

9.:

Typen 'billede' bruges til at repræsentere en indsend-knap i form af billede.

Eksempel:

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

HTML5 nyligt tilføjede typer element

1. :

Typen 'farve' bruges til at definere et inputfelt, som indeholder en farve. Det giver en bruger mulighed for at angive farven ved hjælp af den visuelle farvegrænseflade på en browser.

Bemærk: 'farve'-typen understøtter kun farveværdi i hexadecimalt format, og standardværdien er #000000 (sort).

Eksempel:

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

Produktion:

shreya ghoshals første mand

Indtast 'farve' typer:

Bemærk: Standardværdien for typen 'farve' er #000000 (sort). Det understøtter kun farveværdi i hexadecimalt format.

2.:

Elementet af typen 'dato' genererer et inputfelt, som giver en bruger mulighed for at indtaste datoen i et givet format. En bruger kan indtaste datoen efter tekstfelt eller efter datovælgergrænseflade.

Eksempel:

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

Produktion:

Indtast 'dato' type

3. :

Elementet af typen 'datetime-local' opretter input, der tillader en bruger at vælge datoen samt lokal tid i timen og minuttet uden tidszoneoplysninger.

Eksempel:

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

Produktion:

Indtast 'datetime-local' type

4.:

Typen 'e-mail' opretter et input, der tillader en bruger at indtaste e-mail-adressen med mønstervalidering. De flere attributter tillader en bruger at indtaste mere end én e-mailadresse.

Eksempel:

 <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> 

Produktion:

Indtast 'e-mail'-type

Bemærk: Brugeren kan også indtaste flere e-mailadresser adskilt med komma eller mellemrum som følger:

5.:

Typen 'måned' opretter et inputfelt, som gør det muligt for en bruger nemt at indtaste måned og år i formatet 'MM, ÅÅÅÅ', hvor MM definerer månedsværdien, og ÅÅÅÅ definerer årsværdien. Ny

Eksempel:

 Enter your Birth Month-year: 

Produktion:

Indtast 'måned' type:

6.:

Elementtypenummeret opretter input, der tillader en bruger at indtaste den numeriske værdi. Du kan også begrænse til at indtaste en minimums- og maksimumværdi ved at bruge min og max-attributten.

Eksempel:

 Enter your age: 

Produktion:

Indtast 'nummer' type

Bemærk: Det vil tillade at indtaste tal i området 50-80. Hvis du vil indtaste et andet nummer end rækkevidde, vil det vise en fejl.

7.:

Elementet af typen 'url' opretter et input, som gør det muligt for brugeren at indtaste URL'en.

Eksempel:

 Enter your website URL: <br> 

Produktion:

Indtast 'url'-type

8.:

Type uge opretter et inputfelt, som giver en bruger mulighed for at vælge en uge og et år fra rullemenuen uden tidszone.

Skuespillerinde Rakul Preet Singh

Eksempel:

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

Produktion:

Indtast 'uge' type

9.:

Typen 'søg' opretter et input, der tillader en bruger at indtaste en søgestreng. Disse er funktionelt symmetriske i forhold til tekstinputtypen, men kan være stilet anderledes.

Eksempel:

 Search here: 

Produktion:

Indtast 'søgning'-type

10.:

Elementet af typen ?tel? opretter en indtastning for at indtaste telefonnummeret. 'Tlf'-typen har ikke standardvalidering såsom e-mail, fordi telefonnummermønsteret kan variere over hele verden.

Eksempel:

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

Produktion:

Indtast 'tlf' type

Bemærk: Her bruger vi to attributter, der er 'mønster' og 'påkrævet', som giver brugeren mulighed for at indtaste nummeret i et givet format, og det er påkrævet at indtaste nummeret i inputfeltet.