第六章 html 常用标签[5]-表单【图文】

老规矩，darker（groge）课前唠唠嗑，感谢慕课网这个平台。
唠唠嗑：表单用于让网站用户填写某些内容，完成之后可以提交到服务器端进行处理保存，html 里面通过一系列的标签来表现出表单的基本界面，表单的美化工作我们留到后面 css 再说!

---

1. 表单
1）标签定义供用户输入的 HTML 表单:
属性：
action：规定当提交表单时，向何处发送表单数据。
name：给表单命名
target:_blank 等其他值，这是最常用的，其他几乎不用！
method:提交方式，post 或 get 值
可以这样写，
对于上面action，我是向百度发了数据....他接不接收...那就是他的问题了。
name是给表单命名，具体自己可以去w3c里去查，哦对了啊，昨天有人问我w3c是啥，可以去百度一下：w3school。
好了，接下来介绍下面的标签，一定要
2）<input>标签定义表单的输入界面
通过 type 属性来展示不同的输入界面,通过 value 改变默认值
1.普通文本框：

这样我在网页里展示一下它的效果。
整体的代码是这样的：

网页效果是这样的：

---

2.密码框：

注意和上一个的区别，别混淆。
整体的代码是这样的：

网页效果是这样的：

---

写到这的时候突然发现我一个错误，就是fom标签没有包住，虽然在html5里可以不包住，也能产生效果，但还是可能有些浏览器出现不兼容的情况，所以，下面的标签我全部补上了form，希望大家见谅，上面我就不换了，毕竟我也是工作累...一个疏忽就出了一点点的错误，希望大家能够将就着点啊。

---

3.文件上传

整体的代码是这样的：

网页效果是这样的：

可点击，点击出来的效果，我希望大家自己去尝试一下

---

4.隐藏的 input

整体的代码是这样的：

网页效果是这样的：

说点人话就是啥也没有，文本框被隐藏了。

---

5.普通按钮

整体的代码是这样的：

网页效果是这样的：

---

6.单选

通过相同的 name 属性来实现单选

整体的代码是这样的：

网页效果是这样的：

---

7.复选框

整体的代码是这样的：

网页效果是这样的：

---

8.提交

整体的代码是这样的：

网页效果是这样的：

9.重置

整体的代码是这样的：

网页效果是这样的：

---

属性 checked,可用值：checked
一般用于选择输入界面（单选复选）,实现默认选择
属性 disabled,可用值：disabled
几乎所有的输入界面都可以使用该属性
属性 name
自己给 input 输入界面起的名字属性 readonly,可用值 readyonly
使输入界面为只读状态
属性 size，值为数字
设置输入框长度
属性 value
该属性值就是这个 input 最终提交到页面的数据，可以通过该属性设置默认值
3)textarea 标签，定义多行输入框
双标签,默认值直接写在标签之间。
属性：cols,值为数字
属性：rows，值为数字
也可以使用上面所说的：disabled，name，readonly 属性
4）label 标签，提升用户体验
标签的 for 属性与相关 input 的 id 属性相同
5）select 标签，配合 option 标签来实现下拉菜单
可用属性：disabled，name，multiple
6）option 标签
可用属性：disabled，selected，value
7）optgroup 标签
把相关的选项组合在一起
属性 label：给选项组命名
属性 disabled：经用该选项组
总结：表单的界面样式等我们学完 css 再来回头构建出漂亮的表单！
以上所有的效果，我做了个总的实战，请看下图，请同学们自己仿照我的代码，进行研究，查看其效果，得出自己的知识。
总实战代码darker（groge）：

网页效果：