前言

此篇包含

Form 表單起手式與基本元素應用、Bootstrap datapicker 使用、Bootstrap4 基礎介紹

1 Form 表單

1-1 Form 表單的起手式 :

<form action="/index.php" method="post">
    <label for="account">帳號</label>
    <input type="text" name="account" id="account" placeholder="請輸入帳號">
        <input type="submit" value="送出">
</form>
  • <form> 標籤是 HTML 中用來裝表單的容器, <form action="/index.php">..</form> 中的 action 用來指定一個位址 ( URL ),這個位址是告訴瀏覽器當使用者按送出表單後,要將表格的內容送去哪邊。這些資料會送到後端去。除非使用 API 傳資料就不需使用 form。
  • method="post" ,按下送出表單後,需透過此方式將資料送到伺服器 ( Web Server )。
    • 如果網址開頭沒有 https 協定的話,是會有洩漏和被攔截的風險。( 例如:Wireshark )
  • method="post"method="get" 差異 ?
    • method="post" 安全性較高,資料會先被打包加密後才送出,只有 server 可開啟它。
    • method="get" 資料並沒有先打包再送出,會直接裸露方式攤在外面直接送出。
  • 表單送出後,網頁網址後方會有一個 ?,問號後方會帶來參數,這些參數是由 form 表單整理起來的資料。

後台表單設計課堂筆記 - week5_01

1-2 基本表單元素 label & input:

label

  • 用來給表單的控制元件一個說明標題。

input

  • 有非常多不同的用途,主要是用 <input> 上的 type 屬性來指明不同的功能,點我查看更多 type 種類。另外要注意的是,input 並沒有結尾標籤,和 img 一樣都是單標籤。

label for 屬性與 input id 屬性對應:

  • 點擊 label 文字時可以讓對應的 input成 focus 狀態
<!--寫法一-->
<label for="name">姓名:</label>
<input type="text" id="name" name="name">

<!--寫法二-->
<label for="name">
  姓名: <input type="text" id="name" name="name">
</label>

1-3 其他表單元素屬性:

name

  • 表單元素都有一個 name 屬性,用來指定傳送給後端的資料要用什麼名稱。也會用在 radio 或是 checkbox 當作群組,同一群組的 input 需要使用相同的 name。
<p>我喜歡:</p>
<label for="ming">小明</label>
<input name="like" id="ming" type="checkbox">
<label for="auntie">漂亮阿姨</label>
<input name="like" id="auntie" type="checkbox">
<label for="jay">杰倫</label>
<input name="like" id="jay" type="checkbox">

type 中的 value

  • 文章 – HTML value屬性
  • 很常用在個人會員管理,基本上帳號是不能做更改的,只能改密碼。
  • 如果表單內的資料想要呈現唯讀檔不能做修改的可使用 readonlydisabled,但 disabled 會較常使用在表單未輸入完或沒有填寫正確,無法點選 submit 按鈕。
<input type="text" value="123" readonly >

input:date

  • 建議不要直接使用此標籤,後端會恨你 XD。
  • 每個瀏覽器支援度不同,且客戶可自行更改 value 值出現下方莫名的數字,也無法用 js 去除錯。

後台表單設計課堂筆記 - week5_02

// 圖片來源:六角學院 ▲

  • 建議直接使用套件,關鍵字 : jquery UI calendar 、datepicker

1-4 使用 Bootstrap datapicker

1-5 input 建議輸入對應的 type 類別,增加使用者體驗

  • type 種類可參考 w3school – HTML Tag
    • 例如電話號碼使用 input:tel,信箱使用 input:email

2 Bootstrap4 基礎介紹

  • Bootstrap SCSS 結構已導入 normalize
  • 到 JS4 的 Getting started 導入 的 CSS 與 JS 就可使用 Components & Utilities。

資料來源

六角學院 :

文章 :

最後修改日期: 28 12 月, 2020

作者