Archiv

Html Formulare

<!DOCTYPE html>

<form action="xx.html">

<input type="tel" name="test" value="Telefonummer eintragen">

<input type="submit"  value="absenden">

</form>

Der Vorteil der Verwendung des Typen „tel“ ist das damit die Browser etwas anfangen könnten zum Beispiel zur aut. Vervollständigung oder bei Mobiltelefonen, könnte man auf das Adressbuch zugreifen.

<!DOCTYPE html>

<form action="input-url.html">

<input type="url" name="test" value="Web -adresse eintragen">

<input type="submit"  value="absenden">

</form>

Hier macht das Formularfeld schon mehr, es lässt nur absolute Web – Adressen zu. (nicht valide: google.de – nicht valide: http://www.google.de – valide: http://www.google.de)

<!DOCTYPE html>

<form action="email-url.html">

<input type="email" name="test" value="Email -Adresse eintragen">

<input type="submit"  value="absenden">

</form>

Hier läßt der Type email nur Email- Adressen zu.

<!DOCTYPE html>

<form action="number-url.html">

<input type="number" name="test" max="7" min="0" step="o.5"
value=" Nr. eintragen">

<input type="submit"  value="absenden">

</form>

Der Type Number läßt nur Zahlen zur, zudem lassen sich diese Zahlen mit den neuen Attributen min und max einschränken. Mit step, lassen sich die gültigen Schritte bestimmen. Zum Beispiel wäre 6,5 eine Gütige Nummer, 6,2 nicht.

<!DOCTYPE html>

<form action="input-range.html">

<input type="range" name="test" max="7" min="0" step="2">

<input type="submit"  value="absenden">

</form>

Zum Number gibt es noch die Alternative und zwar das Range – Input. Hier stellt sich die
Formulare HTML automatische Formular- Validierung nicht. Im Grunde ist es ein einfacher Schieberegler, dem man die Schritt-zahl mitgibt. Im Gegensatz zum Type Number, sind beim Range – Input die Zahlen nicht sichtbar.

<!DOCTYPE html>
<!--<style>p {font-site:1.5em;} input {margin-zop:1em; 
font-size:inherit;}</style>-->

<form action="input-date.html">

<input type="date" name="test1">

<input type="month" name="test2">

<input type="week" name="test3">

<input type="time" name="test4">

<input type="datetime" name="test5">

<input type="datetime-local" name="test6">

<input type="submit"  value="absenden">

</form>

weitere Links:
http://www.heise.de/ix/artikel/Auswahlscheibe-1667689.html

www.drweb.de/magazin/formulare-gestalten-und-validieren-mit-html5-und-css3/

ähnliche Links:
http://www.drweb.de/magazin/ideal-forms-2-0-html5-formular-framework-auf-jquery-basis-34469/
http://www.usability-tipps.de/info/index.php/formulare-fur-mobilgerate-optimieren-mit-html5/
http://www.html5rocks.com/de/tutorials/forms/html5forms/
http://www.selfhtml5.org/html5-tag-systematik/

Advertisements