シンプルなフォーム
説明
CSS Gridを使えば、簡潔なマークアップで、labelの列の幅を揃えることができます。
この例では、入力要素をinputの列に配置しています。ですが、要件に応じて、入力要素をdivやspanで囲い、その囲んだ要素をinputの列に配置することもあります。
HTML
<form>
<label for="form-name">名前</label>
<input id="form-name" name="name" autocomplete="name" type="text">
<label for="form-email" >メールアドレス</label>
<input id="form-email" name="email" autocomplete="email" type="email">
<label for="form-url" >URL</label>
<input id="form-url" name="url" autocomplete="url" type="url">
<button type="submit">送信</button>
</form>CSS
form {
display: grid;
gap: 10px;
grid-template-columns: [label] 150px [input] 1fr;
}
form > label {
grid-column: label;
}
form > input {
grid-column: input;
}
form > button[type="submit"] {
grid-column: 1 / -1;
}