Tijdens het navigeren door de sites klikt de gebruiker in principe alleen op links webpagina's navigeren.

Maar het is duidelijk dat de gebruiker soms zijn eigen gegevens moet verstrekken invoervelden... Dit soort interacties zijn onder meer:

• registratie en login op sites;
• het invoeren van persoonlijke informatie (naam, adres, creditcardgegevens, enz.);
• inhoudsfiltering (met behulp van vervolgkeuzelijsten, selectievakjes, enz.);
• een zoekopdracht uitvoeren;
• bestanden uploaden.

Om aan deze behoeften te voldoen, biedt HTML interactieve controles vormen:

• tekstvelden (voor een of meer regels);
• schakelaars;
• selectievakjes;
• vervolgkeuzelijsten;
• widgets downloaden;
• verzend knoppen.

Deze controles hebben betrekking op verschillende tags HTML, maar de meeste gebruiken de tag ... Omdat het een zelfsluitend element is, wordt het type van het veld bepaald door het type-attribuut:

Element

is een blokelement dat definieert interactief onderdeel van een webpagina. Als gevolg hiervan zijn alle bedieningselementen (zoals , of <button>) zou moeten zijn <i>binnen</i> element <form> .</p><p>Twee HTML-kenmerken <b>zijn noodzakelijk</b>:</p><ul><li>actie bevat een adres dat definieert <i>waar</i> formulierinformatie wordt verzonden;</li><li>methode kan GET of POST zijn en specificeert, <i>hoe</i> formulierinformatie wordt verzonden.</li> </ul><p>Formulierinformatie wordt doorgaans verzonden naar: <b>server</b>. <i>Hoe</i> deze gegevens worden dan verwerkt, valt buiten het bestek van deze handleiding.</p><p>Zie een formulier als een verzameling besturingselementen die samenwerken om te bereiken <b>een</b> operatie. Als u een aanmeldingsformulier voor een site heeft geschreven, heeft u misschien: <b>drie</b> velden:</p><ul><li>e-mailveld <input type="email"> </li><li>wachtwoordveld <input type="password"> </li><li>verzendknop <input type="submit"> </li> </ul><p>Deze drie HTML-elementen worden in één formulier verpakt <span><form action="/login" method="POST"> </span>.</p><p>U kunt op dezelfde manier een registratieformulier toevoegen op dezelfde HTML-pagina, in een apart element <form> .</p><h2>Tekstvelden</h2><p>Bijna alle formulieren vereisen: <b>tekst</b> invoer van gebruikers om hun naam, e-mailadres, wachtwoord, adres, etc. in te voeren. Tekstvelden van het formulier zijn er in verschillende varianten.</p><p>Hoewel deze velden erg op elkaar lijken en gebruikers alle soorten tekst kunnen invoeren (zelfs de verkeerde), biedt hun type een specifieke <b>semantiek</b> voor invoer, specificeer welke informatie het veld is <b>moeten</b> bevatten.</p><p>Browsers kunnen vervolgens de interface van het besturingselement enigszins wijzigen om het te verbeteren <i>interactiviteit</i> of suggereren welke inhoud wordt verwacht.</p><p>Het wachtwoordveld toont bijvoorbeeld punten in plaats van tekens. En met het veld voor getallen kunt u de waarde verhogen / verlagen met de toetsen omhoog en omlaag.</p><h2>tijdelijke aanduiding</h2><p>Tekstvakken kunnen worden weergegeven: <b>aansporing</b> tekst die verdwijnt zodra er tekst wordt ingevoerd.</p><p> <input type="text" placeholder="Voer je naam in"> </p><p>Als je iets begint te typen, zie je de tekst "Voer je naam in" verdwijnen.</p><h2><label></h2><p>Omdat formulierelementen op zichzelf niet erg beschrijvend zijn, worden ze meestal voorafgegaan door tekst <b>label</b>.</p><p> <label>E-mail</label> <input type="email"> </p><p>Terwijl tijdelijke aanduidingen al een hint geven over welke inhoud wordt verwacht, hebben tijdelijke aanduidingen het voordeel dat ze altijd zichtbaar zijn en kunnen ze naast andere soorten formulierelementen worden gebruikt, zoals selectievakjes of keuzerondjes.</p><p>Hoewel u korte alinea's kunt gebruiken om formulierelementen te beschrijven, gebruikt u <label>is semantisch correcter omdat ze alleen in vormen bestaan. <label>kan ook worden geassocieerd met een specifiek formulierelement met behulp van het for-attribuut dat overeenkomt met de id-waarde van het veld.</p><p> <label for="first_name">Naam</label> <input id="first_name" type="text"> </p><p>Wanneer u op een label klikt, wordt de focus verplaatst naar het tekstvak en wordt de cursor erin geplaatst. Hoewel deze bundel nutteloos lijkt, is hij handig met selectievakjes en keuzerondjes.</p><h2>Selectievakjes</h2><p><b>Selectievakjes</b> zijn vormelementen die slechts twee toestanden hebben: aan of uit. Ze stellen de gebruiker in feite in staat om ja of nee tegen iets te zeggen.</p><p> <input type="checkbox">Onthoud me</p><p>Aangezien het moeilijk kan zijn om op een klein selectievakje te klikken, is het raadzaam om het selectievakje en de beschrijving erin te plaatsen <label> .</p><p> <label> <input type="checkbox">Ik ga akkoord met de voorwaarden</label> </p><p>U kunt op de tekst "Ik ga akkoord met de voorwaarden" klikken om het selectievakje in te schakelen.</p><p>Het selectievakje is standaard uitgeschakeld. U kunt het markeren als aangevinkt door simpelweg het aangevinkte attribuut te gebruiken.</p><p> <label> <input type="checkbox" checked>Gebruik mijn factuuradres</label> </p><h2>Schakelaars</h2><p>U kunt de gebruiker <b>lijst met opties</b> selecteerbaar met schakelaars.</p><p>Om dit formulierelement te laten werken, moet uw HTML-code: <b>groep</b> lijst met keuzerondjes bij elkaar. Dit wordt bereikt door dezelfde waarde te gebruiken voor het kenmerk name:</p><p> <label>Familie status</label> <label> <input type="radio" name="status">Enkel</label> <label> <input type="radio" name="status">Getrouwd</label> <label> <input type="radio" name="status">Gescheiden</label> <label> <input type="radio" name="status">Weduwnaar</label> </p><p>Aangezien alle keuzerondjes dezelfde waarde gebruiken voor het attribuut name (in dit geval de statuswaarde), zal het selecteren van één alle andere overschrijven. De schakelaars zijn: <b>elkaar uitsluiten</b>.</p><h3>Verschil tussen keuzerondjes en selectievakjes</h3><p>Hoewel het selectievakje bestaat <b>op zichzelf</b>, schakelaars kunnen alleen worden weergegeven als <b>lijst</b>(wat betekent dat er minimaal twee opties zijn).</p><p>Het klikken op het selectievakje is ook: <b>willekeurig</b>, terwijl de selectie van een van de keuzerondjes is <b>verplicht</b>... Daarom is het niet mogelijk om de schakelaar uit te zetten als u de dichtstbijzijnde optie selecteert. Uiteindelijk wordt altijd een van de keuzerondjes geselecteerd.</p><h2>Vervolgkeuzemenu's</h2><p>Als het aantal opties voor selectie te veel ruimte in beslag neemt, kunt u de vervolgkeuzemenu's gebruiken <select> .</p><p>Ze werken als schakelaars, alleen de lay-out is anders.</p><p> <select> <option>januari</option> <option>februari</option> <option>maart</option> <option>april</option> <option>Kunnen</option> <option>juni-</option> <option>juli-</option> <option>augustus</option> <option>september</option> <option>oktober</option> <option>november</option> <option>december</option> </select> </p><h3>Meerdere selectie uit het vervolgkeuzemenu</h3><p>Als u het kenmerk multiple toevoegt, kunt u meerdere keuzes opgeven.</p><p> <label>Welke browsers gebruik je?</label> <select multiple> <option>Google chrome</option> <option>Internet Explorer</option> <option>Mozilla Firefox</option> <option>Opera</option> <option>Safari</option> </select> </p><p>Selecteer meerdere opties door Ctrl (of ⌘) ingedrukt te houden en te klikken. Dit kan een goed alternatief zijn voor het gebruik van meerdere vlaggen per regel.</p><h2>Voorbeeld: volledig registratieformulier</h2> <form action="/signup" method="POST"> <p> <label>Hoger beroep</label> <label> <input type="radio" name="title" value="Dhr">Dhr</label> <label> <input type="radio" name="title" value="Mvr">Mevrouw</label> </p> <p> <label>Naam</label> <input type="text" name="first_name"> </p> <p> <label>Achternaam</label> <input type="text" name="last_name"> </p> <p> <label>E-mail</label> <input type="email" name="email"> </p> <p> <label>Telefoon</label> <input type="tel" name="phone"> </p> <p> <label>Wachtwoord</label> <input type="password" name="password"> </p> <p> <label>Bevestig het wachtwoord</label> <input type="password" name="password_confirm"> </p> <p> <label>Het land</label> <select name="country"> <option>Canada</option> <option>Frankrijk</option> <option>Duitsland</option> <option>Italië</option> <option>Japan</option> <option>Rusland</option> <option>Groot Brittanië</option> <option>VS</option> </select> </p> <p> <label> <input type="checkbox" name="terms">Ik ga akkoord met de gebruiksvoorwaarden</label> </p> <p> <button>Registreer nu</button> </p> </form> <p>Er zijn ook andere formulierelementen beschikbaar, maar we hebben de meest gebruikte besproken.</p> <p><b>HTML-formulieren</b> zijn bedieningselementen die worden gebruikt om informatie van websitebezoekers te verzamelen.</p> <p>Webformulieren bestaan ​​uit een verzameling tekstvakken, knoppen, lijsten en andere besturingselementen waarop kan worden geklikt. Technisch gezien dragen formulieren gegevens over van een gebruiker naar een externe server.</p> <p>Voor het ontvangen en verwerken van formuliergegevens worden webprogrammeertalen gebruikt, zoals: <b>PHP</b>, <b>Perl</b>.</p> <p>Vóór HTML5 waren webformulieren een verzameling van meerdere elementen. <input type="text"> , <input type="password">eindigend met een knop <input type="submit">... Het kostte veel moeite om de formulieren in verschillende browsers op te maken. Bovendien hadden formulieren JavaScript nodig om invoer te valideren en werden specifieke invoerveldtypen ontdaan voor het specificeren van dagelijkse informatie zoals datums, e-mailadressen en URL's.</p> <p><b>HTML5-formulieren</b> loste de meeste van deze veelvoorkomende problemen op door nieuwe attributen te introduceren, die de mogelijkheid bieden om het uiterlijk van vormelementen te veranderen door: <b>CSS3</b>.</p> <img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2015/05/html5_form.png' align="left" height="696" width="660" loading=lazy loading=lazy>Rijst. 1. Verbeterde webformulieren met HTML5 <h2>HTML5-formulieren maken</h2> <i> </i><h3>1. Element <form></h3> <p>Elke vorm is gebaseerd op een element <form>...</form>... Het voorziet niet in gegevensinvoer, omdat het een container is die alle formulierbesturingselementen bij elkaar houdt - <b>velden</b>... De attributen van dit element bevatten informatie die voor alle formuliervelden geldt, dus u moet logisch gecombineerde velden in één formulier opnemen.</p> <table class="t3">Tabel 1. Tagkenmerken <form> <tr><th>Attribuut</th> <th>Betekenis / Beschrijving</th> </tr><tr><td>accept-charset</td> <td>De attribuutwaarde is een spatie gescheiden <b>tekencoderingslijst</b> om bijvoorbeeld het formulier in te dienen <form accept-charset="ISO-8859-1"> . </td> </tr><tr><td>actie</td> <td><b>Vereist kenmerk:</b> die de url specificeert van de formulierhandler op de server waaraan de gegevens worden doorgegeven. Het is een bestand (bijvoorbeeld action.php) dat beschrijft wat er met de formuliergegevens moet worden gedaan. Als de attribuutwaarde niet is opgegeven, nemen de formulierelementen na het opnieuw laden van de pagina hun standaardwaarden aan. <br>Als al het werk aan de clientzijde wordt uitgevoerd door JavaScript-scripts, dan kan de waarde # worden opgegeven voor het actiekenmerk. <br>U kunt er ook voor zorgen dat het door de bezoeker ingevulde formulier in uw post terechtkomt. Om dit te doen, moet u de volgende invoer maken: <br> <form action="mailto:адрес вашей электронной почты" enctype="text/plain"></form> </td> </tr><tr><td>automatisch aanvullen</td> <td><br><br></td> </tr><tr><td>enctype</td> <td>Gebruikt om aan te geven: <b>MIME</b>-type gegevens verzonden met het formulier, bijvoorbeeld enctype = "multipart / form-data". Alleen opgegeven als methode = "post". <br>application / x-www-form-urlencoded is het standaard inhoudstype, wat aangeeft dat de ingediende gegevens een lijst met URL-gecodeerde formuliervariabelen zijn. Spatietekens (ASCII 32) worden gecodeerd als +, en speciale tekens zoals! wordt gecodeerd in hex als% 21. <br>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 van een afzonderlijk formulierelement vertegenwoordigen. <br>text / plain - geeft aan dat platte (geen html) tekst wordt verzonden.</td> </tr><tr><td>methode</td> <td>Specificeert hoe formuliergegevens worden doorgegeven. <br>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. Namen en waarden van variabelen worden toegevoegd aan het serveradres na de? en worden gescheiden door het &-teken. Alle speciale tekens en letters behalve het Latijn zijn gecodeerd in het% nn-formaat, de spatie wordt vervangen door +. Deze methode moet worden gebruikt als u geen grote hoeveelheden informatie overdraagt. Als u van plan bent een bestand met het formulier mee te sturen, werkt deze methode niet. <br>De post-methode 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. <br> <form action="action.php" enctype="multipart/form-data" method="post"></form> </td> </tr><tr><td>naam</td> <td>sets <b>formulier naam</b> te gebruiken om toegang te krijgen tot formulierelementen via scripts, bijvoorbeeld name = "opros".</td> </tr><tr><td>niet valideren</td> <td>Schakelt validatie uit op de knop voor het verzenden van het formulier. Het attribuut wordt gebruikt zonder een waarde op te geven</td> </tr><tr><td>doel</td> <td>Specificeert het venster waarnaar informatie wordt geleid: <br>_blank - nieuw venster <br>_zelf - hetzelfde frame <br>_parent - het bovenliggende frame (als het bestaat, zo niet, dan naar het huidige) <br>_top is het venster op het hoogste niveau met betrekking tot dit frame. Als de oproep niet afkomstig is van een onderliggend frame, dan naar hetzelfde frame.</td> </tr></table><h3>2. Formulierelementen groeperen</h3> <p>Element <fieldset>...</fieldset> is bedoeld voor het groeperen van aan elkaar gerelateerde elementen, waardoor de vorm in logische fragmenten wordt opgedeeld.</p> <p>Elke groep elementen kan een naam krijgen met behulp van het element <legend>die volgt op de tag <fieldset>... De groepsnaam verschijnt links in de bovenrand <fieldset>... Als het element . bijvoorbeeld <fieldset>contactgegevens worden opgeslagen:</p><p> <form> <fieldset> <legend>Contactgegevens</legend> <p><label for="name">Naam <em>*</em></label><input type="text" id="name"></p> <p><label for="email">E-mail</label><input type="email" id="email"></p> </fieldset> <p><input type="submit" value="versturen"></p> </form> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' align="left" width="100%" loading=lazy loading=lazy>Rijst. 2. Formulierelementen groeperen met behulp van <fieldset> </p><table class="t3">Tabel 2. Kenmerken van de tag <fieldset> <tr><th>Attribuut</th> <th>Betekenis / Beschrijving</th> </tr><tr><td>gehandicapt</td> <td>Als het attribuut aanwezig is, dan een groep gerelateerde vormelementen die zich in de container bevinden <fieldset>uitgeschakeld voor vullen en bewerken. Wordt gebruikt om de toegang tot sommige formuliervelden met eerder ingevoerde gegevens te beperken. Het attribuut wordt gebruikt zonder een waarde op te geven - <fieldset disabled> . </td> </tr><tr><td>formulier</td> <td> <form>in hetzelfde document. Geeft een of meer vormen aan waartoe deze groep elementen behoort. Het kenmerk wordt momenteel door geen enkele browser ondersteund.</td> </tr><tr><td>naam</td> <td>definieert <b>naam</b> te gebruiken om te verwijzen naar elementen in JavaScript, of om te verwijzen naar formuliergegevens nadat het formulier is ingevuld en verzonden. Analoog aan het id-attribuut.</td> </tr></table><h3>3. Formuliervelden maken</h3> <p>Element <input>maakt de meeste formuliervelden aan. Elementattributen verschillen afhankelijk van het type veld waarmee het element wordt gemaakt.</p> <p>Met behulp van CSS-stijlen kunt u de lettergrootte, het lettertype, de kleur en andere eigenschappen van de tekst wijzigen, evenals randen, achtergrondkleur en achtergrondafbeelding toevoegen. De breedte van het veld wordt bepaald door de eigenschap width.</p> <table class="t3">Tabel 3. Tagkenmerken <input> <tr><th>Attribuut</th> <th>Betekenis / Beschrijving</th> </tr><tr><td>aanvaarden</td> <td>Specificeert het type bestand dat naar de server mag worden verzonden. Alleen aangegeven voor <input type="file">... Mogelijke waarden: <br>file_extension - hiermee kunnen bestanden met de opgegeven extensie worden geüpload, bijvoorbeeld accept = ".gif", accept = ".pdf", accept = ".doc" <br>audio / * - staat het downloaden van audiobestanden toe <br>video / * - maakt het uploaden van videobestanden mogelijk <br>afbeelding / * - staat het uploaden van afbeeldingen toe <br>media_type - geeft het mediatype van de geüploade bestanden aan.</td> </tr><tr><td>alt</td> <td>definieert <b>alternatieve tekst</b> voor afbeeldingen, alleen aangegeven voor <input type="image"> . </td> </tr><tr><td>automatisch aanvullen</td> <td>Verantwoordelijk voor het onthouden van de waarden die in het tekstveld zijn ingevoerd en deze automatisch te vervangen bij daaropvolgende invoer: <br>aan - betekent dat het veld niet is beveiligd en dat de waarde ervan kan worden opgeslagen en opgehaald, <br>uit - schakelt automatisch aanvullen voor formuliervelden uit.</td> </tr><tr><td>autofocus</td> <td>Hiermee kunt u ervoor zorgen dat in het geladen formulier dit of dat invoerveld al focus heeft (is geselecteerd), klaar om een ​​waarde in te voeren.</td> </tr><tr><td>gecontroleerd</td> <td>Het attribuut controleert of het selectievakje standaard is aangevinkt bij het laden van de pagina voor velden van het type type = "checkbox" en type = "radio".</td> </tr><tr><td>gehandicapt</td> <td></td> </tr><tr><td>formulier</td> <td>De attribuutwaarde moet gelijk zijn aan het id-attribuut van het element <form>in hetzelfde document. Specificeert een of meer formulieren waartoe dit formulierveld behoort.</td> </tr><tr><td>formatie</td> <td>Stelt de url in van het bestand dat de gegevens verwerkt die in de velden zijn ingevoerd wanneer het formulier wordt verzonden. Het is alleen ingesteld voor velden van het type type = "submit" en type = "image". Dit attribuut overschrijft de waarde van het action attribuut van het formulier zelf.</td> </tr><tr><td>vormtype</td> <td>Bepaalt hoe de formulierveldgegevens worden gecodeerd wanneer ze naar de server worden verzonden. Overschrijft de waarde van het enctype attribuut van het formulier. Het is alleen ingesteld voor velden van het type type = "submit" en type = "image". De opties zijn: <br>application / -x-www-form-urlencoded is de standaard. Alle tekens worden gecodeerd voordat ze worden verzonden (spaties worden vervangen door +, speciale tekens worden geconverteerd naar ASCII HEX-waarden) <br>multipart / form-data - tekens zijn niet gecodeerd <br>tekst / platte - spaties worden vervangen door het +-teken en speciale tekens worden niet gecodeerd.</td> </tr><tr><td>vormmethode</td> <td>Het attribuut specificeert de methode die de browser zal gebruiken om formuliergegevens naar de server te verzenden. Het is alleen ingesteld voor velden van het type type = "submit" en type = "image". Overschrijft de waarde van het method-attribuut van het formulier. De opties zijn: <br>krijgen is de standaardinstelling. De gegevens uit het formulier (naam/waardepaar) worden aan de url toegevoegd en naar de server gestuurd: url?Naam = waarde & naam = waarde <br>post - Formuliergegevens worden verzonden als een http-verzoek.</td> </tr><tr><td>formulier niet valideren</td> <td>Specificeert dat de 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.</td> </tr><tr><td>vormdoel</td> <td>Bepaalt waar het antwoord wordt weergegeven dat is ontvangen nadat het formulier is verzonden. Het is alleen ingesteld voor velden van het type type = "submit" en type = "image". Overschrijft de waarde van het doelkenmerk van het formulier. <br><br><br>_parent - Laadt het antwoord op het bovenliggende frame <br>_top - laadt het antwoord op volledig scherm <br>framename - Laadt het antwoord in een frame met de opgegeven naam.</td> </tr><tr><td>hoogte</td> <td>De attribuutwaarde bevat het aantal pixels zonder een eenheid op te geven. Stelt de hoogte in van een formulierveld van het type type = "image", bijvoorbeeld <input type="image" src="img_submit.gif" height="50">... Het wordt aanbevolen om zowel de hoogte als de breedte van het veld tegelijkertijd in te stellen.</td> </tr><tr><td>lijst</td> <td>Is een verwijzing naar een item? <datalist>, bevat zijn 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.</td> </tr><tr><td>max</td> <td>Hiermee kunt u de toegestane numerieke gegevensinvoer beperken tot de maximale waarde; de ​​kenmerkwaarde kan een geheel getal of een fractioneel getal bevatten. Het wordt aanbevolen om dit attribuut te gebruiken in combinatie met het min attribuut. Werkt met de volgende veldtypen: getal, bereik, datum, datum/tijd, datum/tijd-lokaal, maand, tijd en week.</td> </tr><tr><td>maximale lengte</td> <td>Het attribuut specificeert het maximum aantal tekens dat in het veld kan worden ingevoerd. De standaardwaarde is 524288 tekens.</td> </tr><tr><td>min</td> <td>Hiermee kunt u geldige numerieke invoer beperken tot de minimumwaarde.</td> </tr><tr><td>meerdere</td> <td>Hiermee kan de gebruiker meerdere attribuutwaarden invoeren, gescheiden door een komma. Geldt voor bestanden en e-mailadressen. Opgegeven zonder een attribuutwaarde.</td> </tr><tr><td>naam</td> <td>Specificeert de naam die zal worden gebruikt om toegang te krijgen tot het element <form>bijvoorbeeld in css-stylesheets. Analoog aan het id-attribuut.</td> </tr><tr><td>patroon</td> <td>Hiermee kunt u definiëren met behulp van <b>reguliere expressie</b> de syntaxis van de gegevens die in een specifiek veld moeten worden toegestaan. Bijvoorbeeld, patroon = "(3) - (3)" - vierkante haken stellen het bereik van geldige tekens in, in dit geval - eventuele kleine letters, het cijfer tussen accolades geeft aan dat drie kleine letters nodig zijn, gevolgd door een streepje, dan drie cijfers in het bereik van 0 tot 9.</td> </tr><tr><td>tijdelijke aanduiding</td> <td>Bevat de tekst die vóór het invullen in het invoerveld wordt weergegeven (meestal is dit een hint).</td> </tr><tr><td>alleen lezen</td> <td>Het staat de gebruiker niet toe om de waarden van formulierelementen te wijzigen, terwijl het selecteren en kopiëren van tekst beschikbaar is. Opgegeven zonder een attribuutwaarde.</td> </tr><tr><td>vereist</td> <td>Geeft een bericht weer waarin staat dat dit veld verplicht is. Als de gebruiker het formulier probeert in te dienen zonder de vereiste waarde in dit veld in te voeren, wordt een waarschuwingsbericht op het scherm weergegeven. Opgegeven zonder een attribuutwaarde.</td> </tr><tr><td>maat</td> <td>Specificeert de schijnbare breedte van de marge, in tekens. De standaardwaarde is 20. Werkt met de volgende veldtypen: tekst, zoeken, tel, url, e-mail en wachtwoord.</td> </tr><tr><td>src</td> <td>Specificeert de url van een afbeelding die moet worden gebruikt als knop voor het indienen van formuliergegevens. Alleen opgegeven voor het veld <input type="image"> . </td> </tr><tr><td>stap</td> <td>Gebruikt voor items die numerieke invoer vereisen, geeft de hoeveelheid toename of afname van waarden aan tijdens bereikaanpassing (stap).</td> </tr><tr><td rowspan="21">type</td> <td>knop - maakt een knop aan. <br><input type="button" value="Knop"></td> </tr><tr><td>checkbox - verandert het invoerveld in een checkbox die bijvoorbeeld kan worden aangevinkt of gewist <br><input type="checkbox" name="vehicle" value="Auto">ik heb een auto</td> </tr><tr><td>kleur - Genereert kleurkiezers in ondersteunende browsers, waardoor gebruikers kleurwaarden in hexadecimaal formaat kunnen selecteren. <br><input type="color" name="color"></td> </tr><tr><td>datum - hiermee kunt u een datum invoeren in het formaat dd.mm.jjjj. <br>Verjaardag: <input type="date" name="birthday"></td> </tr><tr><td>datetime-local - hiermee kunt u de datum en tijd invoeren, gescheiden door een Engelse hoofdletter T volgens het patroon dd.mm.yyyy uu: mm. <br>Verjaardag - dag en tijd: <input type="datetime-local" name="birthday"></td> </tr><tr><td>e-mail - browsers die dit kenmerk ondersteunen, verwachten dat de gebruiker gegevens invoert die overeenkomen met de syntaxis van e-mailadressen. <br>E-mail: <input type="email" name="email"></td> </tr><tr><td>bestand - hiermee kunt u bestanden uploaden vanaf de computer van de gebruiker. <br>Selecteer een bestand: <input type="file" name="img"></td> </tr><tr><td>verborgen - Verbergt een besturingselement dat niet zichtbaar is voor de browser en voorkomt dat de gebruiker de standaardwaarden wijzigt.</td> </tr><tr><td>afbeelding - maakt een knop waarmee u een afbeelding kunt invoegen in plaats van de tekst op de knop. <br><input type="image" src="https://html5book.ru/wp-content/uploads/2015/04/webbutton.png" alt="Indienen"></td> </tr><tr><td>maand - Hiermee kan de gebruiker het jaar en de maand invoeren met het patroon jjjj-mm. <br><input type="month"></td> </tr><tr><td>nummer - bedoeld voor het invoeren van gehele waarden. De min, max en stap attributen stellen respectievelijk de bovenste, onderste en afstandswaarden in. Deze kenmerken worden verondersteld voor alle items met numerieke waarden. Hun standaardwaarden zijn afhankelijk van het elementtype. <br>Geef het aantal aan (van 1 tot 5): <input type="number" name="quantity" min="1" max="5"></td> </tr><tr><td>wachtwoord - maakt tekstvelden in het formulier, terwijl de tekens die door de gebruiker zijn ingevoerd, worden vervangen door sterretjes, opsommingstekens of andere pictogrammen die door de browser zijn ingesteld. <br>Voer wachtwoord in: <input type="password"></td> </tr><tr><td>radio - maakt een keuzerondje - een besturingselement in de vorm van een kleine cirkel die kan worden in- of uitgeschakeld. <br>Vegetarisch: <input type="radio"></td> </tr><tr><td>bereik - hiermee kunt u een interface-element maken, zoals een schuifregelaar, min / max - hiermee kunt u het selectiebereik instellen <input type="range" min="1" max="10" value="3"></td> </tr><tr><td>reset - maakt een knop die de formuliervelden wist van door de gebruiker ingevoerde gegevens. <br><input type="reset"></td> </tr><tr><td>zoeken - geeft een zoekveld aan, standaard is het invoerveld rechthoekig. <br>Zoekopdracht: <input type="search" name="search"></td> </tr><tr><td>indienen - Creëert een standaard klikbare knop. De knop verzamelt informatie uit het formulier en dient deze in voor verwerking. <br><input type="submit" value="versturen"></td> </tr><tr><td>tekst - Maakt tekstvakken op een formulier, waarbij een tekstvak van één regel wordt weergegeven voor het invoeren van tekst. <br><input type="text"></td> </tr><tr><td>tijd - hiermee kunt u de tijd invoeren in 24-uursnotatie met behulp van het hh: mm-sjabloon. In ondersteunende browsers verschijnt het als een numeriek invoerbesturingselement met een muisklikbare waarde en accepteert alleen tijdwaarden. <br>Geef de tijd op: <input type="time"></td> </tr><tr><td>url - het veld is bedoeld voor het specificeren van URL-adressen. <br>Hoofdpagina: <input type="url" name="homepage"></td> </tr><tr><td>week - Met de juiste aanwijzer kan de gebruiker een week van het jaar selecteren en vervolgens gegevensinvoer in nn-yyyy-indeling. Afhankelijk van het jaar kan het aantal weken 52 of 53 zijn. <br>Geef de week aan: <input type="week"></td> </tr><tr><td>waarde</td> <td>Specificeert de tekst die wordt weergegeven op een knop, in een vak of bijbehorende tekst. Niet gespecificeerd voor velden van het type bestand.</td> </tr><tr><td>breedte</td> <td>De attribuutwaarde bevat het aantal pixels. Hiermee kunt u de breedte van de formuliervelden instellen.</td> </tr></table><h3>4. Tekstinvoervelden</h3> <p>Element <textarea>... gebruikt in plaats van element wanneer u grote tekstvakken moet maken. De tekst die wordt weergegeven als de oorspronkelijke waarde, wordt in de tag geplaatst. De afmetingen van het veld worden ingesteld met behulp van de cols attributen - de horizontale afmetingen, rijen - de verticale afmetingen. De hoogte van het veld kan worden ingesteld met de eigenschap height. Alle formaten worden berekend op basis van de grootte van één monospaced lettertype.

