Hi,
The doc at https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/FrontendResources/VerticalForms/#H5Bhtml5D says to use P
as in:
<form action="." class="xform" method="post" name="form_name1">
<dl>
<dt>
<label for="input_id1">Label</label>
</dt>
<dd>
<input id="input_id1" name="input_name1" type="text" size="60" value=""/>
</dd>
</dl>
<p>
<span class="buttonwrapper">
<input class="button" type="submit" value="Button"/>
</span>
</p>
</form>
For me this not semantic at all and not great (even if technically correct).
Most places I’ve seen in our code use DIV
which seems much better from a semantic POV. For example:
<form action="$xwiki.relativeRequestURL" class="xform third">
## CSRF prevention
<input type="hidden" name="form_token" value="$!{services.csrf.getToken()}" />
<input type="hidden" name="xpage" value="copy" />
<input type="hidden" name="overwrite" value="true" />
<input type="hidden" name="sourceWikiName" value="$escapetool.xml($sourcewiki)" />
<input type="hidden" name="sourceSpaceName" value="$escapetool.xml($sourcespace)" />
<input type="hidden" name="sourcePageName" value="$escapetool.xml($sourcepage)" />
<input type="hidden" name="targetWikiName" value="$escapetool.xml($targetwiki)" />
<input type="hidden" name="targetSpaceName" value="$escapetool.xml($targetspace)" />
<input type="hidden" name="targetPageName" value="$escapetool.xml($targetpage)" />
<div class="buttons">
<span class="buttonwrapper"><input type="submit" value="$services.localization.render('core.copy.submit')" class="button"/></span>
<span class="buttonwrapper"><a class="secondary button" href="$doc.getURL('view', 'xpage=copy')">$services.localization.render('core.copy.changeTarget')</a></span>
<span class="buttonwrapper"><a class="secondary button" href="$doc.getURL()">$services.localization.render('core.copy.cancel')</a></span>
</div>
</form>
So I’m proposing to agree that we should use DIV
as our best practice and fix https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/FrontendResources/VerticalForms/#H5Bhtml5D and also fix places in our code where we still use P
(for example: https://github.com/xwiki/xwiki-platform/blob/07c0927c9bf1a6a48db4ef8deb286f16d6e7c1b7/xwiki-platform-core/xwiki-platform-web/src/main/webapp/templates/distribution/macros.vm#L45).
WDYT?
Thanks
PS: discussion started here: https://matrix.to/#/!ikPtGZaGWtyblizzlR:matrix.xwiki.com/$160044510916343OHRcM:matrix.xwiki.com?via=matrix.xwiki.com&via=matrix.org&via=t2bot.io
Interesting point from the discussion linked above:
Would be so nice to use custom xwiki web components to avoid HTML code duplication and avoid these inconsistencies</related topic>
Note to self: verify if web components are now supported by all browsers that XWiki supports (without polyfills since they’d slow things down probably).