HTML-formulär. Etiketter för formulärfält. Exempel: Enkelt HTML-formulär

Lämna en kommentar 6,950

Den vanligaste taggen som används i formulär är . Den har ingen stängningsetikett. All information som webbläsaren behöver bearbeta finns direkt i taggen och specificeras med olika attribut. Semantik varierar avsevärt beroende på dess attributvärde typ.

Tag attribut
type Huvudattributet som anger elementtypen. Om attributet inte anges används standardvärdet text.
Möjliga värden:

Alla webbläsare stöder inte de typer som lagts till i HTML5.
Om webbläsaren inte stöder någon av de nya typerna kommer den att anta att det är en . Hur man organiserar support för äldre webbläsare beskrivs med exemplet med datum.

Autocomplete="off" Inaktiverar autoslutförande för detta fält. Mycket användbart för engångskodinmatningsfält, captchas, etc. .setAttribute("autokomplettera","av"); autofokus Tar automatiskt emot fokus när sidan laddas. Värdet kan ställas in på tre sätt: ... ... ... Ett exempel på att emulera egenskapen autofokus för äldre webbläsare. disabled Gör elementet otillgängligt. Otillgängliga objekt skickas inte till servern. namn Fältnamn. Varje inmatningsfält du skapar måste ha sitt eget unika namn, annars kommer inte skriptet att avgöra vilka fält de resulterande värdena gäller för. Naturligtvis måste namnet på inmatningsfältet matcha det namn som beskrivs för det i bearbetningsprogrammet. värde Standardvärdet för fältet eller etiketten på knappen. storlek Storleken på typfältet. maxlength Begränsning av antalet tecken som kan anges i ett typfält. readonly="readonly" eller "" Förhindrar att elementet ändras. obligatorisk Kontrollerar automatiskt om fältet är ifyllt.
För att markera ett korrekt ifyllt obligatoriskt fält kan du använda följande stilkonstruktion: min Minsta talvärde i typfältet siffra. max Maximalt antal värde i ett typfält siffra. steg Steg för att ändra numret i typfältet siffra. mönster Inmatningsfält mall. Kontrollera att datainmatningen är korrekt. Exempel på mallar för html5-formulärinmatningsmönster. platshållare Verktygstipstext i ett formulärfält som försvinner automatiskt när fältet får fokus.
Exempel på inställning av verktygstipsstil:

I IE och Firefox (upp till version 18) Platshållare anses vara en pseudo-klass, och i resten - ett pseudo-element.

RESULTAT:

Lista En lista med alternativ som kan väljas när du skriver i ett textfält.
Denna lista är initialt dold och blir tillgänglig när fältet får fokus eller skriver in text.

INPUT elementtyper

KNAPP-knapp

Knapp KNAPPär avsedd för de fall då du behöver köra något skript. Det vill säga att en händelse är kopplad till knappen OnSlick och den önskade funktionen anropas. Attribut värde ställer in etiketten på knappen. Attribut onclick anger en JavaScript-hanterare som anropas när knappen klickas. Attribut namn tjänar för JavaScript-namngivning av knappen (den överförs inte till servern).

Exempel

RESULTAT:

Skickaknapp

Denna knapp är till för att skicka in formuläret. I de flesta webbläsare går det nästan inte att skilja från en knapp i utseendet. Det i sig överförs inte, utan tjänar endast för kontroll.

Attribut onclick för knapp SKICKA IN används praktiskt taget inte, eftersom det är bättre att använda en händelsehanterare skicka in, som anges i taggen

. När allt kommer omkring, för att överföra uppgifterna i formuläret, är det i det allmänna fallet inte alls nödvändigt att klicka på knappen SKICKA IN. Du kan helt enkelt trycka på en tangent på tangentbordet STIGA PÅ i vilket textinmatningsfält som helst. Detta kommer att orsaka dataöverföring.

Exempel

RESULTAT:

Attribut värde ger vissa fördelar när du använder mer än en dataknapp. I det här fallet, baserat på värdet på den mottagna variabeln, kommer skriptet att kunna bestämma hur den mottagna informationen ska behandlas ytterligare.

Exempel

RESULTAT:

Attribut formnovalidate kan användas för att förhindra att formulärvärden valideras.

Exempel


RESULTAT:

Återställningsknapp

Det här är knappen för klar form. När du klickar på dem, återställs alla ändrade element till sina standardvärden. Den används ganska sällan. Men i vissa fall kan det vara ganska användbart.

