引言
这篇文章可以给你关于以下内容的的体验：
- 创建一个表单
- 发送表单数据
什么是HTML表单？
表单是用户与服务器或应用交互的主要方式之一。它们允许用户向服务器发送数据。表单中的数据大多会被发送至服务器，但也可以被网页截获，使用。
一个表单是由一个或多个widget(部件，工具)组合而成的。
这些widget可以是
- text field（single line or multiline）（文本框）
- select box（下拉框）
- button（按钮）
- checkbox（复选框）
- radio button（单选框）
大多数情况下，每一个widget都有一个label与之匹配，用于描述widget的用途。
设计你的表单
建立一个简单地模型可以帮助你确定你想从用户那儿得到的正确的数据。
在本文中，我们将建立一个简单地联系人表单。首先，让我们先画一个简单的草图
我们的表单包含三个文本框和一个提交按钮。当用户点击提交按钮时，数据将被发送到指定的服务器上
来手动写一个
我们将使用以下5个HTML元素来实现我们的联系人表单
- <form>
- <label>
- <input>
- <textarea>
- <button>
<form> 元素
所有的HTML表单都被包含在一对<form>...</form>元素标签内，比如：
<form action = "/my-handling-form-page" method = "post">
...
</form>
与<div>和 <p>元素类似，<form> 元素也是一个容器元素，并且它也支持特定的属性。
实践中一般至少确定action 与method 属性
action属性定义了表单提交数据的地址method属性定义了哪一个HTTP方法将被调用（"post" or "get"）
<label> , <input> ,and <textarea> 元素
我们的表单包含三个文本框，并且每一个文本框都有对应的标签。姓名框只是一个简单的单行文本框，e-mail框则只能接受e-mail地址，消息框则是一个简单的多行文本框。
<form action = "/my-handling-form-page" method = "post">
<div>
<label for = "name">Name：</label>
<input type = "text" id = "name" name = "user_name" >
</div>
<div>
<label for = "mail">E-mail:</label>
<input type = "email" id = "mail" name = "user_mail" >
</div>
<div>
<label for = "msg" >Message:</label>
<textarea id = "msg" name = "user_msg"></textarea>
</form>
我们使用<div> 标签组织我们的代码和样式。
所有<label> 标签均通过 for 属性与对应的widget匹配。for属性的值是widget的ID。
<input> 元素最重要的属性是type属性，type属性定义了<input> 元素的行为。
也许你会对for 与 type属性感到疑惑，继续往下阅读，在你看到更多的实例之后，你会有更加全面的认识，也会对他俩更加熟悉。
另外，注意<input> 与 <textarea>...</textarea> 的语法差异。这种语法差异体现在定义默认值上
<input type = "text" value = "你好">
<textarea>你好</textarea>
<button> 元素
最后，我们需要向我们的表单添加一个按钮（button），使用户可以发送他们的数据。
<div class = "button">
<button type = "submit" >提交</button>
</div>
<button> 也有一个type属性，其值可以是：submit，reset，button
- submit 将数据发送给由form表单中的action属性定义的服务器或网页
- reset 重新设定表单中的所有widgets的值为默认值
- button 用于自定义，通过javascript实现
向服务器发送数据
你可能会发现我们上面的代码中，每个widget有"多余的"属性---name。其实它并不多余，因为表单中的数据是要提交给服务器处理的，而浏览器和服务器都需要对数据进行分类，因此，name 属性是必须的。
最终效果
只是有点丑...
学习于：mozilla mdn