Kat

7. Knoppen

Element ... maakt klikbare knoppen. In tegenstelling tot gemaakte knoppen ( , , , ), binnen het element u kunt inhoud plaatsen - tekst of afbeelding.

Voor de juiste weergave van het element

verschillende browsers moeten het type attribuut specificeren, bijvoorbeeld .

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

8. Selectievakjes en keuzerondjes in formulieren

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

In tegenstelling tot keuzerondjes kunnen meerdere selectievakjes in één vorm worden ingesteld. Als het aangevinkte attribuut is opgegeven voor de selectievakjes, dan zijn de selectievakjes bij het laden van de pagina al aangevinkt in de bijbehorende formuliervelden.

Element is van toepassing bij het maken van selecties met keuzerondjes en selectievakjes. U kunt het gewenste item selecteren door eenvoudig op de bijbehorende tekst te klikken. Om dit te doen, moet je zetten binnen het element .

HTML-formulier is een tool waarmee een HTML-document 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 moeilijk om over formulieren te praten in de HTML-zelfstudie. De reden is heel eenvoudig: het is veel gemakkelijker om een ​​HTML-formulier te maken dan het "punt van de buitenwereld" waarnaar het HTML-formulier informatie zal sturen. In de meeste gevallen is zo'n "punt" een programma geschreven in Pearl of C.

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

