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 veld voornaam.

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 . 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

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
  • tekstgebied - voor invoer grote volumes tekst
  • selecteer - voor vervolgkeuzelijsten
  • knop - meestal gebruikt om formuliergegevens in te dienen, maar input type="submit" en input type="image" kunnen ook worden gebruikt

Daarnaast:

  • stylingopties met met behulp van CSS beperkt
  • 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
rijen Hoeveelheid tekstreeksen(alleen voor tekstgebied)
col aantal tekenrijen (alleen tekstgebied)
lijst verwijst naar een lijst met opties
spellingcontrole 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.

  1. Het standaard datumveld retourneert altijd een datum in de notatie JJJJ-MM-DD, ongeacht welke datumnotatie in uw regio wordt gebruikt.
  2. 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
  3. 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

De basis van elke vorm is het 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
Attribuut Betekenis/beschrijving
accept-tekenset De attribuutwaarde is een spatie gescheiden lijst met tekencoderingen, die wordt gebruikt om het formulier in te dienen, bijvoorbeeld .
actie Vereist attribuut, die de url specificeert van de formulierbehandelaar op de server waarnaar de gegevens worden verzonden. Het is een bestand (bijvoorbeeld action.php) dat beschrijft wat er met de formuliergegevens moet gebeuren. Als de attribuutwaarde niet is opgegeven, zullen de formulierelementen, nadat de pagina opnieuw is geladen, hun standaardwaarden aannemen.
In het geval dat alle werkzaamheden aan de klantzijde worden uitgevoerd JavaScript-scripts, dan kan het action attribuut worden ingesteld op # .
Ook kunt u ervoor zorgen dat het door de bezoeker ingevulde formulier per e-mail naar u wordt verzonden. Om dit te doen moet u naar binnen gaan volgende invoer:
automatisch aanvullen

enctype Gebruikt om aan te geven MIME-type gegevens die samen met het formulier worden verzonden, bijvoorbeeld enctype="multipart/form-data" . Alleen opgegeven in het geval van method="post" .
application/x-www-form-urlencoded is het standaard inhoudstype, wat aangeeft dat de doorgegeven gegevens een lijst met URL-gecodeerde formuliervariabelen vertegenwoordigen. Spatietekens (ASCII 32) worden gecodeerd als + en een speciaal teken zoals ! wordt hexadecimaal gecodeerd als %21.
multipart/form-data - gebruikt om formulieren in te dienen die bestanden, niet-ASCII-gegevens en binaire gegevens bevatten, bestaat uit verschillende delen, die elk de inhoud vertegenwoordigen individueel onderdeel vormen.
tekst/plain - geeft aan dat gewone (geen html) tekst wordt verzonden.
methode Specificeert hoe formuliergegevens worden verzonden.
De get-methode geeft gegevens door aan de server via de adresbalk van de browser. Bij het genereren van een verzoek aan de server vormen alle variabelen en hun waarden een reeks zoals www.anysite.ru/form.php?var1=1&var2=2 . Worden namen en waarden van variabelen na het teken aan het serveradres toegevoegd? en worden gescheiden door &. Alle speciale karakters en niet-Latijnse letters worden gecodeerd in het formaat %nn, de spatie wordt vervangen door +. Deze methode moet worden gebruikt als u geen grote hoeveelheden informatie overdraagt. Als u een bestand mee moet sturen met het formulier, werkt deze methode niet.
De postmethode wordt gebruikt om grote hoeveelheden gegevens te verzenden, evenals vertrouwelijke informatie en wachtwoorden. De gegevens die met deze methode worden verzonden, zijn niet zichtbaar in de URL-header, omdat deze zich in de hoofdtekst van het bericht bevinden.
naam Stelt in formulier naam, die zal worden gebruikt om toegang te krijgen tot formulierelementen via scripts, zoals name="opros" .
niet valideren Schakelt de validatie uit op de formulierverzendknop. Het attribuut wordt gebruikt zonder een waarde op te geven
doel Specificeert het venster waarnaar de informatie wordt verzonden:
_blank - nieuw venster
_self - hetzelfde frame
_parent — ouderframe (als het bestaat, zo niet, dan naar het huidige)
_top - venster hoogste niveau in relatie tot dit frame. Als de oproep niet afkomstig is van een onderliggend frame, dan naar hetzelfde frame.

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 , die onmiddellijk na de tag komt

. De groepsnaam verschijnt in de linkerbovenrand
. Bijvoorbeeld als het in een element zit
Contactgegevens worden opgeslagen:

Contactgegevens


Rijst. 2. Formulierelementen groeperen met behulp van

Tabel 2. Tagattributen
Attribuut Betekenis/beschrijving
gehandicapt Als het attribuut aanwezig is, dan is er sprake van een groep gerelateerde formulierelementen die zich in de container bevinden
, uitgeschakeld voor invullen en bewerken. Wordt gebruikt om de toegang te beperken tot bepaalde formuliervelden die eerder ingevoerde gegevens bevatten. Het attribuut wordt gebruikt zonder een waarde op te geven -
.
formulier
in hetzelfde document. Geeft een of meer vormen aan waartoe het behoort deze groep elementen. Op op dit moment attribuut wordt door geen enkele browser ondersteund.
naam Definieert Naam, dat wordt gebruikt om naar elementen in JavaScript te verwijzen, of om naar formuliergegevens te verwijzen nadat het formulier is ingevuld en verzonden. Het is analoog aan het id-attribuut.

3. Maak formuliervelden

Element creëert de meeste formuliervelden. De attributen van een element verschillen afhankelijk van het type veld waarmee het element wordt gemaakt.

Met behulp van CSS-stijlen kunt u de lettergrootte, het lettertype, de kleur en andere eigenschappen van de tekst wijzigen, en randen, achtergrondkleur en achtergrondafbeelding toevoegen. De breedte van het veld wordt gespecificeerd door de breedte-eigenschap.

