Tutorials von Thomas Frei-Herrmann

Formular - einfaches HTML-Formular mit Link zu einem Skript (hier Link zu Seiten von mir) - händisch erstellt

... ohne Tabelle

unten der Code von diesem Formular, <br> erzeugt einen Umbruch.

<form action="http://www.tommyherrmanndesign.com/nof/html/kontakt.php" method="post">
   Ihr Name: <br><input type="text" name="realname" class="schrift12"><br><br>
   Ihre E-Mail-Adresse: <br><input type="text" name="email" class="schrift12"><br><br>
   Ihre Nachricht: <br><textarea name="text" rows="5" cols="40" class="schrift12"></textarea><br><br>
   <input type="submit" value="Abschicken">
</form>

... mit Tabelle. Hier als Beispiel mit CSS-Formatvorlagen und Style-Anweisungen

unten der Code von diesem Formular mit einigen Formatierungen. Man kann natürlich CSS-Klassen einsetzen, wie z.B. für die gesamte Tabelle, nur die Eingabefelder, einen Rahmen-Style um den Text “Ihre E-Mail-Adresse”, nur die Tabellendaten oder auch für den Button.

<form action="http://www.tommyherrmanndesign.com/nof/html/themen-liste.php" method="post">

   <table border="0" cellspacing="5" cellpadding="0" align="left" class="schriftrot">

     <tr>
       <td>
          Ihr Name:
       </td>
       <td>
          <input type="text" name="realname" class="schrift12">
       </td>
     </tr>

     <tr>
       <td style="border: thin solid red" class="schrift12">
          Ihre E-Mail-Adresse:
       </td>
       <td>
          <input type="text" name="email" class="schrift12">
       </td>
     </tr>

     <tr>
       <td class="schrift16">
          Ihre Nachricht:
       </td>
       <td>
          <textarea name="text" rows="5" cols="40" class="schrift12"></textarea>
       </td>
     </tr>

     <tr>
       <td>
       </td>
       <td>
          <input type="submit" value="Abschicken" class=”searchButton” title="zu meiner Hilfe-Seite">&nbsp;&nbsp;&nbsp;&nbsp;
          <input type="reset" value="Löschen" class="searchButton" title="Formular zurücksetzen">
       </td>
     </tr>

   </table>

</form>

... und hier noch eine Ansicht, der hier eingesetzten CSS-Klassen.

.searchButton {
        font-size: 11px;
         color: rgb(0,0,0);
         font-weight: normal;
         font-style: normal;
         background-color: rgb(228,228,228);
         border: 1px solid rgb(87,102,117);
         width: 70px;
         cursor: pointer
}

.schrift12 {
        font-size: 12px;
         color: rgb(0,0,255)
}

.schrift16 {
        font-size: 16px;
         color: rgb(153,153,153);
         font-weight: bold
}

.schriftrot {
        font-size: 12px;
         color: rgb(255,0,0)
}

... guckt auch mal hier über einen Tabellen-Aufbau:

http://de.selfhtml.org/html/tabellen/aufbau.htm

nach oben