贊助商成為贊助商

輸入 / 表單元素 Svelte 元件

表單元素允許您建立彈性且美觀的表單版面配置。表單元素只是眾所周知的 清單檢視（清單 和 清單項目 Svelte 元件），但多了幾個額外的元件。

查看 Framework7 的 輸入 / 表單元素 以了解它們的外觀。

輸入元件

包含下列元件

輸入屬性

屬性類型預設值說明
<ListInput> 屬性
media字串清單項目媒體圖片 URL
label字串輸入標籤文字
floatingLabel布林值false啟用浮動標籤
outline布林值false建立輸入外框
input布林值true是否應呈現輸入元素。如果您想在內部使用自訂輸入，請停用。
type字串輸入類型。所有預設 HTML5 輸入類型，以及少數特殊類型
  • textarea - 呈現 textarea 元素
  • select - 呈現 select 元素
  • datepicker - 在輸入焦點上開啟 日曆
  • colorpicker - 在輸入焦點上開啟 顏色選擇器
  • texteditor - 在輸入焦點上開啟 文字編輯器
resizable布林值false使 textarea 可調整大小
inputStyle物件輸入的「style」屬性值，萬一您需要傳遞額外樣式
clearButton布林值false加入輸入清除按鈕，點一下會清除輸入值
validate布林值false啟用時，輸入值會根據傳遞的「pattern」或根據輸入類型在變更時進行驗證。如果您使用自訂驗證，且需要更進一步控制錯誤訊息的顯示/隱藏位置，那麼最好停用驗證並將 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 屬性
值字串
數字

輸入值。

如果 type="datepicker" 則必須傳遞值，就像 日曆 接受的內容一樣 - 日期陣列，例如 value={[new Date()]}

如果 type="colorpicker" 則必須傳遞值，就像 顏色選擇器 接受的內容一樣 - 顏色物件，例如 value={{hex: '#ff0000'}}

如果 type="texteditor" 則值應該是 HTML 字串

輸入模式字串輸入原生「輸入模式」屬性的值
大小字串
數字		輸入原生「大小」屬性的值
樣式字串輸入原生「樣式」屬性的值
接受字串
數字		輸入原生「接受」屬性的值
自動完成字串輸入原生「自動完成」屬性的值
自動對焦布林值false輸入原生「自動對焦」屬性的值
自動儲存字串輸入原生「自動儲存」屬性的值
已停用布林值false將輸入標記為已停用
最大值字串
數字		輸入原生「最大值」屬性的值
最小值字串
數字		輸入原生「最小值」屬性的值
步長字串
數字		輸入原生「步長」屬性的值
最大長度字串
數字		輸入原生「最大長度」屬性的值
最小長度字串
數字		輸入原生「最小長度」屬性的值
多重布林值false輸入原生「多重」屬性的值
唯讀布林值false將輸入標記為唯讀
必填布林值false將輸入標記為必填
標籤索引字串
數字		輸入原生「標籤索引」屬性的值
不儲存資料布林值false允許忽略輸入值，以搭配 表單儲存 使用
忽略儲存資料布林值false與前者相同
包裝布林值true啟用後，將以 <li> 元素包裝
日曆參數物件當 type="datepicker" 時使用的 日曆參數 物件
顏色選擇器參數物件當 type="colorpicker" 時使用的 顏色選擇器參數 物件
文字編輯器參數物件當 type="texteditor" 時使用的 文字編輯器參數 物件
<Input> 屬性
outline布林值false建立輸入外框
包裝布林值true定義輸入是否應以 <div class="input"> 元素包裝。
type字串輸入類型。所有預設 HTML5 輸入類型，以及少數特殊類型
  • textarea - 呈現 textarea 元素
  • select - 呈現 select 元素
  • datepicker - 在輸入焦點上開啟 日曆
  • colorpicker - 在輸入焦點上開啟 顏色選擇器
  • texteditor - 在輸入焦點上開啟 文字編輯器
resizable布林值false使 textarea 可調整大小
inputStyle物件輸入的「style」屬性值，萬一您需要傳遞額外樣式
clearButton布林值false加入輸入清除按鈕，點一下會清除輸入值
validate布林值false啟用時，輸入值會根據傳遞的「pattern」或根據輸入類型在變更時進行驗證。如果您使用自訂驗證，且需要更進一步控制錯誤訊息的顯示/隱藏位置，那麼最好停用驗證並將 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 屬性
值字串
數字

輸入值。

如果 type="datepicker" 則必須傳遞值，就像 日曆 接受的內容一樣 - 日期陣列，例如 value={[new Date()]}

如果 type="colorpicker" 則必須傳遞值，就像 顏色選擇器 接受的內容一樣 - 顏色物件，例如 value={{hex: '#ff0000'}}

如果 type="texteditor" 則值應該是 HTML 字串

輸入模式字串輸入原生「輸入模式」屬性的值
大小字串
數字		輸入原生「大小」屬性的值
樣式字串輸入原生「樣式」屬性的值
接受字串
數字		輸入原生「接受」屬性的值
自動完成字串輸入原生「自動完成」屬性的值
自動對焦布林值false輸入原生「自動對焦」屬性的值
自動儲存字串輸入原生「自動儲存」屬性的值
已勾選布林值false將輸入標記為已勾選
已停用布林值false將輸入標記為已停用
最大值字串
數字		輸入原生「最大值」屬性的值
最小值字串
數字		輸入原生「最小值」屬性的值
步長字串
數字		輸入原生「步長」屬性的值
最大長度字串
數字		輸入原生「最大長度」屬性的值
最小長度字串
數字		輸入原生「最小長度」屬性的值
多重布林值false輸入原生「多重」屬性的值
唯讀布林值false將輸入標記為唯讀
必填布林值false將輸入標記為必填
標籤索引字串
數字		輸入原生「標籤索引」屬性的值
不儲存資料布林值false允許忽略輸入值，以搭配 表單儲存 使用
忽略儲存資料布林值false與前者相同
日曆參數物件當 type="datepicker" 時使用的 日曆參數 物件
顏色選擇器參數物件當 type="colorpicker" 時使用的 顏色選擇器參數 物件
文字編輯器參數物件當 type="texteditor" 時使用的 文字編輯器參數 物件

輸入事件

事件參數說明
<ListInput>、<Input> 事件
focus(事件)當使用者將焦點移至輸入時觸發。
blur(事件)當使用者失去輸入焦點時觸發。
input(事件)在輸入值變更時立即觸發。注意：輸入事件會在 beforeinput、keypress、keyup、keydown 事件之後觸發。
change(事件)如果值變更，則在 blur 時觸發。
inputClear(事件)當輸入清除按鈕被按一下時觸發
textareaResize(事件)如果可調整大小的 textarea 調整了大小，則觸發。event.detail 會包含一個物件，其中包含 initialHeight、currentHeight 和 scrollHeight 屬性
inputEmpty(事件)當輸入值變為空值時觸發
inputNotEmpty(事件)當輸入值變為非空值時觸發
calendarChange(值)當 type="datepicker" 行事曆值變更時觸發。它會接收一個包含已選取日期的陣列作為參數。
colorPickerChange(值)當 type="colorpicker" 色彩選擇器值變更時觸發。它會接收一個包含色彩選擇器值的物件作為參數。
textEditorChange(值)當 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>
改善此文件
在此頁面上