スポンサースポンサーになる

入力 / フォーム要素 Svelte コンポーネント

フォーム要素を使用すると、柔軟で美しいフォームレイアウトを作成できます。 フォーム要素はよく知られているリストビュー（リストおよびリストアイテム Svelteコンポーネント）ですが、いくつかの追加コンポーネントがあります。

Framework7 の入力 / フォーム要素で外観を確認してください。

入力コンポーネント

以下のコンポーネントが含まれています

入力プロパティ

プロパティタイプデフォルト説明
<ListInput> プロパティ
media文字列リストアイテムメディア画像 URL
label文字列入力のラベルテキスト
floatingLabel真偽値falseフローティングラベルを有効にします
outline真偽値false入力をアウトラインにします
input真偽値true入力要素をレンダリングするかどうか。 内部でカスタム入力を使用する場合は無効にします。
type文字列入力タイプ。 すべてのデフォルトの HTML5 入力タイプ、およびいくつかの特別なタイプ
  • textarea - textarea 要素をレンダリングする
  • select - select 要素をレンダリングする
  • datepicker - 入力フォーカス時にカレンダーを開く
  • colorpicker - 入力フォーカス時にカラーピッカーを開く
  • texteditor - 入力フォーカス時にテキストエディタを開く
resizable真偽値falsetextarea をサイズ変更可能にする
inputStyleオブジェクト追加のスタイルを渡す必要がある場合の、入力の「style」属性の値
clearButton真偽値falseクリックすると入力値をクリアする入力クリアボタンを追加します
validate真偽値false有効にすると、渡された「パターン」または入力タイプに基づいて、変更時に入力値が検証されます。 カスタム検証を使用し、エラーメッセージを表示/非表示にする場所をより詳細に制御する必要がある場合は、検証を無効にし、 `error-message` と `error-message-force` プロパティを一緒に使用することをお勧めします。
validateOnBlur真偽値false有効にすると、入力はぼかしでのみ検証されます。
onValidate関数入力検証時に実行されるコールバック。 入力が有効かどうかを示すブール値を返します。
<ListInput
  type="email"
  validate
  onValidate={(isValid) => setInputValid(isValid)}
/>
errorMessage文字列入力値が無効な場合に表示するカスタムエラーメッセージ
errorMessageForce真偽値falseエラーメッセージを `errorMessage` に強制します. カスタム検証を使用し、必要なときにエラーメッセージを表示/非表示にしたい場合に役立ちます
info文字列入力に関する追加情報のカスタムテキスト
name文字列入力名
placeholder文字列入力プレースホルダー
id文字列ラッピング要素 ID 属性
inputId文字列入力要素 ID 属性
value文字列
数値

入力値。

`type="datepicker"` の場合、値はカレンダーが受け入れるものとして渡す必要があります - 日付の配列、たとえば `value={[new Date()]`

`type="colorpicker"` の場合、値はカラーピッカーが受け入れるものとして渡す必要があります - 色のオブジェクト、たとえば `value={{hex: '#ff0000'}}`

`type="texteditor"` の場合、値は HTML 文字列にする必要があります

