logo

TechCodeview

HTML-skjemainndatatyper

I HTML er et viktig element i HTML-form. 'type'-attributtet til input-elementet kan være forskjellige typer, som definerer informasjonsfeltet. Slik som gir en tekstboks.

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

type=' ' Beskrivelse
tekst Definerer et en-linjes tekstinntastingsfelt
passord Definerer et én-linjes passordinntastingsfelt
sende inn Definerer en send-knapp for å sende skjemaet til serveren
nullstille Definerer en tilbakestillingsknapp for å tilbakestille alle verdier i skjemaet.
radio Definerer en alternativknapp som lar velge ett alternativ.
avmerkingsboksen Definerer avmerkingsbokser som tillater valg av flere alternativer.
knapp Definerer en enkel trykknapp, som kan programmeres til å utføre en oppgave på en hendelse.
fil Definerer å velge filen fra enhetslagring.
bilde Definerer en grafisk send-knapp.

HTML5 la til nye typer på element. Følgende er listen over typer elementer i HTML5

type=' ' Beskrivelse
farge Definerer et inndatafelt med en bestemt farge.
Dato Definerer et inndatafelt for valg av dato.
datetime-lokal Definerer et inndatafelt for å legge inn en dato uten tidssone.
e-post Definerer et inndatafelt for å angi en e-postadresse.
måned Definerer en kontroll med måned og år, uten tidssone.
Antall Definerer et inntastingsfelt for å angi et tall.
url Definerer et felt for å angi URL
uke Definerer et felt for å angi dato med uke-år, uten tidssone.
Søk Definerer et enkeltlinjetekstfelt for å skrive inn en søkestreng.
tlf Definerer et inntastingsfelt for å legge inn telefonnummeret.

Følgende er beskrivelsen av typer elementer med eksempler.

1. :

element av typen 'tekst' brukes til å definere et enkelt-linjes tekstfelt.

Eksempel:

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

Produksjon:

Skriv inn 'tekst'-type:

De 'tekst' felt definerer et tekstfelt på én linje.

Skriv inn fornavn

Skriv inn etternavn

Merk: Standard maksimale tegnlengde er 20.

forklare datauavhengighet

2. :

Elementet av typen 'passord' lar en bruker skrive inn passordet sikkert på en nettside. Den angitte teksten i passordet er konvertert til '*' eller '.', slik at den ikke kan leses av en annen bruker.

Eksempel:

 Enter User name <br> <br> Enter Password <br> <br> <br>
Test det nå

Produksjon:

Skriv inn 'passord'-type:

De 'passord' feltet definerer et passordfelt på én linje for å angi passordet sikkert.

Skriv inn brukernavn

Oppgi passord


3. :

Elementet av typen 'send' definerer en send-knapp for å sende inn skjemaet til serveren når 'klikk'-hendelsen inntreffer.

Eksempel:

 Enter User name <br> <br> Enter Password <br> <br> <br>
Test det nå

Produksjon:

Skriv inn 'send'-type:

Skriv inn brukernavn

Oppgi passord


Etter å ha klikket på send-knappen, vil dette sende skjemaet til serveren og omdirigere siden til handling verdi.Vi vil lære om 'handling'-attributtet i senere kapitler

4. :

Typen 'reset' er også definert som en knapp, men når brukeren utfører en klikkhendelse, tilbakestiller den som standard alle innlagte verdier.

Eksempel:

 User id: Password: <br> <br>
Test det nå

Produksjon:

Skriv inn 'reset' type:

Bruker-ID: Passord:

Prøv å endre inngangsverdiene til bruker-ID og passord, så når du klikker på tilbakestill, vil det tilbakestille inndatafelt med standardverdier.

5. :

Typen 'radio' definerer radioknappene, som gjør det mulig å velge et alternativ mellom et sett med relaterte alternativer. Bare én alternativknapp kan velges om gangen.

Eksempel:

Velg din favorittfarge

rød
blå
grønn
rosa
Test det nå

Produksjon:

Input 'radio' type

Velg din favorittfarge

rød
blå
grønn
rosa

6. :

Typen 'avmerkingsboks' vises som firkantede bokser som kan krysses av eller fjernes for å velge valgene fra de gitte alternativene.

Merk: 'Radioknappene' ligner på avmerkingsbokser, men det er en viktig forskjell mellom begge typer: radioknapper lar brukeren velge bare ett alternativ om gangen, mens avkrysningsboksen lar en bruker velge null til flere alternativer om gangen .

Eksempel:

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

Produksjon:

Skriv inn 'avmerkingsboks'-type


Registreringsskjema

Skriv inn navnet ditt:

Velg din favorittsport

Siriss
Tennis
Fotball
Baseball
Badminton

7. :

Typen 'knapp' definerer en enkel trykknapp, som kan programmeres til å kontrollere en funksjonell på en hvilken som helst hendelse, for eksempel klikkhendelse.

java nummer til streng

Merk: Det fungerer hovedsakelig med JavaScript.

Eksempel:
Test det nå

Produksjon:

Skriv inn 'knapp'-type.

Klikk på knappen for å se resultatet:

Merk: I eksemplet ovenfor har vi brukt 'varsling' til JS, som du vil lære i vår JS-opplæring. Den brukes til å vise et pop-vindu.