Tabel 3. Tagattributen
Attribuut Betekenis/beschrijving
accepteren Bepaalt welk type bestand naar de server mag worden verzonden. Alleen aangegeven voor . Mogelijke waarden:
file_extension - maakt het downloaden van bestanden met de opgegeven extensie mogelijk, bijvoorbeeld accept=".gif" , accept=".pdf" , accept=".doc"
audio/* - maakt het downloaden van audiobestanden mogelijk
video/* - maakt het downloaden van videobestanden mogelijk
image/* - staat het laden van afbeeldingen toe
media_type - geeft het mediatype van de gedownloade bestanden aan.
alt Definieert alternatieve tekst voor afbeeldingen, alleen aangegeven voor .
automatisch aanvullen Verantwoordelijk voor het onthouden van de waarden die in het tekstveld zijn ingevoerd en het automatisch vervangen ervan de volgende keer dat u invoert:
aan - betekent dat het veld niet beveiligd is en dat de waarde ervan kan worden opgeslagen en opgehaald,
off - schakelt automatisch invullen voor formuliervelden uit.
autofocus Hiermee kunt u ervoor zorgen dat in het geladen formulier een of ander invoerveld al focus heeft (geselecteerd is), klaar om een ​​waarde in te voeren.
gecontroleerd Het attribuut controleert of het standaard selectievakje is aangevinkt bij het laden van de pagina voor velden als type="checkbox" en type="radio" .
gehandicapt
formulier De attribuutwaarde moet gelijk zijn aan het id-attribuut van het element in hetzelfde document. Identificeert een of meer formulieren waartoe dit formulierveld behoort.
formatie Specificeert de URL van het bestand dat de gegevens verwerkt die in de velden zijn ingevoerd bij het indienen van het formulier. Alleen ingesteld voor de velden type="submit" en type="image" . Het attribuut overschrijft de waarde van het action attribuut van het formulier zelf.
vormtype Bepaalt hoe formulierveldgegevens worden gecodeerd wanneer ze naar de server worden verzonden. Overschrijft de waarde van het enctype-attribuut van het formulier. Alleen instellen voor de velden type="submit" en type="image" . Opties:
application/-x-www-form-urlencoded is de standaardwaarde. Alle tekens worden gecodeerd voordat ze worden verzonden (spaties worden vervangen door het +-teken, speciale tekens worden geconverteerd naar ASCII HEX-waarden)
multipart/form-data - tekens worden niet gecodeerd
tekst/plain - spaties worden vervangen door het + symbool, en speciale tekens worden niet gecodeerd.
vormmethode Het attribuut specificeert de methode die de browser zal gebruiken om formuliergegevens naar de server te verzenden. Alleen ingesteld voor de velden type="submit" en type="image" . Overschrijft de waarde van het methodekenmerk van het formulier. Opties:
get is de standaardwaarde. De gegevens uit het formulier (naam/waarde-paar) worden aan de url toegevoegd en naar de server verzonden: URL?naam=waarde&naam=waarde
postformuliergegevens worden verzonden als een http-verzoek.
vorm niet valideren Specificeert dat formulierveldgegevens niet moeten worden gevalideerd wanneer het formulier wordt verzonden. Overschrijft de waarde van het novalidate-attribuut van het formulier. Kan worden gebruikt zonder een attribuutwaarde op te geven.
vormdoel Bepaalt waar het ontvangen antwoord na het indienen van het formulier moet worden weergegeven. Alleen ingesteld voor de velden type="submit" en type="image" . Overschrijft de waarde doel attribuut vormen.


_parent – ​​laadt het antwoord in het bovenliggende frame
_top – laadt het antwoord op volledig scherm
framenaam – laadt het antwoord in een frame met de opgegeven naam.
hoogte De attribuutwaarde bevat het aantal pixels zonder een maateenheid op te geven. Stelt de hoogte in van een formulierveld van het type type="image" , bijvoorbeeld . Het wordt aanbevolen om zowel de hoogte als de breedte van het veld tegelijkertijd in te stellen.
lijst Is een verwijzing naar een element , bevat de id . Hiermee kunt u de gebruiker verschillende opties bieden waaruit hij kan kiezen wanneer hij een waarde in het overeenkomstige veld begint in te voeren.
maximaal Hiermee kunt u aanvaardbare numerieke gegevensinvoer beperken maximale waarde, kan de attribuutwaarde een geheel getal of bevatten fractioneel getal. Het wordt aanbevolen om dit attribuut te gebruiken in combinatie met het min-attribuut. Werkt met de volgende typen velden: getal, bereik, datum, datetime, datetime-local, maand, tijd en week.
maximale lengte Het attribuut specificeert maximale hoeveelheid tekens die in het veld zijn ingevoerd. De standaardwaarde is 524288 tekens.
min Hiermee kunt u de toegestane numerieke invoer beperken tot een minimumwaarde.
meerdere Hiermee kan de gebruiker meerdere attribuutwaarden invoeren, gescheiden door een komma. Geldt voor bestanden en e-mailadressen. Opgegeven zonder attribuutwaarde.
naam Specificeert de naam die wordt gebruikt om toegang te krijgen tot het element bijvoorbeeld in tabellen CSS-stijlen. Het is analoog aan het id-attribuut.
patroon Hiermee kunt u het gebruik bepalen reguliere expressie de syntaxis van de gegevens die in een bepaald veld mogen worden ingevoerd. Pattern="(3)-(3)" - vierkante haken stellen bijvoorbeeld het bereik van geldige tekens in, in dit geval - elk kleine letters, nummer in krullende beugels geeft aan dat er drie kleine letters nodig zijn, gevolgd door een liggend streepje en vervolgens drie cijfers van 0 tot 9.
tijdelijke aanduiding Bevat de tekst die in het invoerveld wordt weergegeven voordat deze wordt ingevuld (meestal is dit tooltip).
alleen-lezen Staat de gebruiker niet toe de waarden van formulierelementen te wijzigen; het selecteren en kopiëren van tekst is nog steeds beschikbaar. Opgegeven zonder attribuutwaarde.
vereist Geeft een bericht weer dat aangeeft dat dit veld verplicht is. Als de gebruiker het formulier probeert te verzenden zonder de vereiste waarde in dit veld in te voeren, wordt er een waarschuwingsbericht op het scherm weergegeven. Opgegeven zonder attribuutwaarde.
maat Stelt de zichtbare breedte van het veld in tekens in. De standaardwaarde is 20. Werkt met de volgende veldtypen: tekst, zoeken, tel, url, e-mail en wachtwoord.
src Specificeert de URL van de afbeelding die wordt gebruikt als de knop voor het verzenden van het formulier. Alleen aangegeven voor het veld .
stap Wordt gebruikt voor elementen die invoer vereisen numerieke waarden, geeft aan hoeveel waarden moeten worden verhoogd of verlaagd tijdens bereikaanpassing (stap).
type knop - maakt een knop.
checkbox - verandert een invoerveld in een selectievakje dat kan worden aangevinkt of gewist, b.v.
Ik heb een auto
kleur - Genereert kleurenpaletten in ondersteunende browsers, waardoor gebruikers kleurwaarden in hexadecimaal formaat kunnen selecteren.
datum — hiermee kunt u een datum invoeren in de notatie dd.mm.jjjj.
Verjaardag:
datetime-local - hiermee kunt u een datum en tijd invoeren, gescheiden door hoofdletters Engelse brief T volgens het patroon dd.mm.jjjj uu:mm.
Verjaardag - dag en tijd:
e-mail - browsers die dit ondersteunen dit attribuut, verwacht van de gebruiker dat hij gegevens invoert die overeenkomen met de syntaxis van e-mailadressen.
E-mail:
bestand - hiermee kunt u bestanden downloaden van de computer van de gebruiker.
Selecteer bestand:
verborgen - Verbergt het besturingselement, dat niet door de browser wordt weergegeven en voorkomt dat de gebruiker de standaardwaarden wijzigt.
afbeelding - maakt een knop, zodat u een afbeelding in plaats van tekst op de knop kunt invoegen.
maand - Hiermee kan de gebruiker het jaar- en maandnummer invoeren met behulp van het jjjj-mm-patroon.
getal - bedoeld voor het invoeren van gehele waarden. De min , max en step attributen specificeren respectievelijk de boven-, onder- en stap tussen waarden. Deze attributen worden aangenomen voor alle elementen die numerieke indicatoren hebben. Hun standaardwaarden zijn afhankelijk van het elementtype.
Geef het aantal aan (van 1 tot 5):
wachtwoord - maakt tekstvelden in het formulier, terwijl de door de gebruiker ingevoerde tekens worden vervangen door sterretjes, opsommingstekens of andere, geïnstalleerd via browser pictogrammen.
Wachtwoord invoeren:
radio - creëert een schakelaar - een bediening in de vorm van een kleine cirkel die kan worden in- of uitgeschakeld.
Vegetarisch:
bereik - hiermee kunt u een interface-element maken, zoals een schuifregelaar, min / max - hiermee kunt u het selectiebereik instellen
reset - creëert een knop die formuliervelden wist met door de gebruiker ingevoerde gegevens.
zoeken - geeft een zoekveld aan, het invoerveld is standaard rechthoekig van vorm.
Zoekopdracht:
indienen - creëert een standaardknop die wordt geactiveerd door een muisklik. De knop verzamelt informatie uit het formulier en verzendt deze voor verwerking.
tekst - Creëert tekstvelden op een formulier, waarbij een tekstveld van één regel wordt uitgevoerd voor tekstinvoer.
tijd - hiermee kunt u de tijd invoeren in 24-uursnotatie met behulp van het uu:mm-patroon. In ondersteunende browsers verschijnt het als een numeriek invoerveldbesturingselement met een door de muis bewerkbare waarde en kunnen alleen tijdwaarden worden ingevoerd.
Geef tijd op:
url: het veld is bedoeld voor het opgeven van URL's.
Startpagina:
week - Met het bijbehorende aanwijzerhulpmiddel kan de gebruiker één week van het jaar selecteren, waarna gegevensinvoer in het nn-jjjj-formaat wordt aangeboden. Afhankelijk van het jaar kan het aantal weken 52 of 53 zijn.
Specificeer week:
waarde Bepaalt de tekst die op een knop, in een veld of in bijbehorende tekst verschijnt. Niet gespecificeerd voor velden van het type bestand.
breedte De attribuutwaarde bevat het aantal pixels. Hiermee kunt u de breedte van de formuliervelden instellen.

4. Tekstinvoervelden

Element gebruikt in plaats van element wanneer u grote tekstvelden moet maken. De tekst die wordt weergegeven als de oorspronkelijke waarde, wordt in de tag geplaatst. De veldafmetingen worden ingesteld met behulp van de attributen cols - horizontale afmetingen, rijen - verticale afmetingen. De hoogte van het veld kan worden ingesteld met behulp van de eigenschap height. Alle formaten worden berekend op basis van de grootte van één teken in een monospace-lettertype.

Tabel 4. Tagattributen

7. Knoppen

Element creëert klikbare knoppen. In tegenstelling tot knoppen gemaakt ( , , , ), binnen het element .

Met knoppen kunnen gebruikers gegevens in een formulier indienen, de inhoud van het formulier wissen of een andere actie ondernemen. U kunt randen maken, de achtergrond wijzigen en tekst op een knop uitlijnen.

Tabel 9. Tagattributen
Attribuut Betekenis/beschrijving
autofocus Stelt de focus in op de knop wanneer de pagina wordt geladen.
gehandicapt Schakelt de knop uit, waardoor deze niet meer te klikken is.
formulier Geeft een of meerdere formulieren aan waartoe deze knop behoort. De attribuutwaarde is de identificatie van het overeenkomstige formulier.
formatie De attribuutwaarde bevat de URL van de formuliergegevenshandler die wordt verzonden wanneer op de knop wordt geklikt. Alleen voor knoptype type="submit" . Overschrijft de waarde van het actiekenmerk dat voor het element is opgegeven .
vormtype Stelt het coderingstype van formuliergegevens in voordat deze naar de server worden verzonden wanneer op knoppen als type="submit" wordt geklikt. Overschrijft de waarde van het enctype-attribuut dat voor het element is opgegeven . Mogelijke waarden:
application/x-www-form-urlencoded is de standaardwaarde. Alle tekens worden gecodeerd voordat ze worden verzonden.
multipart/form-data - tekens worden niet gecodeerd. Wordt gebruikt wanneer bestanden worden geüpload via een formulier.
tekst/plain - tekens worden niet gecodeerd en spaties worden vervangen door het +-symbool.
vormmethode Het attribuut specificeert de methode die de browser zal gebruiken om het formulier te verzenden. Overschrijft de waarde van het method-attribuut dat voor het element is opgegeven . Alleen gespecificeerd voor knoppen van het type type=‘submit’. Mogelijke waarden:
get - gegevens uit het formulier (naam/waarde-paar) worden aan de URL toegevoegd en naar de server verzonden. Deze methode heeft beperkingen op de grootte van de verzonden gegevens en is niet geschikt voor het verzenden van wachtwoorden en vertrouwelijke informatie.
post - gegevens uit het formulier worden toegevoegd als een http-verzoek. De methode is betrouwbaarder en veiliger dan get en kent geen beperkingen qua grootte.
vorm niet valideren Het attribuut geeft aan dat formuliergegevens bij indiening niet gevalideerd mogen worden. Alleen gespecificeerd voor knoppen van het type type=‘submit’.
vormdoel Het attribuut specificeert in welk venster het resultaat moet worden weergegeven na het indienen van het formulier. Alleen gespecificeerd voor knoppen van het type type=‘submit’. Overschrijft de waarde van het doelkenmerk dat voor het element is opgegeven .
_blank - laadt het antwoord in een nieuw venster/tabblad
_self - laadt het antwoord in hetzelfde venster (standaard)
_parent - laadt het antwoord in het bovenliggende frame
_top - laadt het antwoord op volledig scherm
framenaam - laadt het antwoord in een frame met de opgegeven naam.
naam Stelt de naam van de knop in, de attribuutwaarde is tekst. Wordt gebruikt om te linken naar formuliergegevens nadat het formulier is verzonden, of om naar te linken deze knop(knoppen) in JavaScript.
type Definieert het knoptype. Mogelijke waarden:
knop - klikbare knop
reset - resetknop, keert terug oorspronkelijke betekenis
indienen - knop voor het indienen van formuliergegevens.
waarde Stelt de standaardwaarde in die wordt verzonden wanneer op de knop wordt geklikt.

8. Selectievakjes en keuzerondjes in formulieren

Selectievakjes in formulieren worden ingesteld met behulp van de constructie , en de schakelaar - gebruikt .

Selectievakjes kunnen, in tegenstelling tot keuzerondjes, op meerdere in één formulier worden ingesteld. Als het aangevinkte attribuut is opgegeven voor selectievakjes, zullen de selectievakjes in de overeenkomstige formuliervelden al zijn geselecteerd wanneer de pagina wordt geladen.

Element

Formulieren zijn te vinden op vrijwel elke website op internet. Wanneer u bijvoorbeeld uw login en wachtwoord op een website invoert, worden de gegevens via formulieren ingevuld en naar de server verzonden. Ook een voorbeeld van een formulier zijn diverse enquêtes.

Tag-syntaxis

...

Label

is erg belangrijk actie attribuut, waaraan het adres (URL) is toegewezen van het script waarnaar de ontvangen informatie van het formulier wordt overgedragen voor verwerking. We zullen niet in detail treden over wat er gebeurt nadat de gegevens zijn verzonden, omdat deze problemen al niet door html zijn opgelost, maar door de GET- en POST-methoden in PHP.

Voorbeeld 1. HTML-formulier met knoppen

Dit zullen de knoppen zijn:
Knop één
Knop twee
Knop drie






Nadat u op OK hebt geklikt, wordt de pagina eenvoudig vernieuwd, omdat... wij hebben ons niet geregistreerd actieparameter

Converteert naar het volgende op de pagina:

Dit zullen de knoppen zijn:
Knop één
Knop twee
Knop drie
En dit zal een tekstveld zijn. U kunt hier bijvoorbeeld uw login invoeren

En dit zal een groot tekstveld zijn. U kunt hier bijvoorbeeld informatie over uzelf invoeren

Na al het bovenstaande zal er een OK-knop zijn

Nadat u op OK hebt geklikt, wordt de pagina eenvoudig vernieuwd, omdat... we hebben de actieparameter niet gespecificeerd

Uitleg bijvoorbeeld

  • action="" - geeft aan dat de gegevensverwerking op dezelfde pagina zal plaatsvinden.
  • - het type="radio" attribuut geeft aan dat u de tekst na deze code als selectieknop moet weergeven. Het kenmerk name en value in deze tag spelen nu een kleine rol voor ons, omdat We bestuderen nu geen php (zie php-lessen).
  • - het type="text" attribuut geeft aan dat dit een tekstveld zal zijn. Er zijn hier ook twee belangrijke attributen: naam (voor php) en waarde (standaardwaarde).
  • - het type="textarea" attribuut geeft aan dat dit een groot tekstveld zal zijn. Het enige verschil met het vorige geval is dat u hiermee een grote hoeveelheid tekst kunt opnemen.
  • - het type="submit" attribuut geeft aan dat dit een knop is. Het waarde-attribuut bevat wat er op de knop zal worden geschreven.

Over al deze elementen lees je meer in les 15: tag-elementen

, waarbij wordt gekeken naar keuzerondjes, lijsten, selectievakjes, tekstvelden en knoppen.

Laten we nu alle tagkenmerken eens nader bekijken .

Tagattributen en eigenschappen

1. Kenmerk accept-charset="Codering"- definieert de codering waarin de server formuliergegevens kan accepteren en verwerken. Kan verschillende waarden aannemen, bijvoorbeeld CP1251, UTF-8, enz.

2. Het action="URL" attribuut is het adres van het script dat de verzonden gegevens uit het formulier verwerkt. Als u deze waarde leeg laat, worden de gegevens verwerkt in hetzelfde document waar het formulier zich bevindt.

3. Attribuut autocomplete = "aan/uit" - stelt het automatisch aanvullen van het formulier in of uit. Kan twee waarden aannemen:

  • aan - automatisch aanvullen inschakelen;
  • uit - automatisch aanvullen uitschakelen;

4. Attribuut enctype="parameter" - specificeert de gegevenscoderingsmethode. Kan de volgende waarden aannemen:

  • application/x-www-form-urlencoded- spaties worden vervangen door +, tekens zoals Russische letters worden gecodeerd met hun hexadecimale waarden
  • multipart/form-data - gegevens zijn niet gecodeerd
  • tekst/plain - spaties worden vervangen door een + teken, letters en andere tekens worden niet gecodeerd.

5. Methode = "POST/GET" attribuut - specificeert de verzendmethode. Kan twee waarden aannemen:

  • GET - gegevens overbrengen naar adresbalk(er is een beperking op de hoeveelheid verzonden gegevens)
  • POST - verzendt gegevens naar de server in een browserverzoek (kan een grote hoeveelheid gegevens verzenden, aangezien er geen volumebeperking is)

6. Attribuutnaam = "naam" - stelt de naam van het formulier in. Meestal gebruikt als er meerdere formulieren zijn, zodat u via een script toegang kunt krijgen tot een specifiek formulier.

7. Het novalidate attribuut - annuleert de ingebouwde controle van formuliergegevens op juistheid van de invoer.

8. Het target="parameter" attribuut is de naam van het venster of frame waar de handler het geretourneerde resultaat zal laden. Kan de volgende waarden aannemen:

  • _blank - laadt de pagina in een nieuw browservenster
  • _self - laadt de pagina in het huidige venster
  • _parent - laadt de pagina in het bovenliggende frame
  • _top - annuleert alle frames en laadt de pagina in het volledige browservenster

Beste lezer, nu heb je veel meer geleerd over de html-formuliertag. Nu raad ik je aan om door te gaan naar de volgende les.

HTML-formulier is een hulpmiddel waarmee een HTML-document bepaalde informatie naar een vooraf bepaald punt in de buitenwereld kan sturen, waar de informatie op de een of andere manier zal worden verwerkt.

Het is vrij moeilijk om over formulieren te praten in een tutorial gewijd aan HTML. De reden is heel simpel: het maken van een HTML-formulier is veel eenvoudiger dan het creëren van het "punt in de buitenwereld" waarnaar het HTML-formulier informatie zal sturen. In de meeste gevallen is zo'n "punt" een programma geschreven in Perl of C.

Programma's die gegevens verwerken die via formulieren worden verzonden, worden vaak CGI-scripts genoemd. De afkorting CGI staat voor Common Gateways Interface. Het schrijven van CGI-scripts vereist in de meeste gevallen goede kennis geschikte programmeertaal en mogelijkheden besturingssysteem Unix.

Momenteel is de PHP/FI-taal enigszins wijdverspreid geworden, waarvan de instructies rechtstreeks in HTML-documenten kunnen worden ingesloten (de documenten worden opgeslagen als bestanden met de extensie *.pht of *.php).

HTML-formulieren geven informatie door aan handlerprogramma's in de vorm van [variabelenaam]=[variabelewaarde]-paren. Variabelenamen moeten worden opgegeven in Latijnse letters. Variabele waarden worden door handlers als strings behandeld, zelfs als ze alleen maar getallen bevatten.

Hoe het HTML-formulier werkt

Het formulier wordt geopend met de tag en eindigt met de tag

. Een HTML-document kan meerdere formulieren bevatten, maar de formulieren mogen niet in elkaar staan. HTML-tekst, inclusief tags, kan zonder beperkingen in formulieren worden geplaatst.

Label

kan drie attributen bevatten, waarvan er één vereist is. Dit zijn de attributen:

Vereist attribuut. Bepaalt waar de formulierhandler zich bevindt.

Bepaalt hoe (met andere woorden, met behulp van welke hypertext-overdrachtsprotocolmethode) gegevens uit het formulier worden overgedragen naar de handler. Geldige waarden zijn METHOD=POST en METHOD=GET . Als de attribuutwaarde niet is ingesteld, wordt standaard uitgegaan van METHOD=GET.

Bepaalt hoe gegevens uit het HTML-formulier worden gecodeerd om naar de handler te worden verzonden. Als de attribuutwaarde niet is ingesteld, is de standaard ENCTYPE=application/x-www-form-urlencoded .

Het eenvoudigste HTML-formulier

Om het proces van het overbrengen van gegevens van het formulier naar de handler te starten, is enige vorm van controle nodig. Het creëren van een dergelijk controleorgaan is heel eenvoudig:

Nadat hij een dergelijke regel in het formulier is tegengekomen, tekent de browser een knop op het scherm met de inscriptie Submit (lees “submit” met de nadruk op de tweede lettergreep, van het Engelse “submit”). Wanneer erop wordt geklikt, zijn alle gegevens beschikbaar in het formulier wordt overgedragen aan de handler die in de tag is gedefinieerd .

Het label op de knop kan naar wens worden ingesteld door het attribuut VALUE="[Label] in te voeren" (читается "вэлью" с ударением на первом слоге, от английского "значение"), например:!}

Nu weten we genoeg om een ​​eenvoudig HTML-formulier te schrijven (voorbeeld 11). Het verzamelt geen gegevens, maar brengt ons eenvoudigweg terug naar de tekst van dit hoofdstuk.

Voorbeeld 11

Eenvoudigste vorm

De op de knop geplaatste inscriptie kan, indien nodig, worden doorgegeven aan de handler door het attribuut NAME=[name] in de knopdefinitie op te nemen (lees “name”, uit het Engels “name”), bijvoorbeeld:

Wanneer je op zo’n knop klikt, krijgt de handler samen met alle andere gegevens een knopvariabele met de waarde Let’s go! .

Een formulier kan meerdere verzendknoppen hebben met verschillende namen en/of waarden. De handler kan dus verschillend handelen, afhankelijk van op welke verzendknop de gebruiker heeft geklikt.

Hoe een HTML-formulier gegevens verzamelt

Er zijn andere soorten elementen . Elk element moet het kenmerk NAME=[name] bevatten, dat de naam van het element specificeert (en dienovereenkomstig de naam van de variabele die aan de handler wordt doorgegeven). De naam moet worden opgegeven alleen in Latijnse letters. De meeste artikelen moet het attribuut VALUE="[value] bevatten" , определяющий значение, которое будет передано обработчику под этим именем. Для элементов !} En Dit attribuut is echter optioneel omdat de waarde van de corresponderende variabele door de gebruiker kan worden ingevoerd met behulp van het toetsenbord.

Basiselementtypen :

TYPE=tekst

Definieert een venster voor het invoeren van een regel tekst. Kan extra attributen bevatten SIZE=[getal] (breedte van het invoervenster in tekens) en MAXLENGTH=[getal] (maximaal toegestane lengte van de invoerreeks in tekens).

Voorbeeld:

Definieert een venster van 20 tekens breed voor tekstinvoer. Standaard bevat het venster de tekst Ivan, die de gebruiker kan bewerken. De bewerkte (of onbewerkte) tekst wordt doorgegeven aan de handler in de gebruikersvariabele.

TYPE=wachtwoord

Definieert een venster voor het invoeren van een wachtwoord. Absoluut vergelijkbaar met het teksttype, alleen worden er in plaats van symbolen van de ingevoerde tekst sterretjes (*) op het scherm weergegeven. Voorbeeld:

Definieert een venster van 20 tekens breed voor het invoeren van een wachtwoord. De maximaal toegestane wachtwoordlengte is 10 tekens. Het ingevoerde wachtwoord wordt doorgegeven aan de handler in de pw-variabele.

TYPE=radio

Definieert een keuzerondje. Kan een extra aangevinkt attribuut bevatten (geeft aan dat de knop is aangevinkt). In een groep keuzerondjes met dezelfde naam kan er slechts één gelabeld keuzerondje zijn.

Voorbeeld:

9600 bps
14400 bps
28800 bps

Definieert een groep van drie keuzerondjes met de namen 9600 bps, 14400 bps en 28800 bps. De eerste van de knoppen is aanvankelijk gelabeld. Als de gebruiker geen andere knop aanvinkt, wordt de modemvariabele met de waarde 9600 doorgegeven aan de handler. Als de gebruiker een andere knop aanvinkt, wordt een modemvariabele met een waarde van 14400 of 28800 doorgegeven aan de handler.

TYPE=selectievakje

Definieert een vierkant waarin een markering kan worden gemaakt. Kan een extra aangevinkt attribuut bevatten (geeft aan dat het vierkant is aangevinkt). In tegenstelling tot keuzerondjes kan een groep vierkanten met dezelfde naam meerdere gelabelde vierkanten hebben.

Voorbeeld:

Persoonlijke computers
Werkstations
Servers lokale netwerken
Internetservers

Definieert een groep van vier vierkanten. Het tweede en vierde vierkant zijn aanvankelijk gemarkeerd. Als de gebruiker geen wijzigingen aanbrengt, worden er twee variabelen doorgegeven aan de handler: comp=WS en comp=IS .

TYPE=verborgen

Definieert verborgen element gegevens die voor de gebruiker niet zichtbaar zijn bij het invullen van het formulier en ongewijzigd worden overgedragen aan de verwerker. Soms is het handig om een ​​dergelijk element in een formulier te hebben dat van tijd tot tijd opnieuw wordt ontworpen, zodat de behandelaar weet met welke versie van het formulier hij te maken heeft. Andere mogelijke toepassingen kun je zelf gemakkelijk bedenken.

Voorbeeld:

Definieert een verborgen versievariabele die wordt doorgegeven aan de handler met de waarde 1.1.

TYPE=resetten

Definieert een knop die, wanneer erop wordt geklikt, het HTML-formulier naar de oorspronkelijke staat terugzet. Omdat er bij het gebruik van deze knop geen gegevens worden doorgegeven aan de handler, heeft een resetknop mogelijk geen naamattribuut.

Voorbeeld:

Definieert een knop Formuliervelden wissen die, wanneer erop wordt geklikt, het HTML-formulier naar de oorspronkelijke staat terugzet.

Naast de elementen , HTML-formulieren kunnen menu's bevatten

Alle attributen zijn vereist. Het NAME attribuut definieert de naam waaronder de inhoud van het venster wordt doorgegeven aan de handler (in het voorbeeld - adres). Het ROWS attribuut stelt de hoogte van het venster in rijen in (5 in het voorbeeld). Het COLS attribuut stelt de breedte van het venster in karakters in (50 in het voorbeeld).

Tekst tussen tags geplaatst , vertegenwoordigt de standaardinhoud van het venster. De gebruiker kan het bewerken of eenvoudigweg wissen.

Het is belangrijk om te weten dat er Russische letters in het raam staan