首页 > 其他分享 >在HTML中Form标签中常用的属性

在HTML中Form标签中常用的属性

时间:2024-08-31 14:23:47浏览次数:13  
标签:窗口 Form url 标签 用户 HTML 跳转 地址栏 运行

一.target属性:窗口的打开方式

        1._self:在原窗口打开

<div>
        <a href="https://www.baidu.com/" target="_self">点击跳转到百度</a>
    </div>

这是它运行的结果:

点击图中的文字就会实现跳转并在原窗口打开

  2. _blank:打开一个新的窗口

<div>
        <a href="https://www.baidu.com/" target="_blank">点击跳转到百度</a>
    </div>

它的运行结果则是重新打开一个窗口

二,action属性:表单的提交路径(相对路径和绝对路径)

<form action="./demo5.html" method="get" target="_blank">
    <div>
            用户姓名: <input type="text" placeholder="请输入您的姓名" maxlength="5" minlength="2" name="userName" value="黑神话悟空"
                readonly>
        </div>
        <div>
            用户密码: <input type="password" placeholder="请输入您的密码" name="userPassword" required>
        </div>
    <input type="submit">
</form>

 运行前: 路径是demo9.html

 运行后路径变成demo5

三,【method属性】:表单的提交方式

        1.get 方法(显示在url地址栏中)

<form action="./demo5.html" method="get" target="_blank">
        <div>
                用户姓名: <input type="text" placeholder="请输入您的姓名" maxlength="5" minlength="2" name="userName" value="黑神话悟空"
                    readonly>
            </div>
            <div>
                用户密码: <input type="password" placeholder="请输入您的密码" name="userPassword" required>
            </div>
            <div>
                用户邮箱: <input type="email" placeholder="请输入您的邮箱" name="userEmail" required>
            </div>
            <div>
                输入网址: <input type="url" placeholder="请输入完整的网络地址" name="userUrl" required>
            </div>
            <div>
                用户体温: <input type="number" name="temperature" max="42" min="34" step="0.1">
            </div>
            <div>
                搜索内容: <input type="search" name="searchContent" placeholder="请输入搜索的关键字">
            </div>
        <input type="submit">
    </form>

        运行前,输入用户信息

运行之后所有的用户信息会出现在url地址栏中(信息相对不安全)

        2.post方法(不会显示在url地址栏中,需要服务器的支持)

<form action="./demo5.html" method="post" target="_blank">
        <div>
                用户姓名: <input type="text" placeholder="请输入您的姓名" maxlength="5" minlength="2" name="userName" value="黑神话悟空"
                    readonly>
            </div>
            <div>
                用户密码: <input type="password" placeholder="请输入您的密码" name="userPassword" required>
            </div>
            <div>
                用户邮箱: <input type="email" placeholder="请输入您的邮箱" name="userEmail" required>
            </div>
            <div>
                输入网址: <input type="url" placeholder="请输入完整的网络地址" name="userUrl" required>
            </div>
            <div>
                用户体温: <input type="number" name="temperature" max="42" min="34" step="0.1">
            </div>
            <div>
                搜索内容: <input type="search" name="searchContent" placeholder="请输入搜索的关键字">
            </div>
        <input type="submit">
    </form>

 运行前,输入用户信息

 运行后信息不会出现在url地址栏中

标签:窗口,Form,url,标签,用户,HTML,跳转,地址栏,运行
From: https://blog.csdn.net/m0_62859066/article/details/141687200

相关文章

  • .NET 多版本兼容的精美 WinForm UI控件库
    目录前言项目介绍项目使用项目源码项目案例项目组件项目地址前言有粉丝小伙伴在后台留言咨询有没有WinForm控件库推荐,现在就给安排上。.NET平台进行Windows应用程序开发的我们来说,找一个既美观又实用的WinFormUI控件库至关重要。本文将介绍ReaLTaiizor一......
  • YOLOv9独家改进:一种高效移动应用的卷积加性自注意Vision Transformer
    ......
  • WebGL入门(020):WebGLTransformFeedback 简介、使用方法、示例代码
    还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。No.内容链接1Openlayers【入门教程】-......
  • 【Qt】表单布局QFormLayout
     表单布局QFormLayoutQt还提供了QFormLayout,属于是QGridLayout的特殊情况,专⻔⽤于实现两列表单的布局.这种表单布局多⽤于让⽤⼾填写信息的场景.左侧列为提⽰,右侧列为输⼊框例子:使用QFormLayout创建表单(1)设置三个label、三个lineEdit(2)设置表单布局,将上述......
  • [COCI2012-2013#2] INFORMACIJE 题解
    前言题目链接:洛谷。题意简述你需要构造一个\(1\simn\)的排列\(a\),满足\(m\)个条件,格式如下:1xyv:\(\max\limits_{i=l}^ra_i=v\)。2xyv:\(\min\limits_{i=l}^ra_i=v\)。题目分析首先这个最值很难受,考虑能不能转化成我们喜欢的二元关系......
  • [WPF]数据绑定时为何会出现StringFormat失效Nd
    在数据绑定过程中,我们经常会使用StringFormat对要显示的数据进行格式化,以便获得更为直观的展示效果,但在某些情况下格式化操作并未生效,例如Button的Content属性以及ToolTip属性绑定数据进行StringFormat时是无效的。首先回顾一下StringFormat的基本用法。StringFormat的用法Str......
  • [WPF]数据绑定时为何会出现StringFormat失效hC
    在数据绑定过程中,我们经常会使用StringFormat对要显示的数据进行格式化,以便获得更为直观的展示效果,但在某些情况下格式化操作并未生效,例如Button的Content属性以及ToolTip属性绑定数据进行StringFormat时是无效的。首先回顾一下StringFormat的基本用法。StringFormat的用法Str......
  • 【React】React事件和HTML事件的区别
    React写法<buttononClick={handleClick}>测试</button>HTML写法<buttononclick="handleClick()">测试</button>区别ReactHTML原生事件绑定方式小驼峰命名法,事件处理函数通过JSX语法直接绑定全小写形式定义事件处理函数函数引用内联的字符串表达式事件对象基于Ev......
  • 标签贴错,AMD召回所有新一代CPU
    前言 上个月,AMD首席执行官苏姿丰博士在ComputeX开幕主题演讲上揭开了Zen5架构的神秘面纱。作为AMD未来几年CPU的台柱子,Zen5立刻被引入消费级市场,面向笔记本和台式机的产品在几周内相继发布。欢迎关注公众号CV技术指南,专注于计算机视觉的技术总结、最新技术跟踪、经......
  • PbootCMS生成的sitemap.xml中增加tag标签链接
    打开/apps/home/model/SitemapModel.php,在78行后面增加个指定分类标签调用代码。//指定分类标签调用publicfunctiongetSortTags($scode){$join=array(array('ay_content_sortb','a.scode=b.scode','LEFT'......