❤掌控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


目录
相关文章
|
2月前
|
JSON JavaScript 数据格式
jwt-auth插件实现了基于JWT(JSON Web Tokens)进行认证鉴权的功能。
jwt-auth插件实现了基于JWT(JSON Web Tokens)进行认证鉴权的功能。
45 1
|
2月前
|
前端开发
Web前端---表格和表单
Web前端---表格和表单
29 1
|
4月前
|
Web App开发 人工智能 前端开发
【Web API系列】使用getDisplayMedia来实现录屏功能
【Web API系列】使用getDisplayMedia来实现录屏功能
74 0
|
5月前
|
编解码 前端开发 JavaScript
摄像头web网页播放功能: ffmeg和nginx实现
摄像头web网页播放功能: ffmeg和nginx实现
100 0
|
5月前
|
缓存 安全 Java
7:Servlet表单-Java Web
7:Servlet表单-Java Web
35 0
|
11天前
|
设计模式 存储 前端开发
18:JavaBean简介及其在表单处理与DAO设计模式中的应用-Java Web
18:JavaBean简介及其在表单处理与DAO设计模式中的应用-Java Web
25 4
|
11天前
|
存储 前端开发 搜索推荐
13:Session机制实现用户登录与注销功能-Java Web
13:Session机制实现用户登录与注销功能-Java Web
25 3
|
11天前
|
安全 前端开发 Java
10:基于Servlet模拟用户登录功能的实现与解析-Java Web
10:基于Servlet模拟用户登录功能的实现与解析-Java Web
24 3
|
27天前
|
数据库 数据安全/隐私保护 开发者
Flask表单处理:让Web交互更轻松
【4月更文挑战第16天】本文介绍了Flask中处理表单的基本流程和实用技巧。使用Flask-WTF扩展创建表单类,如`RegistrationForm`,包含字段及验证器。在模板中渲染表单,接收并处理数据,如`register`视图函数中的`form.validate_on_submit()`。技巧包括自定义验证器、CSRF保护、动态表单字段和文件上传。Flask-WTF使Web交互更便捷,增强了安全性与灵活性。
|
1月前
|
JSON JavaScript 数据格式
jwt-auth插件实现了基于JWT(JSON Web Tokens)进行认证鉴权的功能
jwt-auth插件实现了基于JWT(JSON Web Tokens)进行认证鉴权的功能
39 1