Pharallel コンポーネントについて

/ Pharallel / By
ショコラ
ショコラ

Pharallel コンポーネントについて

値は form_data[｛名前｝] から勝手に取得しますので、oldで値を設定する処理は不要です。

もっさん先輩
もっさん先輩

テキストボックス

基本形

<x-text name="｛名前｝" />

サンプル

<div class="inline field">
  <label>x-text</label>
  <x-text name="text" maxlength="20" pattern="[0-9]+" onblur="alert('Hello')" />
</div>

ナンバー

基本形

<x-number name="｛名前｝" />

サンプル

<div class="inline field">
  <label>x-number</label>
  <x-number name="num" />
</div>

※サブミット時に数値の形式かチェックが走ります。小数点はエラーになります。

メール

基本形

<x-email name="｛名前｝" />

サンプル

<div class="inline field">
  <label>x-mail</label>
  <x-email name="email" />
</div>

パスワード

基本形

<x-password name="｛名前｝" />

サンプル

<div class="inline field">
  <label>x-password</label>
  <x-password name="pass" maxlength="20" pattern="[0-9a-zA-Z]+"/>
</div>

※サブミット時にメールアドレスの形式かチェックが走ります。

TEL

基本形

<x-tel name="｛名前｝" />

サンプル

<div class="field">
  <label>x-tel</label>
  <x-tel name="tel" />
</div>

※サブミット時に電話番号の形式かチェックが走ります。

郵便番号

基本形

<x-postal-code name="｛名前｝" />

サンプル

<div class="inline field">
  <label>x-postal-code</label>
  <x-postal-code name="postal" />
</div>

※サブミット時に電話番号の形式かチェックが走ります。

テキストエリア

基本形

<x-textarea name="textarea" />

サンプル

<div class="field">
  <label>x-textarea</label>
  <x-textarea name="textarea" />
</div>

チェックボックス

基本形

<x-checkbox name="｛名前｝" option="｛オプションの値｝" label="｛オプションのラベル｝" />

サンプル

<div class="field">
  <label>x-checkbox</label>
  <x-checkbox name="chk" option="1" label="チェック１" />
  <x-checkbox name="chk" option="2" label="チェック２" />
  <x-checkbox name="chk" option="3" label="チェック３" />
</div>

ラジオボタン

基本形

<x-radio name="｛名前｝" option="｛オプションの値｝" label="｛オプションのラベル｝" />

サンプル

<div class="field">
  <label>x-radio</label>
  <x-radio name="radio" option="1" label="ラジオ１" />
  <x-radio name="radio" option="2" label="ラジオ２" />
  <x-radio name="radio" option="3" label="ラジオ３" />
</div>

セレクト

基本形

<x-select name="｛名前｝" :options="｛key=>valの配列｝" />

サンプル

<div class="field">
  <label>x-select</label>
  <x-select name="select" :options="['1'=>'セレクト１','2'=>'セレクト２']" />
</div>

マルチセレクト

基本形

<x-multi-select name="｛名前｝" :options="｛key=>valの配列｝" />

サンプル

<div class="field">
  <label>x-multi-select</label>
  <x-multi-select name="multi-select" :options="['1'=>'セレクト１','2'=>'セレクト２']" />
</div>

hidden

基本形

<x-hidden name="hidden" />

以上

Scroll to Top