Web网页设计之HTML_6. HTML FORM表单

上篇我们说了这个表格，这一篇我们开始说表单，看清楚，是 表 单 

一、认识表单

直接百科走起来

可以看到啊，这个表单在我们网页中主要是负责数据采集的功能，然后呢，我们将采集好的数据提交到我们的后端，也就是 Java 端，最后通过 JDBC 连接上我们的数据库，存到里面去，所以说啊，表单是一定要学会的。

然后再来看，表单中有表单标签，这个有很多种标签啊，什么文本框、密码框、隐藏域、复选框等等，所以说这一篇博客应该不少东西，大家好好看

二、创建表单

创建表单，我们需要用到 FORM 标签，这个就是表单，我们打开 WebStorm 然后创建一个 case5 ，弄一个 class1.html

然后我们创建一个表单

可以看到啊，很简单啊，就是写一个 form 标签就好了，重要的是我们 form 里面的一些内容，我们来看一下

三、表单域

1. 文本框

首先是这个文本框，文本框我们用到一个 input 标签，然后需要让这个它里面的 type 属性是 text，我们来看一下

是不是OK的，我们可以加点文字，可以让填写这个框的人知道，后面要填写啥

2. 密码框

密码框，就是将上面的 input 框中的 type 属性修改成 password，我们再来看

这样我们输入的东西就看不到是啥了，都成黑点点了

3. 复选框

复选框，就是有一堆的东西，然后你去选择几项，就和多选题类似，这里我们使用的是 input 标签 type 属性的 checkbox

可以看到啊，这个就可以多个勾选，到时候我们会说这个怎么去上传，如何区分

4. 单选框

单选框和多选框类似，不过就能选择一个，这里使用的是 input 标签 type 属性是 radio 

但是我们发现，这俩居然都被勾选上了，这里我要说一下，只有这个 属性是不够的，我们还需要一个 name 属性，让他们 name 属性相同

这样就只能勾选一个了。

5. 下拉框

下拉框就是有同样类型的一组选项，然后通过下拉框进行选择，选择其中的一个，这里我们是使用的是 select 标签，还有option

看，我们这样就能够选择学校了

6. 文本域

这个和上面的内个文本框不一样啊，文本框和文本域相比，文本域写的东西会多一些，好比添加点简介啊啥的，我们都是使用的文本域

它是用 textarea ，我们来看一下

是吧，瞅着就不是一个等级的

7. 按钮

这个按钮是一个重点，我们很多时候都是通过点击一个按钮进行触发一些东西，这里我们使用的两种按钮，一个是 input 标签带的，一个是单独的 button ，我们都来看一下

可以看到啊，input 的 按钮，文字是要写到这个 value 中的，而 button 是写在标签里面的。但是外观啥的我是没有看出来有啥不一样的

两种都可以啊。

8. 文件上传

当然啊，除去上面这些，我们还可能上传一些文件，好比图片啊，文档啊啥的，这里我们使用的是 input 标签中的 file 属性

嗯，点击浏览，就可以进行文件的选择了

 

大家多练习一下，有问题可以联系我 QQ ：2100363119