HTML
Invoerbesturingselementen

Invoering

Syntaxis

• <input type="" name="" value="">

parameters

Opmerkingen

Selectievakje en keuzerondjes

Overzicht

Selectievakjes en keuzerondjes worden geschreven met de HTML-tag <input> en hun gedrag wordt gedefinieerd in de HTML-specificatie .

De eenvoudigste selectievakje of keuzerondje een <input> element met een type attribuut van checkbox of radio respectievelijk:

<input type="checkbox">
<input type="radio">

Een enkel stand-alone checkbox-element wordt gebruikt voor een enkele binaire optie zoals een ja-of-nee-vraag. Selectievakjes zijn onafhankelijk, wat betekent dat de gebruiker zoveel keuzes kan selecteren als hij wil in een groep selectievakjes. Met andere woorden, als u het ene selectievakje aanvinkt, worden de andere selectievakjes in de selectievakgroep niet uitgeschakeld.

Radio knoppen komen meestal in groepen (als het niet gegroepeerd met andere radio-knop, je waarschijnlijk bedoeld om een checkbox gebruiken in plaats) geïdentificeerd met behulp van dezelfde name attribuut op alle knoppen binnen die groep. De selectie keuzerondjes sluiten elkaar uit , wat betekent dat de gebruiker slechts één keuze uit een groep keuzerondjes kan selecteren. Wanneer een keuzerondje is aangevinkt, wordt elk ander keuzerondje met dezelfde name die eerder was aangevinkt, uitgeschakeld.

Voorbeeld:

<input type="radio" name="color" id="red" value="#F00">
<input type="radio" name="color" id="green" value="#0F0">
<input type="radio" name="color" id="blue" value="#00F">

Wanneer bekeken, verschijnen keuzerondjes als een cirkel (niet aangevinkt) of een gevulde cirkel (aangevinkt). Selectievakjes worden weergegeven als een vierkant (niet aangevinkt) of een gevuld vierkant (aangevinkt). Afhankelijk van de browser en het besturingssysteem heeft het vierkant soms afgeronde hoeken.

attributen

selectievakjes en keuzerondjes hebben een aantal attributen om hun gedrag te regelen:

value

Net als elk ander invoerelement geeft het value de tekenreekswaarde aan die moet worden gekoppeld aan de knop in het geval van formulierverzending. Selectievakjes en keuzerondjes zijn echter speciaal omdat wanneer de waarde wordt weggelaten, deze standaard wordt on wanneer deze wordt verzonden, in plaats van een lege waarde te verzenden. Het value wordt niet weerspiegeld in het uiterlijk van de knop.

checked

Het checked kenmerk geeft de begintoestand van een selectievakje of keuzerondje aan. Dit is een booleaanse eigenschap en kan worden weggelaten.

Elk van deze zijn geldige, gelijkwaardige manieren om een aangevinkt keuzerondje te definiëren:

<input checked>
<input checked="">
<input checked="checked">
<input checked="ChEcKeD">

De afwezigheid van het checked kenmerk is de enige geldige syntaxis voor een niet-aangevinkte knop:

<input type="radio">
<input type="checkbox">

Bij het resetten van een <form> keren de selectievakjes en keuzerondjes terug naar de status van hun checked kenmerk.

Toegankelijkheid

labels

Om context te geven aan de knoppen en gebruikers te laten zien waar elke knop voor is, moet elk van hen een label hebben. Dit kan worden gedaan met behulp van een <label> -element om de knop in te wikkelen. Hierdoor wordt het label klikbaar, zodat u de bijbehorende knop selecteert.

Voorbeeld:

<label>
  <input type="radio" name="color" value="#F00">
  Red
</label>

of met een <label> -element met een for kenmerk ingesteld op het id kenmerk van de knop:

<input type="checkbox" name="color" value="#F00" id="red">
<label for="red">Red</label>

Knopgroepen

Omdat elk keuzerondje van invloed is op de anderen in de groep, is het gebruikelijk om een label of context te geven voor de hele groep keuzerondjes.

Om een label voor de hele groep te bieden, moeten de keuzerondjes worden opgenomen in een element <fieldset> met een element <legend> erin.

Voorbeeld:

<fieldset>
  <legend>Theme color:</legend>
  <p>
    <input type="radio" name="color" id="red" value="#F00">
    <label for="red">Red</label>
  </p>
  <p>
    <input type="radio" name="color" id="green" value="#0F0">
    <label for="green">Green</label>
  </p>
  <p>
    <input type="radio" name="color" id="blue" value="#00F">
    <label for="blue">Blue</label>
  </p>
</fieldset>

Selectievakjes kunnen ook op dezelfde manier worden gegroepeerd, met een veldset en legenda die de groep gerelateerde selectievakjes identificeren. Houd er echter rekening mee dat selectievakjes niet dezelfde naam mogen hebben, omdat ze elkaar niet uitsluiten. Als u dit doet, zal het formulier meerdere waarden voor dezelfde sleutel indienen en niet alle server-side talen verwerken dit op dezelfde manier (ongedefinieerd gedrag). Elk selectievakje moet een unieke naam hebben of een reeks vierkante haken ( [] ) gebruiken om aan te geven dat het formulier een reeks waarden voor die sleutel moet indienen. Welke methode u kiest, moet afhangen van hoe u van plan bent om de formuliergegevens client-side of server-side te verwerken. Je moet ook de legenda kort houden, omdat sommige combinaties van browsers en schermlezers de legenda vóór elk invoerveld in de veldset lezen.

Verborgen

<input type="hidden" name="inputName" value="inputValue">  

Een verborgen invoer is niet zichtbaar voor de gebruiker, maar de waarde ervan wordt naar de server verzonden wanneer het formulier toch wordt verzonden.

Wachtwoord

<input type="password" name="password">

Het invoerelement met een typekenmerk waarvan de waarde password maakt een tekstveld met één regel dat lijkt op het invoertype type=text , behalve dat tekst niet wordt weergegeven wanneer de gebruiker deze invoert .

<input type="password" name="password" placeholder="Password">

Plaatsaanduidingstekst wordt weergegeven als platte tekst en wordt automatisch overschreven wanneer een gebruiker begint te typen.

Opmerking: sommige browsers en systemen wijzigen het standaardgedrag van het wachtwoordveld om ook het meest recent getypte teken voor een korte duur weer te geven, zoals:

voorleggen

<input type="submit" value="Submit">

Een verzendinvoer maakt een knop die het formulier verzendt wanneer erop wordt geklikt.

U kunt ook het element <button> als u een verzendknop nodig hebt die eenvoudiger kan worden gestileerd of andere elementen bevat:

<button type="submit">
  <img src="submit-icon.jpg" /> Submit
</button>

het dossier

<input type="file" name="fileSubmission">

Met bestandsinvoer kunnen gebruikers een bestand uit hun lokale bestandssysteem selecteren voor gebruik met de huidige pagina. Indien gebruikt in combinatie met een form , kunnen ze worden gebruikt om gebruikers toe te staan bestanden naar een server te uploaden (zie Bestanden uploaden ) voor meer informatie.

In het volgende voorbeeld kunnen gebruikers de file gebruiken om een bestand uit hun bestandssysteem te selecteren en dat bestand te uploaden naar een script op de server met de naam upload_file.php .

<form action="upload_file.php" method="post" enctype="multipart/form-data">
    Select file to upload:
    <input type="file" name="fileSubmission" id="fileSubmission">
    <input type="submit" value="Upload your file" name="submit">
</form>

Meerdere bestanden

Door het multiple attribuut toe te voegen, kan de gebruiker meer dan één bestand selecteren:

<input type="file" name="fileSubmission" id="fileSubmission" multiple>

Accepteer bestanden

Acceptattribuut specificeert het type bestanden dat de gebruiker kan selecteren. Bijvoorbeeld .png , .gif , .jpeg .

