Formulär (HTML)

Form ( engelsk  form ) i HTML är en del av ett dokument som låter användaren ange information för vidare bearbetning av systemet. Syntaktiskt specificeras en form i HTML med hjälp av ett element och innehåller förutom markeringen av vanliga element <form>uppmärkning för kontroller , etiketter och andra [1] [ 2] .  

Exempel

Ett enkelt formulär för att ange data om en ny användare [1] :

<!DOCTYPE html> < html > < head > < meta charset = "utf-8" /> < title > Registrering </ title > </ head > < body > < form action = "http://example.com/app/profile.php" method = "post" > < p > < label for = "användarnamn" > Namn: </ label > < input type = "text" name = "användarnamn" /> < br /> < label for = "nick" > Nick: </ label > < input type = "text" name = "nick" /> < br /> < label for = "e-post" > E-postadress post: </ label > < input type = "text" name = "e-post" /> < br /> < label for = "sex" > Golv: </ label > < input type = "radio" name = "sex" värde = "man" /> manlig < br /> < input type = "radio" name = "sex" value = "female" /> feminin < br /> < input type = "radio" name = "sex" värde = "hemligt" /> Jag vill inte svara < input type = "submit" value = "Submit" > < input type = "reset" value = "Rensa" > </ p > </ form > </ body > </ html >

I det här exemplet innehåller formuläret tre textfält för att ange en textsträng, radioknappar för att välja kön, knappar för att skicka ( eng.  submit ) och rensa ( eng.  reset ) formuläret.

Kontroller

Kontroller används för användarinteraktion med formuläret. Attributet nameanger namnet på den omfångade kontrollen i det givna formuläret.

Varje formulärelement har ett initialt värde och ett aktuellt värde kopplat till sig. Med vissa undantag ( <textarea>, <object>) kan startvärdet ges av value. Värden associerade med element kan ändras när användaren eller skript (som Javascript ) interagerar med formuläret. Vid rensning ( eng.  reset ) får formulärelementen initiala värden. Data för alla aktiva ( eng.  framgångsrika ) formulärelement skickas ( eng.  submit ) för bearbetning i form av namn-värdepar [1] [2] .

Typer

Följande kontroller är definierade i HTML:

  • knapp: element <input>av typer submit(skicka in ett formulär), image(bild-knapp), reset(rensa formuläret, föra formuläret till dess ursprungliga tillstånd), button(knapp), samt ett element <button>(skicka in ett formulär);
  • kryssruta (kryssruta): typ checkbox;
  • alternativknapp : typ radio;
  • meny: element <select>med element <optgroup>och <option>inuti;
  • textrad: typ textoch element <textarea>(textfält med flera rader);
  • lösenord: typ password;
  • dolt fält: typ hidden;
  • fil: typ file.

HTML5 definierar ytterligare element ( inget stöd för flera webbläsare än) [3] :

  • ett element <datalist>med alternativ för autoslutförande för en textrad;
  • ett element <output>för resultatet av en beräkning baserad på andra fält;
  • ett element <keygen>för att generera ett nyckelpar för användning i autentiseringsmekanismen .

Elementet <form>

Formuläret ställs in med hjälp av elementet <form>, i vilket kontrollerna finns. Förutom attribut som är gemensamma för HTML kan <form>följande [1] [2] finnas :

  • action(action) är ett obligatoriskt attribut (inte i HTML5) som innehåller formulärhanterarens URI ;
  • method(formulärinlämningsmetod) - ett attribut som tar värdena GET (standard) eller POST;
  • enctype(kodningstyp för innehåll) - standard application/x-www-form-urlencoded(alltid för GET-metoden), men multipart/form-data används vanligtvis ;
  • accept — lista över MIME- typer för nedladdning av filer;
  • name - Formens namn;
  • onsubmit - händelsehanterare "formulär skickat" (för skript);
  • onreset - Händelsehanterare: "formulär rensat" (även för skript);
  • accept-charsetlista över teckenuppsättningar som stöds.

Skicka formuläret

Det finns två metoder för att skicka in ett formulär: GET och POST. GET-metoden rekommenderas i de fall där det inte finns några biverkningar, såsom sökning, under formulärbehandling på serversidan. Annars, när ändringar på serversidan impliceras i databaser etc., måste POST [1] -metoden användas .

Se även

Anteckningar

  1. ↑ 1 2 3 4 5 HTML Språkspecifikation Arkivexemplar daterad 4 december 2012 på Wayback Machine , översättare: A. Piramidin, intuit.ru, ISBN 978-5-94774-648-8 , 17. Föreläsning: Forms.
  2. ↑ 1 2 3 Formulär i HTML-dokument Arkiverade 22 april 2021 på Wayback Machine  W3C-specifikationen för HTML4
  3. ↑ HTML5 Form Elements, w3schools (nedlänk) . Hämtad 2 december 2012. Arkiverad från originalet 13 maj 2013.