フォーム

Movable Type で使用されるフォーム要素は、タッチ操作、音声読み上げにも対応できるコンポーネントです。

  • フォーム要素とラベルは <div class="form-group"> ... </div> でグループ化します。
  • すべてのフォーム要素には type 属性が必須です。
  • フォーム要素と一緒に、要素を説明している <label> を必ず記述してください。
  • <label> の for 属性に記述した値と同じものを、フォーム要素の id として指定しています。
  • フォーム要素に関する補足説明がある場合は aria-describedby を加えて、 値と同じ名前の id を説明文に加えます。

テキストフィールド

type 属性を変えることで様々な情報を入力できるようになります。

メールをはじめとした個人情報は第三者へは公開しません。 
<div class="form-group">
  <label for="exampleInputEmail1">メールアドレス</label>
  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
  <small id="emailHelp" class="form-text text-muted">メールをはじめとした個人情報は第三者へは公開しません。</small>
</div>

// URL
<label for="exampleInputURL">URL</label>
<input type="url" class="form-control" id="exampleInputURL" value="https://www.sixapart.jp/">

// TEL
<label for="exampleInputTEL">TEL</label>
<input type="tel" class="form-control" id="exampleInputTEL" value="03-000-0000">

// パスワード
<label for="exampleInputPassword">パスワード</label>
<input type="password" class="form-control" id="exampleInputPassword" value="mt7forall">

// 数字
<label for="exampleInputNumber">数字</label>
<input type="number" class="form-control" id="exampleInputNumber" value="4">

// 日時
<label for="exampleInputDateTime">日時</label>
<input type="datetime-local" class="form-control" id="exampleInputDateTime" value="2017-10-12T13:45:00">

// 日付
<label for="exampleInputDate">日付</label>
<input type="date" class="form-control" id="exampleInputDate" value="2017-10-12">

// 時間
<label for="exampleInputTime">時間</label>
<input type="time" class="form-control" id="exampleInputTime" value="13:45:00">

インプットサイズ

テキストフィールドは 10%, 25%, 50%, 75%, 100% の横幅を設定することができます。

<input type="text" class="form-control w-10">
<input type="text" class="form-control w-25">
<input type="text" class="form-control w-50">
<input type="text" class="form-control w-75">
<input type="text" class="form-control w-100">

セレクトメニュー

<select class="custom-select form-control">
  <option selected>選択してください</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

複数選択

<div class="form-group">
  <label for="exampleFormControlSelect2">複数選択の例</label>
  <select multiple class="form-control" id="exampleFormControlSelect2">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

要素検証

要素の記入ミスやエラーが発生した場合は .is-invalid。ユーザーに正しく記入したことを伝えたい場合は .is-valid を記述します。

@ マークがあるメールアドレスを記入してください。
利用可能なユーザー名です。
<div class="form-group">
    <label for="exampleInputEmailError">メールアドレス</label>
    <input type="text" class="form-control is-invalid" id="exampleInputEmailError">
    <div class="invalid-feedback">@ マークがあるメールアドレスを記入してください。</div>
</div>

編集可能フィールド

編集をクリックすると、インプットフィールドが表示される UI。
※ 実装はプロダクト側の JavaScript で行います。

  • 編集できないインプットフィールドにする場合、readonly と記述し、form-control を form-control-plaintext に切り替えてください。
  • 通常 <label> ではスタイリングされていない、右余白を確保するために .mr-sm-3 を記述してください。

<div class="form-inline">
  <label for="exampleInputEditableURL" class="mr-sm-3">サイトURL</label>
  <input type="text" class="form-control-plaintext w-50" id="exampleInputEditableURL" value="/usr/local/var/www/home" readonly>
  <button type="button" class="btn btn-link">編集</button>
</div>

<div class="form-inline">
  <label for="exampleInputEditableURL2" class="mr-sm-3">サイトURL</label>
  <input type="text" class="form-control w-50" id="exampleInputEditableURL2">
  <button type="button" class="btn btn-link">完了</button>
</div>

チェックボックス・ラジオボタン

.custom-control が記述されたコンテナを用意します。入れ子の HTML 構造は通常と同じになります。


// チェックボックス
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">チェックボックスアイテム</label>
</div>

// ラジオボタン
<div class="custom-control custom-radio">
  <input id="radio1" name="radio" type="radio" class="custom-control-input">
  <label class="custom-control-label" for="radio1">ラジオボタン 1</label>
</div>

スイッチボタン

ON/OFF を操作するスイッチボタンは、チェックボックスに.mt-switchと記述します。マークアップの構造はチェックボックスと同じになります。

ラベル名 
<span class="custom-control-description mr-2">ラベル名</span><input type="checkbox" class="mt-switch" id="exampleSwitch" /><label for="exampleSwitch">ラベル名</label>

ファイルアップロード

<div class="form-group">
  <label for="exampleFormControlFile1">ファイル</label>
  <input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>

サジェスト UI

フォーム要素の直下に要素を記述することで実装できます。実装例では span に記述されている .mt-suggest__select ですが、他の要素でも大丈夫です。

この UI を実装する際は、.form-group が記述されている要素に .position-relative も追加してください。

  • Mobable Type
  • CMS
  • Content
  • Management





<div class="form-group position-relative">
  <label for="exampleInputTag">タグ</label>
  <input type="text" class="form-control" id="exampleInputTag">
  <div class="mt-suggest">
    <div class="mt_suggest__list">
      <ul>
        <li><span class="mt-suggest__select">...</span></li>
      </ul>
    </div>
  </div>
</div>