HTML5

Formular-Template Tabelle

Diese Formular ist in einer Tabelle erstellt.
Für die Formatierung ist dies die einfachste Methode.

Vorname:
Nachname:
Straße:
PLZ/ Ort:
Auswahlliste:

DIV-Element mit Scrollbalken

Bei einem div-Element wird, ohne weitere Angaben die Breite auf die maximal mögliche Breite gesetzt und die Höhe an den Text angepasst.

Eine bestimmte Größe eines div-Elements muss in css mit

height: 8em; und width: 40em; zugewiesen werden. Dann ist das DIV genau so groß.

Wird der Text länger geht er aus dem div heraus.

Zusätzkich kann in css mit min-height bzw. max-height die Ausdehnung zugewiesen werden.

min-height: 6em; max-height: 10em; width: 60em;

Hier wurde die Größe des div-Elements in css mit height: 8em; width: 40em; zugewiesen. Durch overflow:auto; werden Scrollbalken eingefügt. Dies geschieht aber Standardmäßig nur in der Länge. Durch overflow:scroll; werden Scrollbalken rechts und unten eingefügt.

Hier wurde die Größe des div-Elements in css mit min-height: 6em; max-height: 10em; zugewiesen.

Durch overflow:auto; werden Scrollbalken eingefügt wenn die max-height erreicht ist.

Formular: Typen, Attribute und Elemente

Ein Formular wird mit

action="http://PFAD"

method="post" oder "get"

abgeschickt. Auslöser ist ein input mit type="sumit"

Mit onsubmit=funktion() kann vorher das Formular mit JavaScript geprüft werden. Allerdings wird dann die Seite neu geladen.

Besser ist hier mit einem Eventlistener oder mit der Forms API zu arbeiten.

Bei AJAX-Anwendungen braucht man kein action und submit.

Hier kann beim input direkt type=button und JavaScript aufgerufen werden.

Formulare immer in div packen, sonst gibt es Probleme mit der Formatierung.

Wenn der Rand im form-Tag definiert wird wird er um den nachfolgenden Text auch gezogen.

Keine Ahnung warum?!?

Text:
PLZ:
E-Mail:
Nummer:
Datum:
Bereich:
Auswahlliste:
Auswahlbutton:	Mastercard Visa American Express

Form Elemente

label

Mit label wird ein Text erzeugt der auf die ID eines Eingabfeldes zeigt. Beim Klick auf den Text wird der Cursor in das Eingabefeld gesetzt.

input

Mit input werden Eingabefelder definiert.

input Type

type=reset

Die Formularfelder werden geleert.

type=button

Mit onclick=FUNKTION() wird eine JavaScript Funktion aufgerufen.

Besser ist es allerdings einen Eventlistener auf die ID des Button einzurichten.

type=email

Es wird auf syntaktisch richtige Email-Adresse geprüft.

Firefox:	Wenn Fehler wird das Feld rot eingerahmt.
Chromium:	Keine Reaktion.
IE 11:	Noch nicht geprüft.

type=number

Mit min und max kann ein Wertebereich definiert werden

Firefox:

Keine Reaktion.

Chromium:

Es wird eine Auswahl mit Pfeiltasten hoch und runter eingeblendet.

Man kann aber jede beliebige Zahl eintragen.

IE 11:

Noch nicht geprüft.

type=date

Es wird ein Datum im Format tt.mm.jjjj erwartet. Dies kann eingegeben werden.

Es kann auch ein Kalender eingeblendet werden.

Firefox:	Keine Reaktion.
Chromium:	Funktioniert wie beschrieben.
IE 11:	Noch nicht geprüft.

type=range

Es wird ein Schieberegeler angezeigt. Mit value kann man den Startwert festlegen.

Mit min und max den Bereich und mit step die Schrittweite.

Die Werte werden nicht angezeigt. Das muss mit JavaScript geschehen.

Firefox:	Keine Reaktion.
Chromium:	Funktioniert wie beschrieben.
IE 11:	Noch nicht geprüft.

input Attribute

placeholder

Es wird der angegeben Text in das Feld geschrieben. Bei der Eingabe wird dieser ausgeblendet.

Siehe Feld Text

Firefox:	Funktioniert wie beschrieben.
Chromium:	Funktioniert wie beschrieben.
IE 11:	Noch nicht geprüft.

required

Es wird geprüft ob in dem Feld etwas steht.

Es soll auch der Tygeprüft werden, das funktioniert aber bei beiden Browsern noch nicht.

Siehe Feld Text und Nummer

Firefox:	Wenn Feld leer wird das Feld rot eingerahmt.
Chromium:	Keine Reaktion.
IE 11:	Noch nicht geprüft.

autofocus

Damit kann der Fokus in das Feld gesetzt werden.

Firefox:	Funktioniert wie beschrieben.
Chromium:	Funktioniert wie beschrieben.
IE 11:	Noch nicht geprüft.

pattern

Mit regulären Ausdrücken kann bei pattern die Eingabe geprüft werden.

z.B. 5stellige PLZ pattern="[0-9]{5}" Firefox: Wenn Fehler wird das Feld rot eingerahmt.

Chromium: Keine Reaktion.

Firefox:	Wenn Fehler wird das Feld rot eingerahmt.
Chromium:	Keine Reaktion.
IE 11:	Noch nicht geprüft.

readonly

Es ist keine Eingabe möglich.

Firefox:	Funktioniert wie beschrieben.
Chromium:	Funktioniert wie beschrieben.
IE 11:	Noch nicht geprüft.

