HTML:ssä on tärkeä osa HTML-muotoa. Syöteelementin 'type'-attribuutti voi olla erityyppistä, mikä määrittelee tietokentän. Kuten antaa tekstiruudun.

Seuraavassa on luettelo kaikista HTML-elementeistä.

HTML5 lisäsi uusia tyyppejä elementtiin. Seuraavassa on luettelo HTML5:n elementtityypeistä

Seuraavassa on kuvaus elementtityypeistä esimerkein.

1. :

tyyppiä 'teksti' olevaa elementtiä käytetään yksirivisen syöttötekstikentän määrittämiseen.

Esimerkki:

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

Lähtö:

Syötä tekstityyppi:

The 'teksti' kenttä määrittää yhden rivin syöttötekstikentän.

Huomautus: Oletusarvoinen merkkien enimmäispituus on 20.

2. :

'Password'-tyyppinen elementti sallii käyttäjän syöttää salasanan turvallisesti verkkosivulle. Salasanassa syötetty teksti muutettiin *- tai .-merkiksi, jotta toinen käyttäjä ei voi lukea sitä.

Esimerkki:

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

Lähtö:

Syötä salasanan tyyppi:

The 'Salasana' kenttä määrittää yhden rivin syöttösalasanakentän salasanan syöttämiseksi turvallisesti.

3. :

'Submit'-tyypin elementti määrittää lähetyspainikkeen, jolla lomake lähetetään palvelimelle, kun 'click'-tapahtuma tapahtuu.

Esimerkki:

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

Lähtö:

Syötä 'lähetä'-tyyppi:

Kun napsautat Lähetä-painiketta, tämä lähettää lomakkeen palvelimelle ja ohjaa sivun uudelleen toiminta arvo. Opimme 'action'-attribuutista myöhemmissä luvuissa

4. :

Tyyppi 'reset' määritellään myös painikkeeksi, mutta kun käyttäjä suorittaa napsautustapahtuman, se oletusarvoisesti nollaa kaikki syötetyt arvot.

Esimerkki:

 User id: Password: <br> <br> 

Lähtö:

Syötä nollaustyyppi:

Yritä muuttaa käyttäjätunnuksen ja salasanan syöttöarvoja, sitten kun napsautat nollauspainiketta, se nollaa syöttökentät oletusarvoilla.

5. :

Tyyppi 'radio' määrittelee valintanapit, jotka mahdollistavat vaihtoehdon valinnan joukosta toisiinsa liittyviä vaihtoehtoja. Vain yksi valintanappi voidaan valita kerrallaan.

Esimerkki:

Valitse ystävällisesti suosikkivärisi

mvc javalle

Lähtö:

Syötä 'radio' tyyppi

Valitse ystävällisesti suosikkivärisi

6. :

Tyyppi 'valintaruutu' näytetään neliöruutuina, jotka voidaan valita annetuista vaihtoehdoista valitsemalla tai poistamalla valinnat.

Huomautus: Radiopainikkeet ovat samanlaisia ​​kuin valintaruudut, mutta molemmilla tyypeillä on tärkeä ero: valintanappien avulla käyttäjä voi valita vain yhden vaihtoehdon kerrallaan, kun taas valintaruudun avulla käyttäjä voi valita nollasta useaan vaihtoehtoon kerrallaan. .

Esimerkki:

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

Lähtö:

Syötä valintaruudun tyyppi

Ilmoittautumislomake

Valitse ystävällisesti suosikkiurheilulajisi

7. :

Tyyppi 'painike' määrittelee yksinkertaisen painikkeen, joka voidaan ohjelmoida ohjaamaan toiminnallisesti mitä tahansa tapahtumaa, kuten napsautustapahtumaa.

Huomautus: Se toimii pääasiassa JavaScriptin kanssa.

Esimerkki:

Lähtö:

Syötä painikkeen tyyppi.

Napsauta painiketta nähdäksesi tuloksen:

Huomautus: Yllä olevassa esimerkissä olemme käyttäneet JS:n 'hälytystä', jonka opit JS-opetusohjelmassamme. Sitä käytetään näyttämään pop-ikkuna.

8. :

Elementtiä, jonka tyyppi on 'file', käytetään valitsemaan yksi tai useampi tiedosto käyttäjän laitteen tallennustilasta. Kun olet valinnut tiedoston ja lähetyksen jälkeen, tämä tiedosto voidaan ladata palvelimelle JS-koodin ja tiedoston API:n avulla.

Esimerkki:

 Select file to upload: 

Lähtö:

Syötä tiedostotyyppi.

