HTML-formulieren. Labels voor formuliervelden. Voorbeeld: Eenvoudig HTML-formulier

laat een reactie achter 6,950

De meest gebruikte tag in formulieren is ... Het heeft geen eindlabel. Alle informatie die de browser moet verwerken, staat direct in de tag en wordt ingesteld met behulp van verschillende attributen. Semantiek varieert sterk, afhankelijk van de waarde van het attribuut type.

Tag attributen
type Het hoofdattribuut dat het type van het element specificeert. Als het attribuut niet is opgegeven, is de standaard tekst.
Mogelijke waarden:

Niet alle browsers ondersteunen de typen die zijn toegevoegd in HTML5.
Als de browser geen van de nieuwe typen ondersteunt, gaat hij ervan uit dat dit een type is. Hoe u ondersteuning voor oude browsers organiseert, wordt beschreven aan de hand van een datumvoorbeeld.

Automatisch aanvullen = "uit" Schakelt automatisch aanvullen voor dit veld uit. Zeer handig voor invoervelden voor eenmalige codes, captcha's, enz. .setAttribute ("automatisch aanvullen", "uit"); autofocus Automatisch scherpstellen bij het laden van de pagina. De waarde kan op drie manieren worden ingesteld: ... ... ... Een voorbeeld van het emuleren van de autofocus-eigenschap voor oudere browsers. uitgeschakeld Maakt het element niet beschikbaar. Niet-beschikbare items worden niet geüpload naar de server. naam De naam van het veld. Elk invoerveld dat je aanmaakt moet zijn eigen unieke naam hebben, anders bepaalt het script niet tot welke velden de ontvangen waarden behoren. Uiteraard moet de naam van het invoerveld overeenkomen met de naam die ervoor staat beschreven in het verwerkingsprogramma. waarde De standaardwaarde van het veld of het label op de knop. size De grootte van het typeveld. maxlength Beperk het aantal tekens dat in een typeveld kan worden ingevoerd. readonly = "readonly" of "" Voorkomt wijzigingen aan het item. verplicht Controleert automatisch of het veld is ingevuld.
Om een ​​correct ingevuld verplicht veld te markeren, kunt u de volgende stijlconstructie gebruiken: min Minimumwaarde van een getal in een veld van type nummer... max De maximale waarde van een getal in een veld van type nummer... stap Stap van het wijzigen van het nummer in het typeveld nummer... patroon Het patroon van het invoerveld. Controleren van de juistheid van gegevensinvoer. Voorbeeldsjablonen voor invoerpatroon voor html5-formulieren. tijdelijke aanduiding Tiptekst in het formulierveld, die automatisch verdwijnt wanneer het focusveld wordt ontvangen.
Een voorbeeld van het instellen van een tooltip-stijl:

IE en Firefox (tot versie 18) tijdelijke aanduiding wordt beschouwd als een pseudo-klasse, en in andere wordt het beschouwd als een pseudo-element.

RESULTAAT:

Lijst Een lijst met opties die u kunt selecteren terwijl u typt in het tekstvak.
In eerste instantie is deze lijst verborgen en wordt deze beschikbaar wanneer het veld focus krijgt of tijdens het typen.

INPUT Elementtypes

KNOP-knop

Knop KNOP is bedoeld voor die gevallen waarin u een script moet uitvoeren. Dat wil zeggen, er wordt een evenement aan de knop gehangen Aan de lik en de gewenste functie wordt aangeroepen. Attribuut waarde stelt het label op de knop in. Attribuut bij klikken specificeert een JavaScript-handler die wordt aangeroepen wanneer op de knop wordt geklikt. Attribuut naam dient voor JavaScript-naamgeving van de knop (deze wordt niet naar de server verzonden).

Voorbeeld

RESULTAAT:

Verzendknop

Deze knop is voor het indienen van een formulier. In de meeste browsers lijkt het bijna niet te onderscheiden van een knop. Het wordt zelf niet verzonden, maar dient alleen voor controle.

Attribuut bij klikken voor knop INDIENEN praktisch niet gebruikt, omdat het beter is om een ​​gebeurtenishandler te gebruiken onsubmit gespecificeerd in de tag

... Om de gegevens die in het formulier zijn ingevoerd over te dragen, is het in het algemeen immers helemaal niet nodig om op de knop te klikken. INDIENEN... U kunt gewoon op de toets op het toetsenbord drukken BINNENKOMEN terwijl in een tekstinvoerveld. Hiermee worden gegevens overgedragen.

