フォーム

実際のフォームが取らせる状態で、人が文字を入力する欄を並べています。どれも余白のある rst-box の中に入っています。これらの部品がそう前提しているからです。

どの例も実際に動きますが、リンクはどこにも移動しません。 HTML にはコピーできるマークアップがあります。

field

ラベル、入力欄、任意のヒント、補足、エラー。ID を明示した、一般的なテキスト系のコントロールです。

素のまま

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="f_bare">タイトル</label>
  <input rst-input type="text" id="f_bare" name="f_bare">
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field" dict "ID" "f_bare" "Name" "f_bare" "Label" "タイトル"}}

ヒントつき

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="f_hint">スラッグ <span rst-field-hint>(小文字、スペースなし)</span></label>
  <input rst-input type="text" id="f_hint" name="f_hint">
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field" dict
    "ID" "f_hint"
    "Name" "f_hint"
    "Label" "スラッグ"
    "Hint" "小文字、スペースなし"}}

コントロールの下にヘルプつき

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="f_help">メールアドレス</label>
  <input rst-input type="email" id="f_help" name="f_help" autocomplete="email" aria-describedby="f_help-help">
  <p rst-field-help id="f_help-help">返信をお送りするためだけに使います。</p>
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field" dict
    "ID" "f_help"
    "Name" "f_help"
    "Label" "メールアドレス"
    "Type" "email"
    "Help" "返信をお送りするためだけに使います。"
    "Autocomplete" "email"}}

必須

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="f_required">氏名</label>
  <input rst-input type="text" id="f_required" name="f_required" required>
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field" dict
    "ID" "f_required"
    "Name" "f_required"
    "Label" "氏名"
    "Required" true}}

エラーつき

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="f_error">メールアドレス</label>
  <input rst-input type="email" id="f_error" name="f_error" value="grace@" aria-invalid="true" aria-describedby="f_error-error">
  <p rst-field-error id="f_error-error" role="alert">メールアドレスの形式ではないようです。</p>
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field" dict
    "ID" "f_error"
    "Name" "f_error"
    "Label" "メールアドレス"
    "Type" "email"
    "Error" "メールアドレスの形式ではないようです。"
    "Value" "grace@"}}

短い

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="f_short">郵便番号</label>
  <input rst-input="short" type="text" id="f_short" name="f_short" value="D02 XY45">
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field" dict
    "ID" "f_short"
    "Name" "f_short"
    "Label" "郵便番号"
    "Short" true
    "Value" "D02 XY45"}}

見出しの項目

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="f_primary">タイトル</label>
  <input rst-input="primary" type="text" id="f_primary" name="f_primary" value="四半期の取締役会">
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field" dict
    "ID" "f_primary"
    "Name" "f_primary"
    "Label" "タイトル"
    "Primary" true
    "Value" "四半期の取締役会"}}

field-text

ラベル付きのテキスト入力がひとつ。id は Name から作られます。必須マークの星は aria-hidden で、プログラムに伝わる合図は入力欄の required 属性です。

素のまま

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="ft_bare">タイトル</label>
  <input rst-input id="ft_bare" name="ft_bare" type="text">
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field-text" dict "Name" "ft_bare" "Label" "タイトル"}}

ヒントつき

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="ft_hint">見出し</label>
  <input rst-input id="ft_hint" name="ft_hint" type="text" aria-describedby="ft_hint-hint">
  <small rst-field-hint id="ft_hint-hint">一覧に表示されます。</small>
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field-text" dict
    "Name" "ft_hint"
    "Label" "見出し"
    "Hint" "一覧に表示されます。"}}

必須

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="ft_required">表示名 <span rst-field-required aria-hidden="true">*</span></label>
  <input rst-input id="ft_required" name="ft_required" type="text" autocomplete="nickname" required>
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field-text" dict
    "Name" "ft_required"
    "Label" "表示名"
    "Required" true
    "Autocomplete" "nickname"}}

エラーつき

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="ft_error">タイトル</label>
  <input rst-input id="ft_error" name="ft_error" type="text" value="リリースノート" aria-invalid="true" aria-describedby="ft_error-error">
  <small rst-field-error id="ft_error-error">同じタイトルの投稿がすでにあります。</small>
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field-text" dict
    "Name" "ft_error"
    "Label" "タイトル"
    "Value" "リリースノート"
    "Error" "同じタイトルの投稿がすでにあります。"}}

見出しの項目

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="ft_primary">何のイベントですか？</label>
  <input rst-input="primary" id="ft_primary" name="ft_primary" type="text" value="四半期の取締役会">
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field-text" dict
    "Name" "ft_primary"
    "Label" "何のイベントですか？"
    "Value" "四半期の取締役会"
    "Primary" true}}

フォームの主要な項目、たとえばタイトルや名前に Primary を付けると、入力欄がより目立ちます。

field-url

example.com を https:// の有無にかかわらず受け付けるウェブアドレス欄です。サーバー側では form.URL と組み合わせて使います。

素のまま

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="fu_bare">ウェブサイト</label>
  <input rst-input id="fu_bare" name="fu_bare" type="text" inputmode="url" autocomplete="url" autocapitalize="none" autocorrect="off" spellcheck="false">
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field-url" dict "Name" "fu_bare" "Label" "ウェブサイト"}}

