HTML中还有一类标签，用户可以用他们输入或选择，向后台服务器发送数据。

因为需要把他们放在form（表单）标签中，所以飞哥把他们称之为表单标签。

form标签

form标签界定哪些表单标签的内容需要被提交到后台。

通常来说，表单标签都要放置在form标签中——否则，他们的内容不会被提交到后台（强调：常见错误！）

<form></form>

form标签中需要理解以下几个属性：

• action：指示表单提交到哪里处理，或者由谁来采取行动，相应form提交，默认为当前页面。
• method：指示表单以何种方式提交到后台，常用的是get（默认）或post，复习。

F12 网络 演示：

<form action="/problem/sample.html" method="post">
    <input type="submit" value="提交" />
</form>

因为服务器上只有一个sample.html文件，所以实际上不能响应post请求，于是返回的是405错误：

按钮

按钮有两种写法：

• 使用input标签

  <input type="submit" value="提交" />

• 或者，直接使用button标签

  <button type="button">按钮</button> 

type可以有三个值：

• 提交（submit）：将form表单中的数据提交到后端
• 重置（reset）：清空表单中用户所有输入
• 普通按钮（button）：无默认动作，一般配合JavaScript使用

<input type="reset" value="重置" />

另外，在按钮标签中还可以添加一个formaction属性，用于“覆盖/指定”点击该按钮时信息提交的目标页面：

<button type="submit" formaction="/problem/publish"> 发布</button>
<input type="submit" formaction="/problem/edit" value="修改" />

文本类标签

单行文本框（text）

<label>用户名：</label> <input type="text" name="username" value="大飞哥" /><br />

密码输入框（password）

<label>密码：</label><input type="password" name="password" value="1234" /><br />

隐藏文本域（hidden）

<!-- 不要用它存储敏感信息 -->
<input type="hidden" name="fg" value="潜伏者" />

label是一个语义标签，效果和span差不多，类似于header和div的区别。按HTML规范，label通常和input配套使用。

后面我们会发现：大多数表单标签名都是 input，区别他们的是 type。type="text"，表示这是一个文本框；type="password"，表示这是一个密码输入框……

name和value

name通常都是要写的，因为

• 所有提交到后台的数据都是“键值对”形式的字符串，
• name是键值对中的“键”，是后台区分传入值的唯一来源
• 没有name的表单元素无法提交到后台

value代表用户的输入，可以给定一个初始值。value属性也可以不写，就显示一个空白的文本框。

多行文本框（textarea）

<label>自我介绍：</label><br />
<textarea name="selfDescription">飞哥飞哥</textarea><br />

注意：

• 它的标签名是textarea，不是input
• 没有value属性，默认值设定在标签文本中
  

数据传输

演示：提交form表单，数据以键值对（复习）的形式向后台传递：

name做“键”，value（或textarea中的文本）做“值”。

演示：查看请求的原始数据

• 键值对之间用&进行分割
• 当传输的数据是中文时，浏览器会将其进行编码（encode），后端获取数据后可以再解码（decode）：

概念澄清

form表单本身并不传递数据，是浏览器将form表单中的数据进行“解析”，然后根据form中method属性（或button中的formactioin）分别使用：

• GET方式，将form表单中的数据转换成URL参数
  
• POST方式，将form表单中的数据转换成Form Data

再传递给服务器！复习：GET和POST，

• 按HTTP协议，GET请求没有Form Data项
• POST时，action的url一样可以带url参数，比如：

  <form action="/problem/sample.html?age=18" method="post">

disabled和readonly

disabled：禁用。既不能修改，也不会往后台传值

readonly：只读。不能修改，但还是能够往后台传值。但是，并不是所有表单标签都能够生效。

PS：根据HTML5规范，disabled和readonly都可以不带属性值，即只要有这个属性，就表明该元素需要disabled或readonly。如果一定要属性值，属性值就是disabled或readonly

选择标签

不需要用户输入（字符），只需要点击鼠标选择即可的标签。

单选框

<label>性别：</label>
<!-- 使用name属性进行分组 -->
<!-- 小技巧：用label包裹-->        
<label><input type="radio" name="gender" value="male" disabled="disabled" checked /> 男</label>
<!-- radio和checkbox只能disabled不能readonly（实际上是bug） -->
<input type="radio" name="gender" value="female" readonly/>女 <br />

语法要点：

1. 标签名仍然是input，由属性type="radio"决定它是一个单选框
2. 用<lable>包裹住input标签，点击整个label标签都可以作用于单选框
3. input中添加属性checked，就可以设置一个页面加载时的默认选中项
4. 仍然使用name和value想后台传值，只是这里的value用户无法修改
   
5. 具有相同name的多个radio，就是一组，一组radio，只能选中一个——这就是radio被称之为“单”选框的原因
6. 如果说没有给value赋值，选中之后往后台传递的值为：on
7. 被选中的checkbox的键（名）值对，才会传递到后台；未被选中的checkbox，整个键值对都不会传，而不是传一个空值什么的！

上述6/7都会给我们后续的开发造成一些麻烦……

复选框

<label>爱好：</label>
<label><input type="checkbox" name="hobby" value="table-tenis" />乒乓球</label>
<label><input type="checkbox" name="hobby" value="chess" />象棋</label>
<label><input type="checkbox" name="hobby" value="LOL" />LOL</label>

同组的checkbox可以选中多个，所以它被称之为“复”选框

语法要点：同radio

下拉列表

<label>年龄：</label>
<select name="age">
    <!-- 往后台传递的是value -->
  <option value="1">one</option>
    <option value="2" selected>two</option>
    <option value="3">three</option>
</select><br />

语法要点：

1. name在select标签里面
   
2. 有value，就传value，没有就传文本text
3. 默认选中项用 selected 属性标识
4. 可以在select中添加multiple，将其变成可多选菜单

以上所有选择标签，都可以disabled，无法readonly

文件上传

除了使用type="file"指定input用于文件上传，还需要在form中设置：enctype="multipart/form-data"

<form method="post" enctype="multipart/form-data">
    <input type="file" name="icon" />
    <button type="submit">提交</button>
</form>

否则，form元素默认使用：enctype="application/x-www-form-urlencoded"，就只会向后台发送文件名，而不是文件内容（演示）

实际上，multipart直译过来就是“多个部分”，指的就是：文件部分和其他键值对部分，两者之间用boundary分割：

HTML5新标签/属性

修改input标签的type为：

• color：让用户可以选择颜色
• date/datetime/month/week……：让用户选择日期/时间等
• email/tel/url：可以验证用户的输入是否符合Email/电话/URL的格式要求
• number/range：用户可以输入数字和比例
• ……

目前逐渐开始使用的一些属性：

• novalidate：用于form，禁用掉HTML5自带的验证
  
• formaction：用于提交按钮，可以指定点击该按钮将form表单提交到那个网址处理（覆盖form中的设置），在一个form中可以有多个按钮时有用
• multiple：主要使用在文件上传框（type="file"）中，用户按住ctrl键，可以选择多个需上传文件
• placeholder ：文本输入框有用，可用做提示
  

用得并不多。主要是因为：

• 需要浏览器支持
• 样式并不好看
• 用处似乎并不大，^_^

作业

参考以下页面，尽可能多的完成其HTML部分的内容：

1. 注册和登录
2. 个人资料
3. 内容（任选其一）发布页面
4. 首页
5. 其他页面

源栈学历

在当前系列 HTML和CSS 中继续学习：

多快好省！前端后端，线上线下，名师精讲

• 先学习，后付费；
• 不满意，不要钱。
• 编程培训班，我就选源栈

更多了解 加：