bitshifting

binary thinking

HTML5 Platzhalter in Drupal Formularen

Von Rainer Schulz am 31. January 2013 um 14:29

Am Anfang war das nackte Design

Als ich anfing das Drupal Theme für diese Seite zu erstellen, habe ich noch nicht geahnt, dass ich mich doch etwas genauer mit den API's von Drupal befassen muss. Doch als dann das Design der Seite zu großen Teilen stand und ich anfing kleinere Anpassungen am Theme vorzunehmen, stieß ich als bald auf das erste Problem. Ich wollte HTML5-Platzhalter in einige input-Felder der Standardformulare einfügen. Doch wie manipuliere ich Formulare in Drupal?

Der Herr der Drupal-Formulare: Die Drupal-Hooks

Wie bei allen Belangen zu Drupal, war auch hier meine erste Anlaufstelle die Dokumentation auf der Seite drupal.org. Schon nach kurzer Suche stieß ich auf die Forms-API, im speziellen auf die Funktion hook_form_alter().

Arbeiten mit der Funktion hook_form_alter()

Mit dieser Funktion wird uns eine gute Möglichkeit gegeben, Formulare nach unseren Wünschen anzupassen. Diese Funktion benötigt 3 Übergabeparameter, welche ich hier kurz erläutern möchte.

$form
Ein mehrdimensionales Array mit allen Informationen und Elementen des Formulars.
$form_state
Ein Array, welches den aktuellen Zustand des Formulars bereithält.
$form_id
Ein String welcher den Namen des Formulars enthält

Um diese Funktion nutzen zu können, muss sie zur template.php des Themes hinzugefügt werden und sollte folgenden Aufbau aufweisen.

YOURTHEMENAME_form_alter(&$form, &$form_state, $form_id)
{
    /* function logic */
}

Hinweis: YOURTHEMENAME muss mit dem Namen des Themes ersetzt werden.

Auf Formulare zugreifen

Das erste Formular, welchem ich einen HTML5-Platzhalter verpassen wollte war das Suchformular, welches sich in der Sidebar befindet. Aber wie greift man auf dieses Formular zu? Dazu müssen wir erst einmal die Drupal-interne ID des Formulars herausfinden. Wir können dafür nun die Funktion hook_form_alter() verwenden, indem wir uns einfach das komplette $form-Array formatiert ausgeben lassen. Dazu ändern wir die Funktion in unserer template.php nun wie folgt ab.

YOURTHEMENAME_form_alter(&$form, &$form_state, $form_id)
{
    echo '<pre>' . print_r($form, TRUE) . '</pre>';
}

Um sicherzustellen, dass wir nur das Array unseres gewünschten Formulars ausgegeben bekommen, steuern wir am besten eine Seite an, auf welcher keine anderen Formulare vorhanden sind. Auf dieser Seite sollte nun, im oberen Bereich, eine Ausgabe des Arrays erscheinen, welche folgenden Aufbau hat.

Array
(
    [search_block_form] => Array
        (
            [#type] => textfield
            [#title] => Suche
            [#title_display] => invisible
            [#size] => 15
            [#default_value] =>
        )
 
    ...
 
    [#form_id] => search_block_form
 
    ...
 
)

Über den Wert des Index [#form_id] können wir das Formular nun gezielt ansprechen. An dieser Stelle hätte es auch gereicht, wenn wir nur $form_id ausgegeben hätten, aber so haben wir eine schöne Übersicht aller Informationen dieses Formulars.

Im nächsten Schritt brauchen wir den Inhalt des name-Attributes von dem input-Feld welches wir anpassen wollen. Dies können wir recht einfach mit aktuellen Browsern (Chrome, Firefox ...) herausfinden, indem wir einen Rechtsklick in das Feld machen und Element untersuchen auswählen. Alternativ kann man auch direkt im Quelltext der Seite nach dem Formular suchen.

Formularfelder anpassen

Es ist reiner Zufall, dass der Name des Formularfeldes identisch mit dem Inhalt aus [#form_id] ist. Die Felder sind im Array auch nicht immer in der obersten Ebene abgelegt. Um herauszufinden, in welcher Ebene unser Feld liegt, können wir in der Ausgabe des Arrays nach [Name_des_Feldes] suchen. Dort sollte eine Unterebene [#type] vorhanden sein.

Über diese Arrayebenen können wir das Formularfeld nun in unserer hook_form_alter()-Funktion ansprechen und anpassen. Aber, als Erstes müssen wir sicherstellen, dass wir das Formularfeld nur ansprechen, wenn wir im richtigen Formular sind. Haben wir das sichergestellt, können wir dem Unterarray des Formularfeldes ein neues Attribut hinzufügen.

YOURTHEMENAME_form_alter(&$form, &$form_state, $form_id)
{
    if ('search_block_form' === $form_id)
    {
        $form['search_block_form']['#attributes']['placeholder'] = 'Suchbegriffe eingeben';
    }
 
    echo '<pre>' . print_r($form, TRUE) . '</pre>';
}

Nach dieser Änderung sollte sich der Array beim Neuladen der Seite wie folgt ändern.

Array
(
    [search_block_form] => Array
        (
            [#type] => textfield
            [#title] => Suche
            [#title_display] => invisible
            [#size] => 15
            [#default_value] =>
            [#attributes] => Array
                (
                    [placeholder] => Suchbegriffe eingeben
                )
        )
 
    ...
 
    [#form_id] => search_block_form
 
    ...
 
)

Der Platzhalter müsste im Formularfeld auch schon vorhanden sein. Weitere Attribute, welche verändert werden können, kann man in der Forms-API-Referenz nachlesen.

Abschließendes

Als erster, kleiner Einblick, in das Drupal-Theming, soll dieser Artikel erst einmal reichen. Weitere werden folgen. Zum Abschluss möchte ich euch noch die momentane hook_form_alter()-Funktion vorstellen, welche auf dieser Seite Verwendung findet.

YOURTHEMENAME_form_alter(&$form, &$form_state, $form_id)
{
    if ('search_block_form' === $form_id)
    {
        $form['search_block_form']['#attributes']['placeholder'] = 'Suchbegriffe eingeben';
    }
 
    if ('search_form' === $form_id)
    {
        $form['basic']['keys']['#attributes']['placeholder'] = 'Suchbegriffe eingeben';
 
        if (TRUE === isset($form['advanced']['keywords']))
        {
            if (TRUE === isset($form['advanced']['keywords']['or']))
            {
                $form['advanced']['keywords']['or']['#attributes']['placeholder'] = 'ganze Wörter suchen';
            }
 
            if (TRUE === isset($form['advanced']['keywords']['phrase']))
            {
                $form['advanced']['keywords']['phrase']['#attributes']['placeholder'] = 'nach Satz suchen';
            }
 
            if (TRUE === isset($form['advanced']['keywords']['negative']))
            {
                $form['advanced']['keywords']['negative']['#attributes']['placeholder'] = 'Wörter ausschließen';
            }
        }
    }
 
    if (TRUE === in_array($form_id, array('user_login', 'user_login_block')))
    {
        $form['name']['#attributes']['placeholder'] = 'Benutzernamen eingeben';
        $form['pass']['#attributes']['placeholder'] = 'Passwort eingeben';
    }
 
    //echo '<pre>' . print_r($form_id, TRUE) . '</pre>';
    //echo '<pre>' . print_r($form,    TRUE) . '</pre>';
}
Kategorien: 

Neuen Kommentar schreiben