Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
We need to take a step back and look at how forms looks when they are rendered, we have old markup still hanging & generally it would be a good time to look at it with fresh eyes.
e.g: search field:
<form action="/search/node" method="get" id="search-block-form" accept-charset="UTF-8" data-drupal-form-fields="edit-keys,edit-submit">
<div class="form-item form-type-search form-item-keys form-no-label">
<label for="edit-keys" class="visually-hidden">Search</label>
<input title="Enter the terms you wish to search for." type="search" id="edit-keys" name="keys" value="" size="15" maxlength="128" class="form-search">
</div>
<div class="form-actions form-wrapper" id="edit-actions">
<input type="submit" id="edit-submit" name="" value="Search" class="button form-submit">
</div>
</form>
Problems:
We have a bit of leftovers from the long time ago
wrapper:
<div class="form-item form-type-search form-item-keys form-no-label">
* .form-item could be adressed instead as form > div (or be .form__item)
.form-type-search Fair enough describes which type form is
.form-no-label Describes if there's a label, but what is the use case for this?
.form-item-keys huh?
.form-search ok yes we got its a search - but we got that earlier a repeat from earlier
the field
<input title="Enter the terms you wish to search for." type="search" id="edit-keys" name="keys" value="" size="15" maxlength="128" class="form-search">
The id is connected to the label, so it must be there.
size are there any reason to have that ? its still part of html5, but imho smells of html4 / lets write markup that have inline styling inside of it. We have CSS to take care of that today and if there's not a width set to it, it gets to be default 20 wide.
.form-search this is already defined in the type and can be selected with input[type="search"] instead of adding in a custom class
Proposed resolution
as an example with the search field
<form action="/search/node" method="get" id="search-block-form" accept-charset="UTF-8" data-drupal-form-fields="edit-keys,edit-submit">
<div class="form-type__search>
<label for="edit-keys" class="visually-hidden">Search</label>
<input title="Enter the terms you wish to search for." type="search" id="edit-keys" name="keys" value="">
<input title="Enter the terms you wish to search for." type="search" id="edit-keys" name="keys" value="" maxlength="128">
</div>
<div class="form__actions>
<input type="submit" name="" value="Search" class="button button--submit">
</div>
</form>
default classname would then be:
form > div / form__item { ... }
.form-type__search{ ... }
.form-type__search label{ ... }
input[type="search"] {...}
.form__actions{...}
.button / .button--submit{...}
That should make the overview and ease of reading forms quicker & IF a theme need more classnames to describe its easy to add in as needed (as we have agreed upon in the way points).
Comments
Comment #1
mortendk CreditAttribution: mortendk as a volunteer commentedComment #2
mortendk CreditAttribution: mortendk as a volunteer commentedComment #3
mortendk CreditAttribution: mortendk as a volunteer commentedComment #4
mortendk CreditAttribution: mortendk as a volunteer commentedComment #5
mortendk CreditAttribution: mortendk as a volunteer commentedupdated the dreammarkup a bit to have bem naming etc
Comment #6
mortendk CreditAttribution: mortendk as a volunteer commentedgasp looking at input template it really needs some love
input.html.twig:
looks like we need to push some variables to the template as well to make it easy for a themer to change this, even if we dont agree on changing and keep it status quo
Comment #7
mortendk CreditAttribution: mortendk as a volunteer commentedComment #8
mortendk CreditAttribution: mortendk as a volunteer commentedComment #9
mortendk CreditAttribution: mortendk as a volunteer commentedelse the dirty solution would be to do
input.html.twig
... i might be stupid but i cant find where the class gets generated :/
edit: they are in classes like core/lib/Drupal/Core/Render/Element/(Actions|Button|Details|File|TextField) etc.
Comment #10
lauriiiComment #11
mortendk CreditAttribution: mortendk as a volunteer commentedComment #12
LewisNymanform > divOur CSS standards discourage the use of elements in selectors, and selectors that are overly reliant on the HTML structure. I can go into more detail/post some links if you want.
form__itemI actually think I prefer
form-itemto these alternatives, it means we can do stuff likeform-item--search.form-type__searchI prefer
.form-item--search, see above.form-type__search labelI'm thinking
form-item__label, what do you think?button--submitI have no idea what use this class is, is this used for JS in some situations? This isn't a 'style' of button, it just describes what a form does. I'd be happy to kill it.
.form__actionsI don't know what form-actions is used for, I've always given it the same styling/spacing as form-item in my themes. Do we need this?
Comment #13
LewisNymanWe need to cover the label display variants as well as
form--inline: #2417111: Replace container-inline with form--inline to display forms horizontally.Comment #14
mortendk CreditAttribution: mortendk as a volunteer commentedform > div oooh yup true, even that i might gonna get a heart attack if we have a
<form class="form">;).form-itemmakes sense then.form-item__labelmakes perfect senseform__actions - wrapper for the submit buttons normally located at the bottom of a node, my guess is this is legacy stuff thats where to make sure you could wrap the submit, cancel, delete buttons.
The biggest wtf i captured here was actually how hard it is to modify the
<input>classnames as its all generated deep down in drupal somewhere, i would suggest that we get as much as this class generating out and into the input.twig.html fileComment #15
mortendk CreditAttribution: mortendk as a volunteer commented...also the inline forms as well
Should we do a codepen / gist somewhere and begin to hammer in markup / classname structure for all of forms ?
in that way we can get an overview of whats actually going on
edit: a codepen so we can hammer on the structure http://codepen.io/mortendk/pen/xGrKLb?editors=110
Comment #16
znerol CreditAttribution: znerol commentedComing over from #2503239: Consider using <label><input></input></label> instead of <label for="foo"></label>, note that for checkboxes and options the nested approach seems to be favorable because it is in fact easier to style (
<label><input></input> somewhat lengthy label for a checkbox which might span more than one line in some cases</label>). E.g. bootstrap expects the markup that way.Comment #21
Ivan Berezhnov CreditAttribution: Ivan Berezhnov as a volunteer and at Drupal Ukraine Community for Levi9 commented