Kategorie-Archiv: HTML

HTML Eingabeobjekte für das Senden der Daten an den Server/PHP

Das Textfeld:

Ein Textfeld kann wie folgt in HTML definiert werden:

<input name=“nameDesFeldes“ size=“40″ maxlength=“20″ value=“Standardwert“ readonly=“readonly“ />

Der Browser stellt das Inputobjekt als einzeiliges Textfeld dar. Alle Eigenschaften sind optional.

name dient als eindeutige Bezeichnung für das Textfeld, z.B. um dann am Server mittels PHP auf das jeweilige Textfeld zugreifen zu können.

size gibt die Länge des Textfeldes an

maxlength gibt die max Anzahl an Zeichen an, die eingegeben werden können

mit value kann ein Standardwert eingegeben werden, der schon am Beginn im Textfeld steht, der Benutzer kann dann wählen ob er den Text überschreiben oder es einfach beim Standardwert  belassen möchte

wird readonly auf „readonly“ gesetzt kann der Benutzer das Textfeld nicht verändern

mehrzeilige Textfelder

Mehrzeilige Textfelder können wie folgt definiert werden:

<textarea name=“text2″ cols=“5″ row=“5″ readlonly=“readonly“> Standardtext im Textfeld </textarea>

Die Eigenschaften name und readonly können wie beim einzeiligen Textfeld verwendet werden. col und row geben Breite und Höhe des Textfeldes an. Soll ein Standardwert schon zu Beginn im Textfeld angezeigt werden, wird dieser nicht über die val Eigenschaft gesetzt, sondern als Text in das Tag geschrieben.

Textfelder deren Eigenschaften/Verhalten nicht mit Javascript und CSS definiert werden, sehen in verschiedenen Browsern leider unterschiedlich aus. In manchen Browsern haben sei einen Scrollbalken und/oder kann der Benutzter die Größe mit der Maus verändern, in anderen Browsern haben sie das nicht.

besondere Textfelder

Es gibt zwei Eigenschaften mit denen besondere Textfelder erzeugt werden können, type=“Password“ und type=“hidden“.

Mit:

<input type=“password“ name=“pwort“ />

wird ein Textfeld speziell die Passworteingabe erzeugt. Gibt der Benutzer hier etwas ein, erscheint im Textfeld nicht die Benutzer Eingabe sondern ****, sodass niemand die Passworteingabe am Bildschirm beobachten kann. Übertragen wird natürlich das Passwort und nicht die ****.

Für dieses Verhalten ist der jeweilige Browser verantwortlich. Am PC ist dieses Verhalten von allen Browsern gleich umgesetzt. Wird die Webseite jedoch mit einem Handy geladen, sieht es anders aus, manchen Handybrowser zeigen das Passwort am Bildschirm (wohl um den User Tippfehler anzuzeigen). Auf mobilen Endgeräten ist das Verhalten somit vom Browser abhängig.

Mit:

<input type=“hidden“ name=“versteckt“ val=“Botschaft“ />

wird ein unsichtbares Textfeld erzeugt, dass vom Benutzer auch nicht veränderbar ist.

Wird zum Beispiel ein Programm am Server von zwei unterschiedlichen Webseiten aufgerufen, könnte man auf jeder Seite eine unsichtbare „Botschaft“ mit so einem „hidden“ Textfeld mit an der Server schicken. Das PHP Programm weiß dann ob es von der Seite A oder der Seite B aus aufgerufen wurde.

Radiobutton Gruppen

<h1> Auswahl </h1>

<p>

<input type=“radio“ name=“optionen“ val=“opt1″ checked=“checked“ /> Option 1 <br />

<input type=“radio“ name=“optionen“ val=“opt2″  /> Option 2 <br />

<input type=“radio“ name=“optionen“ val=“opt3″ /> Option 3 <br />

</p>

Obige Definition erzeugt drei Radiobuttons mit der Überschrift „Auswahl“ und den Beschriftungen „Option 1“, „Option 2“ und „Option 3“. Die Eigenschaft name muss bei allen Radiobuttons einer Gruppe gleich sein. Beim Senden des Formulars an den Server wird in der Eigenschaft name der val Wert jenes Radiobutton übermittelt der ausgewählt ist.

Mit der Eigenschaft checked kann definiert werden, welcher Button vorausgewählt wird.

Listenfeld

Statt über Radiobuttons kann eine Auswahl auch über eine Liste erfolgten. Folgendes Beispiel erzeugt die gleiche Auswahl wir vorher über die Radiobuttons mit einem Listenfeld:

<h1> Auswahl </h1>
<p>

<select name=“optionen“>

<option value=“opt1″ selected > Option 1 </option>
<option value=“opt2″ > Option 2 </option>
<option value=“opt3″ > Option 3 </Option>

</select>

</p>

Es wurde eine Listenauswahl mit Optionen erzeugt. Wird das Formular an der Server gesendet, wird die Eigenschaft name auf den jeweils selektierten „value“-Wert gesetzt.

Mit selected kann definiert werden, welcher Wert vorausgewählt sein soll.

Kontrollkästechen

Inhalt folgt.

mehrfaches Auswahlmenü

Inhalt folgt.

HTML Basics

Textabsatz:

<p> Hier der Text. </p>

Überschriften

<h1> Überschrift 1 </h1>

bis

<h6> Überschrift 5 </h6>

Listen (ungeordnet):

<ul>

<li> Listenelement 1 </li>

<li> Listenelement 2 </li>

<li> Listenelement 3 </li>

</ul>

Listen (geordnet):

<ol>

<li> Listenelement 1 </li>

<li> Listenelement 2 </li>

<li> Listenelement 3 </li>

</ol>

Links:

<a href=“Zieldatei.html“> Linktext </a>