フォーム

Integration

usebootstrapのIntegration機能を利用すれば、scriptの記載無しでサーバー等からのデータ取得、表示、JsonSchema検証、Post更新などをコンポーネントのみで実現できます。

詳細は integration を確認してください。

Looks good!

Please enter your email

first_name

Looks good!

Please enter your firstname

last_name

Looks good!

Please enter your firstname

vue

<template>
 <ViewState
  v-slot="user"
  src="reqres://users/5"
  path="data"
  schema-src="app-config://usebootstrap/schemas/basic"
 >
  <Row margin="b-3">
   <BColFormLabel
    for="staticEmail"
    class="col-sm-2"
   >
    ID
   </BColFormLabel>
   <Col col="sm-10">
    <BFormInput
     type="text"
     validate
     :value="user.data.id"
     readonly="plaintext"
    />
   </Col>
  </Row>
  <Row margin="b-3">
   <BColFormLabel
    for="staticEmail"
    class="col-sm-2"
   >
    Email
   </BColFormLabel>
   <Col col="sm-10">
    <BFormInput
     type="text"
     validate
     :state-src="user"
     state-path="email"
    />
    <BValidFeedback>
     <template #valid>
      Looks good!
     </template>
     Please enter your email
    </BValidFeedback>
   </Col>
  </Row>
  <Row margin="b-3">
   <BColFormLabel
    for="inputPassword"
    class="col-sm-2"
   >
    first_name
   </BColFormLabel>
   <Col col="sm-10">
    <BFormInput
     type="text"
     validate
     :state-src="user"
     state-path="first_name"
    />
    <BValidFeedback>
     <template #valid>
      Looks good!
     </template>
     Please enter your firstname
    </BValidFeedback>
   </Col>
  </Row>
  <Row margin="b-3">
   <BColFormLabel
    for="inputPassword"
    class="col-sm-2"
   >
    last_name
   </BColFormLabel>
   <Col col="sm-10">
    <BFormInput
     type="text"
     validate
     :state-src="user"
     state-path="last_name"
    />
    <BValidFeedback>
     <template #valid>
      Looks good!
     </template>
     Please enter your firstname
    </BValidFeedback>
   </Col>
  </Row>
  <ActionState src="reqres://user/5">
   <template #default="{ action }">
    <b-button
     color="primary"
     :disabled="!user.validationResult.valid"
     @click="action('post', user.data)"
    >
     Action
    </b-button>
   </template>
   <template #fallback>
    <b-button
     color="primary"
     disabled
    >
     <Spinner
      spinner="grow"
      sm
      aria-hidden="true"
     />
     Loading...
    </b-button>
   </template>
   <template #complete="{ data, status }">
    <b-button
     color="success-subtle"
     color-generate
     @click="status.value = 0"
    >
     Retry
    </b-button>
    <div v-if="status.value == 201">
     Response: {{ data }}
    </div>
    <div v-else>
     ErrorMessages: {{ data }}
    </div>
   </template>
  </ActionState>
 </ViewState>
</template>

Overview

電子メールの検証や数値選択などの新しい入力コントロールを利用するには、すべての入力に適切な type 属性を使用するようにしてください (例: 電子メールのアドレスには email、数値情報には number)。

フォームスタイルの簡単な例です。必要に応じて、適切なクラス、フォームレイアウトなどのドキュメントを読んでください。

Email: email
Password
Checked: false

vue

<template>
 <BForm>
  <BFormControl margin="b-3">
   <BFormLabel>Email address</BFormLabel>
   <BFormInput
    v-model="email"
    type="email"
   />
   <BFormText>We'll never share your email with anyone else.</BFormText>
  </BFormControl>
  <BFormControl margin="b-3">
   <BFormLabel>Password</BFormLabel>
   <BFormInput
    v-model="password"
    type="password"
   />
  </BFormControl>
  <BFormCheck margin="b-3">
   <BFormCheckInput v-model="checked" />
   <BFormCheckLabel>Check me out</BFormCheckLabel>
  </BFormCheck>
  <b-button
   type="submit"
   color="primary"
  >
   Submit
  </b-button>
 </BForm>
 <b-dl margin="t-2">
  <b-dt col="sm-3">
   Email
  </b-dt>
  <b-dd col="sm-9">
   {{ email }}
  </b-dd>
  <b-dt col="sm-3">
   Password
  </b-dt>
  <b-dd col="sm-9">
   <span>{{ password }}</span>
  </b-dd>
  <b-dt col="sm-3">
   Checked
  </b-dt>
  <b-dd col="sm-9">
   {{ checked }}
  </b-dd>
 </b-dl>
