HTML表單（來自MDN的總結）

    

        Name:
        
    
    

        E-mail:
        
    
    

        Message:
        
    

元素也接受一個 type屬性，它接受三個值中的一個:submit, reset或者 button。

單擊 submit 按鈕 發送表單的數據到

元素的action 屬性所定義的網頁。

單擊 reset 按鈕 將所有表單小部件重新設置為它們的默認值。

單擊button 按鈕……不會發生任何事！這聽起來很傻，但是用JavaScript構建定制按鈕非常有用。

基本表單樣式

form {
  /* 居中表單 */
  margin: 0 auto;
  width: 400px;
  /* 顯示表單的輪廓 */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

/* 選擇 
 元素之后緊跟的每個 
 元素。 */
form div + div {
  margin-top: 1em;
}

label {
  /* 確保所有label大小相同并正確對齊 */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input, textarea {
  /* 確保所有文本輸入框字體相同 textarea默認是等寬字體 */
  font: 1em sans-serif;

  /* 使所有文本輸入框大小相同 */
  width: 300px;
  box-sizing: border-box;

  /* 調整文本輸入框的邊框樣式 */
  border: 1px solid #999;
}

/* 選擇獲得焦點的輸入字段（元素），并設置其樣式 */
input:focus, textarea:focus {
  /* 給激活的元素一點高亮效果 */
  border-color: #000;
}

textarea {
  /* 使多行文本輸入框和它們的label正確對齊 */
  vertical-align: top;

  /* 給文本留下足夠的空間 */
  height: 5em;
}

.button {
  /* 把按鈕放到和文本輸入框一樣的位置 */
  padding-left: 90px; /* 和label的大小一樣 */
}

button {
  /* 這個外邊距的大小與label和文本輸入框之間的間距差不多 */
  margin-left: .5em;
}

display: inline-block; 元素能夠在同一行顯示。
display：inline-block 的布局方式和浮動的布局方式。

對于橫向排列東西來說，我更傾向與使用inline-block來布局，因為這樣清晰，也不用再像浮動那樣清除浮動，害怕布局混亂等等。

對于浮動布局就用于需要文字環繞的時候，畢竟這才是浮動真正的用武之地，水平排列的是就交給inline-block了。

web服務器發送表單數據

元素將定義如何通過action 屬性和 method屬性來發送數據的位置和方式。

還需要為我們的數據提供一個名稱。這些名字對雙方都很重要;在瀏覽器端，它告訴瀏覽器哪個名稱提供每個數據，在服務器端，它允許服務器按名稱處理每個數據塊。

要將數據命名為表單，您需要在每個表單小部件上使用 name 屬性來收集特定的數據塊。

 
  

    Name:
    
  
  

    E-mail:
    
  
  

    Message:
    
  

  ...

表單會發送三個已命名的數據塊 "user_name", "user_email", 和 "user_message"。這些數據將用使用HTTP POST 方法,把信息發送到URL為 "/my-handling-form-page"目錄下。

如何構造HTML表單

元素： 嚴格禁止在一個表單內嵌套另一個表單。

和

元素：

元素

元素：包裝標簽和它的小部件。

使用 HTML標題（例如，

、

）和分段（如

）來構造一個復雜的表單。

  

    
Fruit juice size
    

      
      Small
    
    

      
      Medium
    
    

      
      Large
    
  

多個標簽

  Name: *
  

原生表單部件

通用屬性

autofocus ：默認（false）這個布爾屬性允許您指定當頁面加載時元素應該自動具有輸入焦點，除非用戶覆蓋它，例如通過鍵入不同的控件。文檔中只有一個與表單相關的元素可以指定這個屬性。

disabled ：默認（false）這個布爾屬性表示用戶不能與元素交互。如果沒有指定這個屬性，元素將從包含的元素繼承它的設置，例如

;如果沒有包含disabled屬性集的元素，那么就啟用了元素。

name : 元素的名稱;這是用于表單數據提交的。

value : 元素的初始值。

文本輸入域

它們可以被標記為 readonly (用戶不能修改輸入值)甚至是 disabled (輸入值永遠不會與表單數據的其余部分一起發送)。

它們可以有一個 placeholder; 這是文本輸入框中出現的文本，用來簡略描述輸入框的目的。

它們可以被限制在size (框的物理尺寸) 和 長度 (可以輸入的最大字符數)。

單行文本域

指定的type屬性的值在瀏覽器中是未知的（比如你指定 type="date"，但是瀏覽器不支持原生日期選擇器），屬性值text就是是備用值。

單行文本域只有一個真正的約束：如果您輸入帶有換行符的文本，瀏覽器會在發送數據之前刪除這些換行符。

下拉內容

選擇框

Banana Cherry Lemon Carrot Eggplant Potato

如果一個元素設置了value屬性，那么當提交表單時該屬性的值就會被發送。如果忽略了value屬性，則使用元素的內容作為選擇框的值。

在元素中，label屬性顯示在值之前，但即使它看起來有點像一個選項，它也不是可選的。

2.多選選擇框

通過將multiple屬性添加到元素，您可以允許用戶通過操作系統提供的默認機制來選擇幾個值。

Banana Cherry Lemon

3.自動補全輸入框

What"s your favorite fruit?

然后使用 list 屬性將數據列表綁定到一個文本域(通常是一個 元素)。

4.可選中項

對于大多數表單部件，一旦表單提交，所有具有name屬性的小部件都會被發送，即使沒有任何值被填。對于可選中項，只有在勾選時才發送它們的值。如果他們沒有被勾選，就不會發送任何東西，甚至連他們的名字也沒有。

// 復選


// 單選

幾個單選按鈕可以連接在一起。如果它們的name屬性共享相同的值，那么它們將被認為屬于同一組的按鈕。同一組中只有一個按鈕可以同時被選；這意味著當其中一個被選中時，所有其他的都將自動未選中。如果沒有選中任何一個，那么整個單選按鈕池就被認為處于未知狀態，并且沒有以表單的形式發送任何值。

  
What is your favorite meal?
  

    

      Soup
      
    
    

      Curry
      
    
    

      Pizza
      
    
  

為了獲得最大的可用性和可訪問性，建議您在

中包圍每個相關項目的列表，并使用

提供對列表的全面描述。

還需要為這些類型的輸入提供value屬性，如果您想讓它們具有意義——如果沒有提供任何值，則復選框和單選按鈕被賦予一個 on值。

高級表單部件

1.數字

// 這將創建一個數字小部件，其值被限制為1到10之間的任何值，而其增加和減少按鈕的值將更改為2。

通過設置min和max屬性來約束該值。

通過設置step屬性來指定增加和減少按鈕更改小部件的值的數量。

在10 以下的Internet Explorer版本中不支持number 輸入。

2.滑塊

// 滑塊的一個問題是，它們不提供任何形式的視覺反饋，以了解當前的值是什么。您需要使用JavaScript來添加這一點
How many beans can you eat?

// 這個例子創建了一個滑塊，它可能的值在0到500之間，而它的遞增/遞減按鈕改變值的值是+10和-10。



var beans = document.querySelector("#beans");
var count = document.querySelector(".beancount");

// 當前值
count.textContent = beans.value;

// 改變時的函數
beans.oninput = function() {
  count.textContent = beans.value;
}

https://developer.mozilla.org...

發送表單數據 GET 方法

瀏覽器發送一個空的主體。因為主體是空的，如果使用該方法發送一個表單，那么發送到服務器的數據將被追加到URL。

POST 方法

需要考慮到HTTP請求體中提供的數據:“嘿，服務器，看一下這些數據，然后給我回一個適當的結果。”如果使用該方法發送表單，則將數據追加到HTTP請求的主體中。

特殊案例:發送文件

文件是二進制數據——或者被認為是這樣的——而所有其他數據都是文本數據。由于HTTP是一種文本協議，所以處理二進制數據有特殊的要求。

enctype 屬性

該屬性允許您指定在提交表單時所生成的請求中的Content-Type的HTTP數據頭的值。這個數據頭非常重要，因為它告訴服務器正在發送什么樣的數據。默認情況下，它的值是application/x-www-form-urlencoded。它的意思是：“這是已編碼為URL參數的表單數據。”

如果你想要發送文件，你需要額外的三個步驟：

將method屬性設置為POST，因為文件內容不能放入URL參數中。

將enctype的值設置為multipart/form-data，因為數據將被分成多個部分，每個文件分別對應一個文件以及表單正文中包含的文本數據(如果文本也輸入到表單中)。

包含一個或多個File picker小部件，允許用戶選擇將要上傳的文件。

  

    Choose a file
    
  
  

    

Send the file