0%

表單建立與認證

發表於 更新於

表單建立與認證

在學習前端時，表單也是相當重要的一環。
本篇記錄建立表單基礎，與欄位認證相關屬性。

建立表單

  1. 可以透過
    建立表單，使用action屬性來指定要資料傳到何處
1
2
3
<form action="www.abc.tw">

</form>
  1. 表單內的組成三元素 lable、input、button

lable：用來標示填入的資訊，可以用for屬性綁定對應的input

1
2
3
<form action="www.abc.tw">
    <lable for="name">姓名：</lable>
</form>

input：表單的選項，有相當多種type，下表列出幾種常見的，制定name這個屬性來傳指定的值給後端。

type 用途
button 普通的按鈕
checkbox 方形選項，用於複選
email 填入mail使用，可以認證是否有填妥mail格式
password 填入密碼使用，打上文字會變*******
text 普通的輸入文字 
1
2
3
4
<form action="www.abc.tw">
    <lable for="name">姓名：</lable>
    <input name="name" type="text"　id="name(用來綁定lable的for)">
</form>

button：可以是送出表單的按鈕、或是重設，type有三種，如下

type 用途
button 普通常見的按鈕
reset 可以清除表單的所有資料
submit 送出表單到後端，url會後面加上?帶上input所設定得參數 
1
2
3
4
5
6
<form action="www.abc.tw">
    <lable for="name">姓名：</lable>
    <input name="name" type="text"　id="name(用來綁定lable的for)">
    <button type ="reset">清除</button>
    <button type ="submit">送出</button>
</form>

表單設定與驗證

  1. 必選-加上required

required屬性適用於以下類型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio以及file。

1
2
3
4
如果是check或是radio，相同name的input，只要寫一個required就可以代表全部群組

<input name="name" type="checkbox"　id="name(用來綁定lable的for)" value="male" required>
<input name="name" type="checkbox"　id="name(用來綁定lable的for)" value="female" required>

  1. 驗證密碼是否符合

  • eamil：屬性選擇type="mail"即可

  • 有限制密碼：使用pattern屬性，裡面需填寫成＂正規表達式（Regular Express，搭配title屬性表示要給使用者的說明

正規表達式寫法參考：
[Javascript] 初探Regex 正規表達式
使用Regular Expression 驗證密碼複雜度| The Will Will Web

  • 長度要求：屬性 minlength=“”， maxlength=“”
1
2
<lable for="password">密碼：</lable>
<input class="textinput" type="text" name="password" placeholder="密碼應含一個特殊符號、一個英文大寫、一個數字，8-20碼" required pattern="^(?=.*\d)(?=.*[a-zA-Z])(?=.*\W).{8,20}$" minlength="8" maxlength="20" title="密碼應含一個特殊符號、一個英文大寫、一個數字，8-20碼">

參考資料: