Not logged in. · Lost password · Register

All posts by sascha.leib (2)

topic: Changing the HTML Layout of Forms (Add classes and change structure.)  in the forum: General Help and Support Templates and Layout
Avatar
sascha.leib #1
User title: /sascha
Member since Mar 2018 · 2 posts · Location: Europe
Group memberships: Members
Show profile · Link to this post
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.
topic: Hello from Belgium  in the forum: Community User Introductions
Avatar
sascha.leib #2
User title: /sascha
Member since Mar 2018 · 2 posts · Location: Europe
Group memberships: Members
Show profile · Link to this post
Subject: Hello from Belgium
Hello all :-)

You'd probably count me to the older members here, having already worked for more than a quarter of a century in web development and web design... (yes, I started in '93 with a beta version of Mosaic)

Now, I have a little personal project for which I would normally just have programmed my own CMS, but since I bumped into DokuWiki some time ago I thought I should give it a try to adopt the existing software to my needs rather than starting from scratch. Not sure where this will lead, but I believe there's a good basis and with some "touch-ups" it should work...

So expect a few commits from me in the coming weeks: I'm working on my own, more flexible, template and I'll probably make some changes to the Wiki core as well. More details on this in the appropriate forums.

In any case, I'm looking forward to working with you guys :-)

Cheers :-D

/sascha

PS: I should probably add that while I know my way around PHP, HTML and CSS (and a couple of other stuff), I have never used GIT productively, so please be merciful if I mess things up there... I'll try to stick to my own branch, though, so the results shouldn't be too disastrous...
http://ad.hominem.info/ – logical and rhetoric fallacies en gros and en detail
This post was edited on 2018-03-10, 13:51 by sascha.leib.
Close Smaller – Larger + Reply to this post:
Special characters:
Special queries
Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Current time: 2019-05-26, 17:35:45 (UTC +02:00)