HTML表单标签详细

最新推荐文章于 2024-09-16 19:48:09 发布

原创最新推荐文章于 2024-09-16 19:48:09 发布 · 349 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

前端专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了HTML表单的各个元素标签，包括form、input、label等，并阐述了表单的name、action、method属性，以及各种类型input标签的特性和用途，如text、password、radio、checkbox、button、submit、reset、hidden、file、textarea、select和option等，同时提及了表单数据的提交方式（GET和POST）及其表现形式。

html表单标签

一个列表或是表格形式的清单，填写后提交出去
1、表单三要素：

表单元素、提交给谁、提交形式
form标签：表单标签
name属性：表单名称
action属性：提交给谁
method属性：提交形式,分为get方式和 post方式

2、表单元素标签
1）、lable标签：文字性的描述
for属性：根据填写的表单元素的id，让光标出现在该表单元素中，方便输入（为老年人或是残疾人使用）
2）input标签：根据其type属性的不同，在浏览器中有不同形式的展现
3）id属性：用于唯一性标识表单元素，供一些属性使用以及供后续JavaScript进行操作时使用
4）name属性：表单元素的名称，后续学习Java Web时会用到
5）、text：单行文本框
               value属性：定义文本框的默认值
               size属性：定义文本框的长度
               maxlength属性：设置文本框中最多可以输入的字符长度

6）password：密码文本框
7）value属性：定义文本框的默认值
8）size属性：定义文本框的长度
9）maxlength属性：设置文本框中最多可以输入的字符长度

10）radio：单选按钮
           放在一起的多个radio按钮，其实要表达的是互斥性的含义
           name属性：把多个radio按钮的name属性设置为相同，即可
           value属性:设置单选按钮选中时的值
           checked属性：设置为checked，设置默认选中该radio按钮

11）checkbox：复选框
value属性:设置单选按钮选中时的值
checked属性：设置为checked，设置默认选中该checkbox按钮

12）button：普通按钮，会结合后续JavaScript的内容使用
13） submit：提交按钮，按照在form标签上设置的action地址，把表单的内容提交了出去

使用submit提交按钮，点击后把该表单的内容提交了出去
通过观察提交至的地址，发现有这样的形式"?表单元素1的name值=表单元素1的value值&表单元素2的name值=表单元素2的value值&..."

注意：上述的这种提交结果的形式依托于提交方法为get形式的方法

14） reset：重置按钮，清除用户在表单上输入的内容，恢复到初始状态

15）hidden隐藏域：在表单上不会显示出来，可以从服务端传递一些数据过来

16）file：文件域

17）textarea：多行文本框
rows属性：行数
cols属性：列数

18）select 和 option：下拉列表标签

           multiple属性：默认情况只能选一项，设置该属性值为multiple属性，可以选择多项（按着ctrl键点击）
           size属性：下拉列表展开后可见列表的项目个数

           value属性：下拉项的值
           selected属性：某一个下拉项选中设置