Bootstrap Formular - Checkbox und Radiobutton

Hier bekommst Du deutschsprachigen Support. Keine Fehlermeldungen oder Erweiterungswünsche bitte!
Post Reply
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Bootstrap Formular - Checkbox und Radiobutton

Post by santscho »

Damit ich nicht in der cnt23.article.inc.php rumbasteln muss und trotzdem Bootstrap4-Formulare erstellen kann, möchte ich die Formulare im Content Part als "CUSTOM: {FIELD}" ausgeben. Das sieht bei mir dann so aus:

Code: Select all

[FG][IF_ERROR:text][ER]{ERROR:text}[/ER][/IF_ERROR][LA]{LABEL:text}[/LA]{text}[/FG]
[FG][IF_ERROR:multiline][ER]{ERROR:multiline}[/ER][/IF_ERROR][LA]{LABEL:multiline}[/LA]{multiline}[/FG]
[FG][IF_ERROR:password][ER]{ERROR:password}[/ER][/IF_ERROR][LA]{LABEL:password}[/LA]{password}[/FG]
[FG][IF_ERROR:email][ER]{ERROR:email}[/ER][/IF_ERROR][LA]{LABEL:email}[/LA]{email}[/FG]
[FG][IF_ERROR:select][ER]{ERROR:select}[/ER][/IF_ERROR][LA]{LABEL:select}[/LA]{select}[/FG]
[BT]{breaktext}[/BT]
[FG][IF_ERROR:listmenu][ER]{ERROR:listmenu}[/ER][/IF_ERROR][LA]{LABEL:listmenu}[/LA]{listmenu}[/FG]
[FG][IF_ERROR:file][ER]{ERROR:file}[/ER][/IF_ERROR][LA]{LABEL:file}[/LA]{file}[/FG]
[FG][IF_ERROR:checkbox][ER]{ERROR:checkbox}[/ER][/IF_ERROR][LA]{LABEL:checkbox}[/LA]{checkbox}[/FG]
Dann ein Frontend-Renderscript:

Code: Select all

<?php
$content['all'] = str_replace('[FG]', '<div class="form-group">', $content['all']);
$content['all'] = str_replace('[/FG]', '</div>', $content['all']);
$content['all'] = str_replace('[LA]', '<label>', $content['all']);
$content['all'] = str_replace('[/LA]', '</label>', $content['all']);
$content['all'] = str_replace('[ER]', '<div class="">', $content['all']);
$content['all'] = str_replace('[/ER]', '</div>', $content['all']);
$content['all'] = str_replace('[BT]', '<div class="form-group p-2 bg-info rounded">', $content['all']);
$content['all'] = str_replace('[/BT]', '</div>', $content['all']);
$content['all'] = str_replace('type="text"', 'type="text" class="form-control" ', $content['all']);
$content['all'] = str_replace('type="email"', 'type="email" class="form-control" ', $content['all']);
$content['all'] = str_replace('type="password"', 'type="password" class="form-control" ', $content['all']);
$content['all'] = str_replace('type="file"', 'type="file" class="form-control-file" ', $content['all']);
$content['all'] = str_replace('type="checkbox"', 'type="checkbox" class="form-check-input" ', $content['all']);
$content['all'] = str_replace('<textarea', '<textarea class="form-control" ', $content['all']);
$content['all'] = str_replace('<select', '<select class="form-control" ', $content['all']);
?>
Das funktioniert soweit mit allen Formularfeld-Typen wunderbar. Aber für die Typen "Checkbox" und "Radiobutton" bekomme ich die Ersetzter nicht hin, weil die html-Struktur dieser zwei Typen in der cnt23.article.inc.php total anders aufgebaut wird als die Bootstrap4-Variante.

Bootstrap:

Code: Select all

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Option 1
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
  <label class="form-check-label" for="defaultCheck2">
    Option 2
  </label>
</div>
phpwcms:

Code: Select all

<span class="form-checkbox">
  <label for="checkbox0">
    <input type="checkbox" class="form-check-input" name="checkbox[]" id="checkbox0" value="Option1">Option 1
  </label>
  <label for="checkbox1">
    <input type="checkbox" class="form-check-input" name="checkbox[]" id="checkbox1" value="Option2">Option 2
  </label>
</span>
Ich müsste die Checkbox raus aus dem <label> schaffen und nur das Label selbst in ein

Code: Select all

<label for="checkboxX" class="form-check-label"></label>
packen. Mit einer Modifikation der cnt23.article.inc.php würde ich das schon irgendwie hinbiegen können, möchte ich aber nicht unbedingt. Gibt es noch eine andere Möglichkeit?

Grüsse
Ralph
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: Bootstrap Formular - Checkbox und Radiobutton

Post by Oliver Georgi »

Es gibt hierfür aktuell keine simple Lösung. Ich füge mir dann in aller Regel schlicht alternative CSS-Klassen hinzu. Das ist wesentlich flexibler zu handhaben. Vor allem braucht es keine Patches oder umständliche Ersetzer.

Die Formularklassen gibt man dem jeweiligen Feld direkt mit.
Bildschirmfoto 2020-09-21 um 15.27.13.png
Auch die ganzen [FG] Ersetzer sind eigentlich überflüssig.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: Bootstrap Formular - Checkbox und Radiobutton

Post by Oliver Georgi »

Allerdings könnte ich vielleicht den Aufbau für die Formularelemente auslagern.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
Post Reply