フォームテキスト

ブロックレベルまたはインラインレベルのフォームテキストを作成します。

概要

フォーム内のブロックレベルのヘルプテキストは、<Form.Text> を使用して作成できます。インラインヘルプテキストは、.text-muted などのインライン HTML 要素とユーティリティクラスを使用して柔軟に実装できます。

フォーム制御にヘルプテキストを関連付ける

ヘルプテキストは、aria-describedby 属性を使用して関連するフォーム制御と明示的に関連付ける必要があります。これにより、スクリーンリーダーなどの支援技術が、ユーザーが制御にフォーカスまたは入力するときにヘルプテキストを読み上げることが保証されます。

入力の下のフォームテキストに、<Form.Text> スタイルを適用できます。このコンポーネントには display: block が含まれており、上の入力との間隔を簡単に調整するための余白が少し追加されています。

結果

読み込み中...

ライブエディター

import Form from 'react-bootstrap/Form';

function FormTextExample() {
  return (
    <>
      <Form.Label htmlFor="inputPassword5">Password</Form.Label>
      <Form.Control
        type="password"
        id="inputPassword5"
        aria-describedby="passwordHelpBlock"
      />
      <Form.Text id="passwordHelpBlock" muted>
        Your password must be 8-20 characters long, contain letters and numbers,
        and must not contain spaces, special characters, or emoji.
      </Form.Text>
    </>
  );
}

export default FormTextExample;

import Form from 'react-bootstrap/Form';

function FormTextExample() {
  return (
    <>
      <Form.Label htmlFor="inputPassword5">Password</Form.Label>
      <Form.Control
        type="password"
        id="inputPassword5"
        aria-describedby="passwordHelpBlock"
      />
      <Form.Text id="passwordHelpBlock" muted>
        Your password must be 8-20 characters long, contain letters and numbers,
        and must not contain spaces, special characters, or emoji.
      </Form.Text>
    </>
  );
}

export default FormTextExample;

概要​

API​

FormText​

概要

API

FormText