html哪些标签必学,HTML必备表单标签详解(二)

​​​​​​一. HTML表单标签

相当于程序：main方法

表单相当于WEB程序的入口，作用：用来提交数据

1.标签：

2.表单-案例

密码框：非明文。

信息输入框

type：框体类型

text文本框：正常输入。

password密码框：非明文

submit提交按钮：把表单中所有信息输入框的数据提交给网站(服务器)

value：值

①给按钮设置按钮名称

建议：除了单选框和复选框以外，其他框体的name属性不能一致

3. 案例2

通过案例，快速学习表单知识

reset 重置按钮：把表单输入项恢复到默认状态。

代码实现：

用户名：

密码：

性别：男

女

爱好：跑步

旅游

编码

照片：

籍贯：

请选择籍贯

北京

江苏

黑龙江

河南

简介：xxxxxxxxx

总结：

1、统称为表单输入项，用来输入表单信息

2、表单输入项若需要提交数据，必须得有name属性(按钮除外)

3、参数列表上：

name属性就是参数名   变量名

value属性就是参数值   变量值

String username = “zzz”;

4、所有的按钮必须给value，设置按钮名称

所有的单选框和复选框必须有value属性。

其他根据题意、需求看情况设置value

4.​​​​​​​ 表单输入项标签-

属性

取值

描述

type

text

文本框，单行的输入字段，用户可在其中输入纯文本。(默认)

password

密码框。  内容为非明文

radio

单选框。在同一组内有单选效果

必须设置name属性 分组，name属性相同；

必须设置value属性 为组件赋予默认参数值；

checkbox

复选框。  在同一组内有复选/多选效果

必须设置name属性 分组，name属性相同；

必须设置value属性 为组件赋予初始值；

submit

提交按钮。用于控制表单提交数据。

该组件上不建议写name属性

reset

重置按钮。 用于将所有的 表单输入项恢复到 默认状态

该组件上不建议写name属性

file

附件框。用于文件上传。(后续文件上传会详细讲解)

hidden

隐藏域。一般用作提交服务器需要拿到，但用户不需要看到的数据。

该组件必须有name和value

button

普通按钮。需要和JavaScript事件一起用(后续JavaScript会详细讲解)

5.​​​​​​​ 选择框标签-

定义一个下拉列表。可以进行单选或多选。

定义一个下拉列表的列表项。

select属性：

属性名

属性说明

name

组件名。(必设置)

如果需要下拉选择框数据提交到服务器，必须提供name属性

multiple

设置该标签选项全部显示，并且可以进行多选提交。默认为单选。

不设置该属性，为单选

设置该属性multiple="multiple"，为多选

option属性：

属性名

属性说明

value

设置需要提交的参数值。(必设置)

selected

设置某个列表项默认选中。

若列表中没有列表项有该属性，默认第一个列表项被选中

选择框必须有的属性：

必须name属性

建议必须有value属性，属性值建议不是中文。

选择框默认选中：

单选框/复选框默认选中：

6.​​​​​​​ 文本域标签-

标签

文本域标签，可支持用户输入并提交大量纯文字数据。

textarea属性：(没有value属性)

属性名

属性说明

name

组件名。(必设置)

如果需要下拉选择框数据提交到服务器，必须提供name属性

文本域和文本框区别：

文本框不能换行，文本域可以

文本框参数值是value属性，文本域参数值是标签的内容体

7.​​​​​​​ 表单标签

所有的表单输入项，必须放在

标签之中，必须有name属性

属性名

属性说明

action

请求路径，确定表单提交到服务器的地址(路径)【必设置】

【将表单数据提交到何处】

默认把数据提交当前页面。

一般会将数据提交到服务器的程序上。(javaweb核心会详细讲解)

method

请求方式。常用的取值：GET、POST

【将数据以何种方式提交】

默认为：GET

get提交方式特点：把数据拼接到地址栏上

post提交方式特点：没有把提交数据拼接到地址栏上。请求体

今日总结:

Html表单：

----表单标签(本体)

表单输入项：用来输入信息

所有的表单输入项必须被

标签包裹标签单独使用没有效果

看完恭喜你,又知道了一点点!!!

你知道的越多,不知道的越多!

~感谢志同道合的你阅读,  你的支持是我学习的最大动力 !加油 ,陌生人一起努力,共勉!!

来源：oschina

链接：https://my.oschina.net/ithuang/blog/4318951