aria-describedby
html bootstrap5 Sample
フォームの基本要素:form-groupとform-control
<form>
<div class="form-group">
<!-- 入力要素ごとにform-group、入力エリアはform-control -->
<label for="email1">メールアドレス</label>
<input type="email" class="form-control" id="email1" aria-describedby="emailHelp" placeholder="メールアドレスを入力">
<small id="emailHelp" class="form-text text-muted">キャリアメールは届かない場合があります。</small>
</div>
<div class="form-group">
<label for="password1">パスワード</label>
<input type="password" class="form-control" id="password1" placeholder="パスワードを入力">
</div>
<div class="form-group">
<label for="select1">プルダウンメニューから選んでください</label>
<select class="form-control" id="select1">
<option>メニュー1</option>
<option>メニュー2</option>
<option>メニュー3</option>
<option>メニュー4</option>
<option>メニュー5</option>
</select>
</div>
<!-- 複数選択のプルダウンメニュー -->
<div class="form-group">
<label for="select2">複数選択のプルダウンメニュー</label>
<select multiple class="form-control" id="select2">
<option>複数選択可A</option>
<option>複数選択可B</option>
<option>複数選択可C</option>
<option>複数選択可D</option>
<option>複数選択可E</option>
</select>
</div>
<div class="form-group">
<label for="textarea1">複数行のテキスト入力欄</label>
<textarea class="form-control" id="textarea1" rows="3"></textarea>
</div>
<div class="form-group">
<label for="file1">ファイルを選択</label>
<input type="file" class="form-control-file" id="file1">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="checkbox01">
<label class="form-check-label" for="">チェックする</label>
</div>
<button type="submit" class="btn btn-primary">送信</button>
</form>
ヘルプテキスト(inputの下に説明文)を表示する:aria-describedby
<form>
<label for="inputPassword">パスワード</label>
<input type="password" id="inputPassword" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
パスワードは8〜20文字で、文字と数字を含み、スペース、特殊文字、または絵文字を含むことはできません。
</small>
</form>
入力コントロールの前にアドオンを配置:input-group-prepend
@
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
</div>
ラベル付きの入力グループ:input-group-append
https://example.com/users/
<!-- 固定の文字列を書いておいて、その続きを入力してもらう -->
<label for="basic-url">サイトのURL</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon5">https://example.com/users/</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon5">
</div>
入力グループ ボタン付きアドオン:input-group-append
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="検索キーワード" aria-label="検索キーワード" aria-describedby="basic-addon1">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">検索</button>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-secondary" type="button">好き</button>
</div>
<input type="text" class="form-control" placeholder="商品名" aria-label="商品名" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">嫌い</button>
</div>
</div>
入力グループのサイズ調整/中デフォルト:input-group
Default
<!-- 標準サイズの入力グループ -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
入力グループのサイズ調整/小: input-group-sm
Small
<!-- 小サイズの入力グループ -->
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
</div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
入力グループのサイズ調整/大:input-group-lg
Large
<!-- 大サイズの入力グループ -->
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
</div>
<input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>
ナビバーの中に入力グループ
<nav class="navbar navbar-dark bg-dark">
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
</div>
</form>
</nav>