Eines der wichtigsten Elemente in einem HTML-Dokument ist das Eingabeelement , da es die Hauptkraftquelle des Benutzers darstellt. In diesem Lernprogramm erfahren Sie ausführlicher, wie Sie mit diesem Element und seinen Eigenschaften arbeiten auch die Attribute, die wir aus HTML5 verwenden können .
Text eingeben
Der Eingabetext ist die grundlegendste Form des Eingabeelements. Er ermöglicht es uns, alphanumerischen Flachtext und Sonderzeichen zu erfassen. Obwohl diese Eingabe nicht schlecht ist, müssen wir manchmal etwas mehr filtern, um die Daten zu erhalten, die wir wirklich benötigen.
Sehen wir uns die speziellen Attribute an, die wir für dieses Element verwenden können, wenn wir als Texttyp arbeiten.
- dirname: Dieses Attribut ist in HTML5 nicht neu. Mit diesem Attribut können wir jedoch die Richtung der Texteingabe von rechts nach links oder von links nach rechts ändern, wie wir es normalerweise in der westlichen Sprache verwenden.
<form action = "addcomment.cgi" method = post> <p> <label> Kommentar: <input type = text name = "comment" dirname = "comment.dir" erforderlich> </ label> </ p> <p> <button name = "mode" type = submit value = "add"> Kommentar posten </ button> </ p> </ form>
- list: Dieses Attribut ist neu in HTML5 und gibt uns die Möglichkeit, die ID eines Datenlistenelements anzugeben, das diesem Element Werte zuweisen kann.
<label> Homepage: <input name = hp type = url list = hpurls> </ label> <datalist id = hpurls> <option value = "http://www.google.com/" label = "Google"> <option value = "http://www.reddit.com/" label = "Reddit"> </ datalist>
- maxlength: Eine andere alte HTML- Bekanntschaft ist nicht neu, aber sehr hilfreich, da wir dadurch die maximale Anzahl von Zeichen begrenzen können, die von der Eingabe akzeptiert werden. Wenn wir beispielsweise 3-Buchstaben-Codes akzeptieren, setzen wir dieses Attribut auf den Wert 3 und Der Versuch, einen vierten Buchstaben einzugeben, wäre nicht einfach zu schreiben.
<eingabename = status maxlength = 140>
- Muster: Neu in HTML5 können wir Muster für reguläre Ausdrücke eingeben, mit denen wir eine neue Validierungsebene hinzufügen können, ohne zusätzliche Sprachen zu verwenden.
<label> Teilenummer: <input pattern = "[0-9] [AZ] {3}" name = "part" title = "Eine Teilenummer ist eine Ziffer, gefolgt von drei Großbuchstaben." /> </ label>
- Platzhalter: Neu in HTML5 ist es eine visuelle Hilfe, die es uns ermöglicht, einen Text einzugeben, der im Eingabetext erscheint und dem Benutzer eine kleine Hilfe bietet. Wenn beispielsweise ein Eingabetext für die Eingabe von Vor- und Nachnamen vorgesehen ist, können wir ihn aus dem Feld “Name eingeben” einfügen und Nachname durch Leerzeichen getrennt “, wobei natürlich die Stile so angepasst werden, dass alles ästhetisch korrekt aussieht.
<p> <label> Name: <input type = "text" name = "fullname" placeholder = "John Ratzenberger"> </ label> </ p>
- readonly: Dieses Attribut ist in HTML5 nicht neu. Es ermöglicht uns, dass der Benutzer keine Daten eingeben oder den Inhalt des Felds bearbeiten kann, das dieses Attribut enthält.
<Eingabe erforderlich name = "3.pid" value = "" pattern = "[A-Z0-9] +">
- Erforderlich: Neu in HTML5: Mit diesem Attribut können wir angeben, ob die Eingabe leer ist, das Formular noch nicht abschicken und so die obligatorische Art des Ausfüllens erzwingen. Auf diese Weise erhöhen wir eine weitere Validierungsebene.
<p> <label for = "username"> E-Mail-Adresse: </ label> <input id = "username" type = email erforderlich name = a> </ p>
- Größe: Mithilfe dieses Attributs können wir die Breite des Eingabeelements festlegen. Dieses Attribut ist nicht neu. Es ist jedoch sehr wichtig, da es uns hilft, den vom Benutzer einzugebenden Text besser darzustellen und Eingabefelder auf ästhetischer Ebene zu erstellen homogen, um sie alle mit einer Breite zu platzieren, die größer ist als die Standardbreite.
<Eingabe erforderlich name = "3.pid" value = "" size = "10" pattern = "[A-Z0-9] +">
- value: Es ist nicht neu in HTML5. Dieses Attribut ermöglicht es uns, Werte in einen Eingabetext einzufügen. Es unterscheidet sich vom Platzhalter, da der Wert, der zum Senden zugewiesen wird, wenn er als Inhalt des Elements gesendet wird, häufig zum Ausfüllen eines Formulars verwendet wird Inhalt, der aus der Datenbank abgerufen wird, wenn eine Serversprache verwendet wird.
<Eingabe erforderlich name = "3.pid" value = "20" size = "10">
Im nächsten Teil des Tutorials sehen wir einige praktische Beispiele für die Verwendung einiger dieser Attribute.
Update: Teil2 dieses Tutorials