HTML
Eingabesteuerelemente

Einführung

Syntax

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

Parameter

Bemerkungen

Kontrollkästchen und Optionsfelder

Überblick

Kontrollkästchen und Optionsfelder werden mit dem HTML-Tag <input> und ihr Verhalten wird in der HTML-Spezifikation definiert .

Das einfachste Kontrollkästchen oder Optionsfeld ist ein <input> Element mit einem type - Attribute checkbox oder radio jeweils:

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

Ein einzelnes eigenständiges Kontrollkästchenelement wird für eine einzelne binäre Option verwendet, beispielsweise für eine Ja-Nein-Frage. Ankreuzfelder sind unabhängig, dh der Benutzer kann in einer Gruppe von Ankreuzfeldern beliebig viele Auswahlmöglichkeiten auswählen. Wenn Sie also ein Kontrollkästchen aktivieren, werden die anderen Kontrollkästchen in der Kontrollkästchengruppe nicht deaktiviert.

Radio - Buttons in der Regel in Gruppen kommen identifiziert (wenn es nicht mit einem anderen Optionsfeld gruppiert ist, werden Sie wahrscheinlich eine Checkbox stattdessen verwenden gemeint ist ) unter Verwendung des gleichen name - Attribut für alle Tasten in dieser Gruppe. Die Auswahl der Optionsfelder schließt sich gegenseitig aus , dh der Benutzer kann nur eine Auswahl aus einer Gruppe von Optionsfeldern auswählen. Wenn ein Optionsfeld aktiviert ist, wird jedes andere Optionsfeld mit demselben name , das zuvor aktiviert wurde, deaktiviert.

Beispiel:

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

Bei der Anzeige werden Optionsfelder als Kreis (nicht markiert) oder als gefüllter Kreis (aktiviert) angezeigt. Kontrollkästchen werden als Quadrat (nicht angehakt) oder als ausgefülltes Quadrat (aktiviert) angezeigt. Je nach Browser und Betriebssystem hat das Quadrat manchmal abgerundete Ecken.

Attribute

Kontrollkästchen und Optionsfelder verfügen über eine Reihe von Attributen, um ihr Verhalten zu steuern:

value

Wie jedes andere Eingabeelement gibt das value Attribut den Zeichenfolgenwert an, der der Schaltfläche im Falle der Formularübermittlung zugeordnet werden soll. Allerdings sind Checkboxen und Radiobuttons spezielle, dass , wenn der Wert nicht angegeben wird, wird standardmäßig on , wenn vorgelegt, anstatt einen leeren Wert zu senden. Das value Attribut wird nicht im Erscheinungsbild der Schaltfläche angezeigt.

checked

Das checked Attribut gibt den Anfangsstatus eines Kontrollkästchens oder eines Optionsfelds an. Dies ist ein boolesches Attribut und kann weggelassen werden.

Jede dieser Optionen ist eine gültige, gleichwertige Methode zum Definieren eines aktivierten Optionsfelds:

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

Das Fehlen des checked Attributs ist die einzige gültige Syntax für eine ungeprüfte Schaltfläche:

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

Wenn Sie ein <form> zurücksetzen, werden die Kontrollkästchen und Optionsfelder auf den Status ihres checked Attributs zurückgesetzt.

Zugänglichkeit

Etiketten

Um den Schaltflächen einen Kontext zu geben und den Benutzern zu zeigen, wozu jede Schaltfläche dient, sollte jede von ihnen eine Bezeichnung haben. Dies kann mit einem <label> -Element durchgeführt werden, um die Schaltfläche einzuwickeln. Dadurch wird das Etikett auch anklickbar, sodass Sie die entsprechende Schaltfläche auswählen.

Beispiel:

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

oder mit einem <label> -Element mit einem for Attribut auf das id Attribut der Schaltfläche:

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

Schaltflächengruppen

Da jedes Optionsfeld die anderen in der Gruppe beeinflusst, ist es üblich, eine Beschriftung oder einen Kontext für die gesamte Gruppe von Optionsfeldern anzugeben.

Um eine Beschriftung für die gesamte Gruppe bereitzustellen, sollten die Optionsfelder in einem <fieldset> -Element mit einem <legend> -Element enthalten sein.

Beispiel:

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

Kontrollkästchen können auch auf ähnliche Weise gruppiert werden, wobei ein Feldset und eine Legende die Gruppe der zugehörigen Kontrollkästchen angeben. Beachten Sie jedoch, dass Kontrollkästchen nicht denselben Namen haben sollten, da sie sich nicht gegenseitig ausschließen. Dies führt dazu, dass das Formular mehrere Werte für denselben Schlüssel übermittelt, und nicht alle serverseitigen Sprachen behandeln dies auf dieselbe Weise (undefiniertes Verhalten). Jedes Kontrollkästchen sollte entweder einen eindeutigen Namen haben oder eine Reihe von eckigen Klammern ( [] ) verwenden, um anzugeben, dass das Formular ein Array mit Werten für diesen Schlüssel übermitteln soll. Welche Methode Sie wählen, sollte davon abhängen, wie Sie die Formulardaten auf Client- oder Serverseite behandeln. Sie sollten auch die Legende kurz halten, da einige Kombinationen von Browsern und Bildschirmlesern die Legende vor jedem Eingabefeld im Feldset lesen.