Momenteel heeft de PHP / FI-taal een bepaalde distributie gekregen, waarvan de instructies rechtstreeks in HTML-documenten kunnen worden ingesloten (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. Namen van variabelen moeten in Latijnse letters worden opgegeven. Variabele waarden worden door handlers geïnterpreteerd als strings, zelfs als ze alleen getallen bevatten.

Hoe een HTML-formulier werkt

Het formulier wordt geopend met een 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 beperking in formulieren worden geplaatst.

Label

Het op de knop aangebrachte opschrift kan, indien nodig, aan de handler worden doorgegeven door het kenmerk NAAM = [naam] in de definitie van de knop in te voeren (lees "naam", uit het Engels "naam"), bijvoorbeeld:

Als u op zo'n knop klikt, krijgt de handler, samen met alle andere gegevens, de variabele knop met de waarde Let's go! ...

Een formulier kan meerdere verzendknoppen hebben met verschillende namen en/of waarden. De handler kan dus anders handelen, afhankelijk van de verzendknop die de gebruiker heeft ingedrukt.

Hoe HTML-formulieren gegevens verzamelen

Er zijn andere soorten elementen. ... elk element moet het kenmerk NAME = [naam] bevatten, dat de naam van het element definieert (en dienovereenkomstig de naam van de variabele die aan de handler wordt doorgegeven). De naam moet worden gegeven alleen in Latijnse letters... De meeste elementen moet het kenmerk VALUE = "(! LANG: [waarde] bevatten" , определяющий значение, которое будет передано обработчику под этим именем. Для элементов !} en dit attribuut is echter niet vereist omdat de waarde van de corresponderende variabele door de gebruiker kan worden ingevoerd vanaf het toetsenbord.

