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.

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 HTML5 wurden die neuen Eingabefeld-Typen url und email eingeführt. Diese erlauben es einen semantisch korrekteren Code 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 HTML5 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 unter ml5-context-menu-attribute-2. 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?

via t3n News http://t3n.de/news/9-zeitsparende-nutzliche-html5-449190/?utm_source=feedburner+t3n+News+12.000er&utm_medium=feed&utm_campaign=Feed%3A+aktuell%2Ffeeds%2Frss+%28t3n+News%29

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s