Knapper i HTML
HTML -knapper er som alle andre knapper på skjermen og kan utføre forskjellige funksjoner. HTML -knappene kan brukes til å sende inn eller tilbakestille skjemadata, for å vise noe suksess eller faresignal, for å opprette en koblingsknapp og så videre.
I HTML kan knappene opprettes ved hjelp av og elementene. Knappen som er opprettet med element omhandler imidlertid bare tekstdata, mens knappen opprettet med element støtter opplasting av bilde, en omfattende liste over attributter styling og mye mer. Denne artikkelen gir en detaljert guide til HTML -knapper med følgende læringsutbytte.
- Hvordan lage HTML -knapper
- HTML -knapper med bootstrap -rammeverk
- HTML -knapper med W3.CSS -rammeverk
Hvordan lage en HTML -knapp
Som diskutert tidligere, kan en HTML -knapp opprettes ved hjelp av elementet. Knappekoden støtter mange attributter som kan brukes til å benytte forskjellige funksjonaliteter på knappekoden. Slik som, den kan passere en funksjon eller skript på klikkhendelsen på klikk. Dessuten spesifiserer Type -attributtet funksjonaliteten til knappen som enten det vil være en innsendingsknapp eller en tilbakestillingsknapp. La oss se på attributtene som støttes av HTML -knappelementet.
Følgende tabell lister ned attributtene som støttes av knappekoden.
| Egenskap | Verdi | Beskrivelse |
|---|---|---|
| Autofokus | sant, falsk | Knappen ville være fokusert på å laste inn siden |
| funksjonshemmet | sant, falsk | Den spesifikke knappen vil være deaktivert |
| form | form_id | Denne attributtet viser at knappen er tilknyttet en av flere skjemaer |
| Formaction | URL | Denne attributtet spesifiserer hvor dataene til skjemaet vil bli sendt. |
| formmetod | Få, innlegg | Angir HTTP -metoden for den spesifikke skjemaet |
| formnovalidat | formnovalidat | Skjemaets data vil ikke bli validert ved innsending |
| formtarget | _Blank, _Self, _Parent, _top, Framename | Angir stedet der responsen vil vises |
| Navn | Navn | Denne attributtet spesifiserer navnet på knappen |
| type | Tilbakestill, sende inn, knapp | Knapptypen er spesifisert |
| verdi | tekst | Den opprinnelige verdien på knappen er angitt |
| ved trykk | manus | Utfører et skript på å klikke på knappen |
La oss øve på disse attributtene ved hjelp av følgende eksempler.
Eksempel 1: Send og tilbakestillingsknapper
Dette eksemplet viser opprettelsen av HTML -knapper med type = ”send inn” og type = ”Tilbakestill” attributter til tag. Verdiene til type Attributt viser at dataene vil bli sendt/hvile ved å klikke på knappen.
Koden som er gitt nedenfor oppretter innsendings- og tilbakestillingsknapper på skjemaet.
Html
Ovennevnte kode lager et skjema som inneholder to knapper med type = ”send” og type = ”tilbakestilling”. Onclick -hendelsen til begge knappene utøves, og en JavaScript -funksjon vil bli utført på hver knapp.
JavaScript
funksjon sub ()Varsel ("innsending vellykket");
funksjon res ()
Varsel ("Data Reset");
To JS -funksjoner opprettes som antas å bli kalt etter å klikke på knappene.
Produksjon
Fra utdataene observeres det at ved innsendings- og tilbakestillingsknapper blir et varsel igangsatt på hvert klikk. Dessuten sendes dataene og tilbakestilles også.
Eksempel 2: HTML -knapper med bootstrap
HTML -knappene kan være assosiert med CSS -egenskaper for å style dem for en bedre presentasjon. Bootstrap er et mye brukt CSS-ramme som har en innebygd klasse for knapper. Følgende HTML -kode praktiserer suksessen, faren og koblingsklassen til bootstrap for å legge til noen effekter på knappene.
For å legge til Bootstrap -klasser, må du legge til følgende CDN -lenke i HTML -dokumentet ditt.
Produksjon
Utgangen viser at “BTN-suksess”Klasse har en grønn farge mens“Btn-Danger”Klasse gjorde fargen på knappen til rød. På den annen side "btn-link”Klassen har opprettet en koblingsknapp.
Eksempel 3: HTML -knapper med W3.CSS -rammeverk
W3.CSS-rammeverk har blitt mye brukt på grunn av sine innebygde klasser. Følgende kode oppretter knapper med W3.CSS -klasser.
Ovennevnte kode praktiserer W3-oransje, W3-round-store, W3-grensen og W3-hover-røde klasser av W3.CSS -rammeverk. Disse klassene endrer farge, form, kant og legger til svevende effekter til knapper.
Produksjon
Fra utgangen observeres det at den første knappen er avrundet og i oransje farge. Mens den andre knappen har en svevdeffekt på den og flytter markøren til den, vil du gjøre knappen rødfarget.
Konklusjon
HTML -knapper kan opprettes ved hjelp av elementet og elementet ved hjelp av type = ”send inn” Egenskap. En knapp opprettet med elementet tilbyr imidlertid mer funksjonalitet og styling sammenlignet med knappen opprettet av taggen. Denne artikkelen gir en beskrivende guide for HTML -knapper. I tillegg serverer dette innlegget også styling av HTML -knapper ved å bruke to mye brukte CSS -rammer, som inkluderer W3.CSS og Bootstrap.