Welke tag wordt gebruikt om het selectievakjeveld te maken. Het eenvoudigste HTML-formulier. Wat is een formulier en hoe werkt het?
Ik ben er absoluut zeker van dat je tijdens het surfen op internet meer dan eens bent tegengekomen verschillende vormen bijv. registratieformulier, loginformulier, feedback en vele, vele anderen HTML-formulieren.
Eigenlijk bestaat het formulier uit verschillende elementen invoer: tekstvelden, tekstgebieden, keuzerondjes, keuzerondjes, knoppen enzovoort.
En in dit artikel leer je hoe je absoluut elk .
Maak eerst een eenvoudige HTML-pagina, waaraan u een container toevoegt (tag
), waarbij de inhoud in het midden wordt uitgelijnd. Ik hoop dat je hier zonder problemen mee om kunt gaan.
Laten we nu eens naar het formulier kijken. Het formulier begint met een tag eindigt dienovereenkomstig met de afsluitende tag . Deze tag heeft verschillende attributen die zeer wenselijk zijn om in te vullen. Maar laten we eerst creëren eenvoudigste vorm met tagattributen zodat u het doel van elk ervan duidelijker kunt begrijpen:
Hier beginnen we met een beschrijving van het formulier, dat de volgende kenmerken heeft:
1) Kenmerk " naam". De waarde van dit attribuut betekent de naam HTML-formulieren. De vraag rijst: waarom is dit nodig? Het antwoord is heel eenvoudig: als u niet één formulier gebruikt, maar meerdere, dan moet u verschillende namen instellen om de ene vorm van de andere te onderscheiden. En de namen zelf zijn nodig om bijvoorbeeld toegang te krijgen tot formulieren via JavaScript. Ik zal het voor je openen klein geheim, die ik je niet adviseer te gebruiken, maar eerlijkheidshalve zal ik je erover vertellen. In feite zijn formulieren gemakkelijk te onderscheiden zonder namen, dus over het algemeen is een formuliernaam helemaal niet nodig. Maar ik STERK Ik raad aan om de formulieren namen te geven, omdat het voor u gemakkelijker zal zijn om te begrijpen waarvoor elk formulier verantwoordelijk is.
2) Kenmerk " actie". De waarde van dit attribuut is verantwoordelijk voor het pad naar het scriptbestand dat het formulier zal verwerken. Dat wil zeggen, het is niet voldoende om gegevens in het formulier in te voeren, ze moeten nog steeds dienovereenkomstig worden verwerkt, en dit is precies het pad hieraan handler-bestand en is te vinden in de attribuutwaarde " actie".
3) Kenmerk " methode". Het kan een van de twee zeer populaire betekenissen hebben: " na" En " krijgen". Dit attribuut bepaalt de verzendmethode. Ik zal niet in details treden, ik zeg alleen dat de eerste methode een verborgen verzending van gegevens is, en de tweede een open methode. Laten we, om het nog duidelijker te maken, naar twee kijken transitie adressen:
A) http://mijnsite.ru/scipt/request.php
B) http://mysite.ru/script/request.php?a=7&b=Michael
In het eerste geval ziet de gebruiker niet wat hij verzendt (methode " na"), en in de tweede ziet hij daadwerkelijk de namen van de variabelen en hun waarden (methode " krijgen"). Aan het einde van het artikel kunt u proberen het formulier met twee in te dienen verschillende methoden en zorg ervoor dat ze verschillend zijn. Maar voor nu zal ik dat zeggen VEEL de methode wordt vaker gebruikt na", dat wil zeggen een verborgen verzending.
Dit was een beschrijving van het formulier zelf, en nu kun je beginnen met het toevoegen van elementen aan het formulier.
Het eerste dat we toevoegen is een tekstveld. Een tekstveld toevoegen met behulp van een tag , of beter gezegd door het attribuut van deze tag te gebruiken " type"met betekenis" tekst". Voordat u een tekstveld maakt, is het ook raadzaam om te schrijven wat voor soort veld het is, bijvoorbeeld: " jouw naam". Binnen het label schrijf deze regel:
Jouw naam:
Laten we nogmaals de attributen opsplitsen:
1) Kenmerk " type" is verantwoordelijk voor het type invoerelement. In in dit geval, hebben we opgegeven dat dit een normaal tekstveld is. In de volgende elementen zullen we de waarde van dit attribuut wijzigen.
2) Kenmerk " naam" is verantwoordelijk voor de naam van het element. Hier hebben we aangegeven dat de naam van dit veldvoornaam.
3) Kenmerk " waarde" is verantwoordelijk voor de standaardwaarde van dit veld.
Zoals ze zeggen: het is beter om één keer te zien dan honderd keer te horen, dus je kunt beter bellen ( Bovendien typt u het gewoon en kopieert u het niet!) deze tekst in de editor en bekijk het resultaat in de browser.
Laten we nu nog een soortgelijk veld maken, maar niet voor het invoeren van gewone tekens, maar voor het invoeren van een wachtwoord. Dat wil zeggen, alles moet hetzelfde zijn, maar alleen de tekst moet erachter verborgen zijn sterretjes. Daarom, door naar volgende regel(label ), laten we de volgende code schrijven:
Uw wachtwoord:
Zoals u kunt zien, is nu de waarde van het attribuut " type" is " wachtwoord". De overige attributen zijn hetzelfde als voor een gewoon tekstveld.
Het volgende element is een vervolgkeuzelijst. Het is iets ingewikkelder gemaakt, omdat het hier niet alleen nodig is om de creatie van een vervolgkeuzelijst aan te geven, maar ook om elementen aan deze lijst toe te voegen. Laten we, naar de volgende regel gaan (ik zal dit niet verder noemen), het volgende schrijven HTML-code.
Selecteer een optie:
Label betekent het begin van de vervolgkeuzelijst. De lijst eindigt met de tag . Kenmerk " naam" is duidelijk omdat ik het al meerdere keren heb uitgelegd. Lijstitems worden gemaakt met behulp van de tag . Kenmerkwaarde " waarde" betekent welke waarde de variabele zal hebben keuze(bijvoorbeeld in JavaScript), dat wil zeggen, ook niet keuze = 1, of keuze = 2, of keuze = 3. Onmiddellijk na het einde van de tagbeschrijving wat de gebruiker in de vervolgkeuzelijst ziet, wordt geplaatst. Nogmaals, het is beter om in de browser te kijken, en alles zal je meteen duidelijk worden.
Laten we nu een tekstgebied toevoegen met behulp van de tag :
Schrijf iets:
Hier maken we een tekstgebied met een hoogte van 10
tekenreeksen (attribuutwaarde " rijen") en een breedte van 15
tekens (attribuutwaarde " col").
Binnenin dit tag-paar Specificeert de tekst in het standaardtekstgebied. Eigenlijk valt hier niets meer over te zeggen. Laten we verder gaan.
Het volgende element is een keuzerondje. Een keuzerondje is een verzameling van dergelijke " cirkels", waaruit u er slechts één kunt selecteren. Keuzerondjes worden gemaakt met behulp van HTML-tag, of, preciezer, met behulp van de waarde " radio"attribuut" type". Laten we zoiets als dit schrijven HTML-code:
Kies er één: Optie 1 Optie 2 Optie 3
Hier zal ik me concentreren op het attribuut " naam", want naast het geven van een naam heeft hij er nog een heel belangrijk kenmerk. Als jij NIET Als u de namen van deze drie keuzerondjes hetzelfde maakt, worden ze onafhankelijk en kunt u daarom meerdere opties tegelijk selecteren. Om hier zeker van te zijn, wijzigt u de namen en probeert u vervolgens meerdere opties tegelijk te selecteren, en u zult onmiddellijk overtuigd zijn van mijn woorden. Daarom moet één groep keuzerondjes dezelfde attribuutwaarde hebben " naam".attribuut" waarde" betekent de waarde van de variabele " keuzeradio" (nogmaals, bijvoorbeeld in JavaScript). Direct na de tagbeschrijving er is een tekst die de gebruiker naast het bijbehorende keuzerondje ziet.
Een ander element van het formulier zijn schakelaars ( selectievakje). Ze worden opnieuw gemaakt met behulp van de tag . Laten we de volgende regels schrijven:
U gaat akkoord met onze regels:
Ik denk dat alles hier transparant is, dus ik zal het niet uitleggen. Ik raad je aan om gewoon te kijken hoe het er in een browser uitziet. En ik zal zeggen dat als het selectievakje is aangevinkt, de waarde van de variabele " voorwaarden" zullen " Ja", als het niet staat, dan is de waarde van deze variabele "", dat wil zeggen een lege string.
Een ander element is het bestandsselectieveld. U heeft vast wel eens bestanden naar een server geüpload en daarvoor moest u vaak het invoegveld voor de bestandsnaam gebruiken. Dit veld is gemaakt met behulp van de toch al saaie tag . Laten we het zo schrijven:
Selecteer bestand om te downloaden:
Dit is het eerste van drie artikelen over HTML5-webformulieren. Voordat we verder gaan met de styling en JavaScript-validatie aan de clientzijde, bekijken we enkele basisopmaak. Ik raad je aan dit artikel te lezen, zelfs als je al bekend bent met formulieren - er worden hier veel nieuwe attributen en goodies beschreven!
HTML-formulieren lijken misschien eenvoudig, maar zijn essentieel voor de meeste websites en applicaties. In HTML4 waren invoerveldtypen beperkt tot de volgende lijst:
invoertype = "tekst"
invoertype = "selectievakje"
invoertype = "radio"
invoertype = "wachtwoord"
input type="hidden" - voor gegevens die onzichtbaar zijn voor de gebruiker
input type="file" - voor het uploaden van bestanden
geavanceerde elementen, zoals elementen voor het selecteren van datum en kleur, moeten onafhankelijk worden geïmplementeerd met behulp van code
Voor validatie aan de clientzijde is JavaScript vereist
Aanvullende veldtypen
HTML5 introduceerde een groot aantal nieuwe veldtypen. Ze bieden native invoer- en validatiehulpmiddelen zonder enige JavaScript-code.
Type
Beschrijving
e-mail
e-mailadres invoeren
tel
invoer telefoonnummer- geen strikte syntaxis, maar regeleinden worden verwijderd
URL
voer URL in
zoekopdracht
zoekveld met regeleinden wordt automatisch verwijderd
nummer
drijvende-kommagetal
bereik
controle voor het invoeren van een geschatte waarde, meestal weergegeven met behulp van schuifregelaars
datum
dag, maand en jaar invoeren
datumtijd
Invoeren van de dag, maand, jaar, uur, minuut, seconde en microseconde ten opzichte van de huidige tijdzone
datetime-lokaal
datum en tijd invoeren zonder tijdzone
maand
maand en jaar invoeren zonder tijdzone
week
een weeknummer invoeren zonder tijdzone
tijd
tijd invoeren zonder tijdzone
kleur
kleur keuze
Invoerveldkenmerken
Naast de hierboven genoemde kunnen invoervelden elk van de formulierspecifieke attributen hebben. Sommige zijn booleaans, wat betekent dat ze geen waarden vereisen, bijvoorbeeld:
Natuurlijk kunt u deze toevoegen als u bijvoorbeeld van syntaxis in XHTML-stijl houdt
Attribuut
Beschrijving
naam
veldnaam invoeren
waarde
oorspronkelijke betekenis
gecontroleerd
zorgt ervoor dat een selectievakje of keuzerondje wordt geselecteerd
maximale lengte
De maximale lengte van de invoertekstreeks. In HTML5 kan dit ook worden toegepast op tekstgebiedvelden
minlengte
Minimale lijnlengte. Deze kans gedocumenteerd, maar op het moment van schrijven is de browserondersteuning zwak, en HTML-validators zij zweren. Alternatieve optie gebruik - patroon = ".(3,)", waarmee wordt gecontroleerd op ten minste drie tekens in de invoertekenreeks
tijdelijke aanduiding
onopvallende hint in het veld
autofocus
stelt de focus in op het opgegeven element (zichtbaar) wanneer de pagina wordt geladen
vereist
geeft aan dat er een waarde in het veld moet worden ingevoerd (geen leeg veld)
patroon
controleert een waarde aan de hand van een reguliere expressie
min
minimaal toegestane waarde (numeriek en datum)
maximaal
maximaal toegestane waarde (numeriek en datum)
stap
stap waardeverandering. Met invoertype="number" min="10" max="19" step="2" zijn bijvoorbeeld alleen waarden van 10, 12, 14, 16 of 18 toegestaan
automatisch aanvullen
Geeft aan de browser een hint voor automatisch aanvullen aan, bijvoorbeeld “rekening controleren”, of kan worden ingesteld op “aan” of “uit” om automatisch aanvullen in/uit te schakelen
invoermodus
geeft de invoermethode aan. Meest nuttige functies:
woordelijk - woordelijke inhoud, zoals gebruikersnamen
Latijn - Latijns alfabet, bijvoorbeeld zoekvelden
latijnse naam - namen, dat wil zeggen met de eerste letter in hoofdletters
Latijns-proza - inhoud die de betekenis niet letterlijk overbrengt, bijvoorbeeld berichten, tweets, enz.
numeriek - numerieke waarden waarbij de nummer- en bereiktypen niet geschikt zijn, bijvoorbeeld creditcardnummers
maat
grootte in aantal tekens voor velden zoals tekst of wachtwoord, of aantal pixels voor velden zoals e-mail, tel, url of zoeken. Waarschijnlijk de moeite waard om CSS-stijl te vermijden en te gebruiken
ingesteld op waar of onwaar om toewijzingscontrole voor een veld in of uit te schakelen
formulier
ID van het formulier waartoe dit veld behoort. Over het algemeen moeten velden binnen het formulier worden geplaatst, maar met dit attribuut kunt u het veld buiten het formulier plaatsen, waar dan ook op de pagina
formatie
specificeert een URI die de actie van het formulier overschrijft bij het indienen van gegevens (alleen voor verzend-/afbeeldingsknoppen)
vormmethode
specificeert GET of POST, overschrijft het methodekenmerk van het formulier (alleen voor verzend-/afbeeldingsknoppen)
vormtype
specificeert het inhoudstype bij het indienen (text/plain, multipart/form-data of application/x-www-form-urlencoded, alleen voor verzendknoppen en afbeeldingen)
vormdoel
specificeert het doelvenster/frame om het doelkenmerk van het formulier te overschrijven bij het verzenden (alleen voor verzendknoppen/afbeeldingen)
alleen-lezen
de veldwaarde kan niet worden gewijzigd, hoewel deze wordt gevalideerd en verzonden
gehandicapt
schakelt het invoerveld uit - er wordt geen validatie uitgevoerd en er worden geen gegevens verzonden
Houd er rekening mee dat datumvelden de indeling JJJJ-MM-DD moeten gebruiken voor de kenmerken waarde, min en max.
In het volgende voorbeeld ziet u een veld waarvoor een e-mailadres is vereist dat eindigt op @mijnsite.com, waarnaar de focus verschuift wanneer de pagina wordt geladen.
Gegevenslijsten
De datalijst bevat een set geschikte waarden voor elk veldtype, bijvoorbeeld:
Als datalist wordt ondersteund, biedt de browser een lijst met waarden die automatisch worden aangevuld zodra u gegevens in een veld begint te typen. De volledige lijst wordt meestal weergegeven door op de pijl-omlaag te klikken (als die er is). In tegenstelling tot een standaard vervolgkeuzelijst kan de gebruiker willekeurige waarden in het veld invoeren.
Het is mogelijk om waarden en tekstuele uitleg voor de waarden op te geven, bijvoorbeeld:
maar het is de moeite waard eraan te denken dat de implementatie ervan verschilt verschillende browsers. Firefox vult bijvoorbeeld tekst automatisch aan (Internet Explorer), terwijl Chrome waarden automatisch aanvult (IE), en tekst wordt weergegeven in een kleiner grijs lettertype:
Gegevenslijsten kunnen worden gevuld met met behulp van JavaScript, als je ze via AJAX wilt ontvangen.
Validatie uitschakelen
U kunt de validatie van het gehele formulier uitschakelen door het novalidate attribuut aan het formulierelement in te stellen. Bovendien kunt u het attribuut formnovalidate instellen op de knop/afbeelding voor het indienen van het formulier.
Houd er rekening mee dat het instellen van het uitgeschakelde attribuut op een veld de validatie van dat veld uitschakelt.
Uitvoervelden
We bespraken eerder invoervelden, maar HTML5 biedt ook uitvoervelden.
output - het resultaat van het berekenen van gebruikersacties
voortgang - voortgangsbalk (waarde- en max-attributen bepalen de status)
meter is een schaal die afhankelijk van de kleur van kleur kan veranderen tussen groen, geel en rood waarden instellen attributen waarde, min, max, laag, hoog en optimaal
Velden scheiden en labelen
Volgens de specificatie wordt elk formulierelement beschouwd als een paragraaf en wordt het door het element gescheiden van andere delen
Interessant. Ik gebruik een div voor scheidingsdoeleinden, hoewel ik betwijfel of dit enig effect heeft grote waarde. De p-tag is korter, behalve dat u extra styling moet toepassen om de marges te verwijderen.
Belangrijker nog is dat labels moeten worden gebruikt door het formulierelement te omringen of door ze naast elkaar te plaatsen en ze met een for-attribuut aan de overeenkomstige velden te koppelen, bijvoorbeeld:
De controles zijn niet gestandaardiseerd
Er zijn geen ontwerprichtlijnen voor formulierelementen die browserfabrikanten moeten volgen. Dit is met opzet gedaan: standaardelement Muisgeoriënteerde datumkiezerformulieren zijn mogelijk te klein voor de gebruiker mobiel apparaat, zodat de fabrikant voor de creatie kan zorgen alternatieve versie vormelement voor touch-interfaces.
Browser-ondersteuning
Niet alle veldtypen en attributen worden in alle browsers ondersteund. Over het algemeen alles moderne browsers, te beginnen met IE10+, inclusief ondersteuning voor basisveldtypen, zoals e-mail- of numerieke velden. Maar op het moment van schrijven worden datum-/tijdvelden alleen ondersteund in browsers die zijn gebaseerd op de Webkit- en Blink-engines.
Voor niet-ondersteunde veldtypen valt de browser terug op een standaard tekstinvoerveld en negeert niet-ondersteunde attributen en hun waarden.
Gebruik altijd het juiste type!
Het is belangrijk om het juiste veldtype te gebruiken voor het verwachte type invoergegevens. Het ligt misschien voor de hand, maar er zullen situaties zijn waarin u een eenvoudig tekstveld moet gebruiken.
Laten we naar de data kijken. Browserondersteuning is fragmentarisch, wat tot implementatieproblemen leidt.
Het standaard datumveld retourneert altijd een datum in de notatie JJJJ-MM-DD, ongeacht welke datumnotatie in uw regio wordt gebruikt.
IE en Firefox zullen terugvallen op het standaardtekstveld en uw gebruikers zullen datums moeten invoeren in het Engelse formaat MM-DD-JJJJ, of in het Europese formaat DD-MM-JJJJ
Met de JavaScript-plug-in kunt u, net als in de jQuery UI, definiëren eigen formaat- ja, zelfs JJJJ-MM-DD - maar u kunt niet garanderen dat JavaScript wordt ingeschakeld op de computer van de gebruiker.
Een eenvoudige oplossing zou zijn om te stoppen met het gebruik van het HTML5-datumveld, terug te keren naar een tekstveld en uw eigen datumcontrole te implementeren. Doe dit niet. U zult nooit een goede datumkiezer maken die op alle apparaten en schermresoluties werkt, toetsenbord, muis en aanraking ondersteunt en blijft werken als JavaScript is uitgeschakeld. Bovendien, binnen mobiele browsers Het heeft zijn eigen tools voor het verwerken van bedieningselementen die zijn ontworpen voor aanraakbediening.
HTML5-invoerveldtypen zijn de toekomst. Gebruik ze en gebruik indien nodig een JavaScript-vervanging in situaties waarin een goede compatibiliteit tussen browsers vereist is. Maar onthoud wat er nodig is...
Validatie aan de serverzijde
Validatie aan de browserzijde is niet gegarandeerd. Zelfs als je iedereen dwong om over te stappen nieuwste versie Chrome, ook dan kun je er niet omheen:
browserbugs of JavaScript-fouten waardoor onjuiste gegevens worden doorgegeven
gebruikers die de DOM of scripts wijzigen met behulp van browsertools
het verzenden van gegevens vanaf systemen die u niet beheert
onderschepping van gegevens onderweg van de browser naar de server (meestal via HTTP)
Validatie aan de clientzijde is en zal nooit een vervanging zijn voor validatie aan de serverzijde. Validatie van gebruikersgegevens aan de serverzijde is van groot belang. Validatie aan de clientzijde is een extra nuttige functie.
En tot slot, onthoud dat datums kunnen worden verkregen in verschillende formaten, zij het JJJJ-MM-DD, MM-DD-JJJJ, DD-MM-JJJJ en andere. Controleer op cijfers in de eerste vier tekens, of gebruik indien nodig de ingebouwde parseer- en controlehulpmiddelen van de gebruikte taal/framework.
In dit artikel heb ik gesproken over veel aspecten van HTML5-formulieropmaak. In het volgende artikel bekijken we CSS-eigenschappen met betrekking tot formulieren.
HTML-formulieren zijn controles die worden gebruikt om informatie van websitebezoekers te verzamelen.
Webformulieren bestaan uit een verzameling tekstvelden, knoppen, lijsten en andere bedieningselementen die worden geactiveerd door een muisklik. Technisch gezien geven formulieren gegevens van de gebruiker door aan een externe server.
Voor het ontvangen en verwerken van formuliergegevens zijn webprogrammeertalen zoals PHP, Perl.
Vóór de komst van HTML5 waren webformulieren een verzameling van verschillende elementen , eindigend met een knop . Het kostte veel moeite om formulieren in verschillende browsers te stylen. Bovendien hadden de formulieren JavaScript nodig om de invoer te valideren en ontbraken er specifieke typen invoervelden voor het specificeren van alledaagse informatie zoals datums, e-mailadressen en URL's.
HTML5-formulieren heeft de meeste van deze veelvoorkomende problemen opgelost dankzij de aanwezigheid van nieuwe attributen, die de mogelijkheid bieden om te veranderen verschijning vormelementen vanwege CSS3.
Rijst. 1. Verbeterde webformulieren met HTML5
Een HTML5-formulier maken
1. Element
. Het vereist geen invoer omdat het een container is die alle formulierbesturingselementen bij elkaar houdt - velden. De attributen van dit element bevatten informatie die gemeenschappelijk is voor alle formuliervelden, dus logisch gecombineerde velden moeten in één formulier worden opgenomen.
Tabel 1. Tagattributen
2. Formulierelementen groeperen
Element
ontworpen om elementen die met elkaar verband houden te groeperen, waardoor de vorm in logische fragmenten wordt verdeeld.
Elke groep elementen kan een naam krijgen met behulp van het element