Not logged in. · Lost password · Register
Forum: General Help and Support Templates and Layout RSS
Changing the HTML Layout of Forms
Add classes and change structure.
Avatar
Kedes #1
Member since Mar 2018 · 6 posts
Group memberships: Members
Show profile · Link to this post
Subject: Changing the HTML Layout of Forms
Hello, everyone,

I would like to switch from Wordpress to DokuWiki. Now I'm a big fan of the Bulma. io framework and I'm in the process of changing the whole DokuWiki layout to it.

However, I'm stuck with the forms. These are probably generated deep in the system (/inc/html. php or /inc/form. php). Since I'm a friend of clean solutions, I don't want to change them, because that wouldn't stand up to any upgrade and you learn from your mistakes (like Wordpress...). Another theme (BootstrapV3) uses jQuery to customize... but I think that's a workaround and not really a clean solution.

To cut a long story short: how can I change the (form) structure? With an action plugin? If so, how?

Many greetings
kedes
This post was edited on 2018-03-12, 13:27 by andi.
Avatar
turnermm (Moderator) #2
Member since Oct 2009 · 4627 posts · Location: Canada
Group memberships: Global Moderators, Members, Super Mods
Show profile · Link to this post
See: https://www.dokuwiki.org/devel:events_list.  There is an event for each form type.
Myron Turner
github: https://github.com/turnermm
plugins, templates: http://www.mturner.org/devel
Avatar
Kedes #3
Member since Mar 2018 · 6 posts
Group memberships: Members
Show profile · Link to this post
Hi turnermm,

thank you for your response. It's awesome, I didn't know this is possible.

So I have to create an Action Plugin and monitor the *FORM_OUTPUT Events.
When an event is triggered, I have to manipulate the data stream, correct?

I'll try to program that plugin and then get back to you :)

Sincerelly
Kedes
Avatar
Kedes #4
Member since Mar 2018 · 6 posts
Group memberships: Members
Show profile · Link to this post
EDIT 3)

I've had a look inside form.php and there is no configuration for replacing the label or span Element... it is hard coded.
So I think I've to call some kind of preg_replace after rendering the form or I have to replace to whole function (for example the form_field)

BUT: is there a clean way to replace some of these functions? They are not grouped together in one class :(

Greetings
Kedes


EDIT: Got this one... I made a logical mistake ;)

I've done some scripting, but I'm not able to append / change the class :(

This is what I've got so far... The Plugin itself is called but the new classes are ignored:

public function bulmastyler(&$event, $param) {

  print_r($event);

  // Loop through each form element
  foreach ($event->data->_content as $key => $val) {

    // Does the element identifier exist?
    if( is_array($val) && array_key_exists('_elem' , $val) ) {

        // Check if element is a form element we want to change
        if( $val['_elem'] === 'openfieldset' ) {
            # wrong: $val['class'] = "field";
            # wrong: $val['_class'] = "field";
            $event->data->_content[$key]['class'] = "field";
            $event->data->_content[$key]['_class'] = "field";
        }

        //print_r($key);
        //echo "---";
        //print_r($val);

    }

  }

}


EDIT 2)
Ok, changing / adding classes works, but currently I get this:

<fieldset class="field">

    <legend>Registrieren</legend>

    <label class="control">
        <span>Benutzername</span>
        <input type="text" name="login" class="input" size="50" required="required">
     </label>

(...)

    <button type="submit" class="button is-info">Registrieren</button>
</fieldset>

What I want to archive:

<div class="wrapper">

    <h3>Registrieren</h3>

     <div class="field">
        <label class="label">Benutzername</label>
        <div class="control">
            <input type="text" name="login" class="input" size="50" required="required">
        </div>
     </div>
    
(...)

    <button type="submit" class="button is-info">Registrieren</button>
</div>

Layout goal: https://bulma.io/documentation/form/general/

Is there any way to change the order of the elements and replace/remove or add wrapper elements?

Greetings
This post was edited 3 times, last on 2018-03-13, 09:27 by Kedes.
Avatar
Kedes #5
Member since Mar 2018 · 6 posts
Group memberships: Members
Show profile · Link to this post
I'l think I will do it another way...

I use the register_hook TPL_CONTENT_DISPLAY and manipulate the content inside the <form></form> with some simple regex... seems to be the best way in my opinion. A parser like simple_html_dom is way too large for that simple purpose.

Or do you have another idea?