ヒントつき

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="fu_hint">会社のウェブサイト</label>
  <input rst-input id="fu_hint" name="fu_hint" type="text" inputmode="url" autocomplete="url" autocapitalize="none" autocorrect="off" spellcheck="false" aria-describedby="fu_hint-hint">
  <small rst-field-hint id="fu_hint-hint">https は省略できます。</small>
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field-url" dict
    "Name" "fu_hint"
    "Label" "会社のウェブサイト"
    "Hint" "https は省略できます。"}}

エラーつき

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="fu_error">ウェブサイト</label>
  <input rst-input id="fu_error" name="fu_error" type="text" inputmode="url" autocomplete="url" autocapitalize="none" autocorrect="off" spellcheck="false" value="brightwater" aria-invalid="true" aria-describedby="fu_error-error">
  <small rst-field-error id="fu_error-error">example.com のようなウェブアドレスを入力してください。</small>
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field-url" dict
    "Name" "fu_error"
    "Label" "ウェブサイト"
    "Value" "brightwater"
    "Error" "example.com のようなウェブアドレスを入力してください。"}}

field-money

1 つの通貨での金額です。通貨コードはラベルの横に表示され、フォームと一緒に送信されるので、入力中に通貨が変わった場合は保存時に検出されます。サーバー側では form.Field の Currency と組み合わせて使います。

素のまま

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="fm_bare">チケット価格 <span class="rst-mono">EUR</span></label>
  <input rst-input id="fm_bare" name="fm_bare" type="text" inputmode="decimal">
  <input type="hidden" name="fm_bare.locale" value="en">
  <input type="hidden" name="fm_bare.currency" value="EUR">
  <input type="hidden" name="fm_bare.seed" value="">
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field-money" dict
    "Name" "fm_bare"
    "Label" "チケット価格"
    "Locale" "en"
    "Currency" "EUR"}}

ヒントつき

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="fm_hint">チケット価格 <span class="rst-mono">EUR</span></label>
  <input rst-input id="fm_hint" name="fm_hint" type="text" inputmode="decimal" aria-describedby="fm_hint-hint">
  <input type="hidden" name="fm_hint.locale" value="en">
  <input type="hidden" name="fm_hint.currency" value="EUR">
  <input type="hidden" name="fm_hint.seed" value="">
  <small rst-field-hint id="fm_hint-hint">例: 12.50 または €12.50。</small>
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field-money" dict
    "Name" "fm_hint"
    "Label" "チケット価格"
    "Locale" "en"
    "Currency" "EUR"
    "Hint" "例: 12.50 または €12.50。"}}

エラーつき

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="fm_error">チケット価格 <span class="rst-mono">EUR</span></label>
  <input rst-input id="fm_error" name="fm_error" type="text" inputmode="decimal" value="12,.50" aria-invalid="true" aria-describedby="fm_error-error">
  <input type="hidden" name="fm_error.locale" value="en">
  <input type="hidden" name="fm_error.currency" value="EUR">
  <input type="hidden" name="fm_error.seed" value="">
  <small rst-field-error id="fm_error-error">小数点にはピリオドを使ってください（例: 12.50）。</small>
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field-money" dict
    "Name" "fm_error"
    "Label" "チケット価格"
    "Value" "12,.50"
    "Locale" "en"
    "Currency" "EUR"
    "Error" "小数点にはピリオドを使ってください（例: 12.50）。"}}

field-textarea

textarea を field-text で包んだものです。

素のまま

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="ta_bare">メモ</label>
  <textarea rst-textarea id="ta_bare" name="ta_bare" rows="3"></textarea>
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field-textarea" dict "Name" "ta_bare" "Label" "メモ" "Rows" 3}}

ヒントつき

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="ta_hint">自己紹介</label>
  <textarea rst-textarea id="ta_hint" name="ta_hint" rows="3" aria-describedby="ta_hint-hint"></textarea>
  <small rst-field-hint id="ta_hint-hint">プロフィールに表示されます。</small>
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field-textarea" dict
    "Name" "ta_hint"
    "Label" "自己紹介"
    "Rows" 3
    "Hint" "プロフィールに表示されます。"}}

エラーつき

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="ta_error">概要</label>
  <textarea rst-textarea id="ta_error" name="ta_error" rows="3" aria-invalid="true" aria-describedby="ta_error-error">…</textarea>
  <small rst-field-error id="ta_error-error">概要は20文字以上必要です。</small>
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field-textarea" dict
    "Name" "ta_error"
    "Label" "概要"
    "Value" "…"
    "Rows" 3
    "Error" "概要は20文字以上必要です。"}}

必須

デスクトップモバイル HTML テンプレート

これは <section rst-box><form rst-form> の中に置きます。

<div rst-field>
  <label rst-field-label for="ta_required">返金の理由 <span rst-field-required aria-hidden="true">*</span></label>
  <textarea rst-textarea id="ta_required" name="ta_required" rows="3" required></textarea>
</div>

これは <section rst-box><form rst-form> の中に置きます。

{{template "field-textarea" dict
    "Name" "ta_required"
    "Label" "返金の理由"
    "Rows" 3
    "Required" true}}