Introduktion till HTML-formkontroller
HTML är markeringsspråket för skapande av webbsidor. Den definierar webbsidans struktur och beteende. HTML består av taggar och element som hjälper till att strukturera webbsidorna. Dessa element kan grupperas i ett formulär för att samla in data från en användare på ett användarvänligt sätt. Observera dock att HTML är ett statslöst protokoll som innebär att det inte kan lagra någonting och att du kommer att förlora data på en siduppdatering.
HTML-formulärkontroll
Det finns olika typer av formkontroll som definieras i HTML, dessa kontroller ansvarar för att acceptera användarinmatningen på ett specifikt sätt. Låt oss titta på de olika typerna av tillgängliga formulärkontroller i HTML.
1) Mata in textkontroll
Inmatningstextkontroller används för att samla in användardata som en fri text. På webbsidan kommer det att bilda en rektangelruta där användare kan mata in data.
Det finns olika typer av inmatningstextkontroller som kan användas i HTML-formulär. Låt oss titta på de olika typerna av inmatningstextkontroller.
- Enkelrad Inmatningstextkontroll
Detta gör att användaren endast kan ange en enda datalinje. Ett typiskt exempel på sådana kontroller för inmatningstext är att ange namn, sökruta, stad etc.
- Multi-line Input Text Control
Denna ingångskontrolltyp tillåter användaren att ange data för flera rader. Typisk användning av sådana ingångskontroller är för kommentarer, adresser, beskrivning och så vidare.
Här visar rader antalet rader i textområdet och kol anger antalet kolumner.
- Lösenordsinmatningskontroll
Som namnet antyder används detta vanligtvis för lösenordsfältet. Detta fungerar på samma sätt som det inmatade textfältet men texten maskeras av säkerhetsändamål.
2) Inmatningstyp Skicka
När ingångstypen är att skicka in utför den åtgärden som definieras i formuläråtgärden och skickar formulärdata till servern.
Här kommer användarnamn och lösenordvärden att skickas till servern på knappen klicka händelse av skicka knappen. Åtgärden i formen är servermetoden som accepterar ingången.
3) Ingångstyp Radio
Radioknappar används när du förväntar dig att användare ska fylla data som ett booleskt värde eller om du bara förväntar dig en ingång som sant av flera alternativ. Några vanliga fall av radioknappar är könsbestämning, anställdstyp (regelbundet / tillfälligt) och så vidare.
4) Kontrollrutan för ingångstyp
En kryssruta låter användaren välja vilken information som är sant i hans fall. Det är ett mycket bekvämt sätt att acceptera uppgifterna när den möjliga inmatningen redan är känd.
Om du till exempel vill samla in den typ av försäkring som en person har kan du enkelt göra det med kryssrutorna eftersom alternativen skulle vara begränsade.
5) Listrutan Input Type
Listrutan gör det möjligt för användaren att välja ett alternativ av flera möjliga alternativ. Detta är ett mycket användarvänligt sätt att få detaljer från användaren eftersom det ger en uttömmande lista över möjliga alternativ som hjälper användaren att identifiera det alternativ som bäst passar honom.
Till exempel, rullgardinsmeny för att lista den stad där en anställd kan tillhöra
6) Ingångstyp Optgroup
Optgroup fungerar på samma sätt som i listrutan, den enda skillnaden är att optgruppen låter dig logiskt gruppera vissa alternativ under ett paraply. Det hjälper användaren att snabbt identifiera det relevanta alternativet med hjälp av optgruppsetiketten.
Till exempel rullgardinslistor för att lista städerna i de olika staterna i Indien grupperade efter stater.
7) fieldset
Fältset är en annan användbar tagg i Html-formuläret som låter utvecklaren logiskt gruppera vissa kontroller under en legend, detta hjälper utvecklaren att ge användaren en tydlig instruktion om vad de kan förvänta sig i det här avsnittet.
Till exempel fältuppsättning för inloggningssidan
8) HTML-utgång Tagg
Denna utgångstagg introduceras i HTML5. Det låter dig omedelbart visa en beräkning. Detta är ganska användbart när användaren måste göra alla beräkningar direkt och se resultaten. Ett typiskt exempel på sådana fall är när användaren vill kontrollera summan av alla objekt som finns i vagnen.
I exemplet ovan har vi definierat produktprisintervallet som 0 till 100 och kan ändras på runtime, den andra textrutan som har ett värde 12 i den är skatten som tas ut på den artikeln, den kan också ändras på runtime. Utgångsresultatet 58 är summan av båda värdena.
Obs: Den här taggen stöds inte på Edge 12 eller Internet Explorer i en tidigare version.
9) Inmatningstyp Färg
Det krävs ofta i formen att bara visa färgen istället för text. Inmatningstypfärg i HTML 5 låter dig göra det. Den visar färgen som du vill visa i formen. Typiska scenarier där det används är att visa status för ett projekt eller en fas.
Obs! Färg stöds inte i vissa versioner av Internet Explorer och Edge.
10) Ingångstyp Datum
Datum för inmatningstyp används vanligtvis där ett datumfält som inmatning förväntas av användaren, det kan vara allt som ett födelsedatum, anställningsdatum, uppsägningsdatum och så vidare. Det introduceras i HTML 5 och datumformatet varierar lite med webbläsarens förändring.
Slutsats
- Med införandet av HTML 5 har det skett en enorm ökning av antalet HTML-kontroller som stöds. Dessa HTML-formkontroller kan ges olika effekter och färger med hjälp av CSS 3 och JavaScript / jQuery / Angular JS.
- I den här artikeln har vi täckt alla de vanligt använda HTML-formkontrollerna. Det finns många kontroller som dold, återställning, vecka, URL, tid, e-post, fil, DateTime-local, image, tel som inte har täckts i den här artikeln. Det är mycket viktigt att kontrollera webbläsarens kompatibilitet för dessa kontroller innan du implementerar detta i projektet eftersom många webbläsarversioner inte stöder HTML 5-formkontroller.
Rekommenderade artiklar
Detta har varit en guide till HTML-formkontroller. Här diskuterar vi introduktionen och olika typer av formkontroll som definieras i HTML. Du kan också gå igenom våra andra föreslagna artiklar för att lära dig mer -
- HTML-attribut
- HTML-formatetiketter
- HTML-stilark
- Karriär i HTML
- HTML-ramar
- HTML-block
- Html5 Nya element
- Ställ in en bakgrundsfärg i HTML med exempel