Greetings
Kedes
Avatar
turnermm (Moderator) #6
Member since Oct 2009 · 4627 posts · Location: Canada
Group memberships: Global Moderators, Members, Super Mods
Show profile · Link to this post
I was not aware that the login form could be modified with tpl_content_display, but if so and you can use it, I suppose it's OK.  But if you are only interested in the login form, you should be able to modify it by substituting your own html for the default. I've never done that myself, only added fields.
Myron Turner
github: https://github.com/turnermm
plugins, templates: http://www.mturner.org/devel
Avatar
sascha.leib #7
User title: /sascha
Member since Mar 2018 · 2 posts · Location: Europe
Group memberships: Members
Show profile · Link to this post
In reply to post #4
Subject: 8-(
Hello there,

sorry if I come in here as the HTML-grammar-police ;-) but I just saw this here and that really bites my eyes  8-(

Quote by Kedes on 2018-03-12, 14:48:
What I want to archive:

<div class="wrapper">

    <h3>Registrieren</h3>

     <div class="field">
        <label class="label">Benutzername</label>
        <div class="control">
            <input type="text" name="login" class="input" size="50" required="required">
        </div>
     </div>
    
(...)

    <button type="submit" class="button is-info">Registrieren</button>
</div>

Layout goal: https://bulma.io/documentation/form/general/

Unfortunately there is so much wrong with this code that I don't even know where to start... I understand that you took the example from that "Bulma.io" site, but they are not exactly an example to follow... and not only in this snippet, well, but that's a different topic...

Oh, well, OK, let me start:

Before anything else: There's a couple of HTML snippets coming from the DokuWiki code that are burning under my fingers to fix because they are, well, worthy of fixing, let's say... The <fieldset> part you quoted above isn't one of them. In fact, it is the correct way to group form elements and to give them a semantically meaningful heading. You shouldn't replace <fieldset> with the (un-semantic) <div> unless you make sure that the semantic structure remains otherwise intact. The above example doesn't do that.

However, I don't know how complex the form is going to be. If all you need is a user name and an email address (it's a registration form, after all), you may not need any grouping at all. After all, there must be also a <form> element and nobody says that the title has to be part of the form... (hint: you may want to look up the "aria-labelledby" attribute...)

OK, now to the nitty-gritty: the <label> element can either wrap the control it refers to, or it can explicitly refer to it using the "for" attribute. again, this establishes a semantic relationship between the two – with some very practical side-effects: clicking on the label can then activate the associated control. In the snippet above, it can't.

Secondly, a <label> element is, of course, a label, an <input> element an input and a <button> is (you guessed it!) a button. There is no need to remind anyone of this by giving each of them a class name that is exactly identical to the element name.

In the same sense, an <input> element is by definition a control. No need to wrap it in a <div class="control">, unless you need a wrapper for layout purposes, but then why don't you call it something that makes more sense? maybe "<div class="group">" or something? Hint: most likely you don't need this wrapper, it's just code clutter that should go.

To wrap it up: may I suggest to aim for the following HTML code instead?

Firstly, here's an example which follows the sample code as close as possible:
<form ...>
  <fieldset>
    <legend>Registrieren</legend>

    <label for="login-field">Benutzername</label>
    <input type="text" id="login-field" name="login" size="50" required="required">

    (...)

  </fieldset>
  <button type="submit">Registrieren</button>
</form>

Secondly, here's a very simple registration form without fieldsets:
<form ... >
  <h3>Registrieren</h3>

  <p>
    <label for="login-field">Benutzername</label>
    <input type="text" id="login-field" name="login" size="50" required="required">
  </p>

  <p>
    <label for="email-field">E-Mail</label>
    <input type="email" id="email-field" name="login" size="80" required="required">
  </p>

  <button type="submit">Registrieren</button>
</form>

You'll find that this is much cleaner, much more semantic, more accessible and much easier to style  :-)

I hope you find that useful. Cheers and all the best

/sascha
http://ad.hominem.info/ – logical and rhetoric fallacies en gros and en detail
This post was edited on 2018-03-14, 08:30 by sascha.leib.
Avatar
ach (Administrator) #8
Member since May 2006 · 1909 posts · Location: Folkestone, UK
Group memberships: Administrators, Members, Super Mods, Wiki Managers
Show profile · Link to this post
There is another way how you can support a framework without the need to change any of the HTML or classes. Look at this example how to map WordPress to DokuWiki classes. That might not work for everything but should get you most of what you need.
Avatar
Kedes #9
Member since Mar 2018 · 6 posts
Group memberships: Members
Show profile · Link to this post
In reply to post #7
Quote by sascha.leib:
(...)
/sascha

Hi Sascha and ach,

thank you for your responses, indeed the bulma style needs this kind of wrapping to get the css flexbox working. But after my plugin for reordering seems to crash some forms (I get an error 500), I think I'm going to go the lazy "less" way ;)

Too bad there is no template system like fatfreeframework or laravel is using it where I define a structure with elements that get replaced with the actual data:

Psydocode:

_login_tmpl.php
<div class="example">
  <div class="anotherExample">
     <? input_label('text', 'classes_or_other_attributes'); ?>
     <? input_field('typ', 'name', 'standardvalue', 'classes_or_other_attributes'); ?>
  </div>
  <div class="yetanotherExample">
      <? input_label('text', 'classes_or_other_attributes'); ?>
     <? input_field('typ', 'name', 'standardvalue', 'classes_or_other_attributes'); ?>
  </div>
</div>

_register_tmpl.php
<div class="example">
  <div class="anotherExample">
     <? input_label('text', 'classes_or_other_attributes'); ?>
     <? input_field('typ', 'name', 'standardvalue', 'classes_or_other_attributes'); ?>
  </div>
  <div class="yetanotherExample">
      <? input_label('text', 'classes_or_other_attributes'); ?>
     <? input_field('typ', 'name', 'standardvalue', 'classes_or_other_attributes'); ?>
  </div>
  <div class="yetanotherExample">
      <? input_label('text', 'classes_or_other_attributes'); ?>
     <? input_field('typ', 'name', 'standardvalue', 'classes_or_other_attributes'); ?>
  </div>
  <div class="yetanotherExample">
      <? input_label('text', 'classes_or_other_attributes'); ?>
     <? input_field('typ', 'name', 'standardvalue', 'classes_or_other_attributes'); ?>
  </div>
</div>

Greetings
Kedes
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Current time: 2019-05-23, 06:14:34 (UTC +02:00)