Drücke die Tasten ◄ ► für weitere Artikel  

9 zeitsparende und nützliche HTML5 Attribute

HTML-Attribute wie src und href dürfte jeder Webentwickler kennen. Wir stellen euch einige weniger bekannte aber wirklich nützliche HTML5-Attribute vor.

9 zeitsparende und nützliche HTML5 Attribute

Es gibt zahlreiche HTML-Attribute. Viele davon sind sehr bekannt, einige neuere Attribute eher weniger, obwohl sie nicht weniger nützlich sind. Neun dieser Attribute stellen wir euch heute vor.

Autofocus

Das autofocus-Attribut kann jedem <input>, <textarea> oder <button>-Element zugeordnet werden und sorgt dafür, dass das Feld beim Aufruf der Seite automatisch selektiert wird.

<input type="text" autofocus/>
<textarea autofocus=>Hier Text eingeben</textarea>
<button autofocus>Klick mich</button>

Natürlich kann nur ein Element pro Seite automatisch selektiert werden. Sollte es dennoch mehrere Elemente mit diesem Attribut geben, wird das letzte Element ausgewählt.

Placeholder

Mit dem placeholder-Attribut können Platzhalter-Texte in input- oder textarea-Elemente eingebunden werden, die automatisch ausgeblendet werden, nachdem ein Benutzer eine Eingabe tätigt. So könnte die Beschriftung von Input-Feldern in einigen Anwendungsfällen vollständig wegfallen.

<input type="text" placeholder="Vorname">

Eingabe-Felder für URL und E-Mail

Mit wurden die neuen Eingabefeld-Typen url und email eingeführt. Diese erlauben es einen semantisch korrekteren zu schreiben und helfen mobilen Geräten dabei, die Eingaben für den Benutzer zu erleichtern, indem kontextbezogene Buttons wie „@“ oder “.com“ eingeblendet werden.

<input type="url" value="">

Das email-Attribut wird identisch eingebunden. Jedoch ist es möglich eine Validierungs-Funktion mit dem pattern-Attribut einzubauen, das mit einem regulären Ausdruck gefüllt wird. So wird die clientseitige Validierung möglich.

<input type="email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" value="" required>

Achtung: Der Safari ignoriert derzeit das Pattern-Atribut.

Spellcheck

Das Spellcheck-Attribut ermöglicht es, die Auto-Korrektur der Browser ein bzw. auszuschalten. In den meisten Fällen wird die Korrektur von Haus aus aktiviert sein, sodass man nicht zusätzlich mit dem Attribut arbeiten muss. In manchen Fällen, etwa bei der Eingabe eines Benutzernamens, könnte die Deaktivierung aber nützlich sein.

<input type="text" spellcheck="false" />
<textarea spellcheck="true"></textarea>

Autovervollständigung mit HTML5-Datalisten

Mit dem Datalist-Element erlaubt eine Liste von Autovervollständigungsvorschlägen für Eingabefelder zu definieren.

<input name="frameworks" list="frameworks" />
<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>

Auch hier muss Apples Safari derzeit noch passen.

Context Menüs

Mit HTML5 Context-Menüs können Elementen verschiedene Menü-Punkte zugeordnet werden, die bei Rechtsklick auf das Element erscheinen.

<section contextmenu="mymenu">
	<p>Yes, this section right here</p>
</section>
<menu type="context" id="mymenu">
	<menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>
	<menu label="Social Networks">
		<menuitem label="Share on Facebook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;">   </menuitem>
	</menu>
</menu>

Eine Live-Demo findet ihr auf speckyboy.com. Derzeit ist das Kontextmenu nur im Firefox verfügbar.

Reverse-Attribut

Sortierte Listen mit ol beginnen normalerweise mit einem nummerierten Eintrag mit der Ziffer 1. Mit dem Reverse-Attribut werden diese Listen automatisch in absteigender Reihenfolge umsortiert.

<ol reversed>
	<li>Nummer 3</li>
	<li>Nummer 2</li>
	<li>Nummer 1</li>
</ol>

Start-Attribut

Das Start-Attribut wird ebenfalls auf sortierte Listen angewandt und kann die Startziffer von 1 auf eine beliebige andere Ziffer verändern.