Voorbeeld

RESULTAAT:

Attribuut waarde biedt bepaalde voordelen bij het gebruik van meer dan één gegevensoverdrachtknop. In dit geval kan het script op basis van de waarde van de ontvangen variabele bepalen hoe de ontvangen informatie verder moet worden verwerkt.

Voorbeeld

RESULTAAT:

Attribuut formulier niet valideren kan worden toegepast om validatie van formulierwaarden te voorkomen.

Voorbeeld


RESULTAAT:

Reset knop

Dit is de knop om het formulier te wissen. Wanneer erop wordt gedrukt, worden alle gewijzigde items teruggezet naar hun standaardwaarden. Het wordt zelden gebruikt. In sommige gevallen kan het echter heel nuttig zijn.

Tip: wees voorzichtig met de keuze van het label op de knop RESET... Iets als "Wissen", "Opnieuw beginnen", "Invoer verwijderen", enz. zal behoorlijk visueel zijn (en, belangrijker nog, intuïtief begrijpelijk, zelfs voor een theepot). In het algemeen is het noodzakelijk dat de gebruiker geen greintje twijfel heeft over het doel van deze sleutel.

Voorbeeld

RESULTAAT:

TEKST invoerveld

Het tekstinvoerveld is het meest gebruikte tekstvak op formulieren. Bovendien kan het met recht worden beschouwd als het belangrijkste en belangrijkste element van de formulieren. Dit type wordt gebruikt door de tag standaard kunt u dit leeg laten om een ​​tekstvak weer te geven. Als het echter nodig is om de stijl voor de selector in te stellen invoer, dan het attribuut typ = "tekst" kan niet worden overgeslagen.
De naam van het veld gespecificeerd door het attribuut naam, is altijd nodig, omdat op basis van deze parameter de browser het naam = waardepaar doorgeeft aan het script.

Voorbeeld

RESULTAAT:

De tekst "Ivanov" wordt als beginwaarde in het aangemaakte veld geplaatst. Als de gebruiker niets wijzigt of op de knop klikt, wordt de Ivanov-waarde als achternaam van de gebruiker naar het script gestuurd.

Nummer invoerveld NUMBER

Het veld is voor het invoeren van getallen. Het breukdeel bij het invoeren kan worden gescheiden door een punt (2.5) of een komma (2.5). Als de gebruiker letters invoert, wordt het formulier niet naar de server verzonden.

Voorbeeld

RESULTAAT:

U kunt de minimale, maximale waarde van het veld en de stap voor het wijzigen van het nummer instellen. De stapwaarde kan zowel positief als negatief zijn, maar moet groter zijn dan 0. Als het getal dat in het veld is ingevoerd niet aan de opgegeven limieten voldoet, wordt er niet naar de server verzonden.

Voorbeeld

RESULTAAT:

Om een ​​stap te specificeren, gebruik stap = "elke".

Voorbeeld

RESULTAAT:

Veld nummer wordt anders weergegeven: sommige browsers tonen altijd pijlen, andere alleen wanneer het veld erover zweeft of focus krijgt.

Wachtwoord

VERBORGEN verborgen veld

Dit is een speciaal (verborgen) type tekstvak. Als één script meerdere verschillende formulieren verwerkt, kunt u in het verborgen veld van elk formulier een identifier opgeven waarmee u kunt bepalen met welk formulier u te maken hebt.

Voorbeeld
... Andere vormelementen ....
... Andere vormelementen ...

De browser geeft het verborgen veld niet weer, hoewel het kan worden gedetecteerd door de browser in de HTML-weergavemodus te plaatsen en de tekst van de webpagina te ontleden. Verborgen velden zijn handig wanneer u informatie moet verstrekken die nodig is voor een script, maar u niet wilt dat de gebruiker er wijzigingen in kan aanbrengen. Houd er echter rekening mee dat een slimme gebruiker uw formulier in een bestand kan opslaan, het kan bewerken en dat formulier vervolgens in een gewijzigde vorm naar de server kan verzenden. Vertrouw daarom niet op verborgen velden om enige bescherming te bieden.

Voorbeeld

Het script krijgt een variabele met de naam FormVersie, waaraan de waarde 1.2 wordt toegekend. Deze informatie kan worden gebruikt om te bepalen hoe de rest van de van het formulier ontvangen informatie wordt verwerkt. Als de gebruiker deze waarde wijzigt, kan het scriptprogramma zich op onverwachte manieren gedragen.