textarea

In einem Textarea können beliebig viele Zeichen eingegeben werden.

Die Attribute rows und cols definieren die Größe des Feldes. Mit CSS kann das Textarea mit higth und width dimensioniert werden.

Text zwischen den textarea-Tags gilt als Vorbelegung. Dieser Text kann überschrieben werden. Beim Reset wird er wieder eingeblendet.

datalist

In einer datalist können Werte definiert werden, die dann bei einem input-Feld als Auswahl angeboten werden.

Liste wird erst beim zweiten Klick in das Feld aufgeblendet

Text:

progress

Mit progress wird ein Fortschrittsbalken angezeigt.

Wert (% 1-100):

meter

Mit meter wird ein Skala angezeigt, bei der z.B. der Akku-Füllstand angezeigt werden kann.

Bis sich die Notwendigkeit ergibt habe ich auf ein Beispiel erstmal verzichtet.

output

Das output-Element dient der Ausgabe von Daten. Diese werden von JavaScript geschrieben.

Mit oninput kann man z.B auch direkt bei der Eingabe rechnen oder z.B. die Werte eines Bereichs anzeigen lassen.

In diesem Beispiel ist angegeben:

<form oninput="bereichwert.value=parseInt(bereich.value)" 
Im input hat das Feld die id=bereich
Der output sind dann so aus:
<output name="bereichwert" for="bereich"></output>

Selectbox

Bei einer Selectbox wird bei options mit value der Wert angegeben, der weitergeben wird.

Mit size wird die Anzahl Zeilen festgelegt, die angezeigt werden.

Mit optgroup und label kann eine Grupierung vorhgenommen werden.

nav

Mit nav gibt es ein eigenes Element für den Navigationsbereich.

Im Beispiel ist ein Aufklappmenu und ein Menu für eine Anwendung enthalten.

Tabellen

Die Tabelle hat als Standard keine Ränder.

Tabelle mit class=tabelleRahmen

CSS anzeigen

Spalte 1	Spalte 2
Z1/S1	Z1/S2
Z2/S1	Z2/S2
Z3/S1	Z3/S2

Tabelle mit class=tabelleGetrennt

CSS anzeigen

Spalte 1	Spalte 2
Z1/S1	Z1/S2
Z2/S1	Z2/S2
Z3/S1	Z3/S2

Video abspielen

Mit video gibt es ein Elemnt in dem Videos abgespielt werden können.

Mit controls wird die Anzeige unten eingeblendet.

Mit autoplay kann die Wiedergabe beim Aufruf der Seite direkt gestartet werden.

Mit loop wird die Wiedergabe wiederholt.

video-TAG anzeigen

Die Videowiedergabe kann auch mit JavaScript gestartet werden.

Video starten videoStart()

Audio abspielen

Mit audio gibt es ein Element in dem Musik abgespielt werden kann.

Mit controls wird die Anzeige unten eingeblendet.

Mit autoplay kann die Wiedergabe beim Aufruf der Seite direkt gestartet werden.

Mit loop wird die Wiedergabe wiederholt.

audio-TAG anzeigen

Die Audiowiedergabe kann auch mit JavaScript gestartet werden.

Audio starten audioStart()

head Element

Im head Element der HTML-Seite wird der Zeichensatz für die Seite gesetzt.

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Es werden externe Dateien für CSS und JavaScript eingebunden.

  <link rel="stylesheet" href="HTML5App.css" />

  <script type="text/JavaScript" src="HTML5App.js" />
  </script>

Der Titel für die Seite, der im Browserkopf und Tab erscheint wird festgelegt.

  <title/>Titel der Seite
  </title>

Ein Icon für die Seite, das in den Lesezeichen oder im Tab erscheint wird festgelegt.

  <link rel="shortcut icon" href="bild.png" />

Angabe für Suchmaschinenroboter die Seite aufzunehmen.

  <meta name="robots" content="index,follow" />

Angabe von Key-Wörtern

  <meta name="keywords" content="Stichwort 1, Stichwort 2, Stichwort 3" />

Angabe des Autors

  <meta name="author" content="Autorenname" />

Für den Aufruf der Seite auf einem Smartphone kann gesetzt werden, dass der Benutzer die Seite nicht zoomen kann.

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

embed Element

Mit embed Element kann eine externe Datei z.B. ein svg direkt eingebunden werden.

Beispiel für embed:

<embed src="datei.svg" type="image/svg+xml" />

pre Element

Mit dem pre Element wird der Text so ausgegeben wie er im HTML-Dokument notiert ist.

Spitze Klammern werden allerdings interpretiert und müssen mit < und > umschrieben werden.

Beispiel für pre:

<pre>
if ( a <> b )
{
  then
}
</pre>

Verweiß innerhalb einer Seite oder auf eine bestimmte Stellen einer anderen Seite

Bei einem Verweiß innerhalb einer Seite wird als Quelle ein a-Element definiert. Dabei wird im href die ID des Ziels mit # angegeben. Bei einem Link auf eine andere Seite muss bei href die Seite und mit # die ID des Ziels angegeben werden.

Ziel: A-Element ohne href: <h1><a id=allgemeines>Allgemeines</a></h1>

Quelle: A-Element mit href: <a href="#allgemeines">Allgemeines</a>
oder auf anderere Seite
Quelle: A-Element mit href: <a href="neueSeite.html#allgemeines">Allgemeines</a>