Die 5 nützlichsten Eingabeelementattribute, die Sie kennen müssen

Beim Erstellen einer Website müssen Sie der Benutzererfahrung Priorität einräumen. Eingabeelementattribute Wenn Sie sich mit Webentwicklung beschäftigen, müssen Sie mit dem Begriff Eingabeelementattribute vertraut sein.

In diesem Blog werden wir genau das diskutieren. Ich erkläre Ihnen das Input-Tag und 5 müssen Input-Attribute kennen, die für die Webentwicklung verwendet werden.

Eingabe-Tag

Das Eingabe-HTML-Element ist ein praktisches Tag zum Erstellen interaktiver webbasierter Formulare, um Daten vom Benutzer zu erhalten. Je nach Gerät und Benutzeragent steht eine Vielzahl von Eingabedatensteuerungs-Widgets zur Verfügung.

Das Eingabe-Tag ist sehr leistungsfähig und komplex für eine große Anzahl von Kombinationen von Eingabetypen und Attributen.

Nehmen wir ein Beispiel für ein Eingabe-Tag. Hier haben wir ein Eingabe-Tag genommen, um den Namen einzugeben, in das der Benutzer mindestens 4 Zeichen seines Namens und maximal 8 Zeichen eingeben kann.

Das unten gezeigte Bild zeigt, wie der HTML-Code in einem Editor angezeigt wird.

Das Bild unten zeigt, wie die obige Ausgabe in einem Browser angezeigt wird.

Auf diese Weise können Sie also die Daten des Benutzers akzeptieren. Es gibt viele Arten von Input-Tags. Einige davon sind Text, Button, Checkbox, Radio, DateTime-Local, Range, Search. Beachten Sie, dass der Standardwert des type-Attributs „text“ ist.

Es ist wichtig zu beachten, dass sich das Verhalten eines <input> abhängig vom Wert seines type-Attributs erheblich ändert; Daher werden die verschiedenen Arten auf eigenen Referenzseiten beschrieben. Wenn diese Eigenschaft nicht angegeben wird, wird der Texttyp als Standardwert verwendet.

Eingabeattribute

Das <Input>-Element ist aufgrund seiner Attribute sehr mächtig. Das type-Attribut ist dabei sehr wichtig. Da jedes <input>-Element, unabhängig vom Typ, auf der HTMLInputElement-Schnittstelle basiert, liegt dies daran, dass beide fast genau denselben Satz von Attributen teilen. In Wirklichkeit wirkt es sich jedoch auf eine bestimmte Art von Teilmenge des Eingabetyps aus. Darüber hinaus wirken sich einige Attribute auf einen Eingabetyp aus, können sich jedoch bei den verschiedenen Attributen unterscheiden.

Hier haben wir einige wesentliche Eingabetypattribute aufgelistet, die ein Entwickler sehr gut kennen sollte:

• Minimale Länge
• Maximale Länge
• Deaktiviert
• Autofokus
• Platzhalter

Minilänge

Dieses Attribut funktioniert nur mit dem Text-, Such-, Tel-, URL-, E-Mail- oder Passworttyp im Eingabeelement. Das Attribut minlength gibt das Mindestzeichen an, das in das Eingabefeld eingegeben werden muss, wie UTF-16-Codeeinheiten.

Dies muss ein nicht negativer ganzzahliger Wert sein, der kleiner oder gleich dem in maxlength angegebenen Wert ist. Wenn für die Mindestlänge kein Wert angegeben ist oder ein ungültiger Wert angegeben ist, hat die Eingabe keine Mindestlänge. Die Übermittlung des Formulars schlägt fehl, wenn weniger Zeichen in das Eingabefeld eingegeben werden als die Mindestlänge.

Das folgende Bild zeigt, wie der HTML-Code in einem Editor angezeigt wird.

Das Bild unten zeigt, wie die obige Ausgabe in einem Browser angezeigt wird.

Maximale Länge