Invoerveld e-mailadres

Om meerdere adressen in te voeren, kunt u het kenmerk toevoegen meerdere, en een komma (,) wordt gebruikt om adressen te scheiden

Voorbeeld

Met de komst van HTML5 zijn formulieren veelzijdiger geworden. Het invoerelement kan nu bevatten: e-mailadressen, datums en meer, ze kunnen naar wens worden gemarkeerd zonder toevlucht te nemen tot javascript - om maar een paar van de meer waardevolle functies te noemen. Ook kunt u nu voor één formulier meerdere verzendknoppen gebruiken en is het nu mogelijk om de verzendknop buiten het formulier te verplaatsen.

Meerdere indienen binnen één formulier

Tot voor kort kon er slechts één verzendknop in een formulier worden ingevoegd, anders verwerkte het formulier alleen de laatste knop. Door method = "post" en url toe te voegen aan het "form"-element van het formulier, krijgen we een werkend formulier.

Nu is de situatie veranderd - nieuwe eigenschappen "formmethod" en "formaction" zijn toegevoegd aan HTML. Hiermee kunt u de postmethode en url rechtstreeks aan de verzendknop toevoegen, zodat u niets aan het formulier hoeft toe te voegen. Door deze parameters aan de verzendknop te koppelen in plaats van aan het formulier, wordt het formulier flexibeler. Nu kunt u zoveel knoppen maken als nodig zijn voor het formulier.

Nu verwijst elke knop "verzenden" naar: andere url en dit alles elimineert de noodzaak om te schrijven javascript-code... Dit alles werkt prima en nu, wanneer je op een knop klikt, zal het formulier een formuliermethode en formaction ontvangen, die de standaard parameters methode en actie zal overschrijven. Als er een gewone knop "verzenden" in het formulier aanwezig is zonder nieuwe parameters, dan worden de waarden die voor het formulierelement zijn ingesteld teruggestuurd naar het formulier.

De formmethod en formaction eigenschappen worden ondersteund door alle populaire browsers

Formulierelementen (invoer, selecteren, tekstgebied) buiten het formulier

Het is een algemeen aanvaard feit dat alle vormelementen die erbij horen zich binnen het element moeten bevinden

... Dit vermindert de flexibiliteit bij het ontwerpen van de formulieren zelf. Dankzij het nieuwe attribuut "form" kan nu elk element buiten het formulier worden verplaatst en kan elk formulierelement overal op de pagina worden geplaatst. Om dit te doen, heb je alleen een formulier nodig voeg een ID toe en voeg vervolgens de waarde van die ID toe aan alle elementen als een attribuut.

Tegenwoordig wordt het form-attribuut door alle populaire browsers ondersteund, met uitzondering van Internet Explorer (tot versie 10).

Met formulieren kunnen gebruikers informatie invoeren. U bent waarschijnlijk meer dan eens allerlei tests, peilingen, peilingen tegengekomen. Om dit allemaal op uw webpagina's te doen, heeft u formulieren nodig.

Opgemerkt moet worden dat met html-formulieren op zichzelf u alleen informatie kunt invoeren, maar HTML weet niet hoe deze moet worden verwerkt (dit is nog steeds een opmaaktaal, geen programmering). Om informatie te verwerken, worden talen zoals javascript, php en andere gebruikt.

Maar alles heeft zijn tijd, terwijl we leren hoe we html-formulieren aan onze pagina's kunnen toevoegen, en we zullen leren hoe we informatie ervan kunnen verwerken in andere lessen die bijvoorbeeld aan javascript zijn gewijd.

dus binnen html-formulier gegeven door tags

... Alle andere formulierelementen bevinden zich tussen deze tags.

Label

er zijn verschillende parameters:

  • naam- de naam van het formulier. Noodzakelijk als er meerdere formulieren op de pagina staan
  • actie- definieert de URL waarnaar de door de gebruiker ingevoerde informatie wordt verzonden
  • methode- definieert de methode voor het verzenden van informatie
  • doel- geeft de naam aan van het venster waarin de resultaten van de verwerking van het ingediende formulier worden weergegeven
In dit stadium kunt u zich niet echt in deze parameters verdiepen, hun doel zal duidelijk worden bij het bestuderen van gegevensverwerkingstalen. Bedenk in de tussentijd dat alle formulierelementen tussen de tags staan.
:

Tekstveld

