I HTML är en viktig del av HTML-form. Inmatningselementets 'type'-attribut kan vara olika typer, vilket definierar informationsfältet. Såsom ger en textruta.

Följande är en lista över alla typer av HTML-element.

HTML5 har lagt till nya typer på element. Följande är listan över typer av element i HTML5

Nedan följer en beskrivning av typer av element med exempel.

1. :

element av typen 'text' används för att definiera ett enrads textfält.

Exempel:

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

Produktion:

Mata in 'text' typ:

De 'text' fältet definierar ett textfält för en rad inmatning.

Notera: Standardinställda maximala teckenlängd är 20.

2. :

Elementet av typen 'lösenord' tillåter en användare att ange lösenordet säkert på en webbsida. Den inmatade texten i lösenordet konverteras till '*' eller '.', så att den inte kan läsas av en annan användare.

Exempel:

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

Produktion:

Ange 'lösenord' typ:

De 'Lösenord' fältet definierar ett inmatningslösenordsfält för en rad för att ange lösenordet säkert.

lejon jämfört med en tiger

3. :

Elementet av typen 'skicka' definierar en skicka-knapp för att skicka formuläret till servern när 'klick'-händelsen inträffar.

Exempel:

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

Produktion:

Ange 'skicka'-typ:

Efter att ha klickat på knappen Skicka skickar detta formuläret till servern och omdirigerar sidan till handling värde. Vi kommer att lära oss om 'action'-attributet i senare kapitel

4. :

Typen 'återställning' definieras också som en knapp, men när användaren utför en klickhändelse återställer den som standard alla inmatade värden.

Exempel:

 User id: Password: <br> <br> 

Produktion:

Mata in 'återställ'-typ:

Försök att ändra inmatningsvärdena för användar-id och lösenord, och när du klickar på återställ återställs inmatningsfälten med standardvärden.

5. :

Typen 'radio' definierar radioknapparna, som gör det möjligt att välja ett alternativ mellan en uppsättning relaterade alternativ. I taget kan endast en alternativknapp väljas åt gången.

java date nu

Exempel:

Vänligen välj din favoritfärg

Produktion:

Ingångstyp 'radio'

Vänligen välj din favoritfärg

6. :

Typen 'kryssruta' visas som fyrkantiga rutor som kan markeras eller avmarkeras för att välja alternativen från de givna alternativen.

Obs: 'Radioknapparna' liknar kryssrutor, men det finns en viktig skillnad mellan båda typerna: radioknappar låter användaren bara välja ett alternativ åt gången, medan kryssrutan låter en användare välja noll till flera alternativ åt gången .

Exempel:

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

Produktion:

konvertera sträng till enum

Ange 'kryssruta'-typ

Anmälningsblankett

Vänligen välj din favoritsport

7. :

Typen 'knapp' definierar en enkel tryckknapp, som kan programmeras för att styra en funktionellt på vilken händelse som helst som klickhändelse.

Obs: Det fungerar huvudsakligen med JavaScript.

Exempel:

Produktion:

Ange typ av 'knapp'.

Klicka på knappen för att se resultatet:

Notera: I exemplet ovan har vi använt 'varning' för JS, som du kommer att lära dig i vår JS-handledning. Den används för att visa ett popfönster.

8. :

Elementet med typen 'fil' används för att välja en eller flera filer från användarenhetens lagring. När du väl har valt filen, och efter inlämning, kan denna fil laddas upp till servern med hjälp av JS-kod och fil-API.

Exempel:

 Select file to upload: 

Produktion:

Ange 'fil'-typ.

Vi kan välja vilken typ av fil som helst tills vi inte anger den! Den valda filen kommer att visas bredvid alternativet 'välj fil'.

9. :

Typen 'bild' används för att representera en skicka-knapp i form av bild.

Exempel:

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

HTML5 nyligen tillagda typer element

1. :

Typen 'färg' används för att definiera ett inmatningsfält som innehåller en färg. Det tillåter en användare att specificera färgen genom det visuella färggränssnittet på en webbläsare.

Obs: Typen 'färg' stöder endast färgvärden i hexadecimalt format, och standardvärdet är #000000 (svart).

Exempel:

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

Produktion:

Mata in 'färg' typer:

Notera: Standardvärdet för typen 'färg' är #000000 (svart). Den stöder endast färgvärden i hexadecimalt format.

2. :

Elementet av typen 'datum' genererar ett inmatningsfält, som låter en användare mata in datumet i ett givet format. En användare kan ange datum med textfält eller datumväljargränssnitt.

Exempel:

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

Produktion:

Ange 'datum'-typ

3. :

Elementet av typen 'datetime-local' skapar indata som gör det möjligt för en användare att välja datum samt lokal tid i timmen och minuten utan tidszonsinformation.

sträng i c++

Exempel:

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

Produktion:

Ange 'datetime-local' typ

4. :

Typen 'e-post' skapar en indata som gör det möjligt för en användare att ange e-postadressen med mönstervalidering. De flera attributen tillåter en användare att ange mer än en e-postadress.

Exempel:

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

Ange typ 'e-post'.

Notera: Användaren kan också ange flera e-postadresser separerade med kommatecken eller blanksteg enligt följande:

5. :

Typen 'månad' skapar ett inmatningsfält som gör att en användare enkelt kan ange månad och år i formatet 'MM, ÅÅÅÅ' där MM definierar månadsvärdet och ÅÅÅÅ definierar årsvärdet. Ny

Exempel:

 Enter your Birth Month-year: 

Produktion:

Ange 'månad' typ:

6. :

Elementtypnumret skapar indata som gör det möjligt för en användare att ange det numeriska värdet. Du kan också begränsa till att ange ett lägsta och högsta värde med min och max attribut.

Exempel:

 Enter your age: 

Produktion:

Ange 'nummer' typ

Notera: Det kommer att tillåta att ange nummer inom intervallet 50-80. Om du vill ange ett annat nummer än intervall kommer det att visa ett fel.

7. :

Elementet av typen 'url' skapar en indata som gör det möjligt för användaren att ange URL:en.

Exempel:

 Enter your website URL: <br> 

Produktion:

Ange 'url'-typ

8. :

Typvecka skapar ett inmatningsfält som låter en användare välja en vecka och år från rullgardinsmenyn utan tidszon.

Exempel:

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

Produktion:

objekt i java-programmering

Ange 'vecka' typ

9. :

Typen 'sökning' skapar en indata som gör det möjligt för en användare att ange en söksträng. Dessa är funktionellt symmetriska med textinmatningstypen, men kan ha en annan stil.

Exempel:

 Search here: 

Produktion:

Ange 'sök' typ

10. :

Inslaget av typ ?tel? skapar en inmatning för att ange telefonnumret. Typen 'tel' har inte standardvalidering som e-post, eftersom telefonnummermönster kan variera över hela världen.

Exempel:

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

Produktion:

Ange 'tel'-typ

Notera: Här använder vi två attribut som är 'mönster' och 'obligatoriska' som gör det möjligt för användaren att ange numret i ett givet format och det är nödvändigt att ange numret i inmatningsfältet.