實作 Udemy The Web Developer Bootcamp 課程的 form 表格
form 表格
form 表格是一個 block element,可以將內容物打包傳送需要回傳的資料,其property有
action
: where the form send data tomethod
: what HTTP method (GET/POST)
input and label
input 常與 label 搭配組合,屬性有相對應的關聯性
input 重要常用有屬性有: type
、name
、id
、value
、placeholder
、required
- type: 常用的有
- text
- checkbox
- radio
- password
- name: 將所有相同的name input 視為有相關聯的資料
- id: 和 label for 綁定在一起要相同才可以讀取
- value :
- placeholder: 在還沒輸入資料的框框中,會出現預設值
- required:
label 屬性: for
當表格需要解析的時候,如果 inpute 沒有 nestting 在 label 裡會先從 label 的 for 找起,從 for 的 value 往 input 找尋 id
相符合的。
<form> |
dropdowns and radio
在 radio 與 checkbox 時,相同的會使用 label,for ane id 的關聯也是一樣的,不同在於 radio 使用在單選的時候,而 checkbox 多使用在複選。
而在 dropdowns 、 radio and checkbox 都會受到 name、value 的影響,如果沒有輸入 name 電腦會不知道他們是有相關聯的資料,
value 可以知道是賦予它值在回傳選單的時候使用,如果在 radio 只有 name 沒有 value 只會回傳 label 名稱 = on
使用 dropdowns 外層包覆 select 裡面則放 option ,沒有使用 value 的話會回傳context。
<label for="dog">dog</label> |
textarea
留言使用 textarea 標籤,使用 cols
、rows
,控制大小,如果要送回資料一樣命名 name
<textarea name="paragraph" cols="10" rows="5"><textarea> |
validation
在驗證密碼長度 validation length 部分,使用到 pattern 屬性,並使用正式表達法 Mdn
<div> |
實作練習
<h1>Register</h1> |