Lag tilpassbare tekstknapper i HTML bruker inngang stikkord. De inngang element brukes innenfor en skjema element.
Ved å stille inn Egenskaptype til "knapp", genererer en enkel klikkbar knapp. Du kan definere teksten som vises på knappen, for eksempel "Send inn", ved å bruke verdi Egenskap. For eksempel:
De inngang tag vil ikke sende inn et HTML-skjema; du må ta med JavaScript for å håndtere skjemadatainnleveringen. Uten JavaScript ved trykk hendelse, ser det ut til at knappen er klikkbar, men ingenting vil skje, og du vil ha frustrert leserne dine.
Knappen Merk alternativet
Selv om du bruker inngang for å lage en knapp fungerer for sitt formål, er det et bedre alternativ å bruke knapp tag for å lage nettstedets HTML-knapper. De knapp tag er mer fleksibel fordi det lar deg bruke bilder til knappen (som hjelper deg med å bevare visuell konsistens hvis din nettstedet har et designtema), for eksempel, og det kan defineres som en innsending eller tilbakestilling av knapp uten å måtte trenge noe ekstra JavaScript.
Spesifiser knappen type attributt i hvilken som helst knapp koder. Det er tre forskjellige typer:
- knapp: Knappen har ingen iboende oppførsel, men brukes i forbindelse med skript som kjører på klientsiden som kan festes til knappen og utføres når du klikker på den.
- nullstille: Tilbakestiller alle verdier.
- sende inn: Knappen sender skjemadata til serveren (dette er standardverdien hvis ingen type er definert).
Andre attributter inkluderer:
- Navn: Gir knappen et referansenavn.
- verdi: Spesifiserer en verdi som først skal tilordnes knappen.
- deaktivere: Slår av knappen.
Gå videre med knapper
HTML5 legger til flere attributter til knapp tag som utvider funksjonaliteten.
- autofokus: Når siden lastes inn, spesifiserer dette alternativet at denne knappen er i fokus. Bare en autofokus kan brukes på en side.
- skjema: Knytter knappen til et bestemt skjema i det samme HTML-dokumentet, ved hjelp av identifikatoren for skjemaet som verdien.
- formaksjon: Brukes bare med type = "send inn" og en URL som verdi, spesifiserer den hvor skjemadata skal sendes. Ofte er målet et PHP-skript eller noe lignende,
- formtype: Brukes bare med type = "send inn" Egenskap. Definerer hvordan skjemadata skal kodes når de sendes til serveren. De tre verdiene er application / x-www-form-urlencoded (misligholde), flerdelt / skjemadata, og tekst / vanlig.
- formmetode: Brukes bare med type = "send inn" Egenskap. Dette spesifiserer hvilken HTTP-metode som skal brukes når du sender inn skjemadata få eller post.
- formnovalidat: Brukes bare med type = "send inn" Egenskap. Skjemadata blir ikke validert når de sendes inn.
- formtarget: Brukes bare med type = "send inn" Egenskap. Dette indikerer hvor nettstedssvaret skal vises når skjemadata sendes inn, for eksempel i et nytt vindu, etc. Verdien alternativene er enten_blank, _self, _parent, _top, eller et bestemt rammenavn.
Les mer om lage knapper i HTML-skjemaer, og hvordan du kan gjøre nettstedet ditt mer brukervennlig.