inputmode文字列入力のネイティブ「inputmode」属性の値
size文字列
数値		入力のネイティブ「size」属性の値
pattern文字列入力のネイティブ「pattern」属性の値
accept文字列
数値		入力のネイティブ「accept」属性の値
autocomplete文字列入力のネイティブ「autocomplete」属性の値
autofocus真偽値false入力のネイティブ「autofocus」属性の値
autosave文字列入力のネイティブ「autosave」属性の値
disabled真偽値false入力を無効としてマークします
max文字列
数値		入力のネイティブ「max」属性の値
min文字列
数値		入力のネイティブ「min」属性の値
step文字列
数値		入力のネイティブ「step」属性の値
maxlength文字列
数値		入力のネイティブ「maxlength」属性の値
minlength文字列
数値		入力のネイティブ「minlength」属性の値
multiple真偽値false入力のネイティブ「multiple」属性の値
readonly真偽値false入力を読み取り専用としてマークします
required真偽値false入力を必須としてマークします
tabindex文字列
数値		入力のネイティブ「tabindex」属性の値
noStoreData真偽値falseフォームストレージと併用する場合、入力値の保存を無視できます
ignoreStoreData真偽値false上記と同じ
wrap真偽値true有効にすると、 `<li>` 要素でラップされます
calendarParamsオブジェクト`type="datepicker"` の場合に使用されるカレンダーパラメーターを持つオブジェクト
colorPickerParamsオブジェクト`type="colorpicker"` の場合に使用されるカラーピッカーパラメーターを持つオブジェクト
textEditorParamsオブジェクト`type="texteditor"` の場合に使用されるテキストエディタパラメーターを持つオブジェクト
<Input> プロパティ
outline真偽値false入力をアウトラインにします
wrap真偽値true入力を `<div class="input">` 要素でラップするかどうかを定義します.
type文字列入力タイプ。 すべてのデフォルトの HTML5 入力タイプ、およびいくつかの特別なタイプ
  • textarea - textarea 要素をレンダリングする
  • select - select 要素をレンダリングする
  • datepicker - 入力フォーカス時にカレンダーを開く
  • colorpicker - 入力フォーカス時にカラーピッカーを開く
  • texteditor - 入力フォーカス時にテキストエディタを開く
resizable真偽値falsetextarea をサイズ変更可能にする
inputStyleオブジェクト追加のスタイルを渡す必要がある場合の、入力の「style」属性の値
clearButton真偽値falseクリックすると入力値をクリアする入力クリアボタンを追加します
validate真偽値false有効にすると、渡された「パターン」または入力タイプに基づいて、変更時に入力値が検証されます。 カスタム検証を使用し、エラーメッセージを表示/非表示にする場所をより詳細に制御する必要がある場合は、検証を無効にし、 `error-message` と `error-message-force` プロパティを一緒に使用することをお勧めします。
validateOnBlur真偽値false有効にすると、入力はぼかしでのみ検証されます。
onValidate関数入力検証時に実行されるコールバック。 入力が有効かどうかを示すブール値を返します。
<Input
  type="email"
  validate
  onValidate={(isValid) => setInputValid(isValid)}
/>
errorMessage文字列入力値が無効な場合に表示するカスタムエラーメッセージ
errorMessageForce真偽値falseエラーメッセージを `errorMessage` に強制します. カスタム検証を使用し、必要なときにエラーメッセージを表示/非表示にしたい場合に役立ちます
info文字列入力に関する追加情報のカスタムテキスト
name文字列入力名
placeholder文字列入力プレースホルダー
id文字列ラッピング要素 ID 属性
inputId文字列入力要素 ID 属性
value文字列
数値

入力値。

`type="datepicker"` の場合、値はカレンダーが受け入れるものとして渡す必要があります - 日付の配列、たとえば `value={[new Date()]`

`type="colorpicker"` の場合、値はカラーピッカーが受け入れるものとして渡す必要があります - 色のオブジェクト、たとえば `value={{hex: '#ff0000'}}`

`type="texteditor"` の場合、値は HTML 文字列にする必要があります

inputmode文字列入力のネイティブ「inputmode」属性の値
size文字列
数値		入力のネイティブ「size」属性の値
pattern文字列入力のネイティブ「pattern」属性の値
accept文字列
数値		入力のネイティブ「accept」属性の値
autocomplete文字列入力のネイティブ「autocomplete」属性の値
autofocus真偽値false入力のネイティブ「autofocus」属性の値
autosave文字列入力のネイティブ「autosave」属性の値
checked真偽値false入力をチェック済みとしてマークします
disabled真偽値false入力を無効としてマークします
max文字列
数値		入力のネイティブ「max」属性の値
min文字列
数値		入力のネイティブ「min」属性の値
step文字列
数値		入力のネイティブ「step」属性の値
maxlength文字列
数値		入力のネイティブ「maxlength」属性の値
minlength文字列
数値		入力のネイティブ「minlength」属性の値
multiple真偽値false入力のネイティブ「multiple」属性の値
readonly真偽値false入力を読み取り専用としてマークします
required真偽値false入力を必須としてマークします
tabindex文字列
数値		入力のネイティブ「tabindex」属性の値
noStoreData真偽値falseフォームストレージと併用する場合、入力値の保存を無視できます
ignoreStoreData真偽値false上記と同じ
calendarParamsオブジェクト`type="datepicker"` の場合に使用されるカレンダーパラメーターを持つオブジェクト
colorPickerParamsオブジェクト`type="colorpicker"` の場合に使用されるカラーピッカーパラメーターを持つオブジェクト
textEditorParamsオブジェクト`type="texteditor"` の場合に使用されるテキストエディタパラメーターを持つオブジェクト

入力イベント

イベント引数説明
<ListInput>、<Input> イベント
focus(event)ユーザーが入力にフォーカスしたときに発生します。
blur(event)ユーザーが入力からフォーカスを失ったときに発生します。
input(event)入力値が変更されるとすぐに発生します。 注：入力イベントは、beforeinput、keypress、keyup、keydown イベントの後に発生します。
change(event)値が変更された場合、ぼかしで発生します。
inputClear(event)入力クリアボタンをクリックしたときに発生します
textareaResize(event)サイズ変更可能な textarea のサイズが変更された場合に発生します。 `event.detail` には、 `initialHeight`、 `currentHeight`、 `scrollHeight` プロパティを持つオブジェクトが含まれます
inputEmpty(event)入力値が空になったときに発生します
inputNotEmpty(event)入力値が空でなくなったときに発生します
calendarChange(value)`type="datepicker"` カレンダーの値が変更されたときに発生します。 引数として、選択された日付の配列を受け取ります。
colorPickerChange(value)`type="colorpicker"` カラーピッカーの値が変更されたときに発生します。 引数として、カラーピッカー値を持つオブジェクトを受け取ります。
textEditorChange(value)`type="texteditor"` テキストエディタの値が変更されたときに発生します。 引数として、テキストエディタ値（HTML 文字列）を受け取ります。

入力スロット

`<ListInput>` には、カスタム要素用の追加スロットがあります

例

inputs.svelte
<script>
  import { Navbar, Page, BlockTitle, List, ListInput, Range } from 'framework7-svelte';
</script>

<Page>
  <Navbar title="Form Inputs" />

  <BlockTitle>Full Layout / Stacked Labels</BlockTitle>
  <List strongIos dividersIos insetIos>
    <ListInput label="Name" type="text" placeholder="Your name" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="Password" type="password" placeholder="Your password" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="E-mail" type="email" placeholder="Your e-mail" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="URL" type="url" placeholder="URL" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="Phone" type="tel" placeholder="Your phone number" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="Gender" type="select" value="Male" placeholder="Please choose...">
      <i class="icon demo-list-icon" slot="media" />
      <option value="Male">Male</option>
      <option value="Female">Female</option>
    </ListInput>

    <ListInput label="Birthday" type="date" value="2014-04-30" placeholder="Please choose...">
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="Date time" type="datetime-local" placeholder="Please choose...">
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="Range" input={false}>
      <i class="icon demo-list-icon" slot="media" />
      <span slot="input">
        <Range value={50} min={0} max={100} step={1} />
      </span>
    </ListInput>

    <ListInput label="Textarea" type="textarea" placeholder="Bio">
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="Resizable" type="textarea" resizable placeholder="Bio">
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
  </List>

  <BlockTitle>Floating Labels</BlockTitle>
  <List strongIos dividersIos insetIos>
    <ListInput label="Name" floatingLabel type="text" placeholder="Your name" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput
      label="Password"
      floatingLabel
      type="password"
      placeholder="Your password"
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="E-mail" floatingLabel type="email" placeholder="Your e-mail" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="URL" floatingLabel type="url" placeholder="URL" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="Phone" floatingLabel type="tel" placeholder="Your phone number" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput label="Resizable" floatingLabel type="textarea" resizable placeholder="Bio">
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
  </List>

  <BlockTitle>Floating Labels + Outline Inputs</BlockTitle>
  <List strongIos dividersIos insetIos>
    <ListInput outline label="Name" floatingLabel type="text" placeholder="Your name" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
    <ListInput
      outline
      label="Password"
      floatingLabel
      type="password"
      placeholder="Your password"
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
    <ListInput
      outline
      label="E-mail"
      floatingLabel
      type="email"
      placeholder="Your e-mail"
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
    <ListInput outline label="URL" floatingLabel type="url" placeholder="URL" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
    <ListInput
      outline
      label="Phone"
      floatingLabel
      type="tel"
      placeholder="Your phone number"
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
    <ListInput
      outline
      label="Bio"
      floatingLabel
      type="textarea"
      resizable
      placeholder="Bio"
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
  </List>

  <BlockTitle>Validation + Additional Info</BlockTitle>
  <List strongIos dividersIos insetIos>
    <ListInput
      label="Name"
      type="text"
      placeholder="Your name"
      info="Default validation"
      required
      validate
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput
      label="Fruit"
      type="text"
      placeholder="Type 'apple' or 'banana'"
      required
      validate
      pattern="apple|banana"
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
      <span slot="info">Pattern validation (<b>apple|banana</b>)</span>
    </ListInput>

    <ListInput
      label="E-mail"
      type="email"
      placeholder="Your e-mail"
      info="Default e-mail validation"
      required
      validate
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput
      label="URL"
      type="url"
      placeholder="Your URL"
      info="Default URL validation"
      required
      validate
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput
      label="Number"
      type="text"
      placeholder="Enter number"
      info="With custom error message"
      errorMessage="Only numbers please!"
      required
      validate
      pattern="[0-9]*"
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
  </List>

  <BlockTitle>Icon + Input</BlockTitle>
  <List strongIos dividersIos insetIos>
    <ListInput type="text" placeholder="Your name" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput type="password" placeholder="Your password" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput type="email" placeholder="Your e-mail" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput type="url" placeholder="URL" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
  </List>

  <BlockTitle>Label + Input</BlockTitle>
  <List strongIos dividersIos insetIos>
    <ListInput label="Name" type="text" placeholder="Your name" clearButton />

    <ListInput label="Password" type="password" placeholder="Your password" clearButton />

    <ListInput label="E-mail" type="email" placeholder="Your e-mail" clearButton />

    <ListInput label="URL" type="url" placeholder="URL" clearButton />
  </List>

  <BlockTitle>Only Inputs</BlockTitle>
  <List strongIos dividersIos insetIos>
    <ListInput type="text" placeholder="Your name" clearButton />

    <ListInput type="password" placeholder="Your password" clearButton />

    <ListInput type="email" placeholder="Your e-mail" clearButton />

    <ListInput type="url" placeholder="URL" clearButton />
  </List>

  <BlockTitle>Inputs + Additional Info</BlockTitle>
  <List strongIos dividersIos insetIos>
    <ListInput type="text" placeholder="Your name" info="Full name please" clearButton />

    <ListInput
      type="password"
      placeholder="Your password"
      info="8 characters minimum"
      clearButton
    />

    <ListInput type="email" placeholder="Your e-mail" info="Your work e-mail address" clearButton />

    <ListInput type="url" placeholder="URL" info="Your website URL" clearButton />
  </List>
</Page>
このドキュメントを改善する
このページについて