Tips: Var försiktig när du väljer en knappetikett ÅTERSTÄLLA. Något som "Rensa", "Börja om", "Radera inmatning" etc. skulle vara ganska tydligt (och, viktigast av allt, intuitivt även för dummies av dummies). I allmänhet är det nödvändigt att användaren inte ens har en skugga av tvivel angående syftet med denna nyckel.

Exempel

RESULTAT:

TEXT-inmatningsfält

Textinmatningsfältet är det vanligaste inmatningsfältet i formulär. Dessutom kan det med rätta anses vara det huvudsakliga och viktigaste elementet i former. Denna typ används av taggen som standard kan det utelämnas att visa ett textfält. Men om det finns ett behov av att styla väljaren inmatning, sedan attributet type="text" kan inte missas.
Fältnamn som anges av attributet namn, krävs alltid, eftersom webbläsaren baserat på denna parameter skickar paret name=value till skriptet.

Exempel

RESULTAT:

Texten "Ivanov" placeras i det skapade fältet som startvärde. Om användaren inte gör några ändringar eller klickar på knappen kommer värdet Ivanov att skickas till skriptet som användarens efternamn.

Nummerinmatningsfält NUMBER

Fältet är avsett för inmatning av siffror. När den anges kan bråkdelen separeras med antingen punkt (2,5) eller kommatecken (2,5). Om användaren skriver in brev kommer formuläret inte att skickas till servern.

Exempel

RESULTAT:

Du kan ställa in lägsta och högsta fältvärden och steget för nummerändring. Stegvärdet kan vara antingen positivt eller negativt, men måste vara större än 0. Om siffran som anges i fältet inte uppfyller de angivna begränsningarna kommer sändning till servern inte att ske.

Exempel

RESULTAT:

För att ange ett steg, använd steg = "alla".

Exempel

RESULTAT:

Fält siffra visas annorlunda: vissa webbläsare visar alltid pilar, vissa bara när de svävar eller tar emot fokus.

Lösenord

Dolt fält DOLLT

Detta är en speciell (dold) typ av textfält. Om ett skript behandlar flera olika formulär kan du ange ett ID i ett dolt fält på varje formulär för att identifiera vilket formulär du har att göra med.

Exempel
...Andra formelement....
...Andra formelement...

Webbläsaren visar inte det dolda fältet, även om det kan upptäckas om du sätter webbläsaren i HTML-filvisningsläge och analyserar texten på webbsidan. Dolda fält är användbara när du vill tillhandahålla information som krävs för ett skript, men du inte vill att användaren ska kunna ändra det. Tänk dock på att en kunnig användare kan spara ditt formulär i en fil, redigera det och sedan skicka det ändrade formuläret till servern. Därför bör du inte lita på dolda fält för att skapa någon form av säkerhet.

Exempel

Skriptet kommer att få en variabel med namnet FormVersion, som kommer att tilldelas värdet 1.2. Denna information kan användas för att bestämma hur resten av informationen som tas emot från formuläret ska behandlas. Om användaren ändrar detta värde kan skriptprogrammet bete sig på oväntade sätt.

Inmatningsfält för e-postadress

För att ange flera adresser kan du lägga till ett attribut flera olika, med ett kommatecken (,) som används för att separera adresser

Exempel

Med tillkomsten av HTML5 har formulären blivit mer mångsidiga. Inmatningselementet kan nu innehålla mejladresser, datum och mer, de kan markeras efter behov utan att använda javascript - och det här är bara några av de mest värdefulla funktionerna. Nu kan du också använda flera skicka-knappar för ett formulär, och det är nu möjligt att flytta inskicka-knappen utanför formuläret.

Flera inlämningar inom ett formulär

Tills nyligen kunde du bara infoga en skicka-knapp i ett formulär, annars skulle formuläret bara bearbeta den sista knappen. Genom att lägga till method="post" och url till formulärelementet "form" fick vi ett fungerande formulär.

Nu har situationen förändrats - nya egenskaper "formmethod" och "formaction" har lagts till i HTML. De låter dig lägga till en inläggsmetod och url direkt till "skicka"-knappen, så du behöver inte lägga till något i formuläret. Att ha dessa parametrar kopplade till "skicka"-knappen snarare än till formuläret ger allt mer flexibilitet till formuläret. Nu kan du göra så många knappar som behövs för formuläret.

Nu tillhör varje "skicka"-knapp olika webbadresser och allt detta eliminerar behovet av att skriva javascript-kod. Allt detta fungerar bra och nu när du klickar på en knapp kommer formuläret att få formmetod och formaction, vilket kommer att skriva över standardmetod och handlingsparametrar. Om formuläret innehåller en vanlig "skicka"-knapp utan nya parametrar, kommer det att returnera formulärvärdena som är inställda för formulärelementet.

