HTML表單（來自MDN的總結(jié)）

    

        Name:
        
    
    

        E-mail:
        
    
    

        Message:
        
    

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

單擊 submit 按鈕 發(fā)送表單的數(shù)據(jù)到

元素的action 屬性所定義的網(wǎng)頁。

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

單擊button 按鈕……不會(huì)發(fā)生任何事！這聽起來很傻，但是用JavaScript構(gòu)建定制按鈕非常有用。

基本表單樣式

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

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

label {
  /* 確保所有l(wèi)abel大小相同并正確對(duì)齊 */
  display: inline-block;
  width: 90px;
  text-align: right;
}

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

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

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

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

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

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

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

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

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

對(duì)于橫向排列東西來說，我更傾向與使用inline-block來布局，因?yàn)檫@樣清晰，也不用再像浮動(dòng)那樣清除浮動(dòng)，害怕布局混亂等等。

對(duì)于浮動(dòng)布局就用于需要文字環(huán)繞的時(shí)候，畢竟這才是浮動(dòng)真正的用武之地，水平排列的是就交給inline-block了。

web服務(wù)器發(fā)送表單數(shù)據(jù)

元素將定義如何通過action 屬性和 method屬性來發(fā)送數(shù)據(jù)的位置和方式。

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

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

 
  

    Name:
    
  
  

    E-mail:
    
  
  

    Message:
    
  

  ...

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

如何構(gòu)造HTML表單

元素： 嚴(yán)格禁止在一個(gè)表單內(nèi)嵌套另一個(gè)表單。

和

元素：

元素

元素：包裝標(biāo)簽和它的小部件。

使用 HTML標(biāo)題（例如，

、

）和分段（如

）來構(gòu)造一個(gè)復(fù)雜的表單。

  

    
Fruit juice size
    

      
      Small
    
    

      
      Medium
    
    

      
      Large
    
  

多個(gè)標(biāo)簽

  Name: *
  

原生表單部件

通用屬性

autofocus ：默認(rèn)（false）這個(gè)布爾屬性允許您指定當(dāng)頁面加載時(shí)元素應(yīng)該自動(dòng)具有輸入焦點(diǎn)，除非用戶覆蓋它，例如通過鍵入不同的控件。文檔中只有一個(gè)與表單相關(guān)的元素可以指定這個(gè)屬性。

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

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

name : 元素的名稱;這是用于表單數(shù)據(jù)提交的。

value : 元素的初始值。

文本輸入域

它們可以被標(biāo)記為 readonly (用戶不能修改輸入值)甚至是 disabled (輸入值永遠(yuǎn)不會(huì)與表單數(shù)據(jù)的其余部分一起發(fā)送)。

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

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

單行文本域

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

單行文本域只有一個(gè)真正的約束：如果您輸入帶有換行符的文本，瀏覽器會(huì)在發(fā)送數(shù)據(jù)之前刪除這些換行符。

下拉內(nèi)容

選擇框

Banana Cherry Lemon Carrot Eggplant Potato

如果一個(gè)元素設(shè)置了value屬性，那么當(dāng)提交表單時(shí)該屬性的值就會(huì)被發(fā)送。如果忽略了value屬性，則使用元素的內(nèi)容作為選擇框的值。

在元素中，label屬性顯示在值之前，但即使它看起來有點(diǎn)像一個(gè)選項(xiàng)，它也不是可選的。

2.多選選擇框

通過將multiple屬性添加到元素，您可以允許用戶通過操作系統(tǒng)提供的默認(rèn)機(jī)制來選擇幾個(gè)值。

Banana Cherry Lemon

3.自動(dòng)補(bǔ)全輸入框

What"s your favorite fruit?

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

4.可選中項(xiàng)

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

// 復(fù)選


// 單選

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

  
What is your favorite meal?
  

    

      Soup
      
    
    

      Curry
      
    
    

      Pizza
      
    
  

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

中包圍每個(gè)相關(guān)項(xiàng)目的列表，并使用

提供對(duì)列表的全面描述。

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

高級(jí)表單部件

1.數(shù)字

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

通過設(shè)置min和max屬性來約束該值。

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

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

2.滑塊

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

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



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

// 當(dāng)前值
count.textContent = beans.value;

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

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

發(fā)送表單數(shù)據(jù) GET 方法

瀏覽器發(fā)送一個(gè)空的主體。因?yàn)橹黧w是空的，如果使用該方法發(fā)送一個(gè)表單，那么發(fā)送到服務(wù)器的數(shù)據(jù)將被追加到URL。

POST 方法

需要考慮到HTTP請(qǐng)求體中提供的數(shù)據(jù):“嘿，服務(wù)器，看一下這些數(shù)據(jù)，然后給我回一個(gè)適當(dāng)?shù)慕Y(jié)果?！比绻褂迷摲椒òl(fā)送表單，則將數(shù)據(jù)追加到HTTP請(qǐng)求的主體中。

特殊案例:發(fā)送文件

文件是二進(jìn)制數(shù)據(jù)——或者被認(rèn)為是這樣的——而所有其他數(shù)據(jù)都是文本數(shù)據(jù)。由于HTTP是一種文本協(xié)議，所以處理二進(jìn)制數(shù)據(jù)有特殊的要求。

enctype 屬性

該屬性允許您指定在提交表單時(shí)所生成的請(qǐng)求中的Content-Type的HTTP數(shù)據(jù)頭的值。這個(gè)數(shù)據(jù)頭非常重要，因?yàn)樗嬖V服務(wù)器正在發(fā)送什么樣的數(shù)據(jù)。默認(rèn)情況下，它的值是application/x-www-form-urlencoded。它的意思是：“這是已編碼為URL參數(shù)的表單數(shù)據(jù)?！?/p>

如果你想要發(fā)送文件，你需要額外的三個(gè)步驟：

將method屬性設(shè)置為POST，因?yàn)槲募?nèi)容不能放入U(xiǎn)RL參數(shù)中。

將enctype的值設(shè)置為multipart/form-data，因?yàn)閿?shù)據(jù)將被分成多個(gè)部分，每個(gè)文件分別對(duì)應(yīng)一個(gè)文件以及表單正文中包含的文本數(shù)據(jù)(如果文本也輸入到表單中)。

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

  

    Choose a file
    
  
  

    

Send the file