8. :

Elementet med typen 'fil' brukes til å velge én eller flere filer fra brukerenhetslagring. Når du har valgt filen, og etter innsending, kan denne filen lastes opp til serveren ved hjelp av JS-kode og fil-API.

Eksempel:

 Select file to upload:
Test det nå

Produksjon:

Skriv inn 'fil'-type.

Vi kan velge hvilken som helst type fil inntil vi ikke spesifiserer den! Den valgte filen vil vises ved siden av alternativet 'velg fil'.

Velg fil som skal lastes opp:

9. :

Typen 'bilde' brukes til å representere en send-knapp i form av bilde.

Eksempel:

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

HTML5 nylig lagt til typer element

1. :

Typen 'farge' brukes til å definere et inndatafelt som inneholder en farge. Den lar en bruker spesifisere fargen ved hjelp av det visuelle fargegrensesnittet i en nettleser.

Merk: 'Farge'-typen støtter bare fargeverdier i heksadesimalt format, og standardverdien er #000000 (svart).

Eksempel:

 Pick your Favorite color: <br> <br> Upclick <br> <br> Downclick
Test det nå

Produksjon:

shreya ghoshal første ektemann

Skriv inn 'farge'-typer:

Velg din favorittfarge:

Opp-klikk

Ned-klikk

Merk: Standardverdien for 'farge'-typen er #000000 (svart). Den støtter bare fargeverdier i heksadesimalt format.

2. :

Elementet av typen 'dato' genererer et inndatafelt, som lar en bruker legge inn datoen i et gitt format. En bruker kan skrive inn datoen etter tekstfelt eller etter datovelgergrensesnitt.

Eksempel:

 Select Start and End Date: <br> <br> Start date: <br> <br> End date: <br> <br>
Test det nå

Produksjon:

Skriv inn 'dato'-type

Velg start- og sluttdato:

Startdato:

Sluttdato:

3. :

Elementet av typen 'datetime-local' lager inndata som lar en bruker velge datoen samt lokal tid i timen og minuttet uten tidssoneinformasjon.

Eksempel:

 Select the meeting schedule: <br> <br> Select date &amp; time: <br> <br>
Test det nå

Produksjon:

Skriv inn 'datetime-local' type

Velg møteplanen:

Velg dato og klokkeslett:

4. :

Typen 'e-post' oppretter en inndatafil som lar en bruker skrive inn e-postadressen med mønstervalidering. De flere attributtene lar en bruker angi mer enn én e-postadresse.

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>
Test det nå

Produksjon:

Skriv inn 'e-post'-type

Fyll inn epostadressen din

Merk: Brukeren kan også skrive inn flere e-postadresser adskilt med komma eller mellomrom som følger:

Skriv inn flere e-postadresser

5. :

Typen 'måned' oppretter et inndatafelt som lar en bruker enkelt skrive inn måned og år i formatet 'MM, ÅÅÅÅ' der MM definerer månedsverdien, og ÅÅÅÅ definerer årsverdien. Ny

Eksempel:

 Enter your Birth Month-year:
Test det nå

Produksjon:

Skriv inn 'måned'-type:

Skriv inn fødselsmånedsåret:

6. :

Elementtypenummeret lager inndata som lar en bruker angi den numeriske verdien. Du kan også begrense å angi en minimums- og maksimumsverdi ved å bruke min og max-attributtene.

Eksempel:

 Enter your age:
Test det nå

Produksjon:

Skriv inn 'nummer' type

Skriv inn alderen din:

Merk: Det vil tillate å angi tall i området 50-80. Hvis du vil angi et annet nummer enn rekkevidde, vil det vise en feil.

7. :

Elementet av typen 'url' oppretter en inndatafil som lar brukeren skrive inn URL-en.

Eksempel:

 Enter your website URL: <br>
Test det nå

Produksjon:

Skriv inn 'url'-type

Skriv inn nettadressen din:

8. :

Type uke oppretter et inndatafelt som lar en bruker velge en uke og år fra rullegardinkalenderen uten tidssone.

Skuespillerinne Rakul Preet Singh

Eksempel:

 <b>Select your best week of year:</b> <br> <br>
Test det nå

Produksjon:

Skriv inn 'uke'-type

Velg din beste uke i året:

9. :

Typen 'søk' oppretter en inndatafil som lar en bruker skrive inn en søkestreng. Disse er funksjonelt symmetriske med tekstinndatatypen, men kan ha en annen stil.

Eksempel:

 Search here:
Test det nå

Produksjon:

Skriv inn 'søk'-type

Søk her:

10. :

Elementet av typen ?tel? oppretter en inndata for å angi telefonnummeret. 'Tel'-typen har ikke standardvalidering som e-post, fordi telefonnummermønsteret kan variere over hele verden.

Eksempel:

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

Produksjon:

Skriv inn 'tel' type

Skriv inn telefonnummeret ditt (i formatet xxx-xxx-xxxx):

Merk: Her bruker vi to attributter som er 'mønster' og 'påkrevd' som lar brukeren skrive inn nummeret i gitt format, og det er påkrevd å skrive inn nummeret i inndatafeltet.