❤掌控web表单功能深入交流❤

简介: ❤掌控web表单功能深入交流❤

一、前言


前面我们说了有关前端显示的问题,现在我们回归之前的内容,丰富一些表单操作。


二、正文部分


通过我们之前的内容,相信大家对于idea中的环境配置已经非常熟悉了吧,那么我们现在就


不在讲环境配置了还有不太明白的同学可以在我的第一篇中找到相关的内容。


那么直接如图:


微信图片_20220105181247.png


这是我们最开始做的东西,我们先运行得


微信图片_20220105181251.png


在输完账号密码我们提交后会在此网页中显示出来,这对于账号密码来说使我们不愿意看


到的所以我们只需要在form表单中加入method=" post"


微信图片_20220105181324.png


method=" post"是加密提交我们写他,不写或者get都是公开提交,运行之后


微信图片_20220105181346.png


此时输入账号密码提交之后都不会显示出来了。


其实非加密提交在我们平时的搜索中十分常见的如图:


微信图片_20220105181403.png


我们在提交之后没有一点显示,这很常的不舒服,所以我们


微信图片_20220105181421.png


   <script type="text/javascript">
        function 提交() {
         alert("提交成功")
        }
    </script>


其中fuction 后的名字是任意的 ,alert所显示的内容也是任意的,我们还要在提交按钮那里

加上这个功能


微信图片_20220105181451.png


运行之后我们,输入后点击提交后可以得到,之后点确定即可提交成功


微信图片_20220105181455.png


若是我们也想在重置那里也来个提示,原理也是一样的



微信图片_20220105181521.png


重置按钮那里:


微信图片_20220105181558.png


注意写得功能必须对应即可:


运行之后:点击重置


微信图片_20220105181601.png


点击确定即可成功清除。


我们在输入账号密码的时候感觉框框太大或者太小,所以我们可以控制文本框的长度


可以用size去控制


微信图片_20220105181637.png


账号是用size控制的,密码是默认的长度,我们来对比一下即可


微信图片_20220105181641.png


长度明显不同,这我们就控制了文本框的长度


然后我们觉得控制了文本框的长度,还远远不够,比如要设置不能超过多少位,用maxlength


=" "来限制所要输入的长度


微信图片_20220105181713.png


此时运行之后再查看发现确实可以,到第五位之后就输不了了


微信图片_20220105181717.png


maxlength字面意思也是最大长度,可谓是非常的好记。


多行文本框的输入:textares,可以输入大量信息


微信图片_20220105181754.png

微信图片_20220105181808.png


目录
相关文章
|
3月前
|
JavaScript Java 微服务
现代化 Java Web 在线商城项目技术方案与实战开发流程及核心功能实现详解
本项目基于Spring Boot 3与Vue 3构建现代化在线商城系统,采用微服务架构,整合Spring Cloud、Redis、MySQL等技术,涵盖用户认证、商品管理、购物车功能,并支持Docker容器化部署与Kubernetes编排。提供完整CI/CD流程,助力高效开发与扩展。
482 64
|
6月前
|
开发者
(WEB CAD online )在线CAD实现圆孔标记功能
本文介绍了通过自定义实体 `McDbTestRoundHoleMark` 实现圆孔标记功能的方法。该功能支持多象限标记、可调节标记角度、多重标记及动态编辑,并自动计算包围盒以优化空间定位与选择操作。核心实现包括类结构定义、数据序列化、标记数据设置、夹点编辑及实体绘制等步骤。用户可通过插件初始化注册并创建圆孔标记,适用于工程图纸标注场景。在线Demo展示了实际效果,便于开发者参考与使用。
|
Java API 数据库
构建RESTful API已经成为现代Web开发的标准做法之一。Spring Boot框架因其简洁的配置、快速的启动特性及丰富的功能集而备受开发者青睐。
【10月更文挑战第11天】本文介绍如何使用Spring Boot构建在线图书管理系统的RESTful API。通过创建Spring Boot项目,定义`Book`实体类、`BookRepository`接口和`BookService`服务类,最后实现`BookController`控制器来处理HTTP请求,展示了从基础环境搭建到API测试的完整过程。
195 4
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
271 6
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
332 0
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
1676 1
|
前端开发 API
(WEB前端编辑DWG)在线CAD如何实现图形识别功能
mxcad 提供的图形识别功能可帮助用户快速识别和提取 CAD 图纸中的各种图形,如直线、多段线、弧线、圆及图块,显著提升设计效率。此功能不仅适用于图形分类,还能进行数量统计和快速定位,减少手动操作。用户可通过 API 进行二次开发,自定义识别逻辑。具体步骤包括打开在线示例、选择识别功能、设置识别参数并开始识别。更多开发文档请关注公众号:梦想云图网页 CAD。
|
前端开发 数据安全/隐私保护
【前端web入门第二天】02 表单-input标签-单选框-多选框
本文介绍了HTML中`&lt;input&gt;`标签的基本使用方法及其应用场景,如登录、注册页面和搜索区域。通过设置`type`属性,可以实现文本框、密码框、单选框、多选框及文件上传等功能。此外,还详细说明了占位文本的使用、单选框的常用属性及多选框的默认选中状态,并提供了示例代码与效果展示。
531 7
|
安全 前端开发 PHP
构建与验证表单:传统PHP与Laravel框架的比较分析——探索Web开发中表单处理的优化策略和最佳实践
【8月更文挑战第31天】在 Web 开发中,表单构建与数据验证至关重要。传统 PHP 方法需手动处理 HTML 表单和数据验证,而 Laravel 框架则提供了一种更现代、高效的解决方案。本文通过对比传统 PHP 和 Laravel 的方法,探讨表单构建与验证的最佳实践。Laravel 通过简洁的语法糖、内置的数据过滤和验证机制,显著提升了代码的安全性和可维护性,适用于大型项目或需要快速开发的场景。然而,在追求灵活性的小型项目中,直接使用 PHP 仍是不错的选择。了解两者的优劣,有助于开发者根据项目需求做出最佳决策。
145 0

热门文章

最新文章

下一篇
oss云网关配置