</template>

<script setup>
const email = ref('email');
const password = ref('');
const checked = ref(false);
</script>

Form text

Block-level(ブロックレベル) や inline-level(インラインレベル) のフォームテキストは FormText コンポーネントを用いて作成することができます。

入力の下にあるフォームテキストは FormText コンポーネントでスタイルを整えることができます。

ブロックレベルの要素を使用する場合は、上の入力項目との間隔が取りやすいように上の余白が追加されます。

Password

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

vue

<template>
 <BFormControl>
  <BFormLabel>Password</BFormLabel>
  <BFormInput
   type="password"
   aria-describedby="passwordHelpBlock"
  />
  <BFormText>
   Your password must be 8-20 characters long, contain letters and numbers,
   and must not contain spaces, special characters, or emoji.
  </BFormText>
 </BFormControl>
</template>

インラインテキストは、典型的なインライン HTML 要素（<span>や<small>など）を使用し、.form-textクラス以外は使用しません。

Password

be 8-20 characters long.

vue

<template>
 <Row
  gutter="3"
  align-items="center"
 >
  <Col col="auto">
   <BColFormLabel for="inputPassword6">
    Password
   </BColFormLabel>
  </Col>
  <Col col="auto">
   <BFormInput
    id="inputPassword6"
    type="password"
    aria-describedby="passwordHelpInline"
   />
  </Col>
  <Col col="auto">
   <b-span>
    <BFormText>be 8-20 characters long.</BFormText>
   </b-span>
  </Col>
 </Row>
</template>

Disabled forms

入力に disabled 属性を追加することができます。下記の例をご覧ください。

vue

<template>
 <BFormInput
  type="text"
  placeholder="Disabled input here..."
  disabled
 />
</template>

disabled属性を<fieldset>に追加して、その中のすべてのコントロールを無効にします。

ブラウザは、<fieldset disabled>内のすべてのネイティブフォームコントロール（ FormInput、 FormSelect、および Button コンポーネント）を無効として扱い、キーボードとマウスの両方のインタラクションを防ぎます。

ただし、フォームに<a class="btn btn-*"></a> などのカスタムボタンのような要素も含まれている場合、これらにはpointer-events: none の属性のみが与えられます。

つまり、キーボードを使用してフォーカス可能で操作可能です。この場合、これらのコントロールを手動で変更するには、 tabindex="-1" を追加してフォーカスを受け取らないようにし、aria-disabled="disabled" 属性を追加して状態を支援技術に通知する必要があります。

vue

<template>
 <BForm>
  <BFieldset disabled>
   <BLegend>Disabled fieldset example</BLegend>
   <BFormControl margin="b-3">
    <BFormLabel>Disabled input</BFormLabel>
    <BFormInput
     type="text"
     placeholder="Disabled input"
    />
   </BFormControl>
   <BFormControl margin="b-3">
    <BFormLabel>Disabled select menu</BFormLabel>
    <BFormSelect>
     <option>Disabled select</option>
    </BFormSelect>
   </BFormControl>
   <BFormControl margin="b-3">
    <BFormCheck>
     <BFormCheckInput
      type="checkbox"
      disabled
     />
     <BFormCheckLabel>Can't check this</BFormCheckLabel>
    </BFormCheck>
   </BFormControl>
   <b-button
    type="submit"
    color="primary"
   >
    Submit
   </b-button>
  </BFieldset>
 </BForm>
</template>

Bootstrap

フォーム

Integration

Overview

Form text

Disabled forms

See Also

Form control

Select

Checks & radios

Range

Input group

Floating labels

Form layout

Validation

Line chart

Bar chart

Pie chart

Calendar

Date picker

Sortable

Json view

Password strength

Editor

Sortable

Viewstate

Actionstate