<input type="file" name="fileSubmission" accept="image/x-png,image/gif,image/jpeg" />

Input validatie

HTML-invoervalidatie wordt automatisch door de browser uitgevoerd op basis van speciale kenmerken op het invoerelement. Het kan JavaScript-invoervalidatie gedeeltelijk of volledig vervangen. Dit soort validatie kan door de gebruiker worden omzeild via speciaal vervaardigde HTTP-aanvragen, dus het vervangt servervalideringangsvalidatie niet. De validatie vindt alleen plaats wanneer u probeert het formulier in te dienen, dus alle beperkte invoer moet zich in een formulier bevinden om validatie te kunnen uitvoeren (tenzij u JavaScript gebruikt). Houd er rekening mee dat ingangen die zijn uitgeschakeld of alleen-lezen geen validatie activeren.

Sommige nieuwere invoertypen (zoals email , url , tel , date en nog veel meer) worden automatisch gevalideerd en vereisen geen eigen validatiebeperkingen.

<input required>

Minimale / maximale lengte

Gebruik de minlength en maxlength attributen aan de eisen van de lengte aan te geven. De meeste browsers voorkomen dat de gebruiker meer dan max. Tekens in het vak typt, waardoor ze hun invoer ongeldig kunnen maken, zelfs voordat ze proberen in te dienen.

<input minlength="3">
<input maxlength="15">
<input minlength="3" maxlength="15">

Een bereik opgeven

Gebruik min en max attributen om te zien welke getallen beperkt een gebruiker ingevoerd in een ingang van het type number of range

Marks: <input type="number" size="6" name="marks" min="0" max="100" />
Subject Feedback: <input type="range" size="2" name="feedback" min="1" max="5" />

<input pattern="\d*" title="Numbers only, please.">

<input type="file" accept="image/*" title="Only images are allowed">

<input type="file" accept="image/*,.rar,application/zip">

Opmerking: Het novalidate kenmerk novalidate aan het form of het kenmerk formnovalidate aan de knop formnovalidate , voorkomt validatie op formulierelementen. Bijvoorbeeld:

<form>
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input pattern="\d*" name="number" required>

    <input type="submit" value="Publish"> <!-- form will be validated -->
    <input type="submit" value="Save" formnovalidate> <!-- form will NOT be validated -->
</form>

Het formulier heeft velden die vereist zijn voor het "publiceren" van het concept, maar zijn niet vereist voor het "opslaan" van het concept.

Reset

<input type="reset" value="Reset">

Een invoer van het type reset maakt een knop die, wanneer erop wordt geklikt, alle invoer in de vorm waarin deze is opgeslagen, terugzet naar de standaardstatus.

• Tekst in een invoerveld wordt opnieuw ingesteld op blanco of de standaardwaarde (opgegeven met behulp van het value ).
• Alle opties in een selectiemenu worden gedeselecteerd, tenzij ze het selected kenmerk hebben.
• Alle selectievakjes en keuzevakken worden uitgeschakeld, tenzij ze het checked kenmerk hebben.

Opmerking: een resetknop moet zich binnenin of aan (via het form ) een <form> -element bevinden om enig effect te hebben. De knop reset alleen de elementen in dit formulier.

Aantal

<input type="number" value="0" name="quantity">

Tel

<input type="tel" value="+8400000000">

Het invoerelement met een typekenmerk waarvan de waarde tel vertegenwoordigt een besturingselement voor het bewerken van een regel met één regel voor het invoeren van een telefoonnummer.

E-mail

<form>
  <label>E-mail: <label>
  <input type="email" name="email">
</form>

Knop

<input type="button" value="Button Text">

Knoppen kunnen worden gebruikt om acties op de pagina te activeren zonder het formulier te verzenden. U kunt ook het element <button> als u een knop nodig hebt die eenvoudiger kan worden gestileerd of andere elementen bevat:

<button type="button">Button Text</button>

