Skapa knappar med HTML-inmatningstaggar i formulär

click fraud protection

Skapa anpassningsbara textknappar i HTML använda inmatning märka. De inmatning element används inom a form element.

Genom att ställa in attributtyp till "knapp" genererar en enkel klickbar knapp. Du kan definiera texten som visas på knappen, till exempel "Skicka", med hjälp av värde attribut. Till exempel:


De inmatning taggen skickar inte ett HTML-formulär; du måste inkludera JavaScript för att hantera formuläruppgifterna. Utan JavaScript onclick händelse, knappen verkar vara klickbar men ingenting kommer att hända, och du kommer att ha frustrerat dina läsare.

"Knappen" Taggalternativ

Även om du använder inmatning taggen för att skapa en knapp fungerar för sitt syfte, det är ett bättre alternativ att använda knapp tagg för att skapa din webbplats HTML-knappar. De knapp taggen är mer flexibel eftersom den låter dig använda bilder för knappen (vilket hjälper dig att bevara visuell konsistens om din webbplats har ett designtema), till exempel, och det kan definieras som en skicka eller återställ typ av knapp utan att behöva något extra JavaScript.

instagram viewer

Ange knappen typ attribut i någon knapp taggar. Det finns tre olika typer:

  • knapp: Knappen har inget inneboende beteende men används tillsammans med skript som körs på klientsidan som kan fästas till knappen och köras när den klickas.
  • återställa: Återställer alla värden.
  • Skicka in: Knappen skickar formulärdata till servern (detta är standardvärdet om ingen typ är definierad).

Andra attribut inkluderar:

  • namn: Ger knappen ett referensnamn.
  • värde: Anger ett värde som först tilldelas knappen.
  • inaktivera: Stänger av knappen.

Går längre med knappar

HTML5 lägger till ytterligare attribut till knapp tagg som utökar dess funktionalitet.

  • autofokus: När sidan laddas anger detta alternativ att den här knappen är i fokus. Endast en autofokus kan användas på en sida.
  • form: Associerar knappen till ett specifikt formulär i samma HTML-dokument, med hjälp av formulärets identifierare som värdet.
  • formaktion: Används endast med typ = "skicka" och en URL som värde anger den var formulärdata ska skickas. Ofta är destinationen ett PHP-skript eller något liknande,
  • formtyp: Används endast med typ = "skicka" attribut. Definierar hur formulärdata ska kodas när de skickas till servern. De tre värdena är application / x-www-form-urlencoded (standard), multipart / form-data, och text / vanlig.
  • formmetod: Används endast med typ = "skicka" attribut. Detta anger vilken HTTP-metod som ska användas när du skickar formulärdata, antingen skaffa sig eller posta.
  • formnovalidat: Används endast med typ = "skicka" attribut. Formulärdata valideras inte när de skickas in.
  • formtarget: Används endast med typ = "skicka" attribut. Detta indikerar var webbplatsens svar ska visas när formulärdata skickas, till exempel i ett nytt fönster etc. Värdealternativen är antingen_blank, _self, _parent, _top, eller ett specifikt ramnamn.

Läs mer om skapa knappar i HTML-formuläroch hur man gör din webbplats mer användarvänlig.

instagram story viewer