Formmetoden och formationsegenskaperna stöds av alla populära webbläsare

Formulärelement (inmatning, markering, textområde) utanför formuläret

Det är ett allmänt accepterat faktum att alla element i en form som hör till den måste finnas inuti ett element

. Detta minskar flexibiliteten i utformningen av själva formerna. Tack vare det nya "form"-attributet kan nu vilket element som helst flyttas utanför formuläret och vilket formulärelement som helst kan placeras i vilken del av sidan som helst. För att göra detta behöver du bara ett formulär lägg till ett ID och lägg sedan till värdet av det ID:t till alla element som ett attribut.

Idag stöds formattributet av alla populära webbläsare, med undantag för Internet Explorer (upp till version 10).

Formulär tillåter användare att ange information. Du har förmodligen stött på alla typer av tester, undersökningar och undersökningar mer än en gång. För att kunna göra allt detta på dina webbsidor behöver du formulär.

Det bör noteras här att HTML-formulär i sig bara tillåter dig att ange information, men HTML kan inte bearbeta den (det är trots allt ett märkningsspråk, inte ett programmeringsspråk). Språk som javascript, php och andra används för att bearbeta information.

Men allt har sin tid tills vi lär oss att lägga till html-formulär på våra sidor, och vi kommer att lära oss att bearbeta information från dem i andra lektioner som ägnas till exempel åt javascript.

Så, in html-formulär specificeras av taggar

. Alla andra formulärelement finns mellan dessa taggar.

Vid taggen

det finns flera parametrar:

  • namn- blankettens namn. Nödvändigt om det finns flera formulär på sidan
  • handling- definierar webbadressen till vilken information som angetts av användaren ska skickas
  • metod- bestämmer metoden för att skicka information
  • mål- anger namnet på fönstret där resultatet av behandlingen av det inskickade formuläret kommer att visas
I det här skedet behöver du inte fördjupa dig i dessa parametrar, deras syfte kommer att bli uppenbart när du studerar databehandlingsspråk. För nu, kom ihåg att alla formulärelement är placerade mellan taggar
:

Textfält

Ett enkelt textfält på en rad där du kan skriva in och redigera text. Ställ in efter tagg

Resultat:

Alternativ:

  • namn- elementnamn,
  • typ- elementtyp (i det här fallet - text),
  • storlek- storleken på textfältet i tecken som kommer att vara synliga samtidigt när du anger fler tecken, kommer de att rulla;
  • Maxlängd - högsta belopp tecken som kan skrivas in i fältet om du utelämnar denna parameter kommer antalet tecken att vara obegränsat,
  • värde- texten som kommer att visas (den kan raderas i avsaknad av denna parameter, kommer fältet att vara tomt).
Ytterligare två alternativ är möjliga:
  • Inaktiverad- blockerar fältet från alla ändringar,
  • skrivskyddad- gör fältet skrivskyddat.
Exempel:

Resultat:

Textfält för att ange lösenord

Detta är samma textfält som föregående element. Den enda skillnaden är att texten du anger inte visas i stället. Används oftast när du anger lösenord. Alla parametrar är desamma som för ett enkelt textfält, förutom parametern typ="lösenord".

Exempel:

Skriv in lösenord:

Resultat:

Skriv in lösenord:
Försök att ange något i det här fältet.

Kryssrutor

Du har säkert stött på något sånt här:

Vilka språk talar du:
engelsk tysk spanska franska

Den är satt med samma tagg , med en tagg som definierar en kryssruta. Du behöver fyra kryssrutor, du måste skriva indata fyra gånger.

Exempel:

Vilka språk talar du:
engelsk tysk spanska franska

