LESSON 8 Building Forms

controls fields froms -> small amount of information

a search query or username and password or a large amount of information

shipping billing information or a job application

user input , different types of data

  1. Initializing a Form
  1. form element will wrap all of the elements within the form
  2. actionL: URI
  3. method: get, post

<form action="#" method="foo">



  1. Text Fields & Textarea
  1. Text Fields  
  1. input element
  1. 原本只有 text password 兩種,HTML5多了更多種語義上的內容
  1. Textarea
  1. <textarea name=”sample_textarea”></textarea>
  2. cols : (舊的)  新用法大多直接使用 width
  3. rows : (舊的)  新用法大多直接使用 height
  1. Multiple Choice Inputs & Menus
  1. Radio Buttons
  1. 寫法 type =”radio”
    <input type="radio" name="day" value="Friday" checked> Friday
    <input type="radio" name="day" value="Saturday"> Saturday
    <input type="radio" name="day" value="Sunday"> Sunday
  2. 使用相同名稱 name 會當作同一組送出
  3. value 代表送出的值
  4. checked 代表預設選取
  1. Checkboxes
  1. 寫法 type =”checkbox”
    <input type="checkbox" name="day" value="Friday" checked>Friday
    <input type="checkbox" name="day" value="Saturday"> Saturday
    <input type="checkbox" name="day" value="Sunday"> Sunday
  2. select mutiple
  1. Drop Down Lists
  1. 寫法 select option
    <select name="day">
     <option value="Friday" selected>Friday</option>
     <option value="Saturday">Saturday</option>
     <option value="Sunday">Sunday</option>
  2. select name
  3. option value
  4. option selected
  1. Multiple Selections
  1. 寫法 select option 多加了 multiple (boolean attribute)
  2. 高度可以使用 CSS 調整
  3. 可以按住 shift 按鍵使用
  1. Form Buttons
  1. Submit Button
  1. 寫法 <input type="submit" name="submit" value="Submit Form">
  2. 也可用 image 當 submit button
  3. 可以使用css background, border-radius, box-shadow 來改變 button 樣式
  1. Reset Button
  1. 寫法 <input type="reset" name="reset" value="Reset Form">
  2. 越來越少使用
  3. 誤按,清除之前填寫的東西的問題
  1. Other Inputs
  1. Hidden Input
  1. 寫法 <input type="hidden" name="tracking_code" value="abc_123">
  2. 不顯示在網頁上的
  3. 必須要有適當地名稱跟值
  1. File Input
  1. 寫法 <input type="file" name="file">
  2. 用在上傳檔案
  3. 不太好用CSS控制 (特別是IE)
  4. 可以用JS寫
  1. Organizing Form Elements
  1. Label
  1. 寫法
    <label for="username">Username</label>
     type="text" name="username" id="username">
  2. 提供 captions or headings
  3. 要用到 for attribute,for 的值要跟指定的 id一樣
  4. radio button 的寫法
    <label><input type="radio" name="day" value="Friday" checked> Friday</label>
     type="radio" name="day" value="Saturday"> Saturday</label>
     type="radio" name="day" value="Sunday"> Sunday</label>
  5. 上述寫法,可以不用 for 跟 id 屬性 
  1. Fieldset
  1. 寫法
     <label for="username">Username</label>
     <input type="text" name="username" id="username">
     <label for="password">Password</label>
     <input type="text" name="password" id="password">
  2. 有點像一塊div
  3. block level element
  4. default include a border outline
  1. Legend
  1. 寫法
     <label for="username">Username</label>
     <input type="text" name="username" id="username">
     <label for="password">Password</label>
     <input type="text" name="password" id="password">
  2. 提供 caption or heading for a fieldset
  3. 建議要有 legend after fieldset
  4. 會出現在 top left within the border
  1. Form & Input Attributes
  1. Disabled
  1. turn off an element, not available
  2. disabled a fieldset 會 disable all of the controls within the fieldset
  1. Placeholder
  1. HTML5
  2. provide a tip within the control of a input disappears once the control is clicked in, or gains focus
  3. text, email, search, tel, or url
  4. 跟 value 最大的差別,value 會留著值直到 user 刪除
  1. Required
  1. HTML5
  2. 瀏覽器有自己設定的 required 呈現,我們不能直接改變 CSS 樣式
  3. 可以用 :optional 跟 :required CSS pseudo-classes 改變
  1. 其他