The Web Developer Bootcamp form excise

實作 Udemy The Web Developer Bootcamp 課程的 form 表格

form 表格

form 表格是一個 block element,可以將內容物打包傳送需要回傳的資料,其property有

  • action: where the form send data to
  • method: what HTTP method (GET/POST)

input and label

input 常與 label 搭配組合,屬性有相對應的關聯性

input 重要常用有屬性有: typenameidvalueplaceholderrequired

  • type: 常用的有
    • text
    • checkbox
    • radio
    • email
    • password
  • name: 將所有相同的name input 視為有相關聯的資料
  • id: 和 label for 綁定在一起要相同才可以讀取
  • value :
  • placeholder: 在還沒輸入資料的框框中,會出現預設值
  • required:

label 屬性: for

當表格需要解析的時候,如果 inpute 沒有 nestting 在 label 裡會先從 label 的 for 找起,從 for 的 value 往 input 找尋 id 相符合的。

<form>
<label for="name">Name:</label>
<input type="text" name="name" id="name" placeholder="John" required>

<label>
Name:
<input type="text" name="name" placeholder="John" required>
</label>
</form>

在 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>
<input type="radio" name="pets" id="gog" value="DOG">
<label for="cat">cat</label>
<input type="radio" name="pets" id="cat" value="CAT">


<select name="mood">
<option value="happy">:)</option>
<option value="neutral">:|</option>
<option value="sad">:(</option>
</select>

textarea

留言使用 textarea 標籤,使用 colsrows,控制大小,如果要送回資料一樣命名 name

<textarea name="paragraph" cols="10" rows="5"><textarea>

validation

在驗證密碼長度 validation length 部分,使用到 pattern 屬性,並使用正式表達法 Mdn

<div>
<label>
Email
<input type="email" name="email" placehoder="your email" required>
</label>
<label>
Password:
<input type="password" name="password" pattern=".{3,5}" required title="3 to 5 charators">
</label>
</div>

實作練習

<h1>Register</h1>
<form>
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="John" required>
<label for="lastname">Last Name</label>
<input type="text" name="firstname" id="lastname" required>
<div>
<label for="Male">Male</label>
<input type="radio" name="gender" id="Male" value="Male">
<label for="female">Male</label>
<input type="radio" name="gender" id="female" value="female">
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other">
</div>
<div>
<label>
Email
<input type="email" name="email" placehoder="your email" required>
</label>
<label>
Password:
<input type="password" name="password" pattern=".{3,5}" required title="3 to 5 charators">
</label>
</div>
<div>
<select name="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="year">
<option value="2019">2019</option>
<option value="2018">2018</option>
</select>
</div>
<div class="">
<label for="agreed">I agree to terms and conditions</label>
<input type="checkbox" name="agreed" id="agreed">
</div>
<input type="submit">
</form>