Dieses Attribut funktioniert auch nur mit dem Text-, Such-, Tel-, URL-, E-Mail- oder Passworttyp im Eingabeelement wie Minilänge. Das Attribut maxlength gibt die maximale Zeichenanzahl an, die in das Eingabefeld eingegeben werden soll, wie UTF-16-Codeeinheiten.

Dies muss ein nicht negativer ganzzahliger Wert sein, der größer oder gleich dem in minlength angegebenen Wert ist. Wenn für maxlength kein Wert angegeben oder ein ungültiger Wert angegeben wird, hat die Eingabe keine maximale Länge.

Standardmäßig hindern Browser den Benutzer daran, die Anzahl der Zeichen in das Eingabefeld einzugeben, wenn diese größer als die angegebene maximale Länge ist.

Das folgende Bild zeigt, wie der HTML-Code in einem Editor angezeigt wird.

Das Bild unten zeigt, wie die obige Ausgabe in einem Browser angezeigt wird.

Deaktiviert

Dies ist ein boolesches Attribut. Dieses Attribut gibt an, dass der Benutzer nicht mit der Eingabe interagieren soll.

Deaktivierte Eingaben werden speziell in einer dunkleren Farbe angezeigt, um eine andere Form der Anzeige zu verwenden, dass sie nicht zur Verwendung verfügbar sind. Das deaktivierte Attribut empfängt das Klickereignis nicht und der Wert des deaktivierten Formulars wird nicht mit der Übermittlung des Formulars übermittelt.

Das folgende Bild zeigt, wie der HTML-Code in einem Editor angezeigt wird.

Das Bild unten zeigt, wie die obige Ausgabe in einem Browser angezeigt wird.

Autofokus

Dies ist ebenfalls ein boolesches Attribut wie das Attribut disabled. Dies zeigt an, dass das Eingabefeld den Fokus erhält, wenn die Seite den Ladevorgang abgeschlossen hat. Oder wenn das Eingabeelement mit dem Autofokus-Attribut angezeigt wird.

Nicht mehr als ein Element hat das Autofokus-Attribut erhalten. Wenn mehr als ein Element eingefügt wird, wird das erste mit dem Attribut fokussiert, da versteckte Eingaben nicht fokussiert werden können. Das Autofokus-Attribut kann also mit den versteckten Eingabetypen verwendet werden.

Das folgende Bild zeigt, wie der HTML-Code in einem Editor angezeigt wird.

Das Bild unten zeigt, wie die obige Ausgabe in einem Browser angezeigt wird.

Platzhalter

Der Platzhalter ist ein String-Attribut. Es ist ein Attribut, das eine Vorstellung von den Daten gibt, die in das Eingabefeld eingegeben werden sollten.

Es sollte ein Wort oder ein kurzer Satz sein, der auf die Art der Daten hinweist, die in das Eingabefeld eingegeben werden sollen, und keine Erklärung. Wenn also beispielsweise erwartet wird, dass ein Feld den Vornamen eines Benutzers erfasst und seine Bezeichnung „Vorname“ lautet, könnte ein geeigneter Platzhalter „z. B. Bruce“ sein.

Das folgende Bild zeigt, wie der HTML-Code in einem Editor angezeigt wird.

Das Bild unten zeigt, wie die obige Ausgabe in einem Browser angezeigt wird.

Einpacken

In diesem Blog habe ich Ihnen einige Eingabeelementattribute vorgestellt, die Sie kennen sollten, insbesondere wenn Sie ein Webentwickler sind. Mit diesen Attributen können Sie das Eingabeelement in einem HTML-Formular oder einer Webseite auf unterschiedliche Weise steuern.

Obwohl Tag für Tag viele neue Attribute hinzugefügt werden, auch im HTML, sind dies einige der Attribute, die man kennen muss.

Ich hoffe, dieser Blog war hilfreich für Sie! Benötigen Sie Hilfe bei der Webentwicklung oder beim Webdesign? Fühlen Sie sich frei uns zu kontaktieren!

Herausgeber: Amruta