HTML表單元素及CSS

龐少華發表於2019-02-16
HTMLCSS

表單

一、介紹

<form> 標籤表示為表單，表單元素是允許使用者在表單中輸入內容。
屬性：action-提交表單的地址
Method-提交表單的方式。屬性值：get/post
      Enctype-被提交表單的MIME型別

二、表單元件

元件一般被定義在表單中（<form>標籤中）
<input>標籤表示輸入框，為空標籤。
<input> 元素在 <form> 元素中使用，用來宣告允許使用者輸入資料的 input 控制元件。
屬性1：type，type 屬性規定要顯示的 <input> 元素的型別。
屬性值：text-表示輸入框型別
- value - 表示輸入框的值
         * 輸入框所輸入的文字內容
         * type - 表示輸入框的型別
           * text - 表示文字輸入框
           * password - 表示密碼框
           * button - 表示按鈕
           * reset - 表示重置按鈕
             - 將表單內元件內容清除效果
           * submit - 表示提交按鈕
             - 將當前的表單提交給指定的地址（action）
           * radio - 表示單選框
             -表示一組單選框（name屬性）中只能選擇一個
           * checkbox - 表示多選框
             -表示一組多選框，允許選擇多個
           * file - 表示檔案域
             -作用 - 允許選擇本地的檔案（預設不限制型別）
             -用途 - 多用於檔案上傳
           -hidden - 表示隱藏域
             -不會被顯示在頁面中（使用者看不到）
             -作用 - 用於儲存一些不希望被使用者看到的資料

三、下拉選單

<select>標籤表示下拉選單
         - 預設 - 表示下拉單選框
         - 屬性
           -id - 表示標識
           - name - 表示名稱
<option>標籤表示下拉選單的選項
             - value - 表示值
<select>標籤 - 下拉多選框
         -屬性
           - size - 表示下拉選單預設顯示選項的個數
           -multiple - 表示多選

四、文字域

<textarea>標籤表示文字域
         - 屬性
           - cols - 表示列
           - rows - 表示行

五、提交表單

1.實現提交表單的功能
     -定義<form>標籤，並且定義表單元件
     -必須定義提交按鈕(submit)
     - 必須配合<form>標籤的action屬性使用
2.method - 表示提交表單的方式
     - get - 預設方式，表單的所有請求資料被新增在請求地址中
       - 請求地址（在標準規範中是有限制的）
         -大小限制 - 無法新增資料量較大的內容
         -未加密(明文)
    - post - 一般建議使用這種
3.提交表單的方式至少兩種，分別是get和post
     - 提交表單的方式常用是七種
     -RESTFul API（標準式API）
       - get - 獲取
       - post - 修改
       - put - 新增
       - delete - 刪除

六、檔案上傳

1.提交表單方式
- get - 只是將檔名稱傳送給伺服器端
      - 沒有實現檔案上傳功能
- - post - 只是將檔名稱傳送給伺服器端
- enctype屬性
  - application/x-www-form-urlencoded - 是<form>標籤的預設值
  - 專門用於提交表單元件的內容（資料）為：
     - multipart/form-data - 用於檔案上傳
2.<input type=file>
     -預設 - 只能選擇一個檔案
     -選擇多個檔案 - multiple 屬性

CSS

一、內聯樣式

1.內聯樣式 - 通過HTML的標準屬性 style 實現
  -style="CSS的內容"
  - 問題
    -設定的樣式只針對當前HTML元素有效
    -相同樣式設定無法被重複使用
    - 並沒有將結構與樣式有效分離
2.<style></style>標籤 -
  1) 內嵌樣式表
    -用法 - 該標籤中定義CSS的內容
    -好處
     -HTML的結構與樣式分離（相對於內聯樣式）
     -定義的樣式可以被重複使用
     -不是針對某個指定HTML元素
    -壞處
     - CSS的內容依舊被定義在HTML頁面中
  2) 外聯樣式表
      <style>既是標籤名，也是屬性名。

二、MIME型別：

-作用 - 規定當前文件的具體使用型別是什麼
-值：
   -html頁面 - text/html
   -css檔案 - text/css
   -JavaScript檔案 - text/javascript
-1.與表單相關的
   - application/x-www-form-urlencoded
   - multipart/form-data
-2.與圖片相關的
   - image/png
   - image/jpg
   - image/jpeg
   - image/gif
-3.與文字相關的
   - text/plain

三、CSS選擇器

作用：定位HTML頁面中的標籤
舉例：
     h1,h2 {
                color: lightsalmon;
                font-size: 84px;
            }
1.{}-表示宣告塊/組
2.CSS宣告包含：  樣式屬性：值
3.注意：  :（冒號）和;（分號）都是英文狀態下的。
          冒號表示分隔符，分號表示結束符。

相關文章