Hacking Django forms for CSS flexibility
The default output of the Django forms (former newforms) module is not very CSS friendly. With a few simple adjustments, you can make your web designer colleague happy.
This patch will add three classes on the parent HTML element of the rendering of each form field (the tr, li or p tag depending on your rendering mode):
- The type of the form field. (Examples:
CharField,ModelChoiceField) - The type of the widget. (Examples:
TextInput,SelectInput) - Is the form field optional or required:
OptionalorRequired
Now a required DateField will render, using the as_table rendering, as:
<tr class="DateField TextInput Required">
<th>
<label for="id_date">Date</label>
</th>
<td>
<input type="text" name="date" id="id_date" />
</td>
</tr>
Example uses
A couple of example use cases where my patch will help you out:
- Special styling of required fields possible.
- Easier to add a date picker by JavaScript.
- Special styling of checkboxes (styling
inputelements towidth: 100%also affects those).
Download the patch
Patch against forms/forms.py in Django 1.0: Download - View
How to patch your newly downloaded Django-1.0.tar.gz
For those of you not quite familiar with working with patches:
$ wget http://www.hacktheplanet.dk/export/HEAD/misc/forms.py.patch
$ wget http://www.djangoproject.com/download/1.0/tarball/
$ tar xvfz Django-1.0.tar.gz
$ patch -d Django-1.0/django/forms/ < forms.py.patch
Comments for "Hacking Django forms for CSS flexibility"
Currently disabled.