Een eenvoudig tekstvak van één regel waarin u tekst kunt invoeren en bewerken. Gespecificeerd door de tag

Resultaat:

Parameters:

  • naam- naam van het element,
  • type- het type van het element (in dit geval - tekst),
  • maat- de grootte van het tekstveld in tekens die tegelijkertijd zichtbaar zijn, wanneer u meer tekens invoert, zullen ze scrollen,
  • maximale lengte - maximaal aantal tekens die in het veld kunnen worden ingevoerd, als u deze parameter weglaat, is het aantal tekens onbeperkt,
  • waarde- de tekst die moet worden weergegeven (deze kan worden gewist), als deze parameter ontbreekt, is het veld leeg.
Er zijn nog twee parameters mogelijk:
  • gehandicapt- blokkeert het veld voor eventuele wijzigingen,
  • alleen lezen- maakt het veld alleen-lezen.
Voorbeeld:

Resultaat:

Wachtwoord tekstvak

Dit is hetzelfde tekstvak als vorig item... Het enige verschil is dat de tekst die u invoert niet wordt weergegeven, maar dat er speciale tekens, zoals sterretjes, verschijnen. Meestal gebruikt bij het invoeren van wachtwoorden. Alle parameters zijn hetzelfde als voor een eenvoudig tekstvak, behalve de parameter typ = "wachtwoord".

Voorbeeld:

Voer wachtwoord in:

Resultaat:

Voer wachtwoord in:
Probeer iets in dit veld in te voeren.

Selectievakjes

Je hebt zeker een soortgelijk element gezien:

Welke talen spreek je:
Engels Duits Spaans Frans

Het is nog steeds ingesteld met dezelfde tag. , met één tag die één selectievakje aangeeft. Je hebt vier selectievakjes nodig, je moet vier keer invoer schrijven.

Voorbeeld:

Welke talen spreek je:
Engels Duits Spaans Frans

