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>

かなり基本的な形です。ここで、私がやりたいことは単純です。「ログインを記憶する」というラベルをチェックボックスの NEXT にしたいだけです。それと同じくらい簡単です。また、パスワード フィールドとチェックボックスの間にもう少しスペースが必要です。

さて、これを行う最も簡単できちんとした方法は何ですか? (このテンプレート内に「style=」を追加するだけで実行してください。適切に CSS に追加します)。

チェックボックスをつけてみdisplay:inlineました。ただし、Dojo はページの左端に配置しているように見えるため (?)、まったく表示されません。

「新規顧客」フォームを作成する必要があります。通常の 1 行に 1 フィールドのフォームではなく、物事を隣り合わせに配置して、よりきれいなレイアウトを作成できるようにしたいと考えています。

ボーナス質問:ウィジェットのグループの周りに境界線を表示する最も簡単な方法は何ですか? 上品なもの。

ありがとう！

メルク。

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>

これにより、ラベルがチェックボックスの右側に配置され、ラベルがチェックボックスにバインドされます。また、ラベルに margin-left を追加して、パスワード フィールドとチェックボックスの間にスペースができるようにしました。

于 2012-12-05T10:17:49.247 に答える