Låt oss överväga dess parametrar:

  • typ- elementtyp (i det här fallet, kryssruta),
  • namn- elementnamn, indikerar för formulärbehandlaren vilket objekt användaren har valt,
  • värde- elementvärde, indikerar för formulärbehandlaren värdet på objektet som valts av användaren. I vårt exempel är det engelska objektet valt, därför kommer hanterarprogrammet att få: lan1="english",
  • kontrollerade- de markerar vanligtvis de objekt som mest sannolikt kommer att väljas. Användaren kan välja andra objekt genom att klicka med musen.

    Växlar

    Till skillnad från kryssrutor kan du bara välja ett objekt. I detta avseende parametervärdena namn måste vara samma för alla delar av gruppen. Parameter type="radio", alla andra är samma som för flaggor.

    Vänligen ange ditt kön:
    manlig kvinna

    Resultat:

    Vänligen ange ditt kön:
    manlig kvinna

    Knappar

    Det finns fyra typer av knappar:

    • Skicka in- knappen för att skicka innehållet i formuläret till webbservern. Dess parametrar:
      • type="submit"- knapptyp,
      • namn- knappens namn,
      • värde- inskription på knappen.
    • bild- grafisk knapp för att skicka innehållet i formuläret till webbservern. För att använda den måste du förbereda en knappbild och sedan använda den som en knapp. Dess parametrar:
      • type="image"- typ av grafisk knapp,
      • namn- knappens namn,
      • src- Adress till bilden för knappen.
    • återställa- en knapp som låter dig återställa alla standardvärden i formuläret. Dess parametrar:
      • type="reset"- rensa knapptyp,
      • namn- knappens namn,
      • värde- inskription på knappen.
    • knapp- en godtycklig knapp, dess åtgärder tilldelas av dig, dvs. Hon vet inte hur man gör någonting själv. Dess parametrar:
      • typ="knapp"- typ av anpassad knapp,
      • namn- knappens namn,
      • värde- inskription på knappen.
      • onclick- indikerar vad som ska göras när knappen klickas. I allmänhet har den här typen av knappar andra händelser (till exempel dubbelklick), men vi kommer inte att överväga dem här.
    Om det finns flera knappar på formuläret bör de ha olika namn.

    Exempelkod:

    Resultat:

    Knappar kan specificeras på annat sätt, med hjälp av taggar . Möjligheterna för sådana knappar är något bredare de kan ha innehåll i form av text eller bilder. Den här taggen har följande parametrar:

    • typ- knapptyp, kan ta värden:
      • återställa- knapp för att rensa formuläret,
      • Skicka in- knapp för att skicka data,
      • knapp- godtycklig åtgärdsknapp.
    • namn- knappens namn,
    • värde- inskription på knappen.
    Exempelkod:
    Skicka

    Resultat:

    Skicka
  • fysisk- överföra både på skärmen och vid ankomst till servern.
  • Inaktiverad- inaktivt fält,
  • skrivskyddad- skrivskyddad är tillåten.
    • Exempel:

    Resultat:

    Försök att skriva in text och titta på skillnaden i parametervärden slå in.

    Dropdown-listor

    Listor kan vara enstaka objekt eller flera val. Båda kommer att påverkas av taggar , inuti vilka element av värden som anges av taggen finns . Låt oss titta på parametrarna för dessa taggar:

    • , slutar med en knapp . Det tog mycket ansträngning att utforma formulär i olika webbläsare. Dessutom krävde formulären användning av JavaScript för att validera inmatad data, och saknade även specifika typer av inmatningsfält för att specificera vardaglig information som datum, adresser E-post och webbadresser.

      HTML5-formulär löst de flesta av dessa vanliga problem med närvaron av nya attribut, vilket ger möjligheten att ändra utseendet på formelement genom att CSS3.

      Ris. 1. Förbättrade webbformulär med HTML5

      Skapa ett HTML5-formulär

      1. Element

      Grunden för vilken form som helst är elementet ...

      . Det kräver ingen inmatning eftersom det är en behållare som håller alla formulärkontroller tillsammans - fält. Attributen för detta element innehåller information som är gemensam för alla formulärfält, så fält som är logiskt kombinerade måste inkluderas i ett formulär.

      Tabell 1. Taggattribut
      Attribut Betydelse/beskrivning
      acceptera-teckenuppsättning Attributvärdet är ett mellanslag separerat lista över teckenkodningar, som kommer att användas för att skicka in formuläret, t.ex. .
      handling Obligatoriskt attribut, som anger webbadressen till formulärhanteraren på servern som data skickas till. Det är en fil (till exempel action.php) som beskriver vad som behöver göras med formulärdata. Om attributvärdet inte anges kommer formulärelementen att anta sina standardvärden efter att sidan har laddats om.
      Om allt arbete kommer att utföras på kundsidan JavaScript-skript, då kan action-attributet ställas in på #.
      Du kan också ordna så att formuläret som besökaren fyllt i skickas till dig via e-post. För att göra detta måste du göra följande inmatning:
      autoslutförande

      enctype Används för att indikera MIMA-typ av data som skickas tillsammans med formuläret, till exempel enctype="multipart/form-data" . Anges endast i fallet med method="post" .
      application/x-www-form-urlencoded är standardinnehållstypen, vilket indikerar att data som skickas representerar en lista med URL-kodade formulärvariabler. Mellanslagstecken (ASCII 32) kommer att kodas som + och ett specialtecken som ! kommer att kodas i hexadecimal som %21 ​​.
      multipart/form-data - används för att skicka in formulär som innehåller filer, icke-ASCII-data och binära data, består av flera delar, som var och en representerar innehållet i ett separat formulärelement.
      text/plain - indikerar att vanlig (inte html) text sänds.
      metod Anger hur formulärdata skickas.
      Get-metoden skickar data till servern via webbläsarens adressfält. När en förfrågan genereras till servern bildar alla variabler och deras värden en sekvens som www.anysite.ru/form.php?var1=1&var2=2 . Läggs variabelnamn och värden till serveradressen efter tecknet? och är åtskilda av &. Alla specialtecken och icke-latinska bokstäver är kodade i formatet %nn, mellanslag ersätts med +. Denna metod bör användas om du inte överför stora mängder information. Om du ska skicka en fil tillsammans med formuläret kommer den här metoden inte att fungera.
      Postmetoden används för att skicka stora mängder data, samt konfidentiell information och lösenord. Data som skickas med den här metoden är inte synliga i URL-huvudet eftersom det finns i meddelandets brödtext.
      namn Uppsättningar formnamn, som kommer att användas för att komma åt formulärelement via skript, till exempel name="opros" .
      novalidate Inaktiverar validering i formulärsändningsknappen. Attributet används utan att ange ett värde
      mål Anger vilket fönster informationen ska skickas till:
      _blank - nytt fönster
      _self - samma ram
      _parent — överordnad ram (om den finns, om inte, så till den nuvarande)
      _top är fönstret på översta nivån i förhållande till denna ram. Om samtalet inte kommer från en underordnad ram, sedan till samma ram.

      2. Gruppering av formulärelement

      Element

      ...
      utformade för att gruppera element som är relaterade till varandra och på så sätt dela upp formen i logiska fragment.

      Varje grupp av element kan namnges med hjälp av elementet , som kommer omedelbart efter taggen

      . Gruppnamnet visas i den övre vänstra kanten
      . Till exempel om i ett element
      Kontaktinformation lagras:

      Kontaktinformation


      Ris. 2. Gruppera formulärelement med hjälp av

      Tabell 2. Taggattribut
      Attribut Betydelse/beskrivning
      Inaktiverad Om attributet finns finns en grupp relaterade formulärelement inuti behållaren
      , inaktiverad för ifyllning och redigering. Används för att begränsa åtkomst till vissa formulärfält som innehåller tidigare inmatade data. Attributet används utan att ange ett värde -
      .
      form
      i samma dokument. Anger en eller flera former som den tillhör denna grupp element. Attributet stöds för närvarande inte av någon webbläsare.
      namn Definierar namn, som kommer att användas för att referera till element i JavaScript, eller för att referera till formulärdata efter att formuläret har fyllts i och skickats. Det är analogt med id-attributet.

      3. Skapa formulärfält

      Element skapar de flesta formulärfält. Ett elements attribut skiljer sig beroende på vilken typ av fält elementet används för att skapa.

      Med hjälp av CSS-stilar kan du ändra teckenstorlek, typsnitt, färg och andra textegenskaper, samt lägga till kanter, bakgrundsfärg och bakgrundsbild. Fältbredden är inställd bredd egendom.

      Tabell 3. Taggattribut
      Attribut Betydelse/beskrivning
      acceptera Bestämmer vilken typ av fil som får skickas till servern. Anges endast för . Möjliga värden:
      file_extension - tillåter nedladdning av filer med angivet tillägg, till exempel accept=".gif" , accept=".pdf" , accept=".doc"
      audio/* - tillåter nedladdning av ljudfiler
      video/* - tillåter nedladdning av videofiler
      image/* - tillåter att ladda bilder
      media_type - anger mediatypen för de nedladdade filerna.
      alt Definierar alternativ text för bilder, anges endast för .
      autoslutförande Ansvarig för att komma ihåg värdena som skrivits in i textfältet och automatiskt ersätta dem nästa gång du anger dem:
      på - betyder att fältet inte är skyddat och dess värde kan lagras och hämtas,
      av - inaktiverar autofyll för formulärfält.
      autofokus Låter dig se till att i den laddade formen ett eller annat inmatningsfält redan har fokus (har valts), och är redo att ange ett värde.
      kontrollerade Attributet kontrollerar om standardkryssrutan är markerad vid sidladdning för fält som type="checkbox" och type="radio" .
      Inaktiverad
      form Attributvärdet måste vara lika med elementets id-attribut i samma dokument. Identifierar ett eller flera formulär som detta formulärfält tillhör.
      bildning Anger webbadressen till filen som kommer att bearbeta data som anges i fälten när formuläret skickas. Ange endast för fälten type="submit" och type="image" . Attributet åsidosätter värdet på handlingsattributet för själva formuläret.
      formenctyp Bestämmer hur formulärfältsdata ska kodas när de skickas till servern. Åsidosätter värdet för formulärets enctype-attribut. Ange endast för fälten type="submit" och type="image" . Alternativ:
      application/-x-www-form-urlencoded är standardvärdet. Alla tecken kodas innan de skickas (mellanslag ersätts med tecknet +, specialtecken konverteras till ASCII HEX-värden)
      multipart/form-data - tecken är inte kodade
      text/vanligt - mellanslag ersätts med symbolen +, och specialtecken är inte kodade.
      formmetod Attributet anger den metod som webbläsaren kommer att använda för att skicka formulärdata till servern. Ange endast för fälten type="submit" och type="image" . Åsidosätter värdet på formulärets metodattribut. Alternativ:
      get är standardvärdet. Data från formuläret (namn/värdepar) läggs till i webbadressen och skickas till servern: URL?name=value&name=value
      post - formulärdata skickas som en http-förfrågan.
      formnovalidate Anger att formulärfältsdata inte ska valideras när formuläret skickas. Åsidosätter värdet på formulärets novalidate-attribut. Kan användas utan att ange ett attributvärde.
      formatmål Bestämmer var svaret som tas emot efter att formuläret har skickats ska visas. Ange endast för fälten type="submit" och type="image" . Åsidosätter värdet på formulärets målattribut.


      _parent – ​​laddar svaret i den överordnade ramen
      _top – laddar svaret i helskärm
      ramnamn – laddar svaret till en ram med det angivna namnet.
      höjd Attributvärdet innehåller antalet pixlar utan att ange en måttenhet. Anger höjden på ett formulärfält av typen type="image" , till exempel, . Det rekommenderas att ställa in både höjd och bredd på fältet samtidigt.
      lista Är en referens till ett element , innehåller dess id Låter dig ge användaren flera alternativ att välja mellan när han börjar ange ett värde i motsvarande fält.
      max Låter dig begränsa den tillåtna numeriska inmatningen till ett maximalt värde attributvärdet kan innehålla ett heltal eller ett bråktal. Det rekommenderas att använda detta attribut tillsammans med min-attributet. Fungerar med följande fälttyper: nummer, intervall, datum, datetime, datetime-local, month, time and week.
      Maxlängd Attributet anger det maximala antalet tecken som anges i fältet. Standardvärdet är 524288 tecken.
      min Låter dig begränsa den tillåtna numeriska inmatningen till ett lägsta värde.
      flera olika Tillåter användaren att ange flera attributvärden, åtskilda av ett kommatecken. Gäller filer och e-postadresser. Anges utan attributvärde.
      namn Anger namnet som kommer att användas för att komma åt elementet till exempel i tabeller css-stilar. Det är analogt med id-attributet.
      mönster Låter dig bestämma att använda vanligt uttryck syntaxen för de data som måste tillåtas anges i ett visst fält. Till exempel, pattern="(3)-(3)" — hakparentes ställ in intervallet för giltiga tecken, i det här fallet - alla små bokstäver, siffran inom klammerparenteser anger att tre gemener krävs, följt av ett bindestreck, sedan tre siffror från 0 till 9.
      Platshållare Innehåller texten som visas i inmatningsfältet innan den fylls i (oftast är detta ett verktygstips).
      skrivskyddad Tillåter inte användaren att ändra värdena för formulärelement att välja och kopiera text är fortfarande tillgänglig. Anges utan attributvärde.
      nödvändig Visar ett meddelande som indikerar att detta fält är obligatoriskt. Om användaren försöker skicka in formuläret utan att ange önskat värde i detta fält, kommer ett varningsmeddelande att visas på skärmen. Anges utan attributvärde.
      storlek Ställer in fältets synliga bredd i tecken. Standardvärdet är 20. Fungerar med följande fälttyper: text, sök, tel, url, e-post och lösenord.
      src Anger webbadressen till bilden som används som formulärsändningsknapp. Anges endast för fältet .
      steg Används för element som kräver input numeriska värden, indikerar mängden som ska öka eller minska värden under intervalljustering (steg).
      typ knapp – skapar en knapp.
      kryssruta - förvandlar ett inmatningsfält till en kryssruta som kan markeras eller avmarkeras, t.ex.
      Jag har en bil
      färg - Genererar färgpaletter i webbläsare som stöder, så att användare kan välja färgvärden i hexadecimalt format.
      datum — låter dig ange ett datum i formatet dd.mm.åååå.
      Födelsedag:
      datetime-local - låter dig ange ett datum och en tid åtskilda av en stor engelsk bokstav T med hjälp av mönstret dd.mm.åååå hh:mm.
      Födelsedag - dag och tid:
      e-post - webbläsare som stöder detta attribut, förväntar sig att användaren anger data som matchar syntaxen för e-postadresser.
      E-post:
      fil - låter dig ladda ner filer från användarens dator.
      Välj FIL:
      dold - Döljer kontrollen, som inte visas av webbläsaren och förhindrar användaren från att ändra standardvärdena.
      bild - skapar en knapp, så att du kan infoga en bild istället för text på knappen.
      månad – Låter användaren ange år och månadsnummer med hjälp av mönstret åååå-mm.
      nummer - avsett för att ange heltalsvärden. Dess min , max och steg attribut anger de övre, nedre gränserna respektive steget mellan värdena. Dessa attribut antas för alla element som har numeriska indikatorer. Deras standardvärden beror på elementtypen.
      Vänligen ange kvantitet (från 1 till 5):
      lösenord - skapar textfält i formuläret, medan tecknen som användaren anger ersätts med asterisker, punkter eller andra ikoner som installeras av webbläsaren.
      Skriv in lösenord:
      radio - skapar en switch - en kontroll i form av en liten cirkel som kan slås på eller av.
      Vegetarian:
      range - låter dig skapa ett gränssnittselement som en skjutreglage, min / max - låter dig ställa in urvalsintervallet
      återställ - skapar en knapp som rensar formulärfält från användarinmatade data.
      sök - betecknar ett sökfält, som standard är inmatningsfältet rektangulärt till formen.
      Sök:
      skicka - skapar standardknapp, aktiveras med musklick. Knappen samlar in information från formuläret och skickar in den för behandling.
      text - Skapar textfält på ett formulär och matar ut ett textfält på en rad för textinmatning.
      tid - låter dig ange tid i 24-timmarsformat med hjälp av hh:mm-mönstret. I stödjande webbläsare visas det som en numerisk inmatningsfältskontroll med ett musredigerbart värde och tillåter endast att tidsvärden anges.
      Ange tid:
      url – fältet är avsett för att ange webbadresser.
      Hemsida:
      vecka - Motsvarande pekverktyg låter användaren välja en vecka på året, varefter den kommer att tillhandahålla datainmatning i formatet nn-åååå. Beroende på år kan antalet veckor vara 52 eller 53.
      Ange vecka:
      värde Bestämmer texten som visas på en knapp, i ett fält eller i associerad text. Ej specificerat för fält av typen fil.
      bredd Attributvärdet innehåller antalet pixlar. Låter dig ställa in bredden på formulärfälten.

      4. Textinmatningsfält

      Element används istället för element när du behöver skapa stora textfält. Texten som visas som det ursprungliga värdet placeras inuti taggen. Fältdimensionerna ställs in med hjälp av attributen cols - horisontella dimensioner, rader - vertikala dimensioner. Fältets höjd kan ställas in med hjälp av egenskapen height. Alla storlekar beräknas utifrån storleken på ett tecken i ett teckensnitt med monospace.

      Tabell 4. Taggattribut

      7. Knappar

      Element skapar klickbara knappar. Till skillnad från skapade knappar ( , , , ), inuti elementet .

      Med knappar kan användare skicka data till ett formulär, rensa formulärinnehåll eller vidta någon annan åtgärd. Du kan skapa ramar, ändra bakgrunden och justera text på en knapp.

      Tabell 9. Taggattribut
      Attribut Betydelse/beskrivning
      autofokus Ställer in fokus på knappen när sidan laddas.
      Inaktiverad Inaktiverar knappen, vilket gör den oklickbar.
      form Indikerar ett eller flera formulär som denna knapp tillhör. Attributvärdet är identifieraren för motsvarande formulär.
      bildning Attributvärdet innehåller URL:en till formulärdatahanteraren som skickas när knappen klickas. Endast för knapptyp type="submit" . Åsidosätter värdet för åtgärdsattributet som anges för elementet .
      formenctyp Ställer in kodningstypen för formulärdata innan de skickas till servern när knappar som type="submit" klickas. Åsidosätter värdet för enctype-attributet som anges för elementet . Möjliga värden:
      application/x-www-form-urlencoded är standardvärdet. Alla tecken kommer att kodas innan de skickas.
      multipart/form-data - tecken är inte kodade. Används när filer laddas upp med ett formulär.
      text/vanlig - tecken kodas inte, och mellanslag ersätts med symbolen +.
      formmetod Attributet anger vilken metod webbläsaren kommer att använda för att skicka formuläret. Åsidosätter värdet på metodattributet som anges för elementet . Anges endast för knappar av typen "submit". Möjliga värden:
      get - data från formuläret (namn/värdepar) läggs till i url:n och skickas till servern. Den här metoden har begränsningar för storleken på de data som skickas och är inte lämplig för att skicka lösenord och konfidentiell information.
      post - data från formuläret läggs till som en http-förfrågan. Metoden är mer pålitlig och säker än get och har inga storleksbegränsningar.
      formnovalidate Attributet anger att formulärdata inte ska valideras vid inlämning. Anges endast för knappar av typen "submit".
      formatmål Attributet anger i vilket fönster resultatet ska visas efter att formuläret har skickats in. Anges endast för knappar av typen "submit". Åsidosätter värdet för målattributet som anges för elementet .
      _blank - laddar svaret till ett nytt fönster/flik
      _self - laddar svaret i samma fönster (standard)
      _parent - laddar svaret i den överordnade ramen
      _top - laddar svaret i helskärm
      ramnamn - laddar svaret till en ram med det angivna namnet.
      namn Ställer in namnet på knappen, attributvärdet är text. Används för att länka till formulärdata efter att formuläret har skickats, eller för att länka till en given knapp(ar) i JavaScript.
      typ Definierar knapptypen. Möjliga värden:
      knapp - klickbar knapp
      återställ — återställningsknapp, returnerar det ursprungliga värdet
      skicka - knapp för att skicka formulärdata.
      värde Ställer in standardvärdet som skickas när knappen klickas.

      8. Kryssrutor och alternativknappar i formulär

      Kryssrutor i formulär ställs in med hjälp av konstruktionen , och omkopplaren - använder .

      Kryssrutor, till skillnad från alternativknappar, kan ställas in på flera i en form. Om det markerade attributet är specificerat för kryssrutor kommer kryssrutorna i motsvarande formulärfält redan att vara markerade när sidan läses in.

      Element

      Attribut innehåller en DOMString som visas som knappens etikett. Knappar har inte ett sant värde annars.

      Om du inte anger ett värde kommer knappen att ha en standardetikett, vald av användaragent. Den här etiketten är troligen något i stil med "Skicka" eller "Skicka sökfråga". Här är ett exempel på en skicka-knapp med en standardetikett i din webbläsare:

      Ytterligare attribut

      formenctyp

      En sträng som identifierar den kodningsmetod som ska användas när formulärdata skickas till servern. Det finns tre tillåtna värden:

      Application/x-www-form-urlencoded Detta, standardvärdet, skickar formulärdata som en sträng efter URL-kodning av texten med en algoritm som t.ex. multipart/form-data Använder FormData API för att hantera data, vilket gör att filer kan skickas till servern. Du måste använd denna kodningstyp om ditt formulär innehåller något element används för att skapa interaktiva kontroller för webbaserade formulär för att acceptera data från användaren; en mängd olika typer av indata och kontrollwidgetar är tillgängliga, beroende på enhet och användaragent."> element av typen fil ( ). text/oformaterad Vanlig text; mestadels endast användbar för felsökning, så att du enkelt kan se data som ska skickas.

      Om angivet åsidosätter värdet för formenctype-attributet det ägande formulärets action-attribut.

      formmetod

      En sträng som indikerar HTTP-metoden som ska användas när formulärets data skickas in; detta värde åsidosätter alla metodattribut som anges på ägarformuläret. Tillåtna värden är:

      Get A URL konstrueras genom att börja med URL:en som ges av formaction- eller action-attributet, lägga till ett frågetecken ("?") och sedan lägga till formulärets data, kodad enligt beskrivningen av formenctype eller formens enctype-attribut. Denna URL skickas sedan till servern med hjälp av en HTTP-förfrågan. Denna metod fungerar bra för enkla formulär som bara innehåller ASCII-tecken och inte har några biverkningar. Detta är standardvärdet. post Formulärets data ingår i brödtexten i begäran som skickas till URL:en som ges av formaction- eller action-attributet med hjälp av en HTTP-postbegäran. Denna metod stöder komplexa data och filbilagor. dialog Denna metod används för att indikera att knappen stänger helt enkelt dialogen som inmatningen är associerad med och överför inte formulärdata alls.

      formnovalidate

      Ett booleskt attribut som, om det finns, anger att formuläret inte ska valideras innan det skickas till servern. Detta åsidosätter värdet för novalidate-attributet på elementets ägande formulär.

      formatmål

      En sträng som anger ett namn eller nyckelord som anger var svaret som mottagits efter att formuläret har skickats ska visas. Strängen måste vara namnet på en webbläsarsammanhang(det vill säga en flik, ett fönster eller ) representerar en kapslad webbläsarkontext som bäddar in en annan HTML-sida i den aktuella.">