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