HTML-formulär är ett mycket kraftfullt verktyg för att interagera med användare, men av tekniska skäl är det inte alltid självklart hur man använder dem till sin fulla potential. Det räcker inte att bara skicka in data i det här fallet – du måste också se till att uppgifterna som användarna fyller i i formulär kommer att skickas i rätt format som behövs för att det ska kunna behandlas framgångsrikt och att detta inte kommer att bryta befintliga ansökningar. Det är också viktigt att hjälpa användare att fylla i formulär korrekt och att inte bli frustrerade när de försöker använda applikationer.
Taggen används för att skapa ett HTML-formulär. Den skapar faktiskt ingen marginal, utan används som en överordnad behållare för element som. Oavsett om du vill göra ett enkelt prenumerationsformulär med regelbunden utcheckning och betalning, eller interaktiva webbapplikationer, måste du använda HTML-elementtaggar för att fungera, den viktigaste är.
Hur standardHTML-formulär
HTML-formulär uppfanns och standardiserades till stor del före tillkomsten av asynkron JavaScript och komplexa webbapplikationer. Idag används formulärinmatningar, knappar och andra interaktionsmekanismer, men kärnan i detta är ett system baserat på HTTP-förfrågnings- och svarsparadigmet.
När en användare laddar en sida skickas en http-förfrågan (vanligtvis en så kallad GET-förfrågan). Den skickas av din webbläsare till servern, och vanligtvis svarar servern med webbsidan användaren letar efter. Denna interaktion är en av de mest grundläggande begreppen på Internet. Och det förklarar exakt hur HTML-formulär fungerar.
Processen att utbyta information med servern
Varje, som inkluderar element som, finns inuti och har ett namnattribut (namn), såväl som dess värde. Värdet definieras på olika sätt. För text kommer detta att vara värdet som angavs i fältet av webbplatsanvändaren. För en alternativknapp, värdet för det valda alternativet. Användaren kan ställa in värdet, men kan oftast inte ställa in namnattributet. Detta skapar en uppsättning namn/värdepar där värdena bestäms av användarinmatning.
Den största skillnaden mellan ett formulär och ett vanligt HTML-dokument är att i de flesta fall skickas data som samlas in av ett formulär till en webbserver. I det här fallet måste du ställa in en webbserver för att ta emot och bearbeta data. tag action-attributanger platsen (URL) dit den insamlade informationen ska skickas.
Hur ser serversvaret ut
När formuläret skickas inkluderas namn-värdepar och alla fält inom elementet i HTTP. En begäran görs till den URL som anges i form av åtgärdsattributet. Förfrågningstypen (GET eller POST) kommer att finnas i metodattributet. Detta innebär att all data som tillhandahålls av användaren skickas till servern så fort formuläret har skickats in, och servern kan göra vad den vill med den datan. När servern tar emot en formulärinlämning behandlas den som vilken annan HTTP-förfrågan som helst. Servern gör vad den behöver att göra med inkluderad data och skickar ett svar tillbaka till webbläsaren.
Om du kommer ihåg att laddning av sidan är svaret, kommer du att märka att samma sak händer här. I en typisk form skapad med taggen är svaret en ny sida som laddas av webbläsaren. Vanligtvis ersätter den nya sidan det nuvarande innehållet, men detta kan åsidosättas med målattributet. De allra flesta onlineformulär fungerar på detta sätt, vilket är anledningen till att användaren skickas till en tacksida när de fyller i ett formulär för e-postprenumeration.
Webappar och formulär utan tagg
Moderne interaktiva webbapplikationer använder JavaScript-kod för att göra asynkrona http-förfrågningar. Dessa är anrop till servern som inte orsakar en omladdning av sidan. De förlitar sig inte på en tagg – ett HTML-element inbyggt i beteendet. De kombinerar inte all data till en enda helhet.användare och skicka dem inte omedelbart. Av denna anledning använder många HTML + JS-layoutdesigners i webbapplikationer inte taggen på alla formulär. Oftare använder de den helt enkelt som en slags behållare för olika typer av inmatningsfält och element. I det här fallet kommer de använda metod- och åtgärdsattributen inte att vara synliga.
Mer om formulär
HTML-formulär är en av höjdpunkterna i en användares interaktion med en webbplats eller applikation. De tillåter användare att skicka in data till webbplatsen. För det mesta skickas data till webbservern, men webbsidan kan också fånga upp den för att använda den på egen hand. Det finns många formrelaterade element - olika typer av knappar, väljare för olika typer, återkopplingsmekanismer. Därför kan det vara svårt att bestämma vilka värden som ska tilldelas taggattributen. När det gäller att skapa formulär måste du få dem att fungera på olika skärmstorlekar. Det är viktigt att göra dem tillgängliga för personer med funktionsnedsättning. Det är därför formulär och attributtaggar kanske är den mest komplexa aspekten av HTML.
Vad formen består av
HTML-formuläret består av en eller flera widgets. De kan vara enradiga eller flerradiga textfält, markeringsrutor, knappar eller alternativknappar. De är oftast förknippade med ett attribut som beskriver deras syfte - korrekt implementerade kan tydligt instruera både seende och blinda användare om hur man kommer till inmatningsformuläret. Attributassocieras korrekt med deras for- respektive id-attribut. For-etiketten hänvisar sedan till id-attributet för motsvarande widget, och skärmläsaren, som använder den, läser upp vad som står i den.
Förutom de strukturer som är specifika för taggen är det viktigt att komma ihåg att formulär bara är HTML-kod. Det betyder att du kan använda HTMLs fulla kraft för att strukturera dina formulär. En vanlig praxis är att använda taggen för att omsluta element taggade med
. HTML-listor används också ofta, flera kryssrutor eller alternativknappar används för strukturering. Efter att ha skapat inmatningsfälten återstår det att lägga till en knapp med taggen och kontrollera resultatet. Flexibiliteten hos HTML-formulär gör dem till en av de mest komplexa strukturerna i HTML-formatet. Men med rätt struktur när du bygger ett HTML-formulär kan du se till att det är både användbart och tillgängligt.
