html中的from标签的作用介绍 html中的from

   2023-02-08 学习力0
核心提示:今天小编给大家分享的是html中的from标签的作用介绍,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。在html中,from标签用于创建供用户输入的HTML表单(表单域),以实现用户信息的收集和传递,fo

今天小编给大家分享的是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标签的作用介绍就分享到这里了,希望以上内容可以对大家有一定的参考价值,可以学以致用。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • HTML中将背景颜色渐变 html设置背景颜色渐变
    通过使用 css3 渐变可以让背景两个或多个指定的颜色之间显示平稳的过渡,由于用到css3所以需要考虑下浏览器兼容问题,例如:从左到右的线性渐变,且带有透明度的样式:#grad {background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*
    03-08
  • html5 Canvas 如何自适应屏幕大小
    但是这样创建出的画布不能随着浏览器窗口大小的改变而动态的改变画布的大小。而这一点往往又非常重要, 因为我们会经常改变浏览器窗口大小,不会一直保持某个固定的大小。 html代码 canvas width="300" height="300" id="myCanvas"/canvas设置样式 * {
    03-08
  • Vue中出现Do not use built-in or reserved HTML elements as component id:footer等等vue warn问题
    Vue中出现Do not use built-in or reserved HTM
    错误示图:原因:是因为在本地项目对应文件的script中,属性name出现了错误的命名方式,导致浏览器控制台报错!  诸如: name: header 、  、 name: menu , 等等都属于错误的命名方式等 错误代码命名如下:解决办法:办法1: 如果我们采用正确命名
    03-08
  • HTML在网页中插入音频视频简单的滚动效果
    HTML在网页中插入音频视频简单的滚动效果
    每次上网,打开网页后大家都会看到在网页的标签栏会有个属于他们官网的logo,现在学了HTML了,怎么不会制作这个小logo呢,其实很简单,也不需要死记硬背,每当这行代码出现的时候能知道这是什么意思就ok1 link rel="shortcuticon" type="image/x-icon" href="
    03-08
  • HTML的video标签,不能下载视频代码
    !-- 在线视频不能下载代码 --!DOCTYPE html html headscript src="../Demo/demo/book/JQuery/jQuery v2.2.0.js"/script/headbody div style="text-align:center;"video src="../images/PreviewVideo.mp4" width="820"controls="controls&
    03-08
  • ThinkPHP报错 The requested URL /admin/index/login.html was not found on this server.
    ThinkPHP报错 The requested URL /admin/index/
           解决方案在入口文件夹public下查看.htaccess是否存在。不存在则新建,存在的话,那内容替换为下面这串代码 就可以解决Not Fund#IfModule mod_rewrite.c#Options +FollowSymlinks -Multiviews#RewriteEngine On##RewriteCond %{REQUEST_FILENAME
    03-08
  • HTML特殊字符、列表、表格总结 html特殊符号对
            HTML实体字符  在HTML中一些特殊的字符需要用特殊的方式才能显示出来,比如小于号、版权等,  在课堂上老师教了我们一个有点意思的:空格,在教材上字符实体是“nbsp”通过老师  的演示我们发现不同的浏览器他所显示的效果不同,有的比
    03-08
  • 【JavaScript】使用document.write输出覆盖HTML
    您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。分析HTML输出流是指当前数据形式是HTML格式的数据,这部分数据正在被导出、传输或显示,所以称为“流”。通俗的来说就是HTML文档的加载过程,如果遇到document.writ
    03-08
  • ASP.Net MVC 控制@Html.DisplayFor日期显示格式
    在做一個舊表的查詢頁時,遇到一個問題:字段在db里存儲的是DATETIME,但保存的值只有日期,沒有時間數據,比如2018/2/26 0:00:00,顯示出來比較難看,當然也可以做一個ViewModel,在字段上添加Attribute定義來更改名稱和顯示名稱,如下:[Display(Name = "建
    03-08
  • html 基础代码
    title淄博汉企/title/headbody bgcolor="#00CC66" topmargin="200" leftmargin="200" bottommargin="200"a name="top"/a今天br /天气nbsp;nbsp;nbsp;nbsp;nbsp;不错br /font color="#CC0000"格式控制标签br /b 文字加粗方式1\bbr /str
    03-08
点击排行