Typen basiselementen :

TYPE = tekst

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

Voorbeeld:

Definieert een venster van 20 tekens 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. Het is absoluut gelijk aan het teksttype, maar in plaats van tekens van de ingevoerde tekst worden er sterretjes (*) op het scherm weergegeven. Voorbeeld:

Definieert een venster van 20 tekens 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). Er kan slechts één gelabeld keuzerondje zijn in een groep keuzerondjes met dezelfde naam.

Voorbeeld:

9600 bps
14400 bps
28800 bps

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

TYPE = selectievakje

Specificeert een vierkant waarin moet worden gemarkeerd. Kan een optioneel aangevinkt attribuut bevatten (geeft aan dat het vierkant is aangevinkt). In tegenstelling tot keuzerondjes kan een groep vierkanten met dezelfde naam meerdere gemarkeerde vierkanten hebben.

Voorbeeld:

Persoonlijke computers
Werkstations
LAN-servers
internetservers

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

TYPE = verborgen

Definieert een verborgen gegevenselement dat niet zichtbaar is voor de gebruiker bij het invullen van een formulier en ongewijzigd wordt doorgegeven aan de handler. Het is soms handig om zo'n element in een formulier te hebben dat van tijd tot tijd wordt herwerkt, zodat de handler kan weten met welke versie van het formulier hij te maken heeft. Andere mogelijke use-cases kun je eenvoudig zelf bedenken.

Voorbeeld:

Definieert de versie van de verborgen variabele, die wordt doorgegeven aan de handler met een waarde van 1.1.

TYPE = reset

Bepaalt de knop die, wanneer erop wordt geklikt, het HTML-formulier terugbrengt naar de oorspronkelijke staat. Aangezien er geen gegevens worden doorgegeven aan de handler wanneer deze knop wordt gebruikt, mag een resetknop geen naamattribuut hebben.

Voorbeeld:

Definieert een knop Formuliervelden wissen die het HTML-formulier in zijn oorspronkelijke staat terugbrengt wanneer erop wordt geklikt.

Naast de elementen , HTML-formulieren kunnen menu's bevatten en velden voor het invoeren van tekst .</p> <p>Menu <SELECT>van n elementen ziet er als volgt uit:</p><p> <SELECT NAME="[имя]"> <OPTION VALUE="[waarde 1]">[Tekst 1] <OPTION VALUE="[waarde 2]">[tekst 2] ... <OPTION VALUE="[n-waarde]">[tekst n]</SELECT> </p><p>Zoals je kunt zien, begint het menu met de tag <SELECT>en eindigt met de tag</SELECT>... Label <SELECT>bevat het vereiste NAME-attribuut, dat de naam specificeert van de variabele die het menu genereert.</p> <p>Label <SELECT>kan ook een MULTIPLE-attribuut bevatten, waarvan de aanwezigheid aangeeft dat er meerdere items in het menu kunnen worden geselecteerd. De meeste browsers tonen menu's <SELECT MULTIPLE>in de vorm van een venster waarin de menu-items zich bevinden (de hoogte van het venster in regels kan worden ingesteld met het kenmerk SIZE = [nummer]). Menu <SELECT>in de meeste gevallen wordt het weergegeven als een vervolgkeuzemenu.</p> <p>Label <OPTION>definieert een menu-item. Het vereiste VALUE-attribuut stelt de waarde in die aan de handler wordt doorgegeven als dit menu-item wordt geselecteerd. Label <OPTION>kan een aangevinkt attribuut bevatten dat aangeeft dat het element standaard is aangevinkt.</p> <h3>Laten we een klein voorbeeld bekijken:</h3> <SELECT NAME="selection"> <OPTION VALUE="Optie 1" checked>Optie 1 <OPTION VALUE="Optie 2">Optie 2 <OPTION VALUE="optie3">Optie 3</SELECT> <p>Dit fragment definieert een menu met drie elementen: Optie 1, Optie 2 en Optie 3. Optie 1 is standaard geselecteerd. De handler krijgt een selectievariabele doorgegeven waarvan de waarde option1 (de standaard), option2 of option3 kan zijn.</p> <p>Na alles wat we tot nu toe hebben geleerd, is het element <TEXTAREA>lijkt misschien heel eenvoudig. Bijvoorbeeld:</p><p> <TEXTAREA NAME=address ROWS=5 COLS=50>En hier is je adres...

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 (in het voorbeeld - 5). Het COLS-attribuut stelt de breedte van het venster in tekens in (in het voorbeeld - 50).

Tekst tussen tags geplaatst en, staat voor de inhoud van het standaardvenster. De gebruiker kan het bewerken of gewoon wissen.

