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 ä;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%;
      }

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

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.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project