首页 > 其他分享 >【测试全栈化--前端学习】(16)input属性提交和重置

【测试全栈化--前端学习】(16)input属性提交和重置

时间:2022-10-25 18:35:10浏览次数:51  
标签:全栈化 16 -- value 表单 提交 按钮 input 属性

【测试全栈化--前端学习】(16)input属性提交和重置_单选按钮

在第15课,我们学习了HTML中<form>属性里的input type 里name和value属性。value属性值其实还没有说的特别清楚,再继续说下。

【测试全栈化--前端学习】(16)input属性提交和重置_测试_02

这里 请输入用户名和密码里的值,就是value值,可以在网页中删除掉。页面中的表单元素很多,如何区别不同的表单元素?

使用name属性,当前input表单的名字,后台可以通过这个name属性找到这个表单,页面中的表单很多,name的主要作用就是用于区别不同的表单。

如果页面一打开,就让某个单选按钮或者复选框是选中状态?

使用checked属性,表示默认选中状态,用于单选按钮和复选框。

如何让input表单展示不同的属性,比如单选按钮或者文本框?

使用input表单里的type属性标签,可以使input表单展示不同的属性。


接下来我们说下属性 提交和重置(越来越和后端有交集了,需要仔细听)

submit(定义提交按钮) 提交按钮会把表单数据提交给服务端

reset(定义重置按钮) 重置按钮会清楚表单中所有数据

对于submit,查看页面效果:


点击提交后,结果如下:


对应的代码如下:

<body>

    <form action="https://www.baidu.com" method="GET">

        用户名: <input type="text" maxlength="2" name="username" value="请输入用户名"> <br>

        密码: <input type="password" name="password" value="请输入密码"> <br>

        性别: 男<input type="radio" name="sex"> 

        女<input type="radio" name="sex" checked> 人妖<input type="radio" name="sex"> <br>

        爱好: 学习<input type="checkbox" name="happy" checked> 游戏<input type="checkbox" name="happy"> 

        吃饭<input type="checkbox" name="happy"> <br>


        提交: <input type="submit" name="提交" value="提交">

    </form>

</body>

在性别那块展示不对,显示了很多happy=on

我们再调试下试试:

仔细看了下代码,没有错呢,happy=on,主要是复选框处全部进行了选择,所以会出现那么多的on

【测试全栈化--前端学习】(16)input属性提交和重置_测试_03

还是写的不对,提交的参数其实是value的值,所以value不能为空。


好的,今天先到这里了,大家晚安

标签:全栈化,16,--,value,表单,提交,按钮,input,属性
From: https://blog.51cto.com/u_11894/5795039

相关文章

  • Kubernetes架构提供哪些功能
    2014年,谷歌开放了Kubernetes项目。它是建立在谷歌运行大规模生产系统的基础之上,结合社区的最佳创意和实践构建的一个可移植、可扩展的开源平台。Kubernetes主要是通过API......
  • DolphinDB 助力 WILLIAM O’NEIL 笑傲股市
    WILLIAMO’NEIL高级工程师陆强WILLIAMO’NEIL(威廉欧奈尔),成立于1963年,致力于为投资机构和投资者提供投资建议和独立调研报告,目前已服务超过500家世界顶级投资机构。我所......
  • SD-WAN会给原有企业网络带来冲击吗?
    近两年来,SD-WAN的发展可谓是如火如荼,伴随着SD-WAN在企业广域网应用中崭露头角,也引起了一部分人的担忧,不少运维人员不愿甚至抗拒SD-WAN的升级部署,为什么会出现此种现象,可能有......
  • dedecms 5.7-ueditor整合教程
    ​ 在线代码: https://gitee.com/xproer/wordpaster-dedecms-ueditor 说明:在安装插件包前,请先备份以上文件和目录。/include/inc/inc_fun_funAdmin.php/include/ue......
  • 全能型选手——华为云数据库GaussDB(for MySQL)
    数据库对企业的重要性是毋庸置疑的,目前我国企业运用较多的是自行组建的数据库系统,但是随着企业业务量的增加和历史数据累积,自建数据库存储空间小、性能差、功能少、数据安全......
  • 大数据实时计算流程介绍
    实时计算是常见的大数据计算场景。业务部门需要实时反馈产品的被点击、浏览、收藏、购买、评价等数据,对时延的要求一般是秒级,甚至毫秒级。而批处理计算引擎一般需要几分钟......
  • 实用性强更安全,后悔没早用华为云
    之前因为找停车位困难,被朋友安利的使用了华为云,真的是万万没想到,这玩意也太好用了!最重要的是,它的实用性真的是太强了!首先咱们来说一下它的华为云边端啊。以前我以为华为云就......
  • 重新思考TCP三次握手,两次握手的缺点
    两次握手也能保证有序可达两次握手在CS架构中是能保证有序、可达的,因为客户端在收到服务器的确认后,双方知道客户端下一次消息的正确序号,客户端到服务器的单向连接就......
  • SD-WAN不断冲击传统WAN架构
    随着全球化数字信息转型,网络结构也是在不断的发展和完善。随着云时代的到来,传统的网络布局的局限性开始凸显出来。在过去几年广域网最重要的变化是软件定义广域网技术(SD-W......
  • #yyds干货盘点# LeetCode 腾讯精选练习 50 题:合并K个升序链表
    题目:给你一个链表数组,每个链表都已经按升序排列。请你将所有链表合并到一个升序链表中,返回合并后的链表。 示例1:输入:lists=[[1,4,5],[1,3,4],[2,6]]输出:[1,1,2,3,4,4,5,......