My problem

For YEARS it's bugging me that the controls on the login form are staggered, instead of being lined up.

Possible Solutions. And issues.

There are two solutions that come to mind:

  1. Use tables
  2. Use CSS

Using tables for non-tabular data drives me up the wall. It's also hard to maintain and enhance.

Using CSS is a lot easier and flexible for skins... but the current form doesn't easily lend itself to CSS, since the "labels" aren't label elements, but rather plain-text:

(:Summary:form displayed when requesting a [[PmWiki/password(s)]] or username/password:)
'''$[Password required]'''
(:if enabled InvalidLogin:)* $[Name/password not recognized]
(:input auth_form:)
(:if enabled EnableAuthUser:)$[Name]: (:input text name=authid:)\\
(:if:)$[Password]: (:input password name=authpw:)
(:input submit value='OK':)
(:input end:)

This is the default contents of Site.AuthForm.
The page is locked-down to authorized users (me!) in this wiki, but you should have access to it on your own install (and why are you reading this if you don't have one?!?).

Let's use a recipe!

Since the standard PmWiki.Forms code only has input controls, to throw the text into a label element, we would have to use the FormsPlus recipe.

Then, we would apply css to the labels for a defined width, and probably right-align the text.

Issue with the FormsPlus recipe

I got a weird error when I first enabled FormsPlus -- I couldn't edit, and instead I got a bunch of messages instead:

InputMarkup($pagename, $m[1], $m[2])
InputMarkup($pagename, $m[1], $m[2])
Summary: InputMarkup($pagename, $m[1], $m[2])
Author: InputMarkup($pagename, $m[1], $m[2]) InputMarkup($pagename, $m[1], $m[2]) This is a minor edit
InputMarkup($pagename, $m[1], $m[2]) InputMarkup($pagename, $m[1], $m[2]) InputMarkup($pagename, $m[1], $m[2]) InputMarkup($pagename, $m[1], $m[2]) InputMarkup($pagename, $m[1], $m[2])
InputMarkup($pagename, $m[1], $m[2])

Solution: Change Markup to Markup_e in the following codeblock of formsplus.php

Markup_e('input', 'directives',
  "InputMarkup(\$pagename, \$m[1], \$m[2])");

This seems to be in accordance with the usage of $m1[1], $m[2] matching variables.

These notes were added to Cookbook:FormPlus-Talk.

Updated markup and output

(:Summary:form displayed when requesting a [[PmWiki/password(s)]] or username/password:)
%label label-important%'''$[Password required]'''%%
(:if enabled InvalidLogin:)%label label-warning%$[Name/password not recognized]%%
(:input auth_form:)
(:if enabled EnableAuthUser:)(:input label authid $[Name]::) (:input text name=authid:)\\
(:if:)(:input label authpw $[Password]::) (:input password name=authpw:)
(:input submit value='OK' class='btn':)
(:input end:)
NOTE: labels displayed inline with the input takes a lot more markup. That's a project for another time.
NOTE: screenshot shows both invariant "password required" label (red), as well as "invalid-login" warning, in yellow. I'm not sure yet how I feel about this markup....

TODO: make it live on this site