フォーム

フォームコントロールのスタイル、レイアウトオプション、およびさまざまなフォームを作成するためのカスタムコンポーネントの例と使用方法に関するガイドラインです。

概要

<FormControl>コンポーネントは、Bootstrapスタイルのフォームコントロールをレンダリングします。<FormGroup>コンポーネントは、適切な間隔でフォームコントロールをラップし、ラベル、ヘルプテキスト、および検証状態をサポートします。アクセシビリティを確保するには、<FormGroup>にcontrolIdを設定し、ラベルには<FormLabel>を使用します。

結果

読み込み中…

ライブエディタ

import Button from 'react-bootstrap/Button'; import Form from 'react-bootstrap/Form'; function BasicExample() { return ( <Form> <Form.Group className="mb-3" controlId="formBasicEmail"> <Form.Label>Email address</Form.Label> <Form.Control type="email" placeholder="Enter email" /> <Form.Text className="text-muted"> We'll never share your email with anyone else. </Form.Text> </Form.Group> <Form.Group className="mb-3" controlId="formBasicPassword"> <Form.Label>Password</Form.Label> <Form.Control type="password" placeholder="Password" /> </Form.Group> <Form.Group className="mb-3" controlId="formBasicCheckbox"> <Form.Check type="checkbox" label="Check me out" /> </Form.Group> <Button variant="primary" type="submit"> Submit </Button> </Form> ); } export default BasicExample;

import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';

function BasicExample() {
  return (
    <Form>
      <Form.Group className="mb-3" controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="Enter email" />
        <Form.Text className="text-muted">
          We'll never share your email with anyone else.
        </Form.Text>
      </Form.Group>

      <Form.Group className="mb-3" controlId="formBasicPassword">
        <Form.Label>Password</Form.Label>
        <Form.Control type="password" placeholder="Password" />
      </Form.Group>
      <Form.Group className="mb-3" controlId="formBasicCheckbox">
        <Form.Check type="checkbox" label="Check me out" />
      </Form.Group>
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
  );
}

export default BasicExample;

<FormControl>コンポーネントは、<input>またはその他の指定されたコンポーネントを直接レンダリングします。制御されていない<FormControl>の値にアクセスする必要がある場合は、制御されていない入力と同様にrefをアタッチし、ReactDOM.findDOMNode(ref)を呼び出してDOMノードを取得します。その後、そのノードを他の制御されていない入力と同様に操作できます。

アプリケーションに多数のフォームグループが含まれている場合は、ラベル、コントロール、およびその他の必要なコンポーネントをレンダリングする完全なフィールドグループをカプセル化する上位レベルのコンポーネントを構築することをお勧めします。これらのフィールドグループの構成は、個々のアプリケーションに固有でありすぎて、優れたワンサイズフィットオールソリューションを許容しないため、これをすぐに提供していません。

無効化されたフォーム

入力にdisabledブール属性を追加して、ユーザー操作を防止し、表示を薄くします。

結果

読み込み中…

ライブエディタ

import Form from 'react-bootstrap/Form'; function FormDisabledInputExample() { return ( <> <Form.Group className="mb-3"> <Form.Label>Disabled input</Form.Label> <Form.Control placeholder="Disabled input" disabled /> </Form.Group> <Form.Group className="mb-3"> <Form.Label>Disabled select menu</Form.Label> <Form.Select disabled> <option>Disabled select</option> </Form.Select> </Form.Group> <Form.Group className="mb-3"> <Form.Check type="checkbox" label="Can't check this" disabled /> </Form.Group> </> ); } export default FormDisabledInputExample;

import Form from 'react-bootstrap/Form';

function FormDisabledInputExample() {
  return (
    <>
      <Form.Group className="mb-3">
        <Form.Label>Disabled input</Form.Label>
        <Form.Control placeholder="Disabled input" disabled />
      </Form.Group>
      <Form.Group className="mb-3">
        <Form.Label>Disabled select menu</Form.Label>
        <Form.Select disabled>
          <option>Disabled select</option>
        </Form.Select>
      </Form.Group>
      <Form.Group className="mb-3">
        <Form.Check type="checkbox" label="Can't check this" disabled />
      </Form.Group>
    </>
  );
}

export default FormDisabledInputExample;

<fieldset>にdisabled属性を追加して、内部のすべての制御を無効にします。

結果

読み込み中…

ライブエディタ

import Button from 'react-bootstrap/Button'; import Form from 'react-bootstrap/Form'; function FormDisabledExample() { return ( <Form> <fieldset disabled> <Form.Group className="mb-3"> <Form.Label htmlFor="disabledTextInput">Disabled input</Form.Label> <Form.Control id="disabledTextInput" placeholder="Disabled input" /> </Form.Group> <Form.Group className="mb-3"> <Form.Label htmlFor="disabledSelect">Disabled select menu</Form.Label> <Form.Select id="disabledSelect"> <option>Disabled select</option> </Form.Select> </Form.Group> <Form.Group className="mb-3"> <Form.Check type="checkbox" id="disabledFieldsetCheck" label="Can't check this" /> </Form.Group> <Button type="submit">Submit</Button> </fieldset> </Form> ); } export default FormDisabledExample;

import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';

function FormDisabledExample() {
  return (
    <Form>
      <fieldset disabled>
        <Form.Group className="mb-3">
          <Form.Label htmlFor="disabledTextInput">Disabled input</Form.Label>
          <Form.Control id="disabledTextInput" placeholder="Disabled input" />
        </Form.Group>
        <Form.Group className="mb-3">
          <Form.Label htmlFor="disabledSelect">Disabled select menu</Form.Label>
          <Form.Select id="disabledSelect">
            <option>Disabled select</option>
          </Form.Select>
        </Form.Group>
        <Form.Group className="mb-3">
          <Form.Check
            type="checkbox"
            id="disabledFieldsetCheck"
            label="Can't check this"
          />
        </Form.Group>
        <Button type="submit">Submit</Button>
      </fieldset>
    </Form>
  );
}

export default FormDisabledExample;

ブラウザは、<fieldset disabled>内のすべてのネイティブフォームコントロール（<input>、<select>、および<button>要素）を無効として扱い、キーボードとマウスの両方による操作を妨げます。

ただし、フォームに<a ... class="btn btn-*">などのカスタムボタンのような要素も含まれている場合、これらにはpointer-events: noneのスタイルのみが適用され、キーボードを使用してフォーカスと操作が可能です。この場合、フォーカスを受け取らないようにtabindex="-1"を追加し、補助技術に状態を知らせるためにaria-disabled="disabled"を追加することで、これらのコントロールを手動で変更する必要があります。

API

Form

FormLabel