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-(
Kedes:1520866137 wroteWhat 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