Het is belangrijk om te weten dat Russische letters in het raam wanneer ze worden doorgegeven aan een handler, kunnen ze worden geconverteerd naar hun overeenkomstige symbolische objecten.</p> <h3>Voorbeeld:</h3> <p>Om het gebruik van HTML-formulieren te demonstreren, heb ik een klein PHP-programma geschreven op:</p><p>Http://206.31.82.215/hp/nc/fd-win.pht</p><p>De initiële gegevens worden naar dit programma verzonden via het formulier beschreven in voorbeeld 12:</p><p> <HTML> <HEAD> <TITLE>Voorbeeld 12</TITLE> </HEAD> <H1>Een iets complexere vorm</H1> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> <H2>Vertel ons iets over jezelf ...</H2> <P>Het is helemaal niet nodig om authentieke gegevens te verstrekken. Voor demonstratiedoeleinden zijn fictieve ook prima.</P> <P>Naam: <INPUT TYPE=text SIZE=40 NAME=fn><BR>Achternaam: <INPUT TYPE=text SIZE=40 NAME=ln><BR>Vloer: <INPUT TYPE=radio NAME=gender VALUE="mannelijk" checked>mannelijk <INPUT TYPE=radio NAME=gender VALUE="vrouwelijk">vrouwelijk <BR>Leeftijd: <INPUT TYPE=text SIZE=5 NAME=age>jaar <BR> <INPUT TYPE=submit VALUE="Start handler"></P> </FORM> </BODY> </HTML> </p><p>Vul het HTML-formulier in, klik op de knop en kijk wat er gebeurt ...</p> <p><b>Een klein trucje <br>of hoe u het formulier per post verstuurt</b></p><p>Dit is allemaal geweldig, zullen sceptici zeggen, maar waarom hebben mensen HTML-formulieren nodig die niets hebben om ze mee te verwerken? Dit is gedeeltelijk waar, maar slechts gedeeltelijk.</p> <p>HTML biedt u een redelijk krachtig mechanisme voor het verzenden van formulierinhoud via e-mail. Zo ziet het er in de praktijk uit.</p> <p>Laten we zeggen dat we Voorbeeld 12 enigszins hebben gewijzigd. In plaats van de regel</p><p> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> </p><p>we kwamen in de rij</p><p> <FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain> </p><p>Houd er rekening mee dat we het coderingsalgoritme hebben gewijzigd in tekst / gewoon, dat wil zeggen dat we de codering helemaal hebben uitgeschakeld.</p> <p>Stel nu dat de gebruiker heeft opgegeven, de voornaam is Ivan, de achternaam is Petrov, het mannelijk geslacht en de leeftijd is 22 jaar. Nu is de vraag: wat gebeurt er als de gebruiker op de knop Run Handler klikt?</p> <p>Het antwoord is simpel. Het volgende bericht wordt automatisch per e-mail naar gebruiker@mail.box gestuurd:</p><p>Fn = Ivan ln = Petrov geslacht = mannelijke leeftijd = 22</p><p>Helaas kunnen niet alle gebruikers dit HTML-formulier gebruiken. Feit is dat al het werk van het opstellen van een bericht en het starten van het e-mailprogramma om het te verzenden in feite wordt overgenomen door de browser van de gebruiker. Dit betekent dat de configuratie van de internettoegang van de gebruiker de gelijktijdige werking van het Hypertext Transfer Protocol en het Outbound Mail Delivery Protocol moet garanderen. Dit is niet altijd mogelijk. Maar zelfs als dit niet mogelijk is, gebeurt er niets dodelijks. De browser geeft je alleen een foutmelding.</p> <table width="635" border="0"><tr><td width="200"> </td><td> </td><td width="200"> </td> </tr></table> <p>Goede dag, liefhebbers van webontwikkeling en degenen die hun eigen website willen maken. Daarvoor waren al mijn publicaties gewijd aan de belangrijkste elementen van de taal, hoe verschillende inhoudsobjecten te creëren, op te maken, te structureren, enz. Als je de voorgaande onderwerpen onder de knie hebt, kun je al een behoorlijk goede website maken. Het zou echter onvolledig zijn zonder het onderwerp van vandaag: "Formulieren maken in html".</p> <p>Dit gedeelte in de taal is erg belangrijk. Besteed daarom speciale aandacht aan het onderzoek, anders kan de webresource die u hebt gemaakt niet in productie worden genomen. Zo weet je na het lezen van het artikel wat je nodig hebt om formulieren te gebruiken, met welke tags ze zijn gemaakt en kun je ook concrete voorbeelden in de praktijk uitproberen. Laten we beginnen!</p> <h2>Wat is vorm en hoe werkt het?</h2> <blockquote> <p><b>Formulier</b>- dit is een van de belangrijkste objecten, die bedoeld is voor de uitwisseling van informatiegegevens tussen de server en de gebruiker.</p> </blockquote> <p>Simpel gezegd, als u een online winkel wilt creëren met de mogelijkheid om producten op de site te bestellen, registratie op een webbron aan te vragen en met accounts te werken, of klanten feedback te geven van bedrijfsmanagers, dan kunt u niet zonder formulieren.</p> <blockquote> <p>Het formulier is ingesteld met behulp van een speciaal element van de html-taal <b><form> </b>.</p> </blockquote> <p>Merk op dat een codedocument meerdere tagdeclaraties kan bevatten <b><form> </b> er kan echter slechts één verzoek naar de server worden gestuurd om de gegevens te verwerken. Daarom mogen de gegevens die door de gebruiker worden ingevuld in de daarvoor bestemde velden en verwijzen naar verschillende formulieren niet afhankelijk zijn. Ook is het niet toegestaan ​​om formulieren in elkaar genest te maken.</p> <p>Voor de ongeduldige en enthousiast om snel naar de codeweergave te kijken, heb ik een eenvoudig voorbeeld bijgevoegd van het gebruik van een paneel met een tekstveld voor een wachtwoord met een knop:</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 </td><td class="code"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Voorbeeld</title> </head> <body> <form> <p><input name="pas" type="password"><input type="submit"></p> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </td> </tr></table><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Voorbeeld</title> </head> <body> <form> <p><input name="pas" type="password"><input type="submit"></p> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html></p> <p>Het is nu misschien niet erg duidelijk wat en hoe in dit kleine programma samenwerkt, maar ik garandeer je dat je na het lezen van het hele artikel in staat zult zijn om applicaties te maken die vele malen moeilijker zijn.</p> <h2>Gegevens naar de serverzijde verzenden</h2> <p>Om de getypte (of geselecteerde) informatie in het dialoogvenster te verzenden, moet u het standaardmechanisme gebruiken - <b>Verzendknop</b>.</p> <blockquote> <p>De code voor zo'n methode ziet er als volgt uit: <b><input type="submit"> </b></p> </blockquote> <p>Wanneer de gepresenteerde regel wordt gelanceerd, wordt een knop weergegeven met het opschrift: "Verzenden".</p> <p>Een andere manier om gegevens naar de server te verzenden, is door in het dialoogvenster op Enter te drukken.</p> <p>Na bevestiging van het verzenden van de opgegeven informatie, gaat deze niet onmiddellijk naar de server. Eerst wordt het verwerkt door de browser, wat resulteert in de vorm "naam = waarde".</p> <p>De attribuutparameter is verantwoordelijk voor de naam <b>type</b> label <b><input> </b>, en voor de waarde - de gegevens die door de gebruiker zijn ingevoerd. Vervolgens wordt de getransformeerde string doorgegeven aan de handler, die meestal wordt ingesteld in het attribuut <b>actie</b> element <b><form> </b>.</p> <p>De actieparameter zelf is niet vereist, en op sommige momenten is het helemaal niet nodig. Als een sitepagina bijvoorbeeld is geschreven met php of js, vindt verwerking plaats op de huidige pagina en zijn links niet nodig.</p><p>Voor een beter begrip van het hele plaatje van het functioneren van de site, zou ik willen toevoegen dat het werk met gegevens op de server in andere talen wordt uitgevoerd. Dus, server-side talen zijn: Python, php, C-achtige talen (C #, C, etc.), Java en anderen.</p> <p>Nu wil ik stoppen en je meer vertellen over het element <b><input> </b>... In eenvoudige bewoordingen dan <b><input> </b> nodig om tekstvelden, keuzerondjes, verschillende knoppen, verborgen velden, selectievakjes en andere objecten te maken.</p> <p>De tag hoeft niet te worden gekoppeld aan <b><form> </b>, maar als u gebruikersrecords moet verwerken of bijvoorbeeld in een database moet invoeren, kunt u niet zonder een container.</p> <p>De belangrijkste kenmerken van dit element van de hypertext-opmaaktaal zijn:</p> <ul><li><b>Tekst</b>- maakt een tekstveld aan;</li> <li><b>Indienen</b>- creëert een knop om gegevens naar de server te sturen;</li> <li><b>Afbeelding</b>- is verantwoordelijk voor de button met een afbeelding;</li> <li><b>Resetten</b>- stelt een knop in om het formulier te wissen;</li> <li><b>Wachtwoord</b>- stelt een tekstveld specifiek in voor wachtwoorden;</li> <li><b>Selectievakje</b>- is verantwoordelijk voor de velden met vlaggen;</li> <li><b>Radio</b>- is verantwoordelijk voor de velden met de keuze voor één element;</li> <li><b>Knop</b>- maakt een knop;</li> <li><b>Verborgen</b>- gebruikt voor verborgen velden;</li> <li><b>Bestand</b>- stelt het veld in dat verantwoordelijk is voor het verzenden van bestanden.</li> </ul><h2>Methoden voor informatieoverdracht</h2> <p>Er zijn 2 manieren om gebruikersgegevens naar de serverzijde over te dragen: <b>Krijgen</b> en <b>Na</b>... Deze methoden doen hetzelfde, maar ze verschillen aanzienlijk van elkaar. Laten we daarom, voordat we een van hen specificeren, kennis maken met hun kenmerken.</p> <table><tbody><tr><td width="260"> </td> <td width="260">Na</td> <td width="260">Krijgen</td> </tr><tr><td width="260">Grootte van over te dragen documenten</td> <td width="260">Beperkt tot de serverkant.</td> <td width="260">Maximaal - 4 KB.</td> </tr><tr><td width="260">Hoe verzonden informatie wordt weergegeven</td> <td width="260">Alleen beschikbaar wanneer bekeken via browserextensies of andere speciale softwareproducten.</td> <td width="260">Per direct beschikbaar voor iedereen.</td> </tr><tr><td width="260">Bladwijzers gebruiken</td> <td width="260">Er is geen manier om aan bladwijzers toe te voegen, omdat verzoeken niet worden herhaald (alle pagina's linken naar hetzelfde adres).</td> <td width="260">Elke pagina met een verzoek kan worden opgeslagen in bladwijzers en er na een tijdje naartoe gaan.</td> </tr><tr><td width="260">Caching</td> <td width="260">Op basis van de vorige paragraaf staan ​​alle verzoeken op één pagina.</td> <td width="260">Elke pagina kan afzonderlijk worden gecached.</td> </tr><tr><td width="260">Het doel</td> <td width="260">Wordt gebruikt om grote bestanden (boeken, afbeeldingen, video's, enz.), berichten, opmerkingen te verzenden.</td> <td width="260">Geweldig voor het vinden van gevraagde waarden op een webbron of voor het verzenden van korte sms-berichten.</td> </tr></tbody></table><p>Om aan te geven met welke van de twee methoden van gegevensoverdracht de browser moet werken, in het element <b><form> </b> gebruik de opgegeven parameter <b>methode</b>(Bijvoorbeeld, <b>methode = "post"</b>).</p> <p><img src='https://i2.wp.com/romanchueshov.ru/wp-content/uploads/2016/07/prostaia-forma.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Laten we een tweede voorbeeld bekijken. Laten we een formulier maken waarin u uw persoonlijke gegevens (voor- en achternaam, geboortedatum) moet invoeren en een wachtwoord moet bedenken. Daarna sturen we dit alles naar de server met behulp van de methode <b>Na</b>.</p> <p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>POST-methode:</title> </head> <body> <p>Vul uw persoonlijke gegevens in!</p> <form action="handler.php" method="post"> <p><input name="name" value = "Naam"> <input name="fam" value = "Achternaam"> <input type="date" name="calendar" value="2016-06-11" max="2016-07-31" min="2016-06-01"> <input type="password" name="pass" value = "Wachtwoord"> </p> <p><input type="submit"></p> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html></p> <p>Om bijvoorbeeld de datum in te voeren, zijn er schakelaars voor de datum van elk van de parameters (dag, maand en jaar), evenals voor het gemak een vervolgkeuzelijst met de kalender zelf.</p> <h2>Aanmaken van registratiepaneel</h2> <p>Basistags en attributen zijn beoordeeld. Daarom is het tijd om een ​​volwaardig registratieformulier te maken met gestileerde css-opmaak en validatie van de invoergegevens. Natuurlijk kunnen we niet met hen naar het serverwerk kijken, maar we zullen het ontwerp en belangrijke details verstrekken.</p> <table><tr><td class="line_numbers"> 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 </td><td class="code"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>registratie</title> <style> </style> </head> <body> <form> <fieldset> <legend>registratie op de site</legend> <h4> </h4> <p>Naam: <input name="name" autofocus required ></p> <p>Achternaam: <input name="fam" required></p> <p>E-mail: <input type="email" required></p> <p>Wachtwoord: <input type="password" name="pass" required></p> <p>Wachtwoord herhalen: <input type="password" name="pass" required></p> <p><input type="submit" value="Registreer nu"></p> </fieldset> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </td> </tr></table><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>registratie</title> <style> body { background-color:#98FB98; background-attachment: fixed; } form{ background-color:#AEEEEE; Color: #006400; font-size:15px; } h4 { color: red; text-align: center; } p { text-align: center; } input { Color: #006400; font-size:15px; border: 5px ridge #98FB98; background-color:#fff; } </style> </head> <body> <form> <fieldset> <legend>registratie op de site</legend> <h4>Voer voor de daaropvolgende correcte werkzaamheden in onze service de juiste gegevens in!</h4> <p>Naam: <input name="name" autofocus required ></p> <p>Achternaam: <input name="fam" required></p> <p>E-mail: <input type="email" required></p> <p>Wachtwoord: <input type="password" name="pass" required></p> <p>Wachtwoord herhalen: <input type="password" name="pass" required></p> <p><input type="submit" value="Registreer nu"></p> </fieldset> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html></p> <p>Ik raad u aan deze programmacode op te slaan in een document met de extensie .html en utf-8-codering, en deze laatste in een browservenster te openen. Voordat je in al zijn glorie verschijnt een paneel voor registratie met velden voor het invoeren van de voornaam, achternaam, e-mail en wachtwoord met een herhaling. Merk op dat wanneer de pagina begint, de cursor onmiddellijk in het eerste tekstvak wordt geplaatst. Deze techniek wordt bereikt door het attribuut <b>autofocus</b>.</p> <p><img src='https://i0.wp.com/romanchueshov.ru/wp-content/uploads/2016/07/krasivai-forma.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Begin met het invullen van de velden, laat er één ongewijzigd, en klik op de knop "Registreren". Zoals je al hebt opgemerkt, wordt het formulier niet verzonden, omdat elk element heeft <b>< </b><b>invoer></b> het attribuut is opgegeven <b>vereist</b>... Het stelt de gemarkeerde velden in zoals vereist.</p> <p>Een ander interessant punt is het specificeren van het type <b>typ = "e-mail"</b> die verscheen in. Bij gebruik van dit type veld wordt de ingevulde informatie automatisch gecontroleerd op juistheid. Bij fouten wordt het formulier niet naar de server gestuurd.</p> <p>De publicatie is dus ten einde. Daarin heb ik geprobeerd zoveel mogelijk belangrijke en relevante kennis over formulieren te verzamelen. Ik hoop dat je het nuttig vond! Ik zou het erg op prijs stellen als je lid wordt van mijn abonnees en je vrienden over de blog vertelt.</p> <p>Tot ziens!</p> <p>Met vriendelijke groet, Roman Chueshov</p> <p>Lezen: <b>333 keer</b></p> <p>Formulieren zijn ontworpen om gegevens van een gebruiker naar een webserver te sturen. Formulieren in HTML kunnen bestaan ​​uit tekstvakken en tekstgebieden, selectievakjes en keuzerondjes en vervolgkeuzelijsten. Dit zijn allemaal vormelementen. Elk element dient om een ​​bepaalde betekenis aan de site over te brengen. <br>In de kern is een HTML-formulier een webpagina waar u gebieden ziet waar u uw informatie kunt invoeren. Nadat u het formulier hebt ingevuld en op de verzendknop hebt geklikt, wordt de informatie van het formulier verpakt en naar de webserver verzonden voor verwerking door een serverscript (handlerbestand). Na verwerking wordt als reactie een andere webpagina aan u geretourneerd. De volgende afbeelding laat duidelijk zien hoe het formulier werkt:</p> <p>Er is niets moeilijks aan het maken van HTML-formulieren. De makkelijkste manier om een ​​idee te krijgen van formulieren is om een ​​beetje HTML-code te ontleden en dan te kijken hoe het werkt. Het volgende voorbeeld toont de syntaxis voor het maken van een eenvoudig HTML-formulier:</p> <h3>Voorbeeld: Eenvoudig HTML-formulier</h3> <ul><li>Probeer het zelf "</li> </ul><p>Mijn eerste formulier: <br>Naam: <input type="text" name="firstname" value=""><br>Achternaam: <input type="text" name="lastname" value=""><br><input type="submit"></p> <p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Makkelijke vorm</title> </head><br><body> <form action="action_form.php" method="POST"> <p>Mijn eerste formulier: <br>Naam: <input type="text" name="firstname" value=""><br>Achternaam: <input type="text" name="lastname" value=""><br> <input type="submit"> </p> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body><br></html></p> <h2>Element <b><form> </b> </h2> <p>Formulieren worden in webpagina's ingevoegd met behulp van het element <b><form> </b>... Het is een container voor alle inhoud van een formulier, inclusief elementen zoals tekstvakken en knoppen, evenals alle andere HTML-tags. Het kan echter geen ander element bevatten. <b><form> </b> .<br>Gebruik de knop "Verzenden" om het formulier naar de server te verzenden, hetzelfde resultaat wordt verkregen als u op de "Enter"-toets in het formulier drukt. Als de knop "Verzenden" niet aanwezig is op het formulier, kan de "Enter"-toets worden gebruikt om te verzenden. <br>De meeste elementattributen <b><form> </b> invloed hebben op de verwerking van het formulier, niet op het ontwerp. De meest voorkomende zijn: <b>actie</b> en <b>methode</b>... Attribuut <b>actie</b> bevat de URL waarnaar de informatie in het formulier wordt verzonden voor verwerking door de server. Attribuut <b>methode</b> is de HTTP-methode die browsers moeten gebruiken om formuliergegevens in te dienen.</p> <h2>Element <b><input> </b> </h2> <p>Bijna alle formuliervelden worden gemaakt met het element <b><input> </b>(van Engelse invoer - invoer). Uiterlijk van het item: <b><input> </b> veranderen afhankelijk van de waarde van het attribuut <b>type</b>:</p><p> <input type="значение"> </p><p>Hier zijn enkele van de attribuutwaarden: <b>type</b>:</p> <h2>Tekst en wachtwoord invoeren</h2> <p>Een van de eenvoudigste soorten formulierelementen is een tekstvak, waarmee u tekst op één regel kunt invoeren. Dit type tekstinvoer is standaard ingesteld en daarom is het een veld met één regel dat wordt weergegeven als u vergeet het kenmerk op te geven <b>type</b>... Om een ​​tekstinvoerveld van één regel aan een formulier toe te voegen, gaat u binnen het element <b><input> </b> registerkenmerk <b>type</b> met tekstwaarde:</p><p> <input type="text"> </p><p>Het wachtwoordinvoerveld is een soort gewoon tekstveld. Het ondersteunt dezelfde kenmerken als een tekstvak met één regel. Attribuut <b>naam</b> stelt de naam in van het wachtwoordinvoerveld, dat samen met het door de gebruiker ingevoerde wachtwoord naar de server wordt verzonden. Om een ​​veld te maken voor het invoeren van een wachtwoord, moet u de wachtwoordwaarde instellen op het attribuut <b>type</b>(wachtwoord (Engels) - wachtwoord):</p><p> <input type="password"> </p><p>Een voorbeeld van het maken van een formulier met een wachtwoordveld:</p> <h3>Voorbeeld: Wachtwoord invoerveld</h3> <ul><li>Probeer het zelf "</li> </ul><p>Uw login: <input type="text" name="login" size="15" maxlength="30" value="Uw naam"></p> <p>Wachtwoord: <input type="password" name="password" size="15" maxlength="30" value="Wachtwoord"></p> <input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Uw login: <input type="text" name="login" size="15" maxlength="30" value="Uw naam"> </p> <p>Wachtwoord: <input type="password" name="password" size="15" maxlength="30"> </p> <input type="submit"> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body><br></html></p> <p>Samen met dit attribuut kunt u het attribuut <b>maximale lengte</b>, waarvan de waarde het maximale aantal tekens bepaalt dat in deze tekenreeks kan worden ingevoerd. U kunt ook de lengte van het invoerveld instellen met het attribuut <b>maat</b>... Standaard beperken de meeste browsers de breedte van het tekstvak tot 20 tekens. Om de breedte van elementen van nieuwe vormen te bepalen, in plaats van het attribuut <b>maat</b>, wordt het aanbevolen om de Cascading Style Sheets (CSS)-faciliteiten te gebruiken. <br>Attribuut <b>waarde</b> stelt de waarde in die standaard wordt weergegeven in het tekstvak wanneer het formulier wordt geladen. Door een standaardwaarde in het veld in te voeren, kunt u de gebruiker uitleggen wat voor soort gegevens en in welk formaat u wilt dat de gebruiker hier invoert. Het is als een voorbeeld, omdat het voor de gebruiker veel handiger is om het formulier in te vullen en een voorbeeld voor zich te zien.</p> <h2>Schakelaars (radio)</h2> <p>Element <b><input> </b> type <b>radio-</b> maakt schakelaars die het logische "OF"-principe gebruiken, waardoor u slechts één van de verschillende waarden kunt selecteren: als u één positie selecteert, worden alle andere inactief. De basissyntaxis voor een toggle-element is:</p><p> <input type="radio" name="имя _переменной" value="betekenis"> </p><p>Attribuut <b>naam</b> is vereist voor keuzerondjes en speelt een belangrijke rol bij het groeperen van meerdere keuzerondjes. Om keuzerondjes in een groep te combineren, moet u dezelfde attribuutwaarde instellen <b>naam</b> en verschillende attribuutwaarden <b>waarde</b>... Attribuut <b>waarden</b> stelt de waarde in van het geselecteerde keuzerondje dat naar de server moet worden verzonden. De waarde van elk keuzerondje moet uniek zijn binnen de groep, zodat de server weet welk antwoord de gebruiker heeft gekozen. <br>Attribuut aanwezigheid <b>gecontroleerd</b>(uit het Engels - set) bij het toggle-element geeft aan welke van de voorgestelde opties standaard moeten worden geselecteerd wanneer de pagina wordt geladen, indien nodig. Dit attribuut kan slechts voor één schakelelement uit de groep worden ingesteld:</p> <h3></h3> <ul><li>Probeer het zelf "</li> </ul><p>Hoe oud ben je?</p> <ol><li><input type="radio" name="age" value="18" checked>onder de 18</li> <li><input type="radio" name="age" value="18-24">van 18 tot 24</li> <li><input type="radio" name="age" value="25-34">van 25 tot 35</li> <li><input type="radio" name="age" value="35-50">meer dan 35</li> </ol><input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Hoe oud ben je?</p> <ol> <li><input type="radio" name="age" value="18" checked>onder de 18</li> <li><input type="radio" name="age" value="18-24">van 18 tot 24</li> <li><input type="radio" name="age" value="25-34">van 25 tot 35</li> <li><input type="radio" name="age" value="35-50">meer dan 35</li> </ol> <input type="submit"< </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body><br></html></p> <h2>Selectievakjes</h2> <p>Element <b><input> </b> type <b>selectievakje</b> maakt selectievakjes aan die lijken op keuzerondjes in die zin dat ze de gebruiker in staat stellen te kiezen uit de opties die u biedt. Het belangrijkste verschil met keuzerondjes is dat een bezoeker meerdere opties tegelijk kan selecteren, en de vlaggen zelf worden aangegeven door vierkanten, niet door cirkels. Net als bij keuzerondjes wordt er een groep selectievakjes gemaakt door aan elk item dezelfde attribuutwaarde toe te wijzen <b>naam</b> elk selectievakje heeft echter zijn eigen betekenis. De basissyntaxis van een selectievakje is:</p><p> <input type="checkbox" name="имя _переменной" value="betekenis"> </p><p>Attribuut <b>gecontroleerd</b>, geeft, net als bij keuzerondjes, aan dat het selectievakje standaard moet worden ingeschakeld bij het laden van de pagina. Dit attribuut kan tegelijkertijd voor meerdere selectievakjes van de groep worden ingesteld. <br>In het volgende voorbeeld worden selectievakjes gebruikt om meerdere standaardantwoordopties in te stellen:</p> <h3>Voorbeeld: schakelaars gebruiken</h3> <ul><li>Probeer het zelf "</li> </ul> <ol><li><input type="checkbox" name="musik" value="juze" checked>Jazz</li> <li><input type="checkbox" name="musik" value="blauw" checked>Blues</li> <li><input type="checkbox" name="musik" value="steen">Steen</li> <li><input type="checkbox" name="musik" value="shanson">Chanson</li> <li><input type="checkbox" name="musik" value="kantry">Land</li> </ol><input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Van welke muziekgenres hou je?</p> <ol> <li><input type="checkbox" name="musik" value="juze" checked>Jazz</li> <li><input type="checkbox" name="musik" value="blauw" checked>Blues</li> <li><input type="checkbox" name="musik" value="steen">Steen</li> <li><input type="checkbox" name="musik" value="shanson">Chanson</li> <li><input type="checkbox" name="musik" value="kantry">Land</li> </ol> <input type="submit"< </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body><br></html></p> <h2>Verzend- en resetknoppen</h2> <p>Element <b><input> </b> type <b>indienen</b> creëert een knop die, wanneer erop wordt geklikt, de browser naar het serverscript stuurt voor het verwerken van de gegevens die door de gebruiker in het formulier zijn ingevoerd. Als we een knop maken die het formulier wist, dan wijzen we het toe aan het attribuut <b>type</b> de waarde "resetten". Element <b><input> </b> type <b>indienen</b> een optioneel attribuut kan worden toegewezen <b>naam</b>... Attribuut <b>waarden</b> gebruikt in dit element om tekst op te geven die het label op de knop aangeeft. Standaard is in browsers de knop "Verzenden" geschreven, als u niet tevreden bent met deze inscriptie, voert u deze zelf in. Aangezien de stijlen van de bevestigingsknoppen in verschillende browsers kunnen verschillen, is het beter om de stijl van de knop zelf aan te passen met behulp van CSS-tools of grafische knoppen. <br>Maak bevestigings- en wisknoppen:</p> <h3>Voorbeeld: Verzenden en opnieuw instellen gebruiken</h3> <ul><li>Probeer het zelf "</li> </ul> <input type="text" name="email"><input type="submit" name="podpisatsya" value="Abboneer op"><input name="reset" type="reset" value="Duidelijk"><p>Als u op de knop Reset klikt, worden alle door de gebruiker ingevoerde gegevens opnieuw ingesteld.</p> <p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <input type="text" name="email"> <input type="submit" name="podpisatsya" value="Abboneer op"> <input name="reset" type="reset" value="Duidelijk"> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body><br></html></p> <h2>Actie attribuut.</h2> <p>Het belangrijkste voor het element <b><form> </b> is een attribuut <b>actie</b> die de gegevenshandler voor het formulier specificeert. Een gegevenshandler is een bestand dat beschrijft wat te doen met formuliergegevens. Als resultaat van deze verwerking wordt een nieuwe HTML-pagina geretourneerd en teruggestuurd naar de browser. Met andere woorden, in het attribuut <b>actie</b> specificeert het URL-pad naar een serverhandlerbestand (soms een scriptpagina genoemd) voor het verwerken van het formulier. De syntaxis is als volgt:</p><p> <form action="http://mytestserver.com/namefolder/obrabotchik.php">… </form> </p><p>Het verwerkingsbestand staat op de server <i>mijntestserver.com</i> in de map <i>naammap</i> en de naam van het serverscript dat de gegevens zal verwerken - <i>obrabotchik.php</i>... Het is aan hem dat alle gegevens die door u in het formulier op de webpagina zijn ingevoerd, worden overgedragen. De .php-extensie geeft aan dat het opgegeven formulier wordt verwerkt door een script dat is geschreven in de PHP-taal. De handler zelf kan in een andere taal zijn geschreven, bijvoorbeeld de scripttaal Python, Ruby, enz. <br>Het is raadzaam om altijd de waarde van het attribuut in te stellen <b>actie</b>... Als het formulier waarden moet verzenden naar dezelfde pagina als waar het zich bevindt, geeft u een lege tekenreeks op als de waarde van het actiekenmerk: action = "".</p> <h2>Methode attribuut</h2> <p>Attribuut <b>methode</b> specificeert hoe informatie naar de server moet worden verzonden. De methode die u kiest om uw formulier in te dienen, hangt af van de gegevens die u ermee wilt verzenden. De hoeveelheid van deze data speelt hierbij een grote rol. De meest populaire zijn twee methoden om de originele gegevens van uw formulier van de browser naar de server over te brengen: <b>KRIJGEN</b> en <b>NA</b>... De methode is ingesteld op een van uw keuze, en als u deze niet hebt opgegeven, wordt de standaard gebruikt <b>KRIJGEN</b>... Laten we eens kijken naar de toepassing van elk van hen.</p> <h2>POST-methode:</h2> <p>Methode <b>NA</b> pakt de formuliergegevens in en verzendt deze onzichtbaar naar de server naar de gebruiker, aangezien de gegevens in de hoofdtekst van het bericht staan. Webbrowser bij gebruik van de methode <b>NA</b> stuurt een verzoek naar de server, bestaande uit speciale headers gevolgd door de formuliergegevens. Aangezien de inhoud van dit verzoek alleen beschikbaar is voor de server, is de methode: <b>NA</b> wordt gebruikt om vertrouwelijke gegevens zoals wachtwoorden, bankkaartgegevens en andere persoonlijke informatie van gebruikers over te dragen. Methode <b>NA</b> ook geschikt voor het verzenden van grote hoeveelheden informatie, aangezien in tegenstelling tot de methode <b>KRIJGEN</b>, het heeft geen beperkingen op het aantal verzonden tekens.</p> <h2>GET-methode</h2> <p>Zoals u al weet, is de belangrijkste taak van een browser het ontvangen van webpagina's van de server. Dus, wanneer u de methode gebruikt: <b>KRIJGEN</b>, ontvangt uw browser de webpagina gewoon zoals altijd. Methode <b>KRIJGEN</b> verpakt ook de formuliergegevens, maar voegt deze toe aan het einde van de url voordat het verzoek naar de server wordt verzonden. Om te begrijpen hoe de methode werkt <b>KRIJGEN</b>, laten we het in actie zien. Open het eerste voorbeeld uit deze les (Voorbeeld: Eenvoudig HTML-formulier) in Kladblok (bijvoorbeeld Kladblok ++) en breng een kleine wijziging aan in de HTML-code:</p><p> <form action="" method="GET"> </p><p>die. vervangen <b>NA</b> op de <b>KRIJGEN</b>.<br>Sla het bestand op als <i>bestandsnaam.html</i> en ververs uw browserpagina (F5) en vul vervolgens het formulier in zoals <i>Vasya Pupkin</i> en klik op de knop "Verzenden". In de adresbalk van uw browser ziet u zoiets als dit:</p><p>Bestandsnaam.html Voornaam = Vasya & achternaam = Pupkin</p><p>Nu kunt u de naam van elk formulierelement zien, evenals de waarde ervan, hier in de URL. <br>De URL wordt gescheiden van de rest van de formuliergegevens door een vraagteken en de namen en waarden van variabelen worden gescheiden door een ampersand <b>(&) </b>.<br>Deze methode moet worden gebruikt als u geen grote hoeveelheden informatie overdraagt. <br>Deze methode werkt niet als de gegevens in uw formulier vertrouwelijk zijn, bijvoorbeeld als er een bankkaartnummer of wachtwoord wordt opgeslagen. <br>Ook de methode <b>KRIJGEN</b> niet geschikt als u bestanden samen met het formulier naar de server wilt verzenden.</p> <h2>Formulierelementen groeperen</h2> <p>Formulierelementen die op betekenis verwant zijn, kunnen tussen tags worden gegroepeerd <b><fieldset> </b> en <b></fieldset> </b>... De browser zal weergeven: <b><fieldset> </b> als een frame rond een groep vormelementen. Het uiterlijk van het frame kan worden gewijzigd met behulp van Cascading Style Sheets (CSS). <br>Om een ​​titel voor elke groep toe te voegen, heb je het element nodig <b><legend> </b>, waarmee de groepstiteltekst in het frame wordt gespecificeerd.</p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="clear"></div> </div> </article> <div class='yarpp-related'> <section id="related_posts"> <div class="block-head"> <span>Meer informatie over het onderwerp</span> <div class="stripe-line"></div> </div> <div class="post-listing"> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/96e356193f0e3738b164ccf77eb02db5.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="CPA-netwerken - wat zijn dat?" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/nl/rossiiskaya-sra-seti-kompaniya-rabotayut-v-indii-cpa-seti-chto-eto/">CPA-netwerken - wat zijn dat?</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/a5ac1ce2bee4e4ecc58fedbce8db3df8.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Instagram-promotie in een paar klikken!" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/nl/prodvizhenie-v-instagram-v-paru-klikov-stop-slova-skachaite-odin-iz-samyh-moshchnyh/">Instagram-promotie in een paar klikken!</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/dc62fdbf38ee40d94da83f909d099e45.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Hoe u uw VKontakte-pagina snel op gratis en betaalde manieren kunt promoten" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/nl/mozhno-raskrutit-gruppu-kak-bystro-raskrutit-svoyu-stranicu-vkontakte/">Hoe u uw VKontakte-pagina snel op gratis en betaalde manieren kunt promoten</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/d26e1a886560bfa8170e3a5c17636102.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Review en testen van TP-Link Archer C60 draadloze router: geen enkel ontwerp Verbinding archer c60" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/nl/ac1350-dvuhdiapazonnyi-wi-fi-router-archer-c60-obzor-i-testirovanie/">Review en testen van TP-Link Archer C60 draadloze router: geen enkel ontwerp Verbinding archer c60</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/b1bdd513bda784074c739f1286a58f3c.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Sequentiële instelling van doelen in Yandex-statistieken" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/nl/metrika-ne-schitaet-celi-posledovatelnaya-nastroika-celei-v-yandeks-metrike/">Sequentiële instelling van doelen in Yandex-statistieken</a></div> <div class="related-item"> <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/14191e04c5cd2530f6cf92cb295bd67d.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Wat heb je nodig om je eigen bedrijf op te richten?" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/nl/chto-nuzhno-chtoby-sozdat-tos-chto-nuzhno-dlya-sozdaniya-svoei-firmy-chto/">Wat heb je nodig om je eigen bedrijf op te richten?</a></div> </div> </section> </div> <div id="comments"> <ol class="commentlist"> <div class='rreekk' rel='15'> <div id="smartrotator_ad_4" onclick="yaCounter40492595.reachGoal ('tizercommentbefore1'); return true;"></div> </div> </ol> <div class="clear"></div> <div id="respond" class="comment-respond"> </div> </div> </div> <aside id="sidebar"> <div class="theiaStickySidebar"> <div class="execphpwidget"> <div id="text-4" class="widget widget_text"> <div class="widget-top"> <span>Bruikbaar</span> <div class="stripe-line"></div> </div> <div class="widget-container"> <div class="textwidget"> <style> .wpp-list li img { -webkit-border-radius: 65px; -moz-border-radius: 65px; border-radius: 65px; } .wpp-list li .post-views { display: block; margin-left: 70px; color: #828283; font-size: 12px; } .wpp-list li .post-views i { font-size: 13px; } .wpp-list li { line-height: 22px !important; } .replacemy { cursor: pointer; } } </style> <ul class="wpp-list"> <li> <div class="replacemy"><img src="/uploads/c3b22dcde561b9e8e6c5a0e1872f8fdb.jpg" width="65" height="65" title="Hoe per ongeluk verwijderde WhatsApp-berichten te herstellen" alt="Hoe per ongeluk verwijderde WhatsApp-berichten te herstellen" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/nl/kak-vosstanovit-chaty-v-vatsap-bez-kak-vosstanovit-sluchaino/" class=""><br>Hoe per ongeluk verwijderde WhatsApp-berichten te herstellen</a></li> <li> <div class="replacemy"><img src="/uploads/50e2d5d8d6bec0ac3a8c6ee0c109e95e.jpg" width="65" height="65" title="Hoe kom je erachter wie er online is op Instagram?" alt="Hoe kom je erachter wie er online is op Instagram?" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/nl/vidno-li-gostei-v-instagrame-storonnie-prilozheniya-i-politika-sistemy/" class=""><br>Hoe kom je erachter wie er online is op Instagram?</a></li> <li> <div class="replacemy"><img src="/uploads/8d5db8f0b16b196f9556c15fdffc81f2.jpg" width="65" height="65" title="Wat is Instagram - gebruiksaanwijzing voor beginners Is het mogelijk op Instagram" alt="Wat is Instagram - gebruiksaanwijzing voor beginners Is het mogelijk op Instagram" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/nl/instagram-chto-eto-takoe-i-kak-im-polzovatsya-sposoby-registracii-v/" class=""><br>Wat is Instagram - gebruiksaanwijzing voor beginners Is het mogelijk op Instagram</a></li> <li> <div class="replacemy"><img src="/uploads/f513955488cc49cfb54d299c5a5f5cd4.jpg" width="65" height="65" title="Vkontakte-berichten: wat het is en hoe het te gebruiken" alt="Vkontakte-berichten: wat het is en hoe het te gebruiken" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/nl/kak-sdelat-rassylku-po-podpischikam-gruppy-rassylka-soobshchenii-vkontakte/" class=""><br>Vkontakte-berichten: wat het is en hoe het te gebruiken</a></li> <li> <div class="replacemy"><img src="/uploads/a0514eabae127cb5557ecbf9875b64c3.jpg" width="65" height="65" title="Welke telefoons worden gebruikt door Poetin, Trump en andere presidenten 03" alt="Welke telefoons worden gebruikt door Poetin, Trump en andere presidenten 03" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/nl/kakoi-telefon-u-prezidenta-kakimi-telefonami-polzuyutsya-putin-tramp-i-drugie/" class=""><br>Welke telefoons worden gebruikt door Poetin, Trump en andere presidenten 03</a></li> </ul> </div> </div> </div> </div> </div> <div> </div> </aside> <div class="clear"></div> </div> <footer id="theme-footer"> <div id="footer-widget-area" class="wide-narrow-2c"><div id="footer-first" class="footer-widgets-box"><div id="text-2" class="footer-widget widget_text"><div class="footer-widget-top"></div><div class="footer-widget-container"><div class="textwidget"> <p>Alles over moderne technologie. Fouten. Spellen. Storingen. Techniek. internet <p></p> </div></div></div></div><div id="footer-second" class="footer-widgets-box"><div id="text-3" class="footer-widget widget_text"> <div class="footer-widget-top"></div> <div class="footer-widget-container"> <div class="textwidget"><a href="https://qzoreteam.ru/nl/sitemap.xml">site`s kaart</a></div> </div> </div><div id="text-7" class="footer-widget widget_text"><div class="footer-widget-top"></div><div class="footer-widget-container"><div class="textwidget"><br> <a href="">Feedback</a> </div></div></div></div></div><div class="clear"></div> </footer> <div class="clear"></div> <div class="footer-bottom"> <div class="container"> <div class="alignright"></div> <div class="alignleft">© Copyright 2017, https://qzoreteam.ru</div> <div class="clear"></div> </div> </div> </div> </div> </div> <div id="topcontrol" class="fa fa-angle-up" title="Ga naar de bovenkant van de pagina"></div> <div id="fb-root"></div> <script type="text/javascript"> jQuery(function($) { $(document).on("click", ".pseudo-link", function() { window.open($(this).data("uri")); }); }); </script> <script type='text/javascript'> /* */ var tocplus = { "smooth_scroll": "1", "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "310px" }; /* */ </script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/table-of-contents-plus/front.min.js'></script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/wp-polls/polls-js.js'></script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/wp-postratings/js/postratings-js.js'></script> <script type='text/javascript'> /* */ var tie = { "mobile_menu_active": "true", "mobile_menu_top": "", "lightbox_all": "", "lightbox_gallery": "", "woocommerce_lightbox": "", "lightbox_skin": "dark", "lightbox_thumb": "vertical", "lightbox_arrows": "true", "sticky_sidebar": "", "is_singular": "1", "SmothScroll": "true", "reading_indicator": "", "lang_no_results": "\u041d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0448\u043b\u043e\u0441\u044c", "lang_results_found": "\u041d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b" }; /* */ </script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/themes/pochk/js/tie-scripts.js'></script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/themes/pochk/js/ilightbox.packed.js'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js'></script> <script type='text/javascript'> /* */ var gglcptch_pre = { "messages": { "in_progress": "\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0434\u043e\u0436\u0434\u0438\u0442\u0435\u0441\u044c \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 Google reCAPTCHA.", "timeout": "\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c Google reCAPTCHA. \u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0412\u0430\u0448\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a \u0441\u0435\u0442\u0438 \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443." } }; /* */ </script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/google-captcha/js/pre-api-script.js'></script> <script type='text/javascript' data-cfasync="false" async="async" defer="defer" src='https://www.google.com/recaptcha/api.js?onload=gglcptch_onload_callback&render=explicit'></script> <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/google-captcha/js/script.js'></script> <script type="text/javascript" src="https://qzoreteam.ru/wp-content/themes/pochk/my/my.js"></script> <script type="text/javascript" src="https://qzoreteam.ru/wp-content/themes/pochk/my/etimer.js"></script> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html>