HTML ist der Baustein des Webs. Die Kenntnis einiger weniger bekannter, aber nützlicher Teile dieser Auszeichnungssprache kann Ihnen das Leben erheblich erleichtern. HTML-Attribute bieten mehrere Funktionen, mit denen Sie HTML optimal nutzen können. Es definiert zusätzliche Eigenschaften oder Eigenschaften eines HTML-Elements.
In diesem Artikel lernen Sie 11 HTML-Attribute kennen, von denen Sie wahrscheinlich noch nichts gehört haben.
1. mehrere
Dieses Attribut ermöglicht Benutzern die Eingabe mehrerer Werte. Sie können das multiple Attribut mit verwenden Tags und Stichworte. Dieses boolesche Attribut ist nur für E-Mail- oder Dateieingabetypen gültig.
Verwenden mehrerer Attribute mit
Verwenden mehrerer Attribute für die Dateieingabe
Indem Sie das multiple Attribut für die Dateieingabe verwenden, können Sie mehrere Dateien auswählen (indem Sie die Schicht oder Strg Schlüssel).
Verwenden mehrerer Attribute für die E-Mail-Eingabe
Indem Sie das multiple Attribut für die E-Mail-Eingabe verwenden, können Sie eine Liste von durch Kommas getrennten E-Mail-Adressen eingeben. Alle Leerzeichen werden aus jeder Adresse in der Liste entfernt.
2. zufriedenbearbeitbar
Sie können den HTML-Inhalt auf einer Webseite mit dem contenteditable-Attribut bearbeitbar machen. Dies ist ein globales Attribut, d. h. es ist allen HTML-Elementen gemeinsam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
3. Rechtschreibprüfung
Das Spellcheck-Attribut gibt an, ob das Element auf Rechtschreibfehler überprüft werden darf oder nicht. Sie können Text in der Elemente, Text in den bearbeitbaren Elementen oder Text in den Eingabeelementen (außer Passwörter).
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Verwandt: Der HTML Essentials-Spickzettel: Tags, Attribute und Mehr
4. download
Sie können eine Ressource mit dem Download-Attribut herunterladen. Das Download-Attribut weist den Browser an, die angegebene URL herunterzuladen, anstatt zu ihr zu navigieren. Sie können das Download-Attribut mit dem -Tag und dem -Tag verwenden.
Hinweis: Das Download-Attribut nur funktioniert mit URLs gleichen Ursprungs. Es folgt den Regeln der Same-Origin-Policy.
Herunterladen
5. Accept
Das Accept-Attribut des -Tags gibt den Dateityp an, den ein Benutzer hochladen kann. Sie können als Wert eine durch Kommas getrennte Liste mit einem oder mehreren Dateitypen angeben.
Akzeptieren einer Audiodatei
Akzeptieren einer Videodatei
Code>Akzeptieren einer Bilddatei
Code>Akzeptieren einer Microsoft Word-Datei
accept=".doc,.docx, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document">PNG- oder JPEG-Dateien akzeptieren
Akzeptieren einer PDF-Datei
Verwandt: Coole HTML-Effekte, die jeder zu seinen Websites hinzufügen kann
6. translate
Das translate-Attribut teilt dem Browser mit, ob das Element übersetzt werden soll oder nicht, wenn die Seite lokalisiert wird. Es kann 2 Werte haben: "yes" oder "no".
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Verwandt: Einfache HTML-Code-Beispiele, die Sie in 10. lernen können Minuten
7. poster
Das poster-Attribut wird verwendet, um ein Bild anzuzeigen, während das Video heruntergeladen wird oder bis der Benutzer das Video abspielt Video.
Hinweis: Wenn Sie nichts angeben, wird nichts angezeigt, bis der erste Frame erhältlich. Wenn der erste Frame verfügbar ist, wird er als Poster-Frame angezeigt.
src=" http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
poster="posterImage.png">
8. inputmode
Das inputmode-Attribut gibt dem Browser an, welche Tastatur angezeigt werden soll, wenn ein Benutzer ein Eingabe- oder Textbereichselement ausgewählt hat. Dieses Attribut akzeptiert verschiedene Werte:
Keine
Numerisch
Tel
Dezimal
URL
Suche
9. pattern
Mit dem Musterattribut des Elements können Sie einen regulären Ausdruck angeben, für den der Wert des Elements validiert wird. Sie können das Musterattribut mit mehreren Eingabetypen wie Text, Datum, Suche, URL, Tel, E-Mail und Passwort verwenden.
Verwandt: Best Sites for Beispiele für hochwertige HTML-Codierung
10. autocomplete
Das Autocomplete-Attribut gibt an, ob der Browser die Eingabe basierend auf Benutzereingaben automatisch vervollständigen soll oder nicht. Sie können das Autocomplete-Attribut mit verschiedenen Eingabetypen wie Text, Suche, URL, Tel, E-Mail, Passwort, Datumsauswahl, Bereich und Farbe verwenden. Sie können dieses Attribut mit den Elementen oder Elemente.
11. autofocus
Das Attribut autofocus ist ein boolesches Attribut, das angibt, dass ein Element beim Laden der Seite fokussiert werden soll. Sie können dieses Attribut mit , ,
Autofokus-Attribut mit Eingabeelement verwenden
< /code>Verwenden des Autofokus-Attributs mit ausgewähltem Element
Verwenden des Autofokus-Attributs mit dem textarea-Element
Wenn Sie sich den vollständigen Quellcode ansehen möchten, der in diesem Artikel verwendet wird, besuchen Sie die GitHub-Repository.
Erleichtern Sie sich das Leben mit JavaScript-Einzeilern
Einzeiler-Code hilft, mit weniger Code mehr zu erreichen. Sie können mehrere JavaScript-Einzeiler verwenden, um wie ein Profi zu programmieren.
Mit nur einer Codezeile können Sie ein Array mischen, den Durchschnitt eines Arrays ermitteln, prüfen, ob ein Array leer ist, eine zufällige Hex-Farbe generieren, eine zufällige UUID generieren und so weiter.
11 JavaScript-Einzeiler, die Sie kennen solltenMit dieser großen Auswahl an JavaScript-Einzeilern können Sie mit nur wenig Code viel erreichen.
Weiter lesen
TeilenTweetEmail
Verwandte Themen
- Programmierung
- HTML
- Programmiersprachen
- Codierungstipps
Über den Autor
Yuvraj Chandra (78 veröffentlichte Artikel)Yuvraj studiert Informatik an der University of Delhi, Indien. Seine Leidenschaft gilt der Full-Stack-Webentwicklung. Wenn er nicht gerade schreibt, erforscht er die Tiefe verschiedener Technologien.
Mehr von Yuvraj Chandra
Abonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um zu abonnieren