Versteckt

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

Eine verborgene Eingabe ist für den Benutzer nicht sichtbar, der Wert wird jedoch an den Server gesendet, wenn das Formular dennoch gesendet wird.

Passwort

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

Das Eingabeelement mit einem Typattribut, dessen Wert " password erstellt ein einzeiliges Textfeld ähnlich dem Eingabetyp type=text . Der Text wird jedoch nicht angezeigt, wenn er vom Benutzer eingegeben wird.

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

Platzhaltertext wird im Klartext angezeigt und automatisch überschrieben, wenn ein Benutzer mit der Eingabe beginnt.

Hinweis: Einige Browser und Systeme ändern das Standardverhalten des Kennwortfelds, um auch das zuletzt eingegebene Zeichen für eine kurze Zeit anzuzeigen.

einreichen

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

Bei der Übermittlungseingabe wird eine Schaltfläche erstellt, die beim Klicken das darin enthaltene Formular übermittelt.

Sie können das <button> -Element auch verwenden, wenn Sie eine Senden-Schaltfläche benötigen, die einfacher gestaltet werden kann oder andere Elemente enthält:

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

Datei

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

Dateieingaben ermöglichen Benutzern die Auswahl einer Datei aus ihrem lokalen Dateisystem zur Verwendung mit der aktuellen Seite. Wenn sie in Verbindung mit einem form verwendet werden, können sie Benutzern das Hochladen von Dateien auf einen Server ermöglichen (weitere Informationen finden Sie unter Hochladen von Dateien ).

Im folgenden Beispiel können Benutzer die file verwenden, um eine Datei aus ihrem Dateisystem auszuwählen und diese Datei in ein Skript auf dem Server mit dem Namen 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>

Mehrere Dateien

Durch das Hinzufügen des multiple kann der Benutzer mehrere Dateien auswählen:

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

Dateien annehmen

Accept-Attribut gibt die Dateitypen an, die der Benutzer auswählen kann. ZB .png , .gif , .jpeg .

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

Eingabevalidierung

Die Validierung der HTML-Eingabe wird automatisch vom Browser durchgeführt, basierend auf speziellen Attributen des Eingabeelements. Es könnte die JavaScript-Eingabevalidierung teilweise oder vollständig ersetzen. Diese Art der Validierung kann vom Benutzer über speziell gestaltete HTTP-Anforderungen umgangen werden, so dass die serverseitige Eingabevalidierung nicht ersetzt wird. Die Validierung erfolgt nur beim Versuch, das Formular zu senden. Daher müssen sich alle eingeschränkten Eingaben innerhalb eines Formulars befinden, damit die Validierung erfolgen kann (sofern Sie nicht JavaScript verwenden). Beachten Sie, dass deaktivierte oder schreibgeschützte Eingänge keine Validierung auslösen.

Einige neuere Eingabetypen (wie email , url , tel , date und viele andere) werden automatisch validiert und erfordern keine eigenen Validierungseinschränkungen.

<input required>

Mindest- / Höchstlänge

Verwenden Sie die Attribute minlength und maxlength , um die Längenanforderungen anzugeben. Die meisten Browser verhindern, dass der Benutzer mehr als maximal Zeichen in das Feld eingibt. Dadurch wird verhindert, dass der Eintrag ungültig wird, noch bevor er die Übermittlung versucht.

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

Bereich angeben

Verwenden min und max - Attribut des Zahlenbereich um einen Benutzer zu beschränken Eingang in einen Eingang vom Typ number oder 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">

Hinweis: Durch novalidate Hinzufügen novalidate Attributs novalidate zum form oder formnovalidate Attribut zur Schaltfläche " formnovalidate wird die Überprüfung von Formularelementen verhindert. Zum Beispiel:

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

Das Formular enthält Felder, die zum "Veröffentlichen" des Entwurfs erforderlich sind, jedoch nicht zum "Speichern" des Entwurfs.

Zurücksetzen

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

Durch die Eingabe des Typs reset wird eine Schaltfläche erstellt, durch die alle Eingaben in der Form, in der sie enthalten sind, auf ihren Standardzustand zurückgesetzt werden.