Voimme valita minkä tahansa tiedoston, kunnes emme määritä sitä! Valittu tiedosto näkyy 'valitse tiedosto' -vaihtoehdon vieressä

9. :

Tyyppiä 'image' käytetään kuvaamaan kuvan muodossa olevaa lähetyspainiketta.

Esimerkki:

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

HTML5 äskettäin lisätty tyyppielementti

1. :

Tyyppiä 'väri' käytetään määrittämään syöttökenttä, joka sisältää värin. Sen avulla käyttäjä voi määrittää värin selaimen visuaalisen väriliittymän avulla.

Huomautus: Väri-tyyppi tukee vain väriarvoa heksadesimaalimuodossa, ja oletusarvo on #000000 (musta).

Esimerkki:

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

Lähtö:

Syötä 'väri' tyypit:

Huomautus: Värityypin oletusarvo on #000000 (musta). Se tukee vain väriarvoa heksadesimaalimuodossa.

java merkkijonomuoto pitkä

2. :

Tyypin 'date' elementti luo syöttökentän, johon käyttäjä voi syöttää päivämäärän tietyssä muodossa. Käyttäjä voi syöttää päivämäärän tekstikentällä tai päivämäärävalitsin käyttöliittymällä.

Esimerkki:

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

Lähtö:

Syötä päivämäärätyyppi

3. :

Elementti, jonka tyyppi on 'datetime-local', luo syötteen, jonka avulla käyttäjä voi valita päivämäärän ja paikallisen ajan tunteina ja minuutteina ilman aikavyöhyketietoja.

Esimerkki:

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

Lähtö:

Syötä tyyppi 'datetime-local'.

4. :

Tyyppi 'sähköposti' luo syötteen arkistoituna, jonka avulla käyttäjä voi syöttää sähköpostiosoitteen mallin vahvistuksella. Useiden määritteiden avulla käyttäjä voi kirjoittaa useamman kuin yhden sähköpostiosoitteen.

Esimerkki:

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

Lähtö:

Syötä sähköpostityyppi

Huomautus: Käyttäjä voi myös kirjoittaa useita sähköpostiosoitteita pilkulla tai välilyönnillä erotettuina seuraavasti:

5. :

Tyyppi 'kuukausi' luo syöttökentän, jonka avulla käyttäjä voi helposti syöttää kuukauden ja vuoden muodossa 'KK, VVVV', jossa MM määrittää kuukauden arvon ja VVVV määrittää vuoden arvon. Uusi

Esimerkki:

 Enter your Birth Month-year: 

Lähtö:

Syötä kuukausityyppi:

6. :

Elementtityypin numero luo syötteen, jonka avulla käyttäjä voi syöttää numeerisen arvon. Voit myös rajoittaa vähimmäis- ja enimmäisarvon syöttämistä käyttämällä min- ja max-attribuutteja.

Esimerkki:

 Enter your age: 

Lähtö:

muuntaa tavutaulukko merkkijonoksi

Syötä numerotyyppi

Huomautus: Se mahdollistaa numeron syöttämisen välillä 50-80. Jos haluat syöttää muun numeron kuin alueen, se näyttää virheilmoituksen.

7. :

Tyypin 'url' elementti luo syötteen, jonka avulla käyttäjä voi syöttää URL-osoitteen.

Esimerkki:

 Enter your website URL: <br> 

Lähtö:

Syötä url-tyyppi

8. :

Tyyppi viikko luo syöttökentän, jonka avulla käyttäjä voi valita viikon ja vuoden avattavasta kalenterista ilman aikavyöhykettä.

Esimerkki:

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

Lähtö:

Syötä viikkotyyppi

9. :

Tyyppi 'haku' luo syötteen arkistoituna, jonka avulla käyttäjä voi syöttää hakumerkkijonon. Nämä ovat toiminnallisesti symmetrisiä tekstinsyöttötyypin kanssa, mutta niiden tyyli voi olla erilainen.

Esimerkki:

 Search here: 

Lähtö:

Syötä hakutyyppi

10. :

Tyypin ?tel? luo syötteen, joka on tallennettu puhelinnumeron syöttämiseksi. 'Puhelin'-tyypillä ei ole oletusvahvistusta, kuten sähköposti, koska puhelinnumeromalli voi vaihdella maailmanlaajuisesti.

Esimerkki:

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

Lähtö:

Syötä 'puh'-tyyppi

Huomautus: Tässä käytämme kahta attribuuttia, jotka ovat 'kuvio' ja 'pakollinen', joiden avulla käyttäjä voi syöttää numeron annetussa muodossa ja se on kirjoitettava numero syöttökenttään.