Laten we de parameters ervan bekijken:

  • type- elementtype (in dit geval - selectievakje),
  • naam- de naam van het element, geeft aan de programmaverwerker van het formulier aan welk item de gebruiker heeft geselecteerd,
  • waarde- de waarde van het element, geeft aan de programmaverwerker van het formulier de waarde aan van het item dat de gebruiker heeft geselecteerd. In ons voorbeeld is het Engelse item geselecteerd, daarom ontvangt het handlerprogramma: lan1 = "english",
  • gecontroleerd- ze zijn meestal gemarkeerd met de meest waarschijnlijke items om te selecteren, de gebruiker kan andere items selecteren door met de muis te klikken.

    Schakelaars

    In tegenstelling tot selectievakjes kan slechts één item worden geselecteerd. In dit opzicht zijn de waarden van de parameter naam moet hetzelfde zijn voor alle elementen van de groep. Parameter typ = "radio", alle andere zijn hetzelfde als de selectievakjes.

    Geef je geslacht aan:
    mannelijk vrouwelijk

    Resultaat:

    Geef je geslacht aan:
    mannelijk vrouwelijk

    Toetsen

    Er zijn vier soorten knoppen:

    • indienen- knop voor het verzenden van de inhoud van het formulier naar de webserver. Zijn parameters:
      • typ = "verzenden"- knoptype,
      • naam- knop naam,
      • waarde- het opschrift op de knop.
    • afbeelding- een grafische knop om de inhoud van het formulier naar de webserver te sturen. Om het te gebruiken, moet u een afbeelding van een knop maken en deze vervolgens als een knop gebruiken. Zijn parameters:
      • typ = "afbeelding"- type grafische knop,
      • naam- knop naam,
      • src- het adres van de afbeelding voor de knop.
    • resetten- een knop waarmee u alle standaardwaarden in het formulier kunt herstellen. Zijn parameters:
      • typ = "resetten"- het type wisknop,
      • naam- knop naam,
      • waarde- het opschrift op de knop.
    • knop- een willekeurige knop, zijn acties worden door u toegewezen, d.w.z. ze weet zelf niet hoe ze iets moet doen. Zijn parameters:
      • typ = "knop"- het type van een willekeurige knop,
      • naam- knop naam,
      • waarde- het opschrift op de knop.
      • bij klikken- geeft aan wat te doen als op de knop wordt geklikt. Over het algemeen heeft dit type knop andere gebeurtenissen (bijvoorbeeld dubbelklikken), maar we zullen ze hier niet beschouwen.
    Als er meerdere knoppen op het formulier staan, moeten deze verschillende namen hebben.

    Voorbeeldcode:

    Resultaat:

    Knoppen kunnen anders worden ingesteld met behulp van tags ... De mogelijkheden van dergelijke knoppen zijn iets ruimer, ze kunnen inhoud hebben in de vorm van tekst of afbeeldingen. Deze tag heeft de volgende parameters:

    • type- type knop, kan waarden aannemen:
      • resetten- knop om het formulier te wissen,
      • indienen- knop voor het verzenden van gegevens,
      • knop- een willekeurige actieknop.
    • naam- knop naam,
    • waarde- het opschrift op de knop.
    Voorbeeldcode:
    versturen

    Resultaat:

    versturen
  • fysiek- transfer zowel op het scherm als bij het betreden van de server.
  • gehandicapt- inactief veld,
  • alleen lezen- alleen lezen is toegestaan.
    • Voorbeeld:

    Resultaat:

    Probeer wat tekst in te voeren en zie het verschil in de parameterwaarden wikkelen.

    Vervolgkeuzelijsten

    Lijsten zijn enkelvoudig selecteerbaar en meervoudig selecteerbaar. Beide worden gevraagd met behulp van tags , waarbinnen de elementen van de waarden zijn gespecificeerd door de tag ... Laten we eens kijken naar de parameters van deze tags:

    • , eindigend met een knop ... Het kostte veel moeite om de formulieren in verschillende browsers op te maken. Bovendien vereisten de formulieren het gebruik van JavaScript om de ingevoerde gegevens te valideren, en waren ook verstoken van specifieke typen invoervelden voor het specificeren van alledaagse informatie zoals datums, adressen E-mail en URL's.

      HTML5-formulieren 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: CSS3.

      Rijst. 1. Verbeterde webformulieren met HTML5

      HTML5-formulieren maken

      1. Element

      Elke vorm is gebaseerd op een element ...

      ... Het voorziet niet in gegevensinvoer, omdat het een container is die alle formulierbesturingselementen bij elkaar houdt - velden... De attributen van dit element bevatten informatie die voor alle formuliervelden geldt, dus u moet logisch gecombineerde velden in één formulier opnemen.

      Tabel 1. Tagkenmerken
      Attribuut Betekenis / Beschrijving
      accept-charset De attribuutwaarde is een spatie gescheiden tekencoderingslijst om bijvoorbeeld het formulier in te dienen .
      actie Vereist kenmerk: 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.
      In het geval dat al het werk aan de kant van de klant wordt gedaan JavaScript-scripts, dan kan de waarde # worden opgegeven voor het actiekenmerk.
      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:
      automatisch aanvullen

      enctype Gebruikt om aan te geven: MIME-type gegevens verzonden met het formulier, bijvoorbeeld enctype = "multipart / form-data". Alleen opgegeven als methode = "post".
      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.
      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.
      text / plain - geeft aan dat platte (geen html) tekst wordt verzonden.
      methode Specificeert hoe formuliergegevens worden doorgegeven.
      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.
      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.
      naam sets formulier naam te gebruiken om toegang te krijgen tot formulierelementen via scripts, bijvoorbeeld name = "opros".
      niet valideren Schakelt validatie uit op de knop voor het verzenden van het formulier. Het attribuut wordt gebruikt zonder een waarde op te geven
      doel Specificeert het venster waarnaar de informatie wordt geleid:
      _blank - nieuw venster
      _zelf - hetzelfde frame
      _parent - het bovenliggende frame (als het bestaat, zo niet, dan naar het huidige)
      _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.

      2. Formulierelementen groeperen

      Element

      ...
      is bedoeld voor het groeperen van aan elkaar gerelateerde elementen, waardoor de vorm in logische fragmenten wordt opgedeeld.

      Elke groep elementen kan een naam krijgen met behulp van het element die volgt op de tag

      ... De groepsnaam verschijnt links in de bovenrand
      ... Als het element . bijvoorbeeld
      contactgegevens worden opgeslagen:

      Contactgegevens


      Rijst. 2. Formulierelementen groeperen met behulp van

      Tabel 2. Kenmerken van de tag
      Attribuut Betekenis / Beschrijving
      gehandicapt Als het attribuut aanwezig is, dan een groep gerelateerde vormelementen die zich in de container bevinden
      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 -
      .
      formulier
      in hetzelfde document. Geeft een of meer vormen aan waarvoor de deze groep elementen. Het kenmerk wordt momenteel door geen enkele browser ondersteund.
      naam definieert naam 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.

      3. Formuliervelden maken

      Element maakt de meeste formuliervelden aan. Elementattributen 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, evenals randen, achtergrondkleur en achtergrond afbeelding... De veldbreedte is ingesteld breedte eigenschap.

      Tabel 3. Tagkenmerken
      Attribuut Betekenis / Beschrijving
      aanvaarden Specificeert het type bestand dat naar de server mag worden verzonden. Alleen aangegeven voor ... Mogelijke waarden:
      file_extension - staat het uploaden van bestanden toe met de opgegeven extensie, bijvoorbeeld accept = ".gif", accept = ".pdf", accept = ".doc"
      audio / * - staat het downloaden van audiobestanden toe
      video / * - maakt het uploaden van videobestanden mogelijk
      afbeelding / * - staat het uploaden van afbeeldingen toe
      media_type - geeft het mediatype van de geüploade 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 deze automatisch te vervangen bij daaropvolgende invoer:
      aan - betekent dat het veld niet is beveiligd en dat de waarde ervan kan worden opgeslagen en opgehaald,
      uit - schakelt automatisch aanvullen voor formuliervelden uit.
      autofocus 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.
      gecontroleerd 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".
      gehandicapt
      formulier De attribuutwaarde moet gelijk zijn aan het id-attribuut van het element in hetzelfde document. Specificeert een of meer formulieren waartoe dit formulierveld behoort.
      formatie 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.
      vormtype 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:
      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)
      multipart / form-data - tekens zijn niet gecodeerd
      tekst / platte - spaties worden vervangen door het +-teken en speciale tekens worden niet gecodeerd.
      vormmethode 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:
      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
      post - Formuliergegevens worden verzonden als een http-verzoek.
      formulier niet valideren 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.
      vormdoel 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.


      _parent - Laadt het antwoord op het bovenliggende frame
      _top - laadt het antwoord op volledig scherm
      framename - Laadt het antwoord in een frame met de opgegeven naam.
      hoogte 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 ... Het wordt aanbevolen om zowel de hoogte als de breedte van het veld tegelijkertijd in te stellen.
      lijst Is een verwijzing naar een item? , 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.
      max Hiermee kunt u geldige numerieke invoer beperken tot de maximale waarde, de kenmerkwaarde kan 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 veldtypen: getal, bereik, datum, datum/tijd, datum/tijd-lokaal, maand, tijd en week.
      maximale lengte Het attribuut specificeert het maximum aantal tekens dat in het veld kan worden ingevoerd. De standaardwaarde is 524288 tekens.
      min Hiermee kunt u geldige numerieke invoer beperken tot de minimumwaarde.
      meerdere Hiermee kan de gebruiker meerdere attribuutwaarden invoeren, gescheiden door een komma. Geldt voor bestanden en e-mailadressen. Opgegeven zonder een attribuutwaarde.
      naam Specificeert de naam die zal worden gebruikt om toegang te krijgen tot het element , bijvoorbeeld in tabellen css-stijlen... Analoog aan het id-attribuut.
      patroon Hiermee kunt u definiëren met behulp van reguliere expressie de syntaxis van de gegevens die in een specifiek veld moeten worden toegestaan. Bijvoorbeeld patroon = "(3) - (3)" - vierkante haakjes stel het bereik van geldige tekens in, in dit geval elke kleine letters, geeft het getal tussen accolades aan dat drie kleine letters nodig zijn, gevolgd door een streepje, gevolgd door drie cijfers van 0 tot 9.
      tijdelijke aanduiding Bevat de tekst die vóór het invullen in het invoerveld wordt weergegeven (meestal is dit een hint).
      alleen lezen 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.
      vereist 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.
      maat 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.
      src Specificeert de url van een afbeelding die moet worden gebruikt als knop voor het indienen van formuliergegevens. Alleen opgegeven voor het veld .
      stap Gebruikt voor items die invoer vereisen numerieke waarden, geeft de hoeveelheid aan waarmee de waarden moeten worden verhoogd of verlaagd tijdens het aanpassen van het bereik (stap).
      type knop - maakt een knop aan.
      checkbox - verandert het invoerveld in een checkbox die bijvoorbeeld kan worden aangevinkt of gewist
      ik heb een auto
      kleur - Genereert kleurkiezers in ondersteunende browsers, waardoor gebruikers kleurwaarden in hexadecimaal formaat kunnen selecteren.
      datum - hiermee kunt u een datum invoeren in het formaat dd.mm.jjjj.
      Verjaardag:
      datetime-local - hiermee kunt u de datum en tijd invoeren, gescheiden door een Engelse hoofdletter T volgens het patroon dd.mm.yyyy uu: mm.
      Verjaardag - dag en tijd:
      e-mail - browsers die ondersteuning bieden voor gegeven attribuut verwacht dat de gebruiker gegevens invoert die overeenkomen met de syntaxis van e-mailadressen.
      E-mail:
      bestand - hiermee kunt u bestanden uploaden vanaf de computer van de gebruiker.
      Selecteer een bestand:
      verborgen - Verbergt een besturingselement dat niet zichtbaar is voor de browser en voorkomt dat de gebruiker de standaardwaarden wijzigt.
      afbeelding - maakt een knop waarmee u een afbeelding kunt invoegen in plaats van de tekst op de knop.
      maand - Hiermee kan de gebruiker het jaar en de maand invoeren met het patroon jjjj-mm.
      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.
      Geef het aantal aan (van 1 tot 5):
      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.
      Voer wachtwoord in:
      radio - maakt een keuzerondje - een besturingselement 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 - maakt een knop die de formuliervelden wist van door de gebruiker ingevoerde gegevens.
      zoeken - geeft een zoekveld aan, standaard is het invoerveld rechthoekig.
      Zoekopdracht:
      indienen - maakt standaard knop klikbaar. De knop verzamelt informatie uit het formulier en dient deze in voor verwerking.
      tekst - Maakt tekstvakken op een formulier, waarbij een tekstvak van één regel wordt weergegeven voor het invoeren van tekst.
      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.
      Geef de tijd op:
      url - het veld is bedoeld voor het specificeren van URL-adressen.
      Hoofdpagina:
      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.
      Geef de week aan:
      waarde Specificeert de tekst die wordt weergegeven op een knop, in een vak of bijbehorende tekst. 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 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.

      Tabel 4. Tagkenmerken

      7. Knoppen

      Element maakt klikbare knoppen. In tegenstelling tot gemaakte knoppen ( , , , ), binnen het element .

      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.

      Tabel 9. Tagkenmerken
      Attribuut Betekenis / Beschrijving
      autofocus Stelt de focus in op een knop bij het laden van de pagina.
      gehandicapt Schakelt de knop uit, waardoor deze niet klikbaar is.
      formulier Geeft een of meer formulieren aan waartoe deze knop behoort. De attribuutwaarde is de identifier van het corresponderende formulier.
      formatie De attribuutwaarde bevat de url van de handler voor de formuliergegevens die worden verzonden wanneer op de knop wordt geklikt. Alleen voor een knop van het type = "submit". Overschrijft de waarde van het actiekenmerk dat is opgegeven voor het element .
      vormtype Specificeert het type codering van de formuliergegevens voordat deze naar de server worden verzonden wanneer op knoppen van het type type = "submit" wordt geklikt. Overschrijft de waarde van het enctype attribuut gespecificeerd voor het element ... Mogelijke waarden:
      application / x-www-form-urlencoded is de standaard. Alle tekens worden gecodeerd voordat ze worden verzonden.
      multipart / form-data - tekens zijn niet gecodeerd. Wordt gebruikt wanneer bestanden worden geüpload met behulp van een formulier.
      tekst / gewoon - tekens worden niet gecodeerd en spaties worden vervangen door het +-teken.
      vormmethode Het attribuut definieert de methode die de browser zal gebruiken om het formulier in te dienen. Overschrijft de waarde van het methode-attribuut gespecificeerd op het element ... Het wordt alleen gespecificeerd voor knoppen van het type = "submit". Mogelijke waarden:
      get - gegevens van het formulier (naam / waarde-paar) worden toegevoegd aan de url 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 van het formulier worden toegevoegd als een http-verzoek. De methode is betrouwbaarder en veiliger dan get en heeft geen maximale grootte.
      formulier niet valideren Het attribuut geeft aan dat formuliergegevens niet moeten worden gevalideerd bij indiening. Het wordt alleen gespecificeerd voor knoppen van het type = "submit".
      vormdoel Het attribuut geeft aan in welk venster het resultaat moet worden weergegeven nadat het formulier is verzonden. Het wordt alleen gespecificeerd voor knoppen van het type = "submit". Overschrijft de waarde van het doelkenmerk dat is opgegeven voor het element .
      _blank - laadt het antwoord in een nieuw venster / tabblad
      _self - laadt het antwoord in hetzelfde venster (standaard)
      _parent - Laadt het antwoord op het bovenliggende frame
      _top - laadt het antwoord op volledig scherm
      framename - Laadt het antwoord in een frame met de opgegeven naam.
      naam Specificeert de naam van de knop, de attribuutwaarde is tekst. Wordt gebruikt om te linken naar formuliergegevens nadat het formulier is ingediend, of om te linken naar een bepaalde knop(pen) in JavaScript.
      type Definieert het type van de knop. Mogelijke waarden:
      knop - klikbare knop
      reset - reset-knop, geeft de oorspronkelijke waarde terug
      indienen - een 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 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 al aangevinkt op de bijbehorende formuliervelden wanneer de pagina wordt geladen.

      Element

      Attribuut bevat een DOMString die wordt weergegeven als het label van de knop. Knoppen hebben anders geen echte waarde.

      Als u geen waarde opgeeft, heeft de knop een standaardlabel, gekozen door de gebruikersagent... Dit label is waarschijnlijk iets in de trant van "Submit" of "Submit Query". Hier is een voorbeeld van een verzendknop met een standaardlabel in uw browser:

      Extra attributen

      vormtype

      Een tekenreeks die de coderingsmethode identificeert die moet worden gebruikt bij het verzenden van de formuliergegevens naar de server. Er zijn drie toegestane waarden:

      Toepassing / x-www-form-urlencoded Dit, de standaardwaarde, verzendt de formuliergegevens als een tekenreeks nadat de URL de tekst codeert met behulp van een algoritme zoals. multipart / form-data Gebruikt de FormData API om de gegevens te beheren, zodat bestanden naar de server kunnen worden verzonden. U moeten gebruik dit coderingstype als uw formulier een element bevat dat wordt gebruikt om interactieve besturingselementen voor webgebaseerde formulieren te creëren om gegevens van de gebruiker te accepteren; er is een grote verscheidenheid aan typen invoergegevens en besturingswidgets beschikbaar, afhankelijk van het apparaat en de user-agent. "> elementen van het type bestand ( ). tekst / platte tekst; meestal alleen nuttig voor het debuggen, zodat u gemakkelijk de gegevens kunt zien die moeten worden ingediend.

      Indien gespecificeerd, overschrijft de waarde van het formenctype attribuut het action attribuut van het eigenaarsformulier.

      vormmethode

      Een tekenreeks die de HTTP-methode aangeeft die moet worden gebruikt bij het indienen van de gegevens van het formulier; deze waarde overschrijft elk methodekenmerk dat op het eigenaarsformulier wordt gegeven. Toegestane waarden zijn:

      Ophalen Een URL wordt geconstrueerd door te beginnen met de URL die wordt gegeven door het attribuut formaction of action, een vraagteken ("?") Teken toe te voegen en vervolgens de gegevens van het formulier toe te voegen, gecodeerd zoals beschreven door formenctype of het attribuut form's enctype. Deze URL wordt vervolgens met een HTTP-verzoek naar de server gestuurd. Deze methode werkt goed voor eenvoudige formulieren die alleen ASCII-tekens bevatten en geen bijwerkingen hebben. Dit is de standaardwaarde. post De gegevens van het formulier zijn opgenomen in de hoofdtekst van het verzoek dat wordt verzonden naar de URL die wordt gegeven door het formaction- of action-attribuut met behulp van een HTTP-postverzoek. Deze methode ondersteunt complexe gegevens en bestandsbijlagen. dialoog Deze methode wordt gebruikt om aan te geven dat de knop sluit eenvoudig het dialoogvenster waarmee de invoer is geassocieerd en verzendt de formuliergegevens helemaal niet.

      formulier niet valideren

      Een Booleaans attribuut dat, indien aanwezig, aangeeft dat het formulier niet moet worden gevalideerd voordat het naar de server wordt verzonden. Dit overschrijft de waarde van het novalidate attribuut op de eigendomsvorm van het element.

      vormdoel

      Een tekenreeks die een naam of trefwoord specificeert die aangeeft waar het antwoord moet worden weergegeven dat is ontvangen na het indienen van het formulier. De string moet de naam zijn van a browse-context(dat wil zeggen, een tabblad, venster of) vertegenwoordigt een geneste browsecontext, waarbij een andere HTML-pagina in de huidige wordt ingesloten. ">