Känslig html -form. Formattribut - Tagg
Hälsningar till er, kära läsare av bloggsidan. Idag vill jag prata om någon som HTML -formulär... Oavsett din webbplats (cms) kommer den definitivt att använda formulär som skapats med hjälp av formulär- och inmatningstaggar, samt attribut och parametrar Knapp, markerad, värde, kryssruta, radio, kryssruta, skicka ...
Tja, du kan också lägga till element i detta för att skapa rullgardinslistor och textfält - Välj, Alternativ, Textområde, Etikett, Fältuppsättning, Förklaring.
Varför behövs vi och hur fungerar formulär på moderna webbplatser
Samma webbplatssträng () skapas med hjälp av dessa taggar, och sedan är sökning på ditt projekt obligatorisk. Därför kommer det inte att skada dig alls för att förstå hur de är arrangerade och fungerar framgångsrikt arbeteöver designen, och även med självbefodran och marknadsföring kommer inte att vara överflödig.
Så, med motiveringen för behovet av att studera dessa element, tycker jag att det inte borde finnas fler frågor, så det är dags att gå direkt till studien av deras möjliga alternativ.
Ja, jag vill också påminna dig om att vi redan har granskat mycket material om ämnet språk hypertextmarkering, till exempel tre) och.
I grunden består formulär av element, för skapande av vilka, i huvudbehållaren från formulärtaggarna, olika taggar sätts in - markerad, värde, kryssruta, radio, kryssruta, skicka, etc. Vi behöver bara placera dess kod på någon lämplig plats i webbplatsmallen genom att specificera, med hjälp av taggar och deras attribut, hur det ska se ut.
Detta kan vara en textruta med en skicka -knapp för frågan du angav, val med alternativknappar (där du bara kan lämna en av de medföljande knapparna intryckta), flera textrutor med en skicka -knapp () och mycket mer.
Till exempel, när det gäller "sök", med attributet Value, kan du ange vad som exakt ska skrivas på knappen bredvid fältet för att ange en fråga. Uppgifterna som matas in i blanketterna måste bearbetas vidare på något sätt.
Till exempel i fallet respons användaren, efter att ha fyllt i fältet med sitt namn, skriver in sitt e-postmeddelande och texten i meddelandet, och klickar sedan på skicka-knappen, har rätt att hoppas att skicka data från formuläret till e-postmeddelandet webbplatsens författare. Men tyvärr är det inte möjligt att implementera detta med endast ett hypertextmarkeringsspråk ().
För dessa ändamål behöver du specialprogram en hanterare som, efter att användaren klickar på skicka-knappen, kommer att ta all data från feedbackfälten och skicka den till resursägaren via e-post. Vilket program som ska göra detta måste du ange själv med attributet Action.
Vanligtvis är bearbetningsprogrammet ett manus skrivet in PHP -språk... Därför, i attributet Action i formulärtaggen måste du registrera sökvägen till filen för detta skript, som finns på servern för ditt värd. Jag kommer som exempel att prenumerera på RSS -flöde min blogg via e-post:
Lite obegripligt, förmodligen, verkar det i början, men jag tror att allt kommer att bli klart när historien fortskrider.
Form- och inmatningstaggar för att skapa knappar, kryssrutor och alternativknappar
Varje formulär måste bifogas i öppnings- och stängningstaggar Form... Detta är en slags behållare för deras skapande. Denna tagg har ett antal obligatoriska och valfria attribut:
- Namn - ett unikt namn som måste anges om flera webbformulär ska användas i HTML -filen där du gör något
- Åtgärd är ett obligatoriskt attribut som anger sökvägen till skriptet, som kommer att ta emot data från det för vidare behandling
- Metod - med den kan du ändra metoden för överföring av data från detta webbformulär till skriptet för hanteringsfilen. Om du inte anger det, kommer Get -metoden att användas som standard, vilket i själva verket huvudsakligen är avsett för variabler och korta meddelanden, och dessutom genom att överföra data på ett öppet sätt via adressfältet i webbläsaren. För att skicka formulärdata till hanterarskriptet är det fortfarande bättre att använda POST -metod speciellt utformad för överföring av textmeddelanden på ett slutet sätt
Låt oss överväga resten av taggarna som gör att du kan skapa en mängd olika webbformulär. Den mest mångsidiga är Inmatning... Inuti den måste typattributet föreskrivas, vilket avgör vad exakt HTML -formuläret som skapas med denna tagg kommer att vara.
Följande element kan skapas med inmatning och typ:
- textrad med en rad (Typ = "Text")
- fält för att ange ett lösenord (Typ = "Lösenord")
- kryssrutor (Typ = "Kryssruta")
- radioknappar (Typ = "Radio")
- dolda fält (Typ = "Dold")
- vanliga knappar (typ = "knapp")
- knappar för att skicka data till hanteraren (Typ = "Skicka")
- knappar för att föra webbformuläret till sitt ursprungliga tillstånd (Typ = "Återställ")
- fält för överföring av filer till servern (Type = "File)
- knappar med en bild (Typ = "Bild")
Ingången har ingen sluttagg. Hur exakt webbformuläret som skapats med det kommer att se ut beror helt på parametern som anges i typattributet. Om typ inte är angiven skapas ett textfält som standard.
Exempel på formulär skapade på Inmatning med olika värden för Typ
Andra attribut för Input -taggen och exempel på deras användning
Låt oss se vad resten av attributen är till för:
- Namn - om data ska skickas till skriptet för hanteringsprogrammet måste du ange parametern för attributet Namn. Under detta namn kommer de uppgifter som skickas från formuläret att visas i.
- Storlek - det anger storleken på fältet för det skapade webbformuläret. Värdet anges i antalet tecken som får plats i detta fält. Om Storlek inte anges är standardbredden 24 tecken
- Maxlength - som standard är antalet tecken som kan anges i HTML -formuläret inte begränsat, men med Maxlength kan du ställa in denna begränsning. Fler tecken än det kommer att specificeras kommer du inte att kunna ange i fältet
- Värde - genom att använda det kan du ställa in vad som ska skrivas som standard i fältet eller på knappen för att skicka data
- Markerad är ett flaggattribut som kan infogas i Inmatning för alternativknappar eller kryssrutor. I det här fallet är den här alternativknappen eller kryssrutan aktiv när en sida laddas med ett webbformulär (det kommer redan att finnas en bock i dem)
Låt oss nu gå igenom allt exempel på en blankett med inmatning... Textfältets utseende liknar utseendet på inmatningsfältet för lösenord, så vi kommer bara att överväga alternativet att skapa text, till exempel för att ange en e -postadress:
(! LANG: Låt oss nu titta på att skapa ett webbformulär med alternativknappar (Radio):
Observera att detta formulär använder inmatningstaggen två gånger - en gång för att skapa var och en av de två alternativknapparna. Dessutom innehåller var och en av dem attributet Namn med samma värde (rezultat), och värdet på värdet är annorlunda (JA och NEJ).
Detta betyder att när någon av alternativknapparna väljs vid bearbetningen skickas en variabel vars namn är skrivet i Namn, men värdet på denna variabel beror på vilken alternativknapp som valdes.
Låt oss överväga ett exempel på att skapa ett webbformulär med kryssrutor:
Kryssrutor skiljer sig från alternativknappar genom möjligheten att välja flera alternativ samtidigt. Namnet tjänar till att definiera i hanteringsfilen i vilken kryssrutan är markerade och värdet anger värdet som ska skickas till hanteraren (om värde inte anges, skickas texten bredvid den här kryssrutan till hanteraren) .
Välj, Alternativ, Textområde, Etikett, Fältuppsättning, Förklaring - listrutor, textområden och andra element i webbformulär
Till att börja med vill jag påminna dig lite om vad webbformulär egentligen är och varför de behövs på webbplatsens sidor. De är främst utformade för att upprepa de element som finns i alla operativsystem på ett användarvänligt sätt: knappar, textinmatningsfält, listrutor, kryssrutor, alternativknappar och liknande.
Alla användare, utan någon ytterligare förklaring, förstår syftet med dessa element, och om de ser Html -knappen i formuläret förstår de att de måste klicka på det.
Dessutom är alla dess beståndsdelar (som Select, Option, Textarea, Label, Fieldset, Legend) redan färdiga arbetsstycken (behållare), för att infoga vilka det räcker med att använda den nödvändiga taggen med nödvändiga attribut och parametrar.
Webbläsare själva vet hur man visar ett visst element i ett webbformulär. Det är sant att alternativen för att visa samma element av det i olika webbläsare kan skilja sig något från varandra, men som regel inte signifikant.
Den där. det visar sig att webbformulär i HTML är ett försök att överföra nyckel element som används i alla operativsystem, till sidorna på webbplatsen. Men varför kan de behövas på webbplatsens sidor?
I grund och botten för samma syfte som liknande element används i operativsystem - överföring av data från användaren. När det gäller formulär överförs data från användaren till servern, där den behandlas av ett speciellt program (hypertextmarkeringsspråket tillåter tyvärr inte databehandling).
Även om data kan skickas inte bara till servern, utan också till exempel via e-post till adressen som anges i åtgärdsattributet för formulärtaggen. När du skickar data från HTML till e-post, kommer användaren som fyller i fälten, efter att ha tryckt på knappen för att skicka data, att starta det e-postprogram som används på sin dator som standard.
I det här fallet ska öppningsformuläret se ut så här:
Följande attribut kan användas med Textarea:
- Namn - du anger ett namn för detta webbformulärelement. Det skickas till servern till datahanteringsprogrammet
- Cols - du kan använda den för att ställa in bredden på det skapade flerradiga fältet i tecken.
- Rader - ställ in höjden på det skapade flerradiga fältet (i rader). Om texten som användaren har angett har fler rader än höjden på textrutan med flera rader, visas en rullningslist till höger om fältet i webbformuläret.
- Endast skrivskydd - förbjuder användare att ändra eller lägga till sin egen text i det här fältet (skrivskyddad).
- Inaktiverad - användaren, som i fallet med Readonly -attributet, kommer inte att kunna ändra innehållet i textfältet i webbformuläret, men det kommer att ändra dess färg till grått, vilket indikerar att det är inaktivt.
Etikett - vad är denna HTML -tagg i formuläret för?
Med html -etiketttaggen kan du implementera en mycket intressant funktion i formulär som är tillgängliga i operativsystem. Där, om du kommer ihåg, för att aktivera något element, är det inte nödvändigt att klicka på det, du kan klicka på namnet på det här elementet - det kommer fortfarande att aktiveras.
I webbformulär sker detta inte som standard - du måste klicka på själva elementet i HTML -formuläret för att aktivera det. Till exempel måste du klicka på en kryssruta för att sätta en bock i den. Att klicka på texten bredvid kryssrutan har ingen effekt. Prova själv:
Som du kan se är det värdelöst att klicka på texten för att aktivera det här elementet - du måste klicka på det själv. Detta är exakt läget och är avsett att fixa etiketten Etikett. Det låter dig göra texten bredvid webbformulärelementet klickbar, vilket utan tvekan är kommer att förbättra användbarheten.
Men hur länkar man HTML -elementet i formuläret och texten? För att göra detta lägger du till ett ID med en unik parameter i attributet och omger texten med att öppna och stänga etikettaggar. Och det är inte allt. I den öppna etikettaggen måste du registrera For -attributet, vars parameter måste vara exakt densamma som ID -attributet i HTML -taggen i formulärelementet. Det visar sig ungefär så här:
Som du kan se, tack vare användningen av Label, kan webbformulärelement aktiveras inte bara genom att klicka på det, utan också genom att klicka på texten bredvid det.
Fieldset och Legend - bryta formen i bitar
Du har förmodligen ofta sett att stora former i HTML är indelade i grupper (Fieldset), som är omgivna av en ram, och varje sådan grupp har sin egen titel (Legend). Detta görs med bara två taggar: Fieldset och Legend. De är parade, d.v.s. de måste ha en öppning och stängning utan att misslyckas.
Så, för att skapa en grupp komponentdelar, måste du linda alla dessa delar i öppnings- och stängningstaggarna på fältet. Och för att ange en titel (förklaring) för den här gruppen måste du omedelbart efter öppningsfältet skriva en struktur från den inledande och avslutande förklaringen, mellan vilken du behöver infoga texten i grupptiteln.
Här är ett exempel på att skapa grupper med Fieldset och Legend:
Lycka till! Vi ses snart på sidorna på bloggsidan
du kan titta på fler videor genom att gå till");">
Du kanske är intresserad
Välj, Alternativ, Textområde, Etikett, Fältuppsättning, Förklaring - HTML -taggar i rullgardinsmenyn och textboxformulär 
Listor i HTML -kod - taggar UL, OL, LI och DL 
MailTo - vad är det och hur man skapar en länk i HTML för att skicka ett e -postmeddelande 
Hur färger ställs in i HTML- och CSS -kod, val av RGB -nyanser i tabeller, Yandex -resultat och andra program
God dag, älskare av webbutveckling och de som vill bygga sin egen webbplats. Innan dess ägnades alla mina publikationer åt språkets grundelement, hur man skapar olika innehållsobjekt, formaterar dem, strukturerar dem, etc. När du väl har bemästrat de tidigare ämnena kan du redan skapa en ganska bra webbplats. Det skulle dock vara ofullständigt utan dagens ämne: "Skapa formulär i html".
Detta avsnitt i språket är mycket viktigt. Var därför särskilt uppmärksam på studien, annars kan den webbresurs du har skapat inte släppas ut i produktion. Efter att ha läst artikeln kommer du alltså att veta vad du behöver för att använda formulär, med vilka taggar de skapas, och du kan också prova specifika exempel i praktiken. Låt oss börja!
Vad är form och hur fungerar den
Formen- detta är ett av de viktigaste objekten som är avsett för utbyte av informationsdata mellan servern och användaren.
Enkelt uttryckt, om du vill skapa en webbutik med möjlighet att beställa produkter på webbplatsen, begära registrering på en webbresurs och arbeta med konton, eller ge kunderna feedback från företagsledare, kan du inte klara dig utan formulär.
Formuläret ställs in med ett speciellt element i html -språket .
Observera att ett koddokument kan innehålla flera taggdeklarationer dock kan endast en begäran skickas till servern för att behandla data. Det är därför den information som användaren anger i de angivna fälten och hänvisar till olika former inte bör vara beroende. Det är inte heller tillåtet att göra formulär kapslade i varandra.
För de otåliga och ivriga att ta en snabb titt på kodvyn har jag bifogat ett enkelt exempel på att använda en panel med ett textfält för ett lösenord med en knapp:
| 1 2 3 4 5 6 7 8 9 10 11 12 |
|
Det är kanske inte så klart nu vad och hur det interagerar i det här lilla programmet, men jag garanterar att du kommer att kunna skapa applikationer som är många gånger svårare efter att ha läst hela artikeln.
Skickar data till serversidan
För att skicka den skrivna (eller utvalda) informationen i dialogrutan måste du använda standardmekanismen - Skickaknapp.
Koden för en sådan metod ser ut så här:
När den presenterade raden lanseras visas en knapp med inskriptionen: "Skicka".
Ett annat sätt att skicka data till serversidan är genom att trycka på Enter i dialogrutan.
Efter att ha bekräftat att den angivna informationen skickats går den inte direkt till servern. Först bearbetas det av webbläsaren, vilket resulterar i formuläret "name = value".
Attributparametern är ansvarig för namnet typ märka , och för värdet - data som användaren har angett. Därefter skickas den transformerade strängen till hanteraren, som oftast anges i attributet handling element .
Själva åtgärdsparametern krävs inte, och i vissa ögonblick behövs den inte alls. Till exempel, om en webbplats är skriven med php eller js, sker behandlingen på den aktuella sidan och länkar behövs inte.
För en bättre förståelse av hela bilden av webbplatsens funktion vill jag tillägga att arbetet med data på servern utförs med andra språk. Så, serversidan språk är: Python, php, C-liknande språk (C #, C, etc.), Java och andra.
Nu skulle jag vilja stanna upp och berätta mer om elementet ... Enkelt uttryckt alltså behövs för att skapa textfält, alternativknappar, olika knappar, dolda fält, kryssrutor och andra objekt.
Taggen behöver inte paras ihop med Men om du behöver bearbeta användarposter eller ange dem, till exempel i en databas, kan du inte klara dig utan en behållare.
Huvudattributen för detta element i hypertextmarkeringsspråket är:
- Text- skapar ett textfält;
- Skicka in- skapar en knapp för att skicka data till servern;
- Bild- ansvarar för knappen med en bild;
- Återställa- ställer in en knapp för att rensa formuläret;
- Lösenord- anger ett textfält specifikt för lösenord;
- Kryssruta- ansvarig för fälten med flaggor;
- Radio- ansvarar för fälten med valet av ett element;
- Knapp- skapar en knapp;
- Dold- används för dolda fält;
- Fil- anger fältet som ansvarar för att skicka filer.
Informationsöverföringsmetoder
Det finns två sätt att överföra användardata till serversidan: Skaffa sig och Posta... Dessa metoder gör samma sak, men de skiljer sig väsentligt från varandra. Innan vi specificerar någon av dem, låt oss därför bekanta oss med deras funktioner.
| Posta | Skaffa sig | |
| Storlek på dokument som ska överföras | Begränsad till serversidan. | Maximalt - 4 KB. |
| Hur skickad information visas | Endast tillgängligt när det visas via webbläsartillägg eller andra speciella programvaruprodukter. | Omedelbart tillgänglig för alla. |
| Använda bokmärken | Det finns inget sätt att lägga till i bokmärken, eftersom förfrågningar inte upprepas (alla sidor länkar till samma adress). | Alla sidor med en begäran kan sparas i bokmärken och gå till den efter ett tag. |
| Cachar | Baserat på föregående stycke finns alla förfrågningar på en sida. | Varje sida kan cachas separat. |
| Ändamål | Används för att skicka stora filer (böcker, bilder, videor, etc.), meddelanden, kommentarer. | Perfekt för att hitta begärda värden på en webbresurs eller för att skicka korta textmeddelanden. |
För att ange vilken av de två metoderna för dataöverföring som ska fungera för webbläsaren, i elementet använd den angivna parametern metod(till exempel, metod = "inlägg").
Låt oss titta på det andra exemplet. Låt oss skapa ett formulär där du behöver ange dina personuppgifter (för- och efternamn, födelsedatum) och komma med ett lösenord. Efter det skickar vi allt detta till servern med metoden Posta.
Ange dina personuppgifter!
Till exempel, för att ange datumet, finns det switchar för datumet för var och en av parametrarna (dag, månad och år), liksom för enkelhets skull en rullgardinsmeny med själva kalendern.
Skapande av registreringspanel
Grundläggande taggar och attribut har granskats. Det är därför det är dags att skapa ett fullvärdigt registreringsformulär med hjälp av stilad css-markering och validering av inmatningsdata. Naturligtvis kommer vi inte att kunna titta på serverarbetet med dem, men vi kommer att ge design och viktiga detaljer.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
|
Jag råder dig att spara den här programkoden i ett dokument med filtypen .html och utf-8-kodning och öppna den senare i ett webbläsarfönster. Innan du kommer att visas i all ära en panel för registrering med fält för inmatning av förnamn, efternamn, e-post och lösenord med en upprepning. Observera att när sidan startar, placeras markören omedelbart i den första textrutan. Denna teknik uppnås genom attributet autofokus.
Med tanke på de grundläggande HTML -taggarna kan vi inte annat än beröra ett så viktigt element som former. Feedback behövs ofta på webbsidor. Till exempel fylla i ett frågeformulär på webbplatsen, registrering, auktorisation, kommentarer etc. I alla dessa fall fyller användaren i särskilda områden (formulärfält) på sidan, varefter data skickas till servern. Formulär används för att skapa feedback. Ett formulär är ett fragment av ett HTML -dokument avsett för användarinmatning.
Bilden visar studentregistreringsformuläret på utbildningsinstitutionens webbplats.
En behållare används för att skapa formuläret
med åtgärdsattributet, som anger sidan på servern som ska behandla data som skickas in från formuläret.Strukturen i den enklaste formen:
formelement ...
Varje formulär behöver också en skicka -knapp för att skicka data efter att formuläret har fyllts i.
Knappstruktur:
Så, för att spela in nästan alla formelement, används taggen med ett typattribut. För att skapa en knapp som återställer all data från formulär används följande struktur:
Det finns en textparameter för att skapa ett textfält. I det här fallet används följande parametrar: namn - fältnamn; storlek - för fältet i symboler; maxlength - maximalt antal tecken i fältet; värde - information som visas i formuläret som standard
Ett exempel på en formulärpost med två textfält:
Resultatet av formuläret visas i figuren.
Om en stor mängd information behöver matas in i ett textfält, till exempel en kommentar, används formen för ett textområde som skapas med hjälp av taggen
Resultatet av koden som arbetar med textområdet visas i figuren.
Nästa element i formulärerna är listor, så att du kan välja från den presenterade uppsättningen värden. Taggar låter dig skapa ett listformulär
Listanläggningsstruktur:
För att elementet ska kunna väljas vid sidinläsning är det nödvändigt i taggen
En liknande urvalsmetod är kryssrutan och radioknappens formelement. Skillnaden mellan dessa element är att kryssrutan låter dig göra flera val, och alternativknappen bara en enda.
Kryssruta och inmatningsstruktur för alternativknappar:
text
Radio knapp:
text
Element som anges i konturen använder det markerade attributet för att markera kryssrutan och radioknappen som standard. Ett exempel på att använda en kryssruta, alternativknapp och HTML -kod visas i figuren.
Ett annat formulärelement är en knapp, som anges med taggets typattribut med knappens värde:
I den angivna koden för att skapa en knapp finns en onclick -parameter, där en kod i programmeringsspråket som regel är inställd för att utföra en åtgärd när den här knappen klickas:
Javascript -kommandot varnas används för att visa ett meddelande i ett speciellt fönster. Resultatet av exemplet visas i figuren.
För att infoga en bild i en knapp, använd koden som visas i följande exempel:
När du registrerar och loggar in på webbplatser används ett fält med ett dolt test som visas som asterisker. Detta är formulärelementet för lösenord:
Registrering på webbplatsen är ofta uppdelad i flera sidor och varje efterföljande bör innehålla information från den föregående. För att dölja den överförda informationen används det dolda formelementet:
Det dolda formelementet kommer att vara osynligt i webbläsarfönstret.
Formulär har ett filelement för att ladda upp filer till servern. Exempelkod för överföring av filer till servern visas nedan:
Så i det här ämnet tittade vi på formelement för att skapa olika HTML-sidor, som tillsammans med manushanterare på en dator eller server låter dig utveckla fullvärdiga webbapplikationer.
Hej kära läsare av bloggsidan. I fortsättning av studien vänder vi oss till behandlingen av formuläret och inmatningstaggarna med deras attribut (), med vilka du kan skapa en mängd olika former för webbplatsen.
Oavsett ämne och innehåll i den eller den webbresursen kommer den troligen att innehålla formulär i en eller annan form: textfält, rullgardinsmenyer, olika knappar eller alternativknappar. Förresten, i en av publikationerna har jag redan pratat om de element som hjälper till att diversifiera formerna.
Vad är det praktiska syftet med alla möjliga former? Först och främst behövs de för att skicka data som användaren har matat in till servern för vidare behandling med hjälp av ett speciellt skapat skript (hanterare).
HTML -formulär - hur de skapas med form och input
Som jag sa i början måste någon form av webbformulär, eller till och med flera på en gång, finnas på någon mer eller mindre utvecklad webbplats. För att förstå hur viktiga de är mot bakgrund av att en webbresurs överensstämmer med moderna krav är det tillräckligt att ge dig en snabb titt på de tre objekten där formulär baserat på formuläret och inmatningstaggar används, som med ett namn , lämna ingen tvekan om deras behov av ett projekt i en eller annan riktning:
Om du till exempel går till länken till artikeln om att skapa feedback (så att alla användare kan skicka meddelanden till webbplatsadministrationen), så finns det bara HTML -koden med ett formulär som har en öppning (
) del:
Det är här formen spelar en avgörande roll när den initierar installationen av webbformuläret. I sig gör det inte ett visst område på webbsidan, utan fungerar som en behållare som innehåller andra taggar.
I vårt fall (se skärmdumpen ovan) inkluderar dessa flera inmatning(denna HTML -tagg är singel, med andra ord, den har ingen avslutande komponent) och textområde, med olika uppsättningar av attribut. Var och en av dem definierar sitt eget element som ingår i formuläret.
16. Autofokus(inga parametrar) - ett booleskt attribut som sätter fokus på fältet omedelbart vid laddning av webbsidan, vilket resulterar i att du kan ange data utan att klicka på den med en musknapp. Kan inte bara tillämpas på input type = "hidden".
17. Inaktiverad(inga värden) - inaktiverar det formelement som det läggs till för användaren. Oftast används det tillsammans med skript, där villkor skrivs under vilka ett otillgängligt element kommer att aktiveras.
18. Form- binder elementet till formen när det är placerat utanför behållaren
... För bindning läggs det globala id -attributet till formulärtaggen och formulärattributet läggs till inmatningstaggen, vars värden är desamma (till exempel id = "data" och form = "data") .19. Flera olika(inga parametrar) - uppsättningar flera val för användaren och gäller endast i samband med typ = "fil" och typ = "e -post".
Om fältet för filöverföring används är det möjligt att välja flera filer från datorn samtidigt med Ctrl- eller Shift -tangenterna. Om ett fält för att ange en e -postadress (typ = "e -post") visas ska e -postmeddelandena separeras med kommatecken.
20. Nödvändig(inga värden) - aktiverar obligatorisk inmatning av data av användaren. Därför blockerar webbläsaren inlämningen av webbformuläret om det obligatoriska fältet lämnas tomt och visar ett motsvarande meddelande om behovet av att fylla i det.
Detta attribut används inte för grafiska knappar och standardknappar (type = "button | image"), liksom för ett dolt inmatningsfält (type = "hidden").
21. Storlek- definierar textfältets bredd i tecken (endast lämplig för typelement med parametrarna "e -post | lösenord | sök | tel | text | url"). Standard är 20 tecken.
De fyra följande attributen (22-25) för inmatningstaggen har nästan samma funktionalitet som för, men för fullständighetens skull kommer jag att kort nämna dem.
22. Maxlängd- sätter en gräns för det maximala antalet tecken som kan anges när du fyller i ett textfält. Om ett försök görs att överskrida denna gräns kommer ytterligare inmatning att blockeras. Detta attribut är endast tillämpligt för textelement med type = "email | password | search | tel | text | url".
23. Minlängd- innebär en begränsning av det minsta antal tecken som krävs för att komma in i textområdet. Om ett försök görs att skicka data som innehåller färre tecken visas ett kort meddelande som indikerar behovet av att komplettera formulärets innehåll och information kommer att ges om antalet tecken som redan har matats in. Användarvillkoren är exakt desamma som för maxlängd.
24. Platshållare- du kan lägga in en ledtråd (den fungerar som en parameter) direkt i textfältet, som försvinner i det ögonblick när användaren börjar mata in tecken. Endast för fält som bildas med parametrar e -post, lösenord, sök, text, tel, url typattributet för inmatningstaggen.
25. Läsbart(inga parametrar) - indikerar att den tidigare inmatade texten i fältet endast är tillgänglig för läsning och kopiering. Det används vanligtvis tillsammans med skript, där villkor skrivs, vars uppfyllande kan aktivera detta formulärelement.
Och slutligen några fler attribut som kompletterar funktionaliteten hos olika formelement:
26. Mönster- i rollen som dess värde återspeglar ett regelbundet uttryck, på grundval av vilket reglerna för inmatning av information fastställs. I det här fallet rekommenderas att du dessutom lägger till ett globalt titelattribut, vars parameter är att ange en förklarande text för att hjälpa användare att fylla i fälten. Mönstret gäller endast e -post, lösenord, sökning, text, tel, url -element. Låt oss titta på ett exempel. Här är koden för det förenklade registreringsformuläret (c):
|
Logga in Lösenord |
För inloggningsfältet (typ = "text") är mönstervärdet ett reguljärt uttryck (5,), vilket innebär användning av latinska tecken, och minst fem tecken måste anges.
I förhållande till textområdet för lösenordet (typ = "lösenord"), är värdet (8,) inställt, vilket bestämmer inmatningen av endast latinska bokstäver i alla fall (stora och små bokstäver), liksom siffror, medan det totala antalet tecken inte får vara mindre än åtta.
Om de angivna inmatningsvillkoren bryts, tillåter inte webbläsaren att skicka data och en motsvarande varning visas:
27. Src- definierar sökvägen till bilden (URL, vilket är dess värde) för att visa den "bild" grafiska knappen (se tabellen över parametrar för inmatningstyp ovan).
28. Steg- anger steget för element som ger val av numeriska värden (input type = "date | datetime-local | month | number | range | tel | time | week.").
Det kan ta valfritt heltal eller bråktal som en parameter. Som standard är steg = "1"... För att ställa in det slutliga inmatningsområdet kan du igen använda de min och max attribut som nämns ovan. För tydlighetens skull kommer vi att inkludera 2 typ = "nummer" -element i testformuläret. För det första uppsättningssteget = "2", för det andra steget = "0,1":
|
Ange ett värde mellan -10 och 10: Ange ett värde mellan 0 och 1: |
29. Värde- anger värdet på formulärelementet som ska skickas till hanteraren. Ett namnparameterpar skickas till servern, där namnet definieras av namnattributet för inmatningstaggen och parametern definieras av värdeattributet. Dessutom för olika element i formen värde kommer att spela olika roller:
- för typ = "knapp | återställ | skicka" - anger texttexten på knapparna;
- för typ = "kryssruta | radio | bild" - identifierar varje kryssruta, alternativknapp eller grafisk knapp när du skickar och bearbetar data på servern;
- för typ = "lösenord | text" - omedelbart vid laddning av formuläret visas preliminär text i fältet, som kan ändras eller tas bort helt av användaren;
- för typ = "fil" (ladda upp filer) gäller inte eftersom det inte påverkar detta objekt.
Ett exempel på användning för vart och ett av alternativen ovan:
|
Välj CMS: WP Joomla |
Här värdet på värdeattributet definierar följande komponenter i vart och ett av elementen: visar ett textfragment för fältet typ "text" ("ditt namn"), identifierar var och en av alternativknapparna ("1" och "2") med typ = "radio" ", och aktiverar också inskriptionen på knappen (" Skicka ").
Ett exempel på att skapa en vacker HTML -form
Därefter kommer jag att försöka presentera dig med ett exempel på webbformulär, vars kod inte bara innehåller kombinationer av inmatningstyper med olika värden som bildar vanliga textfält och knappar, men också, till exempel, som gör att du kan börja fokusera på ett element inte bara med ett direkt musklick, utan också genom att klicka på text.
Observera att för att få en unik design placeras enskilda komponenter i formuläret i var och en med uppsättningar:
Tillbaka (maxbredd: 350px; marginal: 50px auto 0; vaddering: 20px; bakgrund: # f3ebe1; font-family: "Oswald", sans-serif;) .form-1, .form-2, .form-3 , .form-4 (padding: 15px; border: 4px double # 909090) .form-1, .form-2, .form-3 (border-bottom: none) .form-1 input (display: block; margin- botten: 10px; bredd: 100%). i (vaddering-vänster: 40px). i ingång (bredd: 100%) ..png) ingen upprepning; bakgrundsposition: 10px 10px) ..png) ingen upprepning; bakgrundsposition: 10px 10px) .form-4-ingång (display: block; höjd: 50px; teckenstorlek: 24px; bredd: 100%; markör: pekare)
Som ett resultat tar en sådan webbform följande konturer:
Mer fullständig information om hur du skapar det här formuläret på denna sida(förresten, på samma ställe kan du inte bara kontrollera funktionen hos enskilda textområden genom att mata in data i dem, utan också experimentera med webbformuläret genom att redigera HTML -koden och / eller CSS -egenskaper, helt eller delvis ändra dess utseende) .
Mitt mål var att introducera dig till algoritmen för att använda olika värden för typattributet och formulärtaggen för att skapa olika HTML -formulär på webbplatsen. Jag hoppas att uppgiften är klar. Dela i alla fall dina tankar om detta mångsidiga ämne i kommentarerna.
Naturligtvis kommer jag i efterföljande publikationer att fortsätta beskrivningen av huvudtaggarna för hypertextmarkering, så glöm inte att prenumerera på blogguppdateringen via e-post. Titta också på en annan lektion av Evgeny Popov om att skapa ett kontaktformulär för konsolidering.
Formulär i HTML är det svåraste, men å andra sidan, kanske det mest intressanta ämnet i HTML.
Webbformulär tillåter webbplatsbesökare att ange viss information i speciella fält, och utvecklaren kan ta emot den i en form som passar honom.
Ett exempel på en blankett är en gästbok, ett frågeformulär, ett onlinetest. Blanketter fylls i vid registrering på webbplatsen, vid beställning i webbutiken etc.
Med HTML kan du skapa ett skelett av ett formulär: textfält, menyer, listor, knappar, kryssrutor och alternativknappar. Det vill säga de element med hjälp av vilken viss information matas in i formuläret.
Data som matas in i formuläret skickas sedan till servern för behandling. Men HTML är maktlös här - ett program eller skript arbetar redan med att bearbeta formuläret, som bifogas det. Sådana program skrivs vanligtvis i php eller javascript.
Formattribut - Tagg
.Åtgärdsattributet krävs för alla former - det anger adressen till filen som serverar formuläret ( bearbetar data som matas in i den).
Metodattributet anger hur innehållet i formuläret skickas in. Det finns två metoder - GET och POST. Nu är det meningslöst att fördjupa sig i dessa parametrar, eftersom ämnet att skicka information med hjälp av GET- och POST -metoderna avser databehandlingsspråk ( till exempel PHP). Det räcker att veta att det är POST -dataöverföringsmetoden som används i de flesta fall i formulär.
Taggnamnsattribut
Flerradig textruta - tagg
Om innehållet i fältet överstiger dess storlek visas ett reglage.
Ett exempel på att använda formuläret
Låt oss nu se hur formen fungerar.
Beställningsformulär för träningsvideo: