輸入 / 表單元素 React 元件

表單元素可讓您建立彈性又美觀的表單版面。表單元素只是眾所周知的清單檢視（清單和清單項目 React 元件），但多了幾個額外的元件。

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

輸入元件

包含下列元件

ListInput - 清單項目輸入元素
Input - 輸入元素

輸入屬性

屬性	類型	預設值	說明
<ListInput> 屬性
媒體	字串		清單項目媒體圖片網址
標籤	字串		輸入的標籤文字
浮動標籤	布林值	false	啟用浮動標籤
外框	布林值	false	使輸入有外框
輸入	布林值	true	是否應呈現輸入元素。如果您想在裡面使用自訂輸入，請停用。
類型	字串		輸入類型。所有預設 HTML5 輸入類型，以及一些特殊類型 textarea - 呈現文字區域元素 select - 呈現選取元素 datepicker - 在輸入焦點上開啟日曆 colorpicker - 在輸入焦點上開啟顏色選擇器 texteditor - 在輸入焦點上開啟文字編輯器
可調整大小	布林值	false	使文字區域可調整大小
輸入樣式	物件		輸入的「樣式」屬性值，以防您需要傳遞額外的樣式
清除按鈕	布林值	false	新增輸入清除按鈕，按一下會清除輸入值
驗證	布林值	false	啟用後，輸入值會根據傳遞的「樣式」或輸入類型在變更時進行驗證。如果您使用自訂驗證，且需要更進一步控制顯示/隱藏錯誤訊息的位置，最好停用驗證並將 `error-message` 與 `error-message-force` 屬性搭配使用。
失去焦點時驗證	布林值	false	啟用後，輸入只會在失去焦點時驗證。
onValidate	函數		輸入驗證時執行的回呼，傳回布林值表示輸入是否有效。 `<ListInput type="email" validate :onValidate={(isValid) => setInputValid(isValid)} />`
errorMessage	字串		當輸入值無效時顯示的客製錯誤訊息
errorMessageForce	布林值	false	強制錯誤訊息。當您使用客製驗證並希望在需要時顯示/隱藏錯誤訊息時很有用
info	字串		關於輸入的客製附加資訊文字
name	字串		輸入名稱
placeholder	字串		輸入提示文字
id	字串		包裝元素 ID 屬性
inputId	字串		輸入元素 ID 屬性
value	字串數字		輸入值。如果 `type="datepicker"`，則必須傳遞值為日曆接受的內容 - 包含日期的陣列，例如 `value={[new Date()]}` 如果 `type="colorpicker"`，則必須傳遞值為顏色選擇器接受的內容 - 包含顏色的物件，例如 `value={{hex: '#ff0000'}}` 如果 `type="texteditor"`，則值應為 HTML 字串
defaultValue	字串數字		輸入值，在不受控元件的情況下
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> 屬性
外框	布林值	false	使輸入有外框
wrap	布林值	true	定義輸入是否使用 `<div class="input">` 元素包覆。
類型	字串		輸入類型。所有預設 HTML5 輸入類型，以及一些特殊類型 textarea - 呈現文字區域元素 select - 呈現選取元素 datepicker - 在輸入焦點上開啟日曆 colorpicker - 在輸入焦點上開啟顏色選擇器 texteditor - 在輸入焦點上開啟文字編輯器
可調整大小	布林值	false	使文字區域可調整大小
輸入樣式	物件		輸入的「樣式」屬性值，以防您需要傳遞額外的樣式
清除按鈕	布林值	false	新增輸入清除按鈕，按一下會清除輸入值
驗證	布林值	false	啟用後，輸入值會根據傳遞的「樣式」或輸入類型在變更時進行驗證。如果您使用自訂驗證，且需要更進一步控制顯示/隱藏錯誤訊息的位置，最好停用驗證並將 `error-message` 與 `error-message-force` 屬性搭配使用。
失去焦點時驗證	布林值	false	啟用後，輸入只會在失去焦點時驗證。
onValidate	函數		輸入驗證時執行的回呼，傳回布林值表示輸入是否有效。 `<Input type="email" validate :onValidate={(isValid) => setInputValid(isValid)} />`
errorMessage	字串		當輸入值無效時顯示的客製錯誤訊息
errorMessageForce	布林值	false	強制錯誤訊息。當您使用客製驗證並希望在需要時顯示/隱藏錯誤訊息時很有用
info	字串		關於輸入的客製附加資訊文字
name	字串		輸入名稱
placeholder	字串		輸入提示文字
id	字串		包裝元素 ID 屬性
inputId	字串		輸入元素 ID 屬性
value	字串數字		輸入值。如果 `type="datepicker"`，則必須傳遞值為日曆接受的內容 - 包含日期的陣列，例如 `value={[new Date()]}` 如果 `type="colorpicker"`，則必須傳遞值為顏色選擇器接受的內容 - 包含顏色的物件，例如 `value={{hex: '#ff0000'}}` 如果 `type="texteditor"`，則值應為 HTML 字串
defaultValue	字串數字		輸入值，在不受控元件的情況下
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	(事件)	當使用者將焦點移至輸入時觸發。
blur	(事件)	當使用者失去輸入焦點時觸發。
輸入	(事件)	輸入值變更時立即觸發。注意：輸入事件會在 beforeinput、keypress、keyup、keydown 事件後觸發。
change	(事件)	如果值變更，則在失去焦點時觸發。
inputClear	(事件)	當輸入清除按鈕按一下時觸發
textareaResize	(事件)	如果可調整大小的文字區域大小調整，則觸發。`event.detail` 將包含具有 `initialHeight`、`currentHeight` 和 `scrollHeight` 屬性的物件
inputEmpty	(事件)	當輸入值變為空值時觸發
inputNotEmpty	(事件)	當輸入值變為非空值時觸發
calendarChange	(值)	當 `type="datepicker"` 日曆值變更時觸發。它會接收包含已選取日期的陣列作為參數。
colorPickerChange	(值)	當 `type="colorpicker"` 顏色選擇器值變更時觸發。它會接收包含顏色選擇器值的物件作為參數。
textEditorChange	(值)	當 `type="texteditor"` 文字編輯器值變更時觸發。它會接收文字編輯器值 (HTML 字串) 作為參數。

輸入插槽

<ListInput> 有額外的插槽可供自訂元素使用

default - 如果是 type="select" 或 type="textarea"，元素將會置於 select 或 textarea 標籤內。
info - 元素將會插入到包含資訊訊息的容器中
error-message - 元素將會插入到包含錯誤訊息的容器中
label - 元素將會插入到包含輸入標籤的容器中
input - 元素將會插入到輸入元素中 (input 屬性也必須設定為 false)
root-start - 元素將會插入到 <li> 元素的開頭
root / root-end - 元素將會插入到 <li> 元素的結尾
content-start - 元素將會插入到 <div class="item-content"> 元素的開頭
content / content-end - 元素將會插入到 <div class="item-content"> 元素的結尾
inner-start - 元素將會插入到 <div class="item-inner"> 元素的開頭
inner / inner-end - 元素將會插入到 <div class="item-inner"> 元素的結尾
media - 元素將會插入到 <div class="item-media"> 元素內

範例

inputs.jsx

import React from 'react';
import { Navbar, Page, BlockTitle, List, Icon, ListInput, Range } from 'framework7-react';

export default () => (
  <Page>
    <Navbar title="Form Inputs" />

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

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

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

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

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

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

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

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

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

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

      <ListInput label="Resizable" type="textarea" resizable placeholder="Bio">
        <Icon 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>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

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

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

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

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

      <ListInput label="Resizable" floatingLabel type="textarea" resizable placeholder="Bio">
        <Icon 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>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput
        outline
        label="Password"
        floatingLabel
        type="password"
        placeholder="Your password"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput
        outline
        label="E-mail"
        floatingLabel
        type="email"
        placeholder="Your e-mail"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput outline label="URL" floatingLabel type="url" placeholder="URL" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput
        outline
        label="Phone"
        floatingLabel
        type="tel"
        placeholder="Your phone number"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput
        outline
        label="Bio"
        floatingLabel
        type="textarea"
        resizable
        placeholder="Bio"
        clearButton
      >
        <Icon 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
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput
        label="Fruit"
        type="text"
        placeholder="Type 'apple' or 'banana'"
        required
        validate
        pattern="apple|banana"
        clearButton
      >
        <Icon 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
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput
        label="URL"
        type="url"
        placeholder="Your URL"
        info="Default URL validation"
        required
        validate
        clearButton
      >
        <Icon 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
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
    </List>

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

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

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

      <ListInput type="url" placeholder="URL" clearButton>
        <Icon 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>
);

改善此文件

在此頁面

輸入元件
輸入屬性
輸入事件
輸入插槽
範例