Question

Warning, this is possibly the easiest possible question ever asked here.
I have a form like this:

  <div data-dojo-type="dijit.layout.ContentPane" data-dojo-attach-point="loginPane" data-dojo-props="title: 'Login'">
    <div data-dojo-type="hotplate.hotDojoWidgets.AlertBar" data-dojo-attach-point="loginAlertBar"></div>
    <form data-dojo-type="dijit.form.Form" data-dojo-attach-point="loginForm" method="POST">
      <label for="${id}_login">Login</label>
      <input name="login" id="${id}_login" data-dojo-attach-point="login" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="required:true"/>
      <label for="${id}_password">Password</label>
      <input type="password" name="password" id="${id}_password0" data-dojo-attach-point="password" data-dojo-type="hotplate.hotDojoAuth.ValidationPassword" />
      <input type="checkbox" name="remember" id="${id}_remember" data-dojo-attach-point="remember" data-dojo-type="dijit.form.CheckBox" />
      <label for="${id}_checkbox">Remember login</label>    
      <input type="submit" data-dojo-attach-point="loginButton" data-dojo-type="hotplate.hotDojoWidgets.BusyButton" label="Login!" />
    </form>
    <div data-dojo-attach-event="onclick:_onRecoverClick">Recover your password</div>
  </div>

It’s a pretty basic form. Now, what I want to do is simple: I simply would like the label “Remember login” to be NEXT to the checkbox. As simple as that.
I would also like a little more space between the password field and the checkbox.

Now, what is the easiest, neatest way of doing this? (Please do it just adding “style=” within this template, I will add it to the CSS properly).

I tried display:inline for the checkbox. However, it ends up not displaying at all, as Dojo seems to place it on the far left hand side of the page (?).

I will need to create a “new customer” form, and I would love to be able to place things next to each other and create neater layouts, rather than the usual one-field-per-line form.

BONUS QUESTION: what’s the easiest way to get a border to appear around a group of widgets? Something classy.

Thanks!

Merc.

Answer 1

As posted in my comment above, I’d just use a table as I think this is fine for a form. However, many people would disagree with me.

If you want to avoid tables you could place the checkbox inside the <label>. You can bind a control to a label, either by using the for attribute or placing the control inside the <label>.

• See w3 tutorial on label use

Hence, you could change:

<input
    type="checkbox" name="remember" id="${id}_remember"
    data-dojo-attach-point="remember"
    data-dojo-type="dijit.form.CheckBox" />
<label for="${id}_checkbox">Remember login</label>

to:

<label style="margin-left:10px">
    <input
        type="checkbox" name="remember"
        data-dojo-attach-point="remember"
        data-dojo-type="dijit.form.CheckBox"
    />Remember login
</label>

This should place the label to the right of the checkbox and bind the label to the checkbox. I’ve also, added a margin-left to the label so that space is created between your password field and the checkbox.