---
# System prepended metadata

title: 筆記
tags: [HTML]

---

## Input

### type attribute of input
| 類型                 | 範例程式碼 | 
| -------------------- | -------- |
| 普通文字              | <input type="text">   |
| 密碼                 | <input type="password"> |
| 日期選擇（年、月、日）  | <input type="date"> |
| 單選按鈕              | <input type="radio"> |
| 複選                 | &lt;input type="checkbox"&gt;|
| 電子郵件              | <input type="email"> |
| 文件                 | <input type="file"> |
| 提交按鈕              | <input type="submit"> |
| 按鈕                 | <input type="button">|
| 顏色選擇              | <input type="color"> |
| 本地日期與時間選擇器    | <input type="datetime-local"> |
| 隱藏欄位              | <input type="hidden"> |
| 圖片                 | <input type="image"> |
| 月份選擇（年、月）     | <input type="month"> |
| 數字                 | <input type="number"> |
| 範圍選擇滑桿          | <input type="range"> |
| 重設按鈕             | <input type="reset"> |
| 搜尋框               | <input type="search"> |
| 電話號碼             | <input type="tel"> |
| 時間選擇（時、分、秒） | <input type="time"> |
| 網址                 | <input type="url"> |
| 週選擇器              | <input type="week"> |



### other elements
```html
下拉式選單
<select id="grade">
    <optgroup label=“大學”>
    <option value="freshman">大一</option>
    <option value="sophomore">大二</option>
    <option value="junior">大三</option>
    <option value="senior">大四
    </optgroup>
</option>
</select>

多行輸入
<textarea></textarea>
```

### optional attributes
    預設提示文字
    placeholder="輸入備註"
    
    標籤（不能重複）
    id="id"
    
    提交時做引用
    name="name"
    
    預設值
    value="value"
    
    綁定到標籤
    for="language"
    
    設定多行輸入的長寬
    rows=3
    cols=25
    
    
      Tutorial
---------
(旻)
      HOME
      Introduction
      Editors
      Basic
      Elements
      Lists
  ![image](https://hackmd.io/_uploads/rke23pMcye.png)
  
-----
  
(子) 
      Attributes
      Headings
      Paragraphs
      Styles
      Formatting
      Colors(子宸)
  * Colors
    RGB
    HEX
    HSL
  
----

(聿)
      Quotations
      Comments
      CSS
      Favicon
      Page Title
      Links(聿庭)

-----

(柏)
     Block & Inline
     Div
     Classes
     Id
     Responsive(共同)
     Tables(柏)
  ![image](https://hackmd.io/_uploads/HyEo3pGqJx.png)

---

(詠)
      Iframes
      JavaScript
      File Paths
      Head
      Layout
      Images(詠)
  ![image](https://hackmd.io/_uploads/rJzq2pMcJe.png)
  
  