Eine der wichtigsten Bestandteile von Antville sind die zahlreichen Formulare. Bisher bestehen sie aus Tabellen, die schwierig mit CSS zu beeinflussen sind. In Zukunft werden sie allerdings durch ein <div>-basiertes Layout ersetzt.

Grundsätzlich habe ich bisher 2 Formulartypen definiert. Zum einen gibt es Label-Input-Formulare. Sie bestehen zum Großteil aus Textlabels und simplen Texteingabefeldern. Am Ende findet sich noch ein Submit-Button zum Absenden. Jede Zeile wird in ein <div> mit der CSS-Klasse „row“ verpackt. Innerhalb der Zeile wird mit Hilfe von CSS das Label-Element linksbündig ausgerichtet mit einer fixen Breite. Über die Klassen „w140“, „w160“, „w200“, usw. werden die Breiten der Labels definiert. Dies kann bei besonders kurzen bzw. langen Labels notwendig sein. Interessant ist diese Formatierung für die unterschiedlichen Sprachversionen, da durch eine kleine Änderung im Standardlayout die Breiten an die Textlängen angepasst werden können. Hier ein Beispiel:

<form id="myDemoForm" method="post" action="myAction">
<div class="form">
   <div class="row">
      <label for="myFormField">
         <% gettext "Label for the input field" suffix=":" %>
      </label>
      <input type="text" name="myFormField" id="myFormField" />
   </div>
    
   <!-- some more rows with input fields... -->
    
   <div class="row">
      <button type="submit" id="submit" name="register" value="1">
         <% gettext Register %>
      </button>
   </div> 
</div>
</form>

/** CSS-Auszug **/ .form .row label:first-child { width: 160px; display: inline-block; }

.form .row .col { display: inline-block; }

.w100 { width: 100px; }

Der zweite Typ sind Listenansichten mit mehreren verbunden Aktionen. Ein Beispiel: Eine Liste aller Fotos inkl. der Aktionen „Bearbeiten“, „Umbenennen“ und „Löschen“ auf der rechten Seite. Hier gibt es ein <hr /> zum Trennen der einzelnen Listeneinträge, danach folgt ein <div class="details"> mit allen Informationen zum Eintrag und darauf folgt eine Liste mit den zur Verfügung stehenden Optionen. Damit sollte auch die Zugänglichkeit für Screenreader etc. deutlich verbessert werden.

<hr class="listSeparator" />
<div class="listNavigationItem">
   <div class="details">
      <h2><% membership.name %></h2>
      <p><em><% membership.role %></em></p>
      <p><% membership.user.url | link %></p>
   </div>

   <ul>       <li>Editieren</li>       <li>Bearbeiten</li>       <li>Löschen</li>    </ul> </div>

Da ich noch nicht alle Skins und Formulare überarbeitet habe, können sich noch weitere Typen heraus kristallisieren. Allerdings scheinen diese beiden Varianten die am häufigsten vorkommenden zu sein und damit ein Großteil der Formulare auf Antville abdecken.