Newsletter

  • Immer informiert über die neusten Trends, Webseiten und Tutorials! Einfach hier für den monatlichen Newsletter anmelden.
  •  Eintragen
  •  Austragen

Login

Umfrage

  • Haben Sie Interesse an Softwaretipps für Webmaster?
  •  
  • ja
  • nein
  •  

BlackBeats

BlackBeats.fm Stream
- ONAIR -
Hip Hop Musik vom feinsten

Blackbeats FM

Linktipps

» Startseite » HTML, CSS und JavaScript Tutorials

Formulare in XHTML

 
Alles über Formulare (Aufbau, Syntax, Tipps)

Formulare dienen allgemein zum versenden von Daten.

Formulare werden wie folgt aufgebaut:
  1.  <form id="namedesformulars" method="post" action="mailto:name@domain.de">
  2.  ...Felder...
  3.  </form>

Mit dieser Formularart wird der Inhalt des Formulares direkt an die E-Mail "name@domain.de" versendet. Doch dazu muss der Anwender ein E-Mail Programm wie Outlook installiert haben. Da das aber nicht immer der Fall ist es besser wenn man einen Server hat der CGI oder PHP unterstützt und das Formular so aufbaut:

  1.  <form id="namedesformulars" action="kontakt.php" method="post">
  2.  ...Felder...
  3.  </form>

So wird beim abschicken des Formulares nicht eine E-Mail Adresse aufgerufen sondern das Script "kontakt.php", das die Daten dann verschickt so dass der Anwender nichts davon merkt, da er kein Programm installiert haben muss.
Felder:
Es gibt mehrere Arten von Felder die in ein Formular können.

  1. Das einzeilige Eingabe Feld:

    Das mit folgendem HTML-Code eingebaut wird:
    1.  <input type="text" name="einname" value="" size="50" maxlength="70" />
  2. Das mehrzeilige Feld:

    Das mit folgendem HTML-Code eingebaut wird:
    1.  <textarea name="einname" cols="5" rows="20"></textarea>
  3. Die "multiple choice" Boxen:
      
    Die mit folgendem Code eingebaut werden:
    1.  <input type="checkbox" name="einname" value="name"/>
  4. Die "single choice" Boxen:
      
    Die so eingebaut werden:
    1.  <input type="radio" name="einname" value="name" />
  5. Die "Drop Down" Felder:

    Die so eingebaut werden:
    1.  <select name="anrede">
    2.  <option value="Herr">Herr</option>
    3.  <option value="Frau">Frau</option>
    4.  </select>
  6. Das "hidden" Feld:
    1.  <input type="hidden" name="hiddenField" value="" />


Buttons:
  1. Den "Absenden" Button:

    Der wie folgt eingebaut wird:
    1.  <input type="submit" name="name" value="Senden"/>
  2. Den "Reset" Button:

    Der so eingebaut wird:
    1.  <input type="reset" value="Löschen" />

Beispiel:
Anrede:
Name:
E-Mail:
URL:
Text:


Der Quelltext dazu sieht so aus:

  1.  <form name="form1" action="kontakt.php" method="post">
  2.  <table width="50%">
  3.  <tr>
  4.  <td width="31%">Anrede:</td>
  5.  <td width="69%"><select name="anrede">
  6.  <option value="Herr" selected="selected">Herr</option>
  7.  <option value="Frau">Frau</option>
  8.  </select></td>
  9.  </tr>
  10.  <tr>
  11.  <td width="31%">Name: </td>
  12.  <td width="69%"><input name="name" size="20" /></td>
  13.  </tr>
  14.  <tr>
  15.  <td width="31%">E-Mail:</td>
  16.  <td width="69%"><input name="mail" size="20" /></td>
  17.  </tr>
  18.  <tr>
  19.  <td width="31%">URL:</td>
  20.  <td width="69%"><input name="betreff" size="20" /></td>
  21.  </tr>
  22.  <tr>
  23.  <td width="31%">Text:</td>
  24.  <td width="69%"><textarea name="nachricht" rows="6" cols="50"></textarea></td>
  25.  </tr>
  26.  </table>
  27.  <input type="submit" value="Abschicken" name="Abschicken" />
  28.  <input name="reset" type="reset" value="Löschen" />
  29.  </form>


Damit das Formular schöner und gleichmäßig aussieht sind die einzelnen Felder in Tabellen eingeteilt.

Tipp:
Um auf einer Website ein Kontaktformular zu machen lohnt es sich nicht PHP oder CGI zum Verschicken der Daten zu kaufen, da die "mailto:-Variante" aber auch sehr unzuverlässig ist, empfiehlt es sich zu einem kostenlosen Formmailer zu gehen, davon gibt es viele. Sie verschicken Daten von deinem abgeschicktem Formular direkt an deine E-Mail Adresse.
webmaster-eye.de bietet dir auch einen solchen Service an, einfach anmelden und Formulare problemlos versenden!

Fragen? Probleme? Keine Antworten? Hilfe finden Sie im Webmaster Forum!

Diese Artikel könnten Sie auch interessieren:
XHTML - Textauszeichnungen
XHTML - HTML allgemein
monatlich wechselnder Link mit JavaScript
XHTML - Grafiken