0

警告，这可能是这里曾经问过的最简单的问题。我有这样的表格：

  <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>

这是一个非常基本的形式。现在，我想做的很简单：我只是希望标签“记住登录”位于复选框的旁边。就如此容易。我还想在密码字段和复选框之间留出更多空间。

现在，最简单、最整洁的方法是什么？（请在此模板中添加“style=”，我会正确添加到 CSS 中）。

我试过display:inline复选框。然而，它最终根本不显示，因为 Dojo 似乎将它放在页面的最左侧（？）。

我将需要创建一个“新客户”表单，我希望能够将事物彼此相邻放置并创建更整洁的布局，而不是通常的每行一个字段的表单。

奖金问题：让边框出现在一组小部件周围的最简单方法是什么？一些优雅的东西。

谢谢！

默克。

4

1 回答 1

2

正如我在上面的评论中所发布的，我只使用一张表格，因为我认为这对于表格来说很好。但是，很多人会不同意我的看法。

如果您想避免使用表格，可以将复选框放在<label>内。您可以将控件绑定到标签，方法是使用for属性或将控件放在<label>中。

因此，您可以更改：

<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>

到：

<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.

于 2012-12-05T10:17:49.247 回答