http://learn.shayhowe.com/html-css/building-forms

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">

 ...

</form>

2. Text Fields & Textarea

1. Text Fields  

1. input element

• 最常使用 text <input type=”text” name=”sample_text_field”>
• name attribute 非常重要 name of the control 傳送到 server 的名稱
• input element is self enclosed 沒有結尾tag

2. 原本只有 text password 兩種，HTML5多了更多種語義上的內容
   http://diveinto.html5doctor.com/forms.html
   http://www.w3schools.com/html/html5_form_input_types.asp

• color
• date
• datetime
• datetime-local
• email : (會自動校正) safari on iOS 會辨識email type 切換鍵盤成for email input 使用的鍵盤
• month
• number : safari on iOS 開啟數字鍵盤
• range
• search
• tel : safari on iOS 開啟電話輸入的數字鍵盤
• time
• url : safari on iOS 會辨識email type 切換鍵盤成for 網址mail input 使用的鍵盤 (會多加 .com 等按鍵)
• week

2. Textarea

1. <textarea name=”sample_textarea”></textarea>
2. cols : (舊的)  新用法大多直接使用 width
3. rows : (舊的)  新用法大多直接使用 height

3. 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 代表預設選取

2. 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

3. 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>
   </select>
2. select name
3. option value
4. option selected

4. Multiple Selections

1. 寫法 select option 多加了 multiple (boolean attribute)
2. 高度可以使用 CSS 調整
3. 可以按住 shift 按鍵使用

4. 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 樣式

2. Reset Button

1. 寫法 <input type="reset" name="reset" value="Reset Form">
2. 越來越少使用
3. 誤按，清除之前填寫的東西的問題

5. Other Inputs

1. Hidden Input

1. 寫法 <input type="hidden" name="tracking_code" value="abc_123">
2. 不顯示在網頁上的
3. 必須要有適當地名稱跟值

2. File Input

1. 寫法 <input type="file" name="file">
2. 用在上傳檔案
3. 不太好用CSS控制 (特別是IE)
4. 可以用JS寫

6. Organizing Form Elements

1. Label

1. 寫法
   <label for="username">Username</label>
   <input 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>
   <label><input type="radio" name="day" value="Saturday"> Saturday</label>
   <label><input type="radio" name="day" value="Sunday"> Sunday</label>
5. 上述寫法，可以不用 for 跟 id 屬性 

2. Fieldset

1. 寫法
   <fieldset>
    <label for="username">Username</label>
    <input type="text" name="username" id="username">
    <label for="password">Password</label>
    <input type="text" name="password" id="password">
   </fieldset>
2. 有點像一塊div
3. block level element
4. default include a border outline

3. Legend

1. 寫法
   <fieldset>
    <legend>Login</legend>
    <label for="username">Username</label>
    <input type="text" name="username" id="username">
    <label for="password">Password</label>
    <input type="text" name="password" id="password">
   </fieldset>
2. 提供 caption or heading for a fieldset
3. 建議要有 legend after fieldset
4. 會出現在 top left within the border

7. Form & Input Attributes

1. Disabled

1. turn off an element, not available
2. disabled a fieldset 會 disable all of the controls within the fieldset

2. 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 刪除

3. Required

1. HTML5
2. 瀏覽器有自己設定的 required 呈現，我們不能直接改變 CSS 樣式
3. 可以用 :optional 跟 :required CSS pseudo-classes 改變

4. 其他 http://www.w3schools.com/html/html5_form_attributes.asp