回答編集履歴

1 sample

yambejp

yambejp score 55672

2017/09/11 12:17  投稿

まずユーザーが選択肢から選ぶように見えますが、
不特定のユーザー名をさらすのは仕様としてはあまり美しくない気がします
(攻撃して下さいといっているようにみえます)
その上で「テキストボックスを中央に配置し」の意図がわかかねます
dialogを作るということでしょうか?
「左にlabelを配置」も意味がよく通じません。
いわゆるlabelを設定するとしてテキストボックスへのフォーカス程度にしか
使えないように見受けられます。
単に見出しと言う意味でしょうか?
dialogをつくって、dl-dt-ddで組むと良いかもしれません。
場合によっては表として認識してtableでもおかしくはないと思います
場合によっては表として認識してtableでもおかしくはないと思います
# sample
```css
dialog h1{text-align:center;}
dialog dl{width:20em;}
dialog dt{clear:both;float:left;display:block;width:4em;}
dialog dd{display:block;}
```
```HTML
<dialog open>
<form>
<h1>ログイン</h1>
<dl>
<dt>ユーザー</dt>
<dd><input type="search" name="user" list="userlist" autocomplete="on" required>
<datalist id="userlist">
<option value="user1">
<option value="user2">
<option value="user3">
</datalist>
</dd>
<dt>PASS</dt>
<dd><input type="password" name="passwd" required></dd>
<dd><input type="submit" value="ログイン"></dd>
</dl>
</form>
</dialog>
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る