F2E合作社|創建表單與控制|Bootstrap 5 網頁框架開發入門


Posted by itiswonderfall on 2021-11-24

前言

介紹這麼多東西,總要有可以跟使用者互動的功能吧,難道我要像「 我是不是你最疼愛的人,你為什麼不說話 」一樣嗎?這時候表單就登場了!表單在前端很常會用到,像是註冊和登入⋯⋯等等頁面,那表單有哪些東西呢,繼續看下去。

 


 

官方網站的 Forms 頁面

 

基本表單

確保在輸入框上使用正確的 type 屬性( 例如,email 用於電子郵件地址或 number 用於數字信息 ),以利用較新的輸入控制,如電子郵件驗證、號碼選擇等。

<label> for 要對應到 <input> 的 id

<form>
    <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
    </div>
    <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1">
    </div>
    <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

 


 

表單文字

使用 .form-text 可以創建塊級或是行內的表單文字。

表單文字需要與控制元件相關聯

表單文字應該使用 aria-describedby 屬性與表單控制元件明確關連,這將確保輔助技術( 例如螢幕閱讀器 )在用戶 focus 控制元件或輸入 input 時會宣讀此表單文字。

在輸入框底下的表單文字可以設置樣式 .form-text 。如果表單文字使用的是塊級元素,則會添加一個上邊距,以便輕鬆的與上方的輸入框隔開。

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

 

可以使用任何典型的 HTML 行內元素實現行內文字( 可以是 <span> , <small> 或是任何其他行內元素,並加上 form-text 類別 )。

<div class="row g-3 align-items-center">
    <div class="col-auto">
        <label for="inputPassword6" class="col-form-label">Password</label>
    </div>
    <div class="col-auto">
        <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
    </div>
    <div class="col-auto">
        <span id="passwordHelpInline" class="form-text">
            Must be 8-20 characters long.
        </span>
    </div>
</div>

 


 

親和性

確保所有表單控制元件都具有適當的親和性名稱,以便將其目的傳達給輔助技術的用戶,實現此目的的最簡單方法是使用 <label> 元素或是按鈕,以包含足夠的描述性文字作為 <button>...</button> 內容的一部分。

在一些情況下無法包含可見的 <label> 或適當的文字內容,還是有其他替代方案可以提供親和性的名稱,例如:

  • <label> 元素選擇使用 .visually-hidden 類別作隱藏。
  • 使用 aria-labelledby 指向一個可以用作標籤的現有元素。
  • 提供一個 title 屬性。
  • 使用 aria-label 明確的在元素上設置親和性名稱。

如果以上這些都不存在,那麼輔助技術可能會訴諸使用 placeholder 屬性作為 <input><textarea> 元素上親和性名稱的後備。

儘管使用視覺隱藏的內容( .visually-hiddenaria-label ,甚至是當表單輸入欄位有內容時就會消失的 placeholder )將有利於輔助技術使用者,但對於某些用戶而言缺少可見的標籤文字仍然可能會帶來問題,對於親和性與可用性來說,某些形式的可見標籤通常是最佳方法。

 


 

官方網站的 Form controls 頁面

 

尺寸

使用 .form-control-lg.form-control-sm 設置高度。

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

 


 

禁用表格

在輸入框 input 加上 disabled 以避免使用者操作並讓它看起來更淡。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

將 disabled 屬性加入到 <fieldset> 中以禁用其中所有控制元件,瀏覽器將所有位於 <fieldset disabled> 標籤內部的原生表單控制元件( <input> , <select> , 和 <button> 元素 )視為禁用的,避免它們與鍵盤、滑鼠產生互動。

然而,如果表單內還包含了自定義的類按鈕元素像是 <a class="btn btn-*">...</a> ,這些元素只會被賦予 pointer-events: none 的樣式,意味著它們仍然可以使用鍵盤進行聚焦、操作,在這種情況下,必須透過加入 tabindex="-1" 來手動修改這些控制元件防止它們獲得聚焦,並加入 aria-disabled="disabled" 向輔助技術傳達其狀態。

<form>
    <fieldset disabled>
        <legend>Disabled fieldset example</legend>
        <div class="mb-3">
            <label for="disabledTextInput" class="form-label">Disabled input</label>
            <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
        </div>
        <div class="mb-3">
            <label for="disabledSelect" class="form-label">Disabled select menu</label>
            <select id="disabledSelect" class="form-select">
                <option>Disabled select</option>
            </select>
        </div>
        <div class="mb-3">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
                <label class="form-check-label" for="disabledFieldsetCheck">
                    Can't check this
                </label>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </fieldset>
</form>

 


 

僅能閱讀

在 input 上加入 readonly 以防止修改 input 的值,僅能閱讀的 input 顯示較淡( 就像禁用的輸入 ),但保留標準游標。

<input class="form-control" type="text" placeholder="Readonly input here..." aria-label="readonly input example" readonly>

 


 

僅能閱讀的文本

如果您希望將 <input readonly> 元素設置為純文本,請使用 .form-control-plaintext 來刪除預設表單純文字樣式,並保留適當的 margin 和 padding。

<div class="mb-3 row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
        <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
    </div>
</div>
<div class="mb-3 row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword">
    </div>
</div>

 

<form class="row g-3">
    <div class="col-auto">
        <label for="staticEmail2" class="visually-hidden">Email</label>
        <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
    </div>
    <div class="col-auto">
        <label for="inputPassword2" class="visually-hidden">Password</label>
        <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
    </div>
    <div class="col-auto">
        <button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
    </div>
</form>

 


 

檔案 input

<div class="mb-3">
    <label for="formFile" class="form-label">選擇一個檔案的 input 按鈕</label>
    <input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
    <label for="formFileMultiple" class="form-label">選擇多個檔案的 input 按鈕</label>
    <input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
    <label for="formFileDisabled" class="form-label">禁止選擇檔案的 input 按鈕</label>
    <input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
    <label for="formFileSm" class="form-label">小尺寸的 input 按鈕</label>
    <input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
    <label for="formFileLg" class="form-label">大尺寸的 input 按鈕</label>
    <input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

 


 

顏色選擇器

<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">

 


 

資料清單

資料清單允許你創造一組可以在 input 內部被存取( 並自動補齊 )的 <option> ,它們跟 <select> 元素很相似,但是在樣式設定上具有更多限制與差異,雖然大部分的瀏覽器和作業系統都包含一些對於 <datalist> 元素的支持,但他們的樣式充其量是不一致的。

<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
    <option value="San Francisco">
    <option value="New York">
    <option value="Seattle">
    <option value="Los Angeles">
    <option value="Chicago">
</datalist>

 


 

參考資料

  1. Forms · Bootstrap v5.0
  2. 表單 (Forms) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0
  3. 表單組件入門-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學
  4. Form controls · Bootstrap v5.0
  5. 表單控制 (Form controls) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0

#f2e #F2E合作社 #bootstrap5 #網頁框架開發 #form







Related Posts

SQL進階語法

SQL進階語法

JAVA - 物件導向入門

JAVA - 物件導向入門

深入學習 lsd-slam - 3

深入學習 lsd-slam - 3


Comments