Service Tipps HTML CSS JavaScript PHP MySQL Webdesign Linkliste SiteMap

Formulare ohne Tabellen lassen sich mit CSS sehr einfach formatieren.
Die Eingabefelder sollen dabei, unabhängig vom Text, in einer senk-
rechten Linie stehen.

• Formular mit einer Tabelle:

<table>
 <tr>
  <td>Name:</td>
  <td><input type="text"></td>
 </tr>
 <tr>
  <td>Wohnort:</td>
  <td><input type="text"></td>
 </tr>
 <tr>
  <td>Straße:</td>
  <td><input type="text"></td>
 </tr>
 <tr>
  <td>E-Mail:</td>
  <td><input type="text"></td>
 </tr>
 <tr>
  <td>Telefon:</td>
  <td><input type="text"></td>
 </tr>
 <tr>
  <td colspan="2"><input type="submit"></td>
 </tr>
</table>

Beispiel:

Name:
Wohnort:
Straße:
E-Mail:
Telefon:

 

• Formular ohne Tabelle:

Eine einfachere Möglichkeit ist es einen Textabstand
im Label-Tag mit CSS zu definieren

<style type="text/css">
label {
 display: inline-block;
 width: 80px;
}
</style>
...
<label> Name: </label> <input type="text"> <br>
<label> Wohnort: </label> <input type="text"> <br>
<label> Straße: </label> <input type="text"> <br>
<label> E-Mail: </label> <input type="text"> <br>
<label> Telefon: </label> <input type="text"><br>
<input type="submit">

Beispiel:

Name:
Wohnort:
Straße:
E-Mail:
Telefon:




Haben Sie es bemerkt? - Im Label-Tag fehlt noch das Attribut „for”!
Das Attribut „for”, welches als Wert die ID des Eingabeelements bekommt, welches beschrieben wird.
Ein häufiger Fehler hierbei ist, dass dem input-Element statt des id-Attributs das name-Attribut gegeben und dieses dann als Wert für das for-Attribut des label-Elements angegeben wird. Dies ist syntaktisch nicht korrekt.

Ein korrekt codiertes Formular hat diesen Quelltext:

<label for="name"> Name: </label> <input type="text" id="name"> <br>
<label for="ort"> Wohnort: </label> <input type="text" id="wort"> <br>
<label for="strasse"> Straße: </label> <input type="text" id="strasse"> <br>
<label for="email"> E-Mail: </label> <input type="text" id="email"> <br>
<label for="tel"> Telefon: </label> <input type="text" id="tel"><br>
<input type="submit">

Der Label-Tag hat noch einen weiteren Vorteil, so kann ein Radio-Button oder eine Checkbox einfacher ausgewählt werden. Der Benutzer muss dabei einfach nur den Text neben der Checkbox anklicken.

Beispiel:
Kaffee
Tee

<input type="checkbox" id="Kaffee"> <label for="Kaffee"> Kaffee </label> 
<input type="checkbox" id="Tee"> <label for="Tee"> Tee </label>

Hinsichtlich der Barrierefreiheit ist ein Label-Tag, einfach Pflicht auf jeder Website.

 Das könnte Sie interessieren:
Element genau in der Mitte des Browserfensters zentrieren - Manchmal steht man vor der Aufgabe ein Bild genau in der Mitte zu zentrieren. Egal wie groß das Browserfenster auch ist, das Bild soll horizontal wie vertikal zentriert sein.  Seitenrand der Webseite ändern  CSS Hyperlink #4  Neue und besuchte Links mit CSS markieren  Text in Blocksatz  Mit Farbe Unterstreichen  CSS Hyperlinks - Hier finden Sie viele Beispiele wie Sie (Hyper-)Links, mit Hilfe von Cascading Style Sheets verändern können.  CSS Hyperlink #9  …mehr