Knoppen worden meestal gebruikt met een "onclick" -gebeurtenis:

<input type="button" onclick="alert('hello world!')" value="Click Me">

of

<button type="button" onclick="alert('hello world!')">Click Me</button>

attributen

[name]

De name van de knop, die wordt ingediend met de formuliergegevens.

[type]

Het type knop.

Mogelijke waarden zijn:

submit : de knop verzendt de formuliergegevens naar de server. Dit is de standaardwaarde als het kenmerk niet is opgegeven of als het kenmerk dynamisch wordt gewijzigd in een lege of ongeldige waarde.

reset : de knop reset alle bedieningselementen naar hun beginwaarden.

button : de knop heeft geen standaardgedrag. Het kan client-side scripts hebben die zijn gekoppeld aan de gebeurtenissen van het element, die worden geactiveerd wanneer de gebeurtenissen plaatsvinden.

menu : De knop opent een pop-upmenu dat is gedefinieerd via het toegewezen element.

[value]

De beginwaarde van de knop.

Kleur

<input type="color" name="favcolor" value="#ff0000">

url

<input type="url" name="Homepage">

Datum

<input type="date" />

DateTime-Local

<input type="datetime-local" />

Beeld

<input type="image" src="img.png" alt="image_name" height="50px" width="50px"/>

Een afbeelding. U moet het kenmerk src gebruiken om de bron van de afbeelding te definiëren en het kenmerk alt om alternatieve tekst te definiëren. U kunt de hoogte- en breedtekenmerken gebruiken om de grootte van de afbeelding in pixels te definiëren.

reeks

<input type="range" min="" max="" step="" />

Maand

<input type="month" />

Tijd

<input type="time" />

19:04:39
08:20:39.04

Week

<input type="week" />

Tekst

Het meest elementaire invoertype en de standaardinvoer als er geen type is opgegeven. Dit invoertype definieert een tekstveld met één regel waarbij regeleinden automatisch worden verwijderd uit de invoerwaarde. Alle andere tekens kunnen hierin worden ingevoerd. <input> -elementen worden binnen een <form> -element gebruikt om invoerbesturingselementen te declareren waarmee gebruikers gegevens kunnen invoeren.

Syntaxis

<input type="text">

of (zonder een type , met behulp van het standaardkenmerk):

<input>

De standaardbreedte van een tekstveldinvoer is 20 tekens. Dit kan worden gewijzigd door een waarde op te geven voor het kenmerk size als volgt:

<input type="text" size="50">

Het size is duidelijk anders dan het instellen van een breedte met CSS. Het gebruik van een breedte definieert een specifieke waarde (in aantal pixels, percentage van het bovenliggende element, enz.) Dat de invoer altijd breed moet zijn. Het gebruik van de size berekent de toe te wijzen breedte op basis van het gebruikte lettertype en hoe breed de tekens normaal zijn.

Opmerking: Het gebruik van het attribuut size beperkt niet inherent het aantal tekens dat in het vak kan worden ingevoerd, alleen hoe breed het vak wordt weergegeven. Zie Invoervalidatie voor het beperken van de lengte.

Een invoerveld staat slechts één tekstregel toe. Als u een tekstinvoer met meerdere regels nodig hebt voor een aanzienlijke hoeveelheid tekst, gebruikt u in plaats daarvan een element <textarea> .

Zoeken

<input type="search" name="googlesearch">

DateTime (wereldwijd)

Het invoerelement met een typekenmerk waarvan de waarde " datetime " is, vertegenwoordigt een besturingselement voor het instellen van de waarde van het element op een tekenreeks die een globale datum en tijd vertegenwoordigt (met tijdzone-informatie).

<fieldset>
   <p><label>Meeting time: <input type=datetime name="meeting.start"></label>
</fieldset>

Toegestane attributen:

• globale attributen
• naam
• gehandicapt
• het formulier
• type
• autocomplete
• autofocus
• lijst
• min & max
• stap (zwevend)
• alleen lezen
• vereiste waarde