html中的from标签的作用介绍

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

html5 form标签

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

form表单域中可以包含各种交互控件–控件标签(文本字段、复选框、单选框、提交按钮等等),比如< input>、< button>、< select>、< textarea>等标签。

<form>标签语法格式

<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、表单按钮

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

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

单行文本框<input type="text" >默认值是type="text"

密码框<input type="password"/> 

单选按钮<input type="radio" name=""/>

复选框<input type="checkbox"/>

隐藏域<input type="hidden"/>

文件上传<input type="file"/>

下拉框<select>标签

多行文本<textarea></textarea>

提交按钮<input type="submit"/>

普通按钮<input type="button"/>

重置按钮<input type="reset"/>

控件标签:

input标签

  • input 输入的意思

  • <input />标签为单标签

  • type属性设置不同的属性值用来指定不同的控件类型

  • 除了type属性还有别的属性

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

    <form action="url地址" method="提交方式" name="表单名称">        <input type="text" name="" id="" value="你好">    </form>

html中的from标签的作用介绍

input标签的一些属性:

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

属性 属性值 描述
type Text 单行文本输入框
Password 密码输入框
Radio 单选按钮
Checkbox 复选框
Button 普通按钮
Submit 提交按钮
Reset 重置按钮
Image 图像形式的提交按钮
File 文本域
name 空间的名称
value input控件中的默认文本值
size input控件在页面中的显示宽度
checked 定义选择空间默认被选中的项
Maxlength 控件允许输入的非常多字符数

密码框

<input type="password" name="" id="" value="">

html中的from标签的作用介绍

单选框

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

        男 <input type="radio" name="gender" id="" value="">         女 <input type="radio" name="gender" id="" value="">

html中的from标签的作用介绍

复选框

多选框可以选取多个

        爱好: <br>         抽烟<input type="checkbox" name="hobby" id="" value="">         喝酒<input type="checkbox" name="hobby" id="" value="">         烫头<input type="checkbox" name="hobby" id="" value="">

html中的from标签的作用介绍

按钮

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

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

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

    <form action="url地址" method="提交方式" name="表单名称">        <input type="button" name="" id="" value="我是一个普通按钮">        <input type="submit" name="" id="" value="我是一个提交按钮">        <input type="reset" name="" id="" value="我是一个重置按钮">    </form>

html中的from标签的作用介绍

下拉框标签

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

        <select name="省市区" id="">            <option value="">山东</option>            <option value="">北京</option>            <option value="">江苏</option>            <option value="">深圳</option>            <option value="">上海</option>        </select>

html中的from标签的作用介绍

关于html中的from标签的作用介绍就分享到这里了,希望以上内容可以对大家有一定的参考价值,可以学以致用。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。

文章标题:html中的from标签的作用介绍,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/26223

(1)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云的头像亿速云认证作者
上一篇 2022年9月16日 下午10:41
下一篇 2022年9月16日 下午10:42

相关推荐

  • laravel是不是后端框架

    laravel是后端开发框架;laravel是一个用于构建web应用程序的跨平台PHP框架,尽管laravel确实提供了一些前端功能,但是Laravel的许多功能与前端无关,Laravel提供了一个功能强大的开发环境,以及直观和富有表现力的命令行界面。 本文操作环境:Windows10系统、Lara…

    2022年9月1日
    66300
  • hyliteresources文件夹有什么作用

    hyliteresources是系统资源文件夹;该文件夹是用来存放系统SHELL资源文件的,可以进行内容删除,但是文件夹不要删除,所有可以从中读取出需要的资源的文件,可以称之为资源文件。 本教程操作环境:windows10系统、DELL G3电脑。 hyliteresources是什么文件夹 hyl…

    2022年9月6日
    76600
  • cad字体库怎么看

    cad字体库查看方法 1、右键CAD的桌面图标,找到属性一栏点击。 2、在打开的页面中,切换到快捷方式这一个栏目。 3、接着打开文件所在的位置。 4、找到Fonts文件夹。 5、Fonts文件夹就是CAD的字体库了。 以上就是“cad字体库怎么看”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这…

    2022年9月16日
    72200
  • word字体放大如何居中

    word字体放大居中的方法 1、首先打开word,选中你要放大居中的文字, 点击开始菜单栏的字号,这里选择的最大字号是72号。 2、这时可以直接在字号框里输入数字,数字越大字越大。 3、选择菜单栏“布局”–“纸张方向”–“横向”,来调整页面方向。 4、在菜单栏点击“布局”–…

    2022年9月15日
    1.2K00
  • piwigo v2.9.5的5个sql注入分别是怎样的

    0x0 项目介绍 项目地址:https://github.com/Piwigo/Piwigo 项目介绍:piwigo是用于网络的开源照相馆软件。 专为组织,团队和个人管理您的照片库而设计。 官网地址:piwigo.org 0x1 准备工作 Linux下下载https://github.com/Piw…

    2022年9月26日
    51800
  • mysql的2002错误怎么解决

    在mysql中,2022错误指的是编译的时候没有指定socket,所以mysql命令连接的时候还是使用的默认值,因为socket位置变了,而mysql命令不知道,所以就出现了这样的错误,可以修改“/etc/my.cnf”文件来解决该错误。 本教程操作环境:windows10系统、mysql8.0.2…

    2022年9月1日
    1.1K00
  • css如何实现右上角

    右上角 #triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent;} 感谢你能够认真阅读完这篇文章,希望小编分享的“css如何实现右上角”这篇…

    2022年9月1日
    80400
  • C/C++ 程序中的缓冲区下溢指的是什么

    1、缓冲区下溢 在前续专题中对缓冲区上溢进行了分析(见第7期),本文对缓冲区溢出的另一种情况——缓冲区下溢进行描述。缓冲区上溢专题中介绍的造成缓冲区溢出的原因同样适用于缓冲区下溢,因此在本文中就不再赘述。简单的说,缓冲区下溢是指当填充数据溢出时,溢出部分覆盖的是下级缓冲区。本文主要从缓冲区下溢的危害…

    2022年9月20日
    69300
  • frida如何抓apk网络包

    一 . 埋头分析踩坑路 从系统的角度去寻找hook点,而不是为了抓包而抓包。 1.okhttp调用流程 public static final MediaType JSON= MediaType.get(“application/json; charset=utf-8”);OkHttpClient …

    2022年9月8日
    1.3K00
  • word字体放大如何弄

    word字体放大的方法 1、先选中需要放大的字体,然后点击开始菜单中的增大字号。 2、选中字体之后在悬浮框中点击字体大小就可以设置了。 3、选中需要放大的字体之后,点击上方菜单栏中的输入框,直接在里面输入你要的字号。 以上就是“word字体放大如何弄”这篇文章的所有内容,感谢各位的阅读!相信大家阅读…

    2022年9月10日
    44800
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部