0251 / 590 837 15
info@a-coding-project.de
;

Form im Design, oder Design in Form?

Die Formulare in unserem CMS sind noch nicht wirklich schön. Heute fangen wir mal an das etwas größere Einstellunge-Formular zu verschönern.

Als erstes legen wir alle Input-Tags darin in ein Fieldset mit der Legende „Einstellungen ändern“ (Datei /admin/includes/settings.php):

<h1>Einstellungen</h1>
<form action="/admin/index.php?page=settings" method="POST">
<fieldset>
  <legend>Einstellungen &auml;ndern</legend>
  <?PHP
    $res = mysql_query("SELECT * FROM ".$dbpraefix."settings WHERE activated = 1");
    while($row = mysql_fetch_assoc($res)){
      echo "<label for="".$row['property']."">";
      echo $row['description'].":";
      echo "</label>";
      echo "<input name="".$row['property']."" value="".$row['value']."" />";
    }
  ?>
  <br /><input type="submit" value="Speichern" />
</fieldset>
</form>

Jetzt haben wir einen Rahmen, der die komplette Breite in Anspruch nimmt. Und außerdem sind die Textboxen im vergleich noch sehr winzig. Also ändern wird die Größen im CSS. Und siehe da, so sieht der neue Stylesheet in der /admin/index.php aus:

      body{
        margin:0;
        padding:0;
        font-family:Tahoma, sans-serif;;
      }
      label{
        display:block;
      }
      #adminmenue{
        list-style-type : none;
        margin:0;
        margin-bottom:40px;
        padding:0;
        background-color:#333;
        width:100%;
        height:20px;
      }
      #adminmenue a{
        color:#fff;
      }
      #adminmenue li{
        display:inline;
      }
      thead{
        background-color:#ddd;
        color:#333;
      }
      fieldset{
        width:50%;
      }
      fieldset input{
        width:95%;
      }

Kommentare

andrej schrieb am 03.02.2012:

fehler im text gefunden: Heute fangen wir mal ein das etwas größere Einstellunge-Formular zu verschönern.