Eingabeformularattribute in HTML
Wie Eingabeattribute in HTML funktionieren
Die Funktionalität der Attribute hängt von den von diesen Attributen geführten Werten ab. Die Attribute und ihre unterstützten Werte werden hier beschrieben.
Geben Sie Attribut ein
Wie das Eingabeelement ist der Kernteil von HTML -Formularen, das Typattribut ist der Schlüsselbestandteil des Eingangselements. Es definiert den Eingangstyp, der einen der folgenden Werte hat.
- Text: Wird verwendet, um ein Textfeld zu beschreiben
- Nummer: Wird verwendet, um ein Feld zu erstellen, das numerische Werte akzeptiert
- Email: Zum Eingeben einer E -Mail -Adresse verwendet
- Farbe: Definieren Sie die Farbe eines Eingangsfeldes
- Kontrollkästchen: So erstellen Sie ein Kontrollkästchen
- Radio: So erstellen Sie einen Optionsfeld
- Tel: Erstellt ein Feld, das Telefonnummern akzeptiert
- Bild: Wird verwendet, um die Bilddatei vom Benutzer abzurufen
- versteckt: Ein Feld, das nicht auf dem Bildschirm des Benutzers angezeigt wird
- Datum: Erstellt ein Feld, das das Datum akzeptiert
- Monat: Erstellt ein Feld, das Monat und Jahr ausgewählt werden soll
- einreichen: Eine Schaltfläche, mit der die Formulardaten einreichen würden
- zurücksetzen: Dies erstellt eine Schaltfläche, die alle Formdaten zurücksetzt
Die oben genannten sind die am häufigsten verwendeten Werte des Typattributs, und das unterbewertete Beispiel verwendet nur wenige davon.
Beispiel
Der unten geschriebene Code führt einige Werte der aus Typ Attribut.
In dem obigen Code werden vier verschiedene Eingangstypen verwendet.
Ausgang
Wertattribut
Wenn ein HTML -Formular definiert ist, wird empfohlen, jedem Element einen Anfangswert zuzuweisen. Dazu müssen Sie das Wertschriftenattribut verwenden. Der Eingangstyp muss definiert werden, um dieses Attribut zu verwenden.
Beispiel
Der nachstehend angegebene Code ist das Wertattribut des Wertes auf Eingabetyp = Text und Eingabetyp = Senden.
Ausgang
Schreibgeschütztes Attribut
Dieses Attribut würde das Schreiben im Eingabefeld nicht zulassen.
Beispiel
Der HTML -Code lieferte die Praktiken der schreibgeschützt Attribut auf einem Eingabefeld.
Ausgang
Das in der Ausgabe gezeigte Textfeld ermöglicht es Ihnen weder das Schreiben noch das Mausklick würden Maßnahmen ergreifen.
Deaktiviertes Attribut
Der Eingangstyp, der dieses Attribut trägt. Sie können jedoch keine Aktion auf diesem Eingabeelement ausführen.
Beispiel
Der Behinderte Das Attribut des Eingabeelements wird im folgenden Code praktiziert
Ausgang
Notiz: Das schreibgeschützte Attribut wird mit dem Formular eingereicht, während das deaktivierte Attribut den Wert für die Einreichung ermöglicht.
Musterattribut
Dieses Attribut akzeptiert reguläre Ausdrücke, auf die der Wert dieses Feldes überprüft wird. Es wird mit wenigen Eingabetypen wie Text, E -Mail, Tel, URL, Passwort und Datum verwendet.
Beispiel
Im folgenden Code die Muster Das Attribut wird in einem Textfeld verwendet, das nur kleine Alphabete akzeptiert.
Ausgang
Zur Überprüfung des Musterattributs haben wir versucht, die Kapitalalphabete einzugeben. Ein Fehler wurde jedoch aufgefordert, das angeforderte Format zu entsprechen.
Platzhalterattribut
Dieses Attribut fügt Dummy -Zeichen hinzu, die dem Benutzer helfen, den Zweck dieses Feldes zu verstehen.
Beispiel
Der unten erwähnte Code wendet die an Platzhalter Attributfeld, um zu beschreiben, dass das Textfeld Ihren Namen akzeptieren soll.
Ausgang
Aus der Ausgabe wird beobachtet, dass das Textfeld den Benutzer anweist, seinen Namen einzugeben.
Erforderliches Attribut
Die Eingabetyps, die die erforderlichen Attribute verwendet, sind obligatorisch, um gefüllt zu werden.
Beispiel
Der unten geschriebene Code legt das erforderliche Attribut für ein Textfeld fest.
Ausgang
Da das Feld obligatorisch ist, wird die Einreichung erst ausgeführt, wenn ein Text im Textfeld geschrieben ist.
Autofokusattribut
Wenn die Webseite neu geladen wird, wird das Eingabefeld konzentriert, auf dem das Autofocus -Attribut verwendet wird.
Beispiel
Der folgende Code legt die fest Autofokus Attribut des Eingabeelements.
Ausgang
Da haben wir das benutzt Autofokus Attribut auf einem Textfeld, sodass der Cursor immer wieder tickt, wenn die Seite geladen wird.
Mehrfachattribut
Dieses Attribut ermöglicht das Hinzufügen mehrerer Werte (das Anbringen mehrerer Dateien ist die Hauptverwendung dieses Attributs).
Beispiel
Der unten angegebene Code nimmt die Datei als Eingangstyp und mehrere Das Attribut wird auf den Eingangstyp angewendet.
Ausgang
Die Ausgabe zeigt, dass drei Dateien beigefügt sind, die die Arbeit mehrerer Attribute beschreiben.
Höhe und Breite Attribut
Dieses Attribut wird mit Bildtyp verwendet und legt die Höhe und Breite des Bildes fest.
Beispiel
Der Eingangstyp ist auf das Bild eingestellt und die Höhe Breite Attribute werden darauf angewendet.
Ausgang
Das Bild in der Ausgabe wird entsprechend dem Wert von Breite und Höhe eingestellt.
Min/Max -Attribut
Die minimalen/maximalen Werte für verschiedene Eingangstypen werden durch diese Attribute angegeben. Die Eingangstypen können Text, Nummer, Datum, Reichweite, Monat, Uhrzeit und Woche umfassen.
Beispiel
Der unten angegebene Code verwendet die Mindest Und Max Attribut, wo der Eingangstyp aufgestellt ist Nummer.
Ausgang
Wie in der Ausgabe gezeigt, akzeptiert das Zahlenfeld nicht 21, da das Limit auf 20 festgelegt wurde.
MaxLength -Attribut
Die Anzahl der Zeichen für einen Eingabetyp kann durch Verwendung von MaxLength -Attribut angegeben werden.
Beispiel
Der folgende Code beschränkt die Nummer von Zeichen bis 5 in einem Textfeld.
Ausgang
Die obige Ausgabe enthält 5 Zeichen im Textfeld, das Textfeld lässt das 6. Zeichen nicht zu. Danach maximale Länge Attribut.
Abschluss
Das Eingabeelement verfügt. In diesem informativen Beitrag werden die Attribute des Eingabeelements von HTML -Formularen aufgeführt. Die vom Eingabeelement unterstützten Attribute sind Typ, Wert, deaktiviert, schreibgeschützt, Autofokus, Mehrfachhöhe und Breite, MaxLength usw,. Darüber hinaus wird jedes Attribut anhand eines Beispiels praktiziert, das dazu beiträgt, die Funktionalität zu unterschätzen.