• Text in einem Eingabefeld wird auf leer oder seinem Standardwert zurückgesetzt werden (unter Verwendung des angegebenen value Attribute).
• Alle Optionen in einem Auswahlmenü werden deaktiviert, sofern sie nicht das selected Attribut haben.
• Alle Kontrollkästchen und Optionsfelder werden abgewählt werden , wenn sie die haben checked Attribut.

Hinweis: Eine Reset-Schaltfläche muss sich innerhalb eines <form> -Elements befinden oder mit diesem verbunden sein (über das form ), um Auswirkungen zu haben. Die Schaltfläche setzt nur die Elemente innerhalb dieses Formulars zurück.

Nummer

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

Tel

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

Das Eingabeelement mit einem Typattribut, dessen Wert tel repräsentiert ein einzeiliges Klartext-Bearbeitungssteuerelement zum Eingeben einer Telefonnummer.

Email

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

Taste

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

Mit Schaltflächen können Aktionen ausgelöst werden, ohne dass das Formular gesendet wird. Sie können das Element <button> verwenden, wenn Sie eine Schaltfläche benötigen, die einfacher gestaltet werden kann oder andere Elemente enthält:

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

Schaltflächen werden normalerweise bei einem "Onclick" -Ereignis verwendet:

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

oder

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

Attribute

[name]

Der name der Schaltfläche, die mit den Formulardaten übermittelt wird.

[type]

Die type der Schaltfläche.

Mögliche Werte sind:

submit : Über die Schaltfläche werden die Formulardaten an den Server submit . Dies ist die Standardeinstellung, wenn das Attribut nicht angegeben ist oder wenn das Attribut dynamisch in einen leeren oder ungültigen Wert geändert wird.

reset : Die Schaltfläche setzt alle Steuerelemente auf ihre Ausgangswerte zurück.

button : Die Schaltfläche hat kein Standardverhalten. Mit den Ereignissen des Elements können clientseitige Skripts verknüpft sein, die beim Auftreten der Ereignisse ausgelöst werden.

menu : Die Schaltfläche öffnet ein Popup-Menü, das über das angegebene Element definiert wird.

[value]

Der Anfangswert der Schaltfläche.

Farbe

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

URL

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

Datum

<input type="date" />

DateTime-Local

<input type="datetime-local" />

Bild

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

Ein Bild. Sie müssen das Attribut src verwenden, um die Quelle des Bildes zu definieren, und das Attribut alt, um alternativen Text zu definieren. Sie können die Attribute height und width verwenden, um die Größe des Bildes in Pixel zu definieren.

Angebot

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

Monat

<input type="month" />

Zeit

<input type="time" />

19:04:39
08:20:39.04

Woche

<input type="week" />

Text

Der einfachste Eingabetyp und die Standardeingabe, wenn kein type angegeben ist. Dieser Eingabetyp definiert ein einzeiliges Textfeld, bei dem Zeilenumbrüche automatisch aus dem Eingabewert entfernt werden. Alle anderen Zeichen können hier eingegeben werden. <input> -Elemente werden in einem <form> -Element verwendet, um Eingabesteuerelemente zu deklarieren, mit denen Benutzer Daten eingeben können.

Syntax

<input type="text">

oder (ohne Angabe eines type mit dem Standardattribut):

<input>

Die Standardbreite einer Textfelderingabe beträgt 20 Zeichen. Dies kann durch Angabe eines Wertes für die geändert werden size Attribut wie folgt aus :

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

Die size Attribut ist deutlich anders als eine Breite mit CSS festlegen. Die Verwendung einer Breite definiert einen bestimmten Wert (in Pixel, Prozentsatz des übergeordneten Elements usw.), dessen Eingabe immer breit sein muss. Bei Verwendung der size wird die zuzuordnende Breite basierend auf der verwendeten Schriftart und der Breite der Zeichen in der Regel berechnet.

Hinweis: Durch die Verwendung des size wird die Anzahl der Zeichen, die in das Feld eingegeben werden können, nicht von Natur aus begrenzt, sondern nur, wie breit das Feld angezeigt wird. Informationen zum Begrenzen der Länge finden Sie unter Eingabevalidierung .

Ein Eingabefeld erlaubt nur eine Textzeile. Wenn Sie für eine größere Textmenge eine mehrzeilige Texteingabe benötigen, verwenden Sie stattdessen ein <textarea> -Element .

Suche

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

DateTime (Global)

Das Eingabeelement mit einem Typattribut , dessen Wert " datetime " ist, repräsentiert ein Steuerelement zum Festlegen des Elementwerts auf einen String, der ein globales Datum und eine globale Uhrzeit (mit Zeitzoneninformationen) darstellt.

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

Zulässige Attribute:

• globale Attribute
• Name
• deaktiviert
• bilden
• Art
• Autovervollständigung
• Autofokus
• Liste
• Minimal Maximal
• Schritt (Float)
• schreibgeschützt
• erforderlicher Wert