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

一、认识表单

直接百科走起来

可以看到啊，这个表单在我们网页中主要是负责数据采集的功能，然后呢，我们将采集好的数据提交到我们的后端，也就是 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

Web网页设计之HTML_6. HTML FORM表单相关推荐

web前端期末大作业 html+css家乡旅游主题网页设计---湖南登录或注册表单
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 家乡旅游景点 | 家乡民生变化 | 介绍自己的家乡 | 我的家 ...
网页支付宝支付，通过form表单提交，在苹果手机上无法跳转
参考地址:https://www.cnblogs.com/fxty/p/12068235.html 在调用支付宝页面的时候发现ios手机不能唤起支付宝,苹果手机的是直接提交,而安卓手机是需要重新打开页 ...
HTML+CSS大作业HTML5期末大作业旅游酒店网站设计——旅游酒店服务预订(1页) web网页设计—— 出游
HTML5期末大作业:旅游酒店网站设计--旅游酒店服务预订(1页) web网页设计-- 出游常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒 ...
HTML5期末大作业：网上预订网站设计——火车票网上预订网站(4个页面) HTML+CSS+JavaScript web网页设计实例作业
HTML5期末大作业:网上预订网站设计--火车票网上预订网站(4个页面) HTML+CSS+JavaScript web网页设计实例作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. ...
HTML5+CSS期末大作业：运动体育网站设计主题——体育铅球(5页)带注册期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
web网页设计——体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码
web网页设计--体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
HTML5期末大作业：在线电影介绍(6页) HTML+CSS+JavaScript 大学生毕设网页设计源码HTML web网页设计制作成品
HTML5期末大作业:在线电影介绍(6页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品常见网页设计作业题材有个人. 美食. ...
HTML5期末大作业：web网页设计与开发网站设计——爱奇艺首页(1页) HTML+CSS+JavaScript
HTML5期末大作业:web网页设计与开发网站设计--爱奇艺首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网 ...
web网页设计期末课程大作业~粉色的服装购物商城页面模板(HTML+CSS+JS)
web网页设计期末课程大作业~粉色的服装购物商城页面模板临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系 ...

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