Home-theater-designers
Insamling av data från en webbplatsanvändare kan göras på flera olika sätt. Formulär på webbplatser kan ha en enkel funktion som att prenumerera på en användare på ett nyhetsbrev eller ett mer komplext syfte som att fungera som ett arbetsansökningsformulär.
En sak som alla dessa enkla till komplexa former har gemensamt är HTML och mer specifikt HTML märka.
Använda formuläretiketten
De tag är ett HTML -element som används som en behållare för att omsluta andra element som kan betraktas som byggstenar för formulär. Några av dessa grundläggande element inkluderar tagg, the tagg och märka.
De tag har ett viktigt attribut som bidrar till dess funktionalitet. Detta attribut kallas åtgärd och används för att identifiera filen som data som matas in i formuläret kommer att skickas till.
Använda Tag Exempel
Exemplet ovan visar hur du använder formulärtaggen i dina projekt. En av de viktigaste sakerna är att om du öppnar en formulärtagg ska du komma ihåg att stänga den. Detta skapar en formulärstruktur och säkerställer också att data som matas in i formuläret behandlas korrekt.
Använda taggen
De tag används för att beskriva data i varje inmatningsfält i ett formulär. Denna tagg har en för attribut, som används för att förbättra ett formulärs funktionalitet.
Relaterad: De bästa gratis HTML -redaktörerna online för att testa din kod
Om id som har tilldelats motsvarande inmatningsfält matchar för värde i tag, markeras det inmatningsfältet automatiskt när du klickar på etiketten.
Använda Tag Exempel
First Name:
I exemplet ovan kan du se att för attribut tilldelas värdet fname . Därför, om du skapar ett inmatningsfält med fname id, kommer detta fält att markeras varje gång du klickar på Först namn märka.
Använda taggen
I sin mest grundläggande form, taggen kan ses som en textruta. De tag fångar data från användaren och en av dess mer avgörande funktioner är typ attribut. De typ attribut anger vilken typ av data som denna textruta kan samla in.
Relaterad: Hur man skapar ett staplat formulär i CSS
Det finns flera olika värden som du kan tilldela typ attribut, men några av de mer populära är följande.
- Text
- siffra
- E-post
- Bild
- Datum
- Kryssruta
- Radio
- Lösenord
Använda taggen Exempel
First Name:
De taggen i koden ovan har tre olika attribut som var och en har en unik funktion. De typ attribut tilldelas ett textvärde vilket innebär att textrutan endast tar emot tecken.
De id attribut är en unik identifierare för textrutan, och det är viktigt eftersom det ger åtkomst till detta element från en CSS -fil. De namn attribut är också en unik identifierare; Namnattributet används dock för att interagera med ett element från serversidan för utveckling.
De id och namn attribut tilldelas vanligtvis samma värde som det ena ger åtkomst till ett element från klientsidan och det andra från serversidan.
Använda kryssrutan
Kryssrutan är mycket unik i jämförelse med de andra elementen som du kan använda med märka. Det tillåter en användare att välja ett eller flera alternativ från en lista med relaterade val. Kryssrutor identifieras enkelt eftersom de representeras av små fyrkantiga rutor som innehåller en markering när de väljs.
Använda kryssrutan Element Exempel
Programming Languages:
Java
JavaScript
Python
I exemplet ovan har var och en av kryssrutelementen ett värdeattribut, och detta är viktigt eftersom det hjälper till att skilja varje kryssruta från samlingen. Därför, om en användare väljer 'Java' från alternativen ovan, kommer data att återspegla det.
Använda taggen och radioelementen
De tag och radioelementen är liknande i den meningen att de bara tillåter en användare att välja ett enda värde åt gången; därför kan man säga att de har samma funktion. De ser dock väldigt olika ut.
Radioelementet är närmare kryssrutelementet i utseende, men med radioelementet har du cirklar istället för rutor.
De tag producerar det som i huvudsak är en listruta, som gör att en användare kan välja ett enda värde.
Använda exempel på tagg och radioelement
Sex:
Male
Female
Other
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Använda datumelementet
Datumelementet skapar en liten textruta som genererar en kalender när du klickar på den. Använder sig av datum som inmatningstyp i dina formulär skyddar mot att en användare potentiellt anger ett felaktigt datum, vilket potentiellt kan leda till insamling av felaktiga data.
Använda exempel på datumelement
Använda e -post- och lösenordselementet
När en utvecklare tilldelar antingen e -post- eller lösenordsvärdena till typattributet för en tag, producerar de var och en en identisk textruta. Men när du börjar använda dessa lådor blir skillnaderna uppenbara.
E -postelementet övervakar data som matats in i textrutan och ser till att varje inlämning uppfyller standardkravet för en e -postadress. vilket innebär att ha en lokal del, följt av @ -symbolen och sluta med en domän.
Använda exempel på e -postelement
I exemplet ovan introduceras du för ett nytt attribut som heter Platshållare , och detta attribut tar ett textvärde som visas i textrutan i blekt grått. Denna text används för att ange de data som ska placeras i textrutan som visas i exemplet ovan.
Lösenordselementet gör tecken till asterisker när de matas in i textrutan. Därför, om din datorskärm är synlig för andra människor kommer de inte att se lösenordet du anger.
Använda lösenordselementet
Använda knappmärket
I en form finns det vanligtvis två olika typer av knappar. Den första är knappen Skicka, som skickar data som matas in i formuläret till det värde som tilldelats åtgärdsattributet (som finns i < form> märka).
Submit Button Exempel
Submit
Den andra typen av knappar som vanligtvis används i ett formulär är en återställningsknapp, som rensar data i ett formulär så att användaren kan ange färska data. De taggen har en typ attribut, som används för att indikera knappens funktion. I exemplet ovanför typ attribut är att tilldela värdet Skicka in därför en knapp som har en typ värdet av återställa används för att återställa formuläret.
Återställ knapp Exempel
Reset
Skapa ett formulär
För att skapa ett enkelt formulär i HTML måste du bifoga alla element som nämns ovan i en märka.
Skapa ett formulärexempel
Forms
First Name:
Last Name:
Date of birth:
Age:
Gender:
Male
Female
Other
Email Address:
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Programming Languages:
Java
JavaScript
Python
Password:
Confirm Password:
Submit
Reset
Koden ovan ger följande formulär:
hur man tar bort ett kontantapp -konto
Nu kan du skapa ett enkelt formulär i HTML
Denna artikel ger dig alla verktyg för att skapa ett funktionellt HTML -formulär. Den identifierar de olika HTML -taggar som används vid formulärskapande och utforskar de olika attributen som kan användas med dessa taggar.
Men de flesta formulär som du ser på webbplatser har en ytterligare komponent; CSS, som används för att väcka formen till liv och göra den mer estetiskt tilltalande.
Dela med sig Dela med sig Tweet E-post Essential CSS3 Properties Cheat SheetLär dig viktig CSS -syntax med våra fuskblad för CSS3 -egenskaper.
Läs Nästa Relaterade ämnen- Programmering
- HTML
- Webbutveckling
- Handledning för kodning
Kadeisha Kean är en fullstack mjukvaruutvecklare och teknisk/teknikförfattare. Hon har den distinkta förmågan att förenkla några av de mest komplexa tekniska begreppen; producerar material som lätt kan förstås av någon nybörjare inom teknik. Hon brinner för att skriva, utveckla intressant programvara och resa runt i världen (genom dokumentärer).
Mer från Kadeisha KeanPrenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!
Klicka här för att prenumerera