<ol start="6">
	<li>Number 6</li>
	<li>Number 7</li>
	<li>Number 8</li>
</ol>

Start- und Reverse-Attribut lassen sich außerdem miteinander kombinieren.

HTML5 prefetching

Prefetching ist eine simple Technik, die das Vorladen von weiterführenden Webseiten ermöglicht und so für angenehm kurze Ladezeiten beim Wechsel auf weitere Seiten sorgt.

<link rel="prefetch" href="http://www.t3n.de/news">

Schnelle Hilfsmittel ohne JavaScript

Diese Zeitsparenden Attribute sind nur einige der vielen verschiedenen Möglichkeiten, um in realen Projekten schneller und effizienter voran zu kommen. Man könnte sie als Abkürzung oder Ersatz für das ein oder andere Skript benutzen.

Was sind euere Tricks, um euch das Coden zu erleichtern?

462 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
24 Antworten
  1. von Dominik am 11.03.2013 (09:54Uhr)

    Das sind sehr gute Tipps, da habe ich auch noch einiges gelernt. Vielen Dank für die Aufstellung.

  2. von chpaterok am 11.03.2013 (10:01Uhr)

    Wow, vielen Dank. Placeholder konnte ich gleich mal gebrauchen. Da spart man sich ja die ganze JavaScript-Geschichte, die man sonst mit eingebaut hat...

    Danke!

  3. von marc.tissler am 11.03.2013 (10:03Uhr)

    "Eine Live-Demo findet ihr unter ml5-context-menu-attribute-2 . Derzeit ist das Kontextmenu nur im Firefox verfügbar." ---> Link kaputt ;)

  4. von Hammy am 11.03.2013 (10:03Uhr)

    Wie verhalten sich ältere Browser, die noch kein html5 unterstützen bei bzw. bei ? Wird es dann einfach als Input type=text erkannt?

  5. von Hammy am 11.03.2013 (10:04Uhr)

    ich meinte

  6. von marc.tissler am 11.03.2013 (10:04Uhr)

    noch eine anregung: Wie wäre es in Zukunft code snippets direkt zu fiddln? Macht für viele das Leben bestimmt leichter :)

  7. von Hammy am 11.03.2013 (10:05Uhr)

    input type url und type email....

  8. von marc.tissler am 11.03.2013 (10:06Uhr)

    @Hammy:
    Laut definition sollten ungültige / unbekannte tags und attribute einfach ignoriert werden, das groß der Browser wird aber bei z.b. falschen type attributen ein Text field nehmen. Ist allerdigs borwser abhänig. Attribute wie placeholder etc. haben eben einfach gar keinen effect und könnten im IE dann dafür sorgen das er in den quirks modus wechselt weil das dokument invalid ist.

  9. von cephei am 11.03.2013 (11:08Uhr)

    input type="email" ist echt nützlich für smartphones. ich nerve mich immer umschalten zu müssen, für das @.

    link rel="prefetch" klingt interessant. hat das einfluss auf die ladezeit der aktuellen seite? nicht das ich von suchmaschinen abgestraft werde...

    @Ilja Zaglov, danke für den artikel. du schreibst in letzer Zeit die nützlichsten infos bei t3n :)

  10. von Jürgen am 11.03.2013 (11:42Uhr)

    Gute Auflistung, hab ich mir gleich mal ein paar neue Skills erarbeitet

  11. von David am 11.03.2013 (12:09Uhr)

    Nur der Vollständigkeit halber: Das start-Attribut hat mit HTML5 nur soviel zu tun, dass es im Gegensatz zu 4.01 nicht mehr »deprecated« ist. Es taucht auch schon in der Spezifikation von HTML 3.2 auf. Es ist also nicht mehr unbedingt »neu«.

  12. von ckler am 11.03.2013 (17:39Uhr)

    nice to know! .. thx

  13. von Ilja Zaglov am 11.03.2013 (22:16Uhr)

    @cephei: Freut mich, dass ich helfen konnte.

    Ich bin absolut nicht drin in Sachen Seo, aber Chrome bietet schon länger Haus aus Prefetch-Funktionen an, also dürfte das aus meiner Sicht nicht wirklich ein Problem sein. Das ist eher ärgerlich für Webmaster, da so die Statistiken durcheinander gebracht werden können.

    Aber wie gesagt, da werden Andere sicherlich mehr dazu sagen können.

  14. von geeky am 12.03.2013 (00:06Uhr)

    autocomplete="off" ist auch schonmal nützlich. Es gibt durchaus auch Fälle, bei denen Autofill problematisch ist.

  15. von Kjell am 12.03.2013 (09:40Uhr)

    hm, prefetch gefällt mir sehr gut!

    bzg. autofocus und browser die es nicht unterstützten:

    if (!("autofocus" in document.createElement("input")))
    { document.getElementById("contact-sex").focus(); }

    und beim placeholder ist leider das design via css sehr unterschiedlich - wenn man das gut und konsistent hinkriegen möchte, besser doch die JS Variante (noch) nehmen...

    Just my 2 cents.

  16. von Thomas am 12.03.2013 (12:43Uhr)

    Nette Spielereien, aber im Produktiveinsatz (noch) nicht zu gebrauchen, solange HTML 5 noch nicht einmal von den aktuellen Browsern zu 100% korrekt umgesetzt wird. Ich hab mal verschiedene Sachen getestet, ein Trauerspiel. Ein paar Sachen gehen in Firefox, ein paar Sachen in Chrome, ein paar Sachen in Safari, das meiste oder gar nichts im IE.

    Da setze ich lieber noch auf Javascript - wer es deaktiviert hat (dürften eh nur relativ wenige Surfer sein, die sich mit Webtechnologie auskennen) bekommt mit eine Meldung.

    Der Rest wird dann serverseitig geprüft.

  17. von Daniel am 12.03.2013 (13:17Uhr)

    Schöne Aufstellung - HTML5 ist schon eine feine Sache. Nur Schade, dass es noch nicht alle Browser sauber unterstützen.

  18. von Webperlen: Nützliche HTML5 Attribute, T… am 12.03.2013 (16:43Uhr)

    [...] Prkatische zuerst: t3n stellt 9 zeitsparende und nützliche HTML5 Attribute vor: HTML-Attribute wie src und href dürfte jeder Webentwickler kennen. Wir stellen euch einige [...]

  19. von Links #3 | Björn Salgert am 16.03.2013 (11:03Uhr)

    [...] 9 zeitsparende und nützliche HTML5 Attribute [...]

  20. von Sclable – HTML5 kommt! am 23.03.2013 (17:42Uhr)

    [...] ist in aller Munde. Während wir uns bei Sclable mit so pragmatischen Dingen wie der Evaluierung von nützlichen und zeitsparenden HTML5 Attributen beschäftigen sind die Kollegen bei anderen Unternehmen schon weiter. Google transformiert zum [...]

  21. von 9 zeitsparende und nützliche HTML5 Attr… am 10.04.2013 (07:41Uhr)

    [...] 9 zeitsparende und nützliche HTML5 AttributeTeilen: ‹ CSS3Ps: Photoshop-Plugin wandelt Ebenenstile in CSS3-Code Getagged mit: Hacks, HTML5 Veröffentlicht unter HTML5 [...]

  22. von HTML5: 15 Screencasts, Tutorials und Art… am 13.05.2013 (13:46Uhr)

    [...] Seite finden sich neben News und Hintergrundinformationen auch Empfehlungen wie die für neun zeitsparende und nützliche HTML5 Attribute, Tool-Vorstellungen wie „Moonbase: HTML5-Animationen für jedermann“ oder die responsive [...]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema HTML5
t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]
t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]

Du willst in die Webentwicklung einsteigen und HTML5, CSS3 und JavaScript lernen? Das etwas andere Fachbuch „Schrödinger lernt HTML5, CSS3 und JavaScript“ vermittelt mit Witz die Theorie und... » weiterlesen

Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren... ... » weiterlesen

Layouts mit der CSS-Box-Modell-Alternative Flexbox einfacher umsetzen [t3n-Video-Workshop]
Layouts mit der CSS-Box-Modell-Alternative Flexbox einfacher umsetzen [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren... ... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen