首页 >web前端 >前端问答 >html中的from标签有什么用

html中的from标签有什么用

青灯夜游
青灯夜游原创
2022-09-15 17:36:137656浏览

在html中,from标签用于创建供用户输入的HTML表单(表单域),以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器;语法“a211680c32da9432e3e4dba8ed100021表单控件f5a47148e367a6035fd7a2faa965022e”。form表单中可包含一个或多个表单元素,比如input、select、textarea。

html中的from标签有什么用

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

html5 form标签

作用:form标签用于创建供用户输入的HTML表单(表单域),以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。

form表单域中可以包含各种交互控件--控件标签(文本字段、复选框、单选框、提交按钮等等),比如ec39b74f7e3428570c3e8aa6e47fc59b、37a9605a910bf1fbe848fe3f47ab78d9、f2d124c9e2fe7b021f0c4369200e6c69、680204f04b0c98aa3c923e36bb5ad6ed等标签。

ff9c23ada1bcecdd1a0fb5d5a0f18437标签语法格式

<form action="提交地址" method="提交方式" name="表单名称">
  各种表单控件
</form>
  • name:只是给该表单命名,用于js技术使用。

  • action:设定表单数据提交给哪个文件,用于后端技术(比如php)来接受并处理数据

  • method: 设定数据提交方式,用于根据不同的数据需求来选择合适的提交(传送)方式

method提交方式常用的4种:

get    		一般用来查询信息
post		一般用来新增信息
put      	一般用来修改信息
delete		一般用来删除信息

post和get区别:

  • 数据提交方式,get把提交的数据url可以看到,post看不到

  • get一般用于提交少量数据,post用来提交大量数据

  • get最多提交1K数据,post理论上没有限制

  • get提交的数据在浏览器历史记录中,安全性不好

一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮。

1、表单标签

是指form标签本身,它是一个包含表单元素的区域,使用定义

2、表单域

是标签中用来收集用户输入的每一项,通常用input标签来定义,input标签有不同的类型,对应用户不同的数据。(比如:文本域、下拉列表、单选框、复选框等等)

3、表单按钮

用来提交表单中的所有信息到服务器

*表单域和表单按钮都属于表单元素。

单行文本框0fa647316ac628de9fe278232774a612默认值是type="text"

密码框36e29ba6ef97f5f43a0dfadc4ba067fc 

单选按钮c7b3137f7627d700c8263677f4bf835f

复选框af21edc47aa0b45af8003be38089a721

隐藏域2fa1bb40505ac7144409a1680051d9aa

文件上传d9fae9a589f7d7312c0f67fffbcf927a

下拉框221f08282418e2996498697df914ce4e标签

多行文本4750256ae76b6b9d804861d8f69e79d340587128eee8df8f03d0b607fe983014

提交按钮d1270b7b8e809256e572d7abd1bf7c24

普通按钮f5c269c97326fa978bca60e627eba6e8

重置按钮d39eefbca07a688c781a48e2b0869183

控件标签:

input标签

  • input 输入的意思
  • 73a3ca28445b1c625f2086a50cb8c7df标签为单标签
  • type属性设置不同的属性值用来指定不同的控件类型
  • 除了type属性还有别的属性

type="text"为普通输入框 value为里面的值 name和id会在写js的时候用

    227ee3138dbb680a289814580065d7b6
        3491d90b7c674d01da1bfa0d6a73c4a6
    f5a47148e367a6035fd7a2faa965022e

在这里插入图片描述

input标签的一些属性:

checked属性只有单选框和复选框才有

属性 属性值 描述
type Text 单行文本输入框

Password 密码输入框

Radio 单选按钮

Checkbox 复选框

Button 普通按钮

Submit 提交按钮

Reset 重置按钮

Image 图像形式的提交按钮

File 文本域
name
空间的名称
value
input控件中的默认文本值
size
input控件在页面中的显示宽度
checked
定义选择空间默认被选中的项
Maxlength
控件允许输入的最多字符数

密码框

c6ac6b218cac5b6d6649d3cdeb36675f

在这里插入图片描述

单选框

name相同的单选框智能选择一个

        男 4d27b86f47f124e08db0a603358a4b7d 
        女 4d27b86f47f124e08db0a603358a4b7d

在这里插入图片描述

复选框

多选框可以选取多个

        爱好: 0c6dc11e160d3b678d68754cc175188a 
        抽烟8dd24edea16a8173c68003b33619bc95 
        喝酒8dd24edea16a8173c68003b33619bc95 
        烫头8dd24edea16a8173c68003b33619bc95

按钮

普通按钮可以根据需求来用js添加功能

提交按钮会把输入的表单信息提交到form表单的action地址

重置按钮会把表单信息重置为默认

    227ee3138dbb680a289814580065d7b6
        43afa53fc6527210b7854d1e5209d936
        b1aa88f1c8d7b903f7b4626da52bd752
        cbb1808b7872eb4059a4026e83b6f660
    f5a47148e367a6035fd7a2faa965022e

在这里插入图片描述

下拉框标签

下拉框标签有点特殊,不是input的属性而是一个单独的标签

        6fc21431d41a1b3e9c3cb1e81a326591
            49b810a99780cc2384247008a5130629山东4afa15d3069109ac30911f04c56f3338
            49b810a99780cc2384247008a5130629北京4afa15d3069109ac30911f04c56f3338
            49b810a99780cc2384247008a5130629江苏4afa15d3069109ac30911f04c56f3338
            49b810a99780cc2384247008a5130629深圳4afa15d3069109ac30911f04c56f3338
            49b810a99780cc2384247008a5130629上海4afa15d3069109ac30911f04c56f3338
        18bb6ffaf0152bbe49cd8a3620346341

在这里插入图片描述

(学习视频分享:web前端入门

以上是html中的from标签有什么用的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn