JavaScript web表单功能交流干货满满

 更新时间:2021年10月12日 09:53:33   作者:执久呀  
表单通常用来收集网页访问者信息,常见的表单比如搜索引擎的搜索框、各网页应用的注册或者登陆界面等。一个表单通常包括多个表单控件

一、前言

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

二、正文部分

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

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

那么直接如图:

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

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

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

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

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

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

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

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

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

加上这个功能

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

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

重置按钮那里:

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

运行之后:点击重置

点击确定即可成功清除。

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

可以用size去控制

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

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

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

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

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

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

到此这篇关于JavaScript web表单功能交流干货满满的文章就介绍到这了,更多相关JavaScript web 表单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解JavaScript RegExp对象

    详解JavaScript RegExp对象

    RegExp对象是原生JavaScript中表示正则表达式的对象。接下来通过本文给大家详细介绍javascript regexp对象知识,需要的的朋友参考下吧
    2017-02-02
  • JS实现京东商品分类侧边栏

    JS实现京东商品分类侧边栏

    这篇文章主要为大家详细介绍了JS实现京东商品分类侧边栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • JavaScript实现Tab栏切换特效

    JavaScript实现Tab栏切换特效

    这篇文章主要为大家详细介绍了JavaScript实现Tab栏切换特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • JavaScript实现随机产生字符串的方法分享

    JavaScript实现随机产生字符串的方法分享

    这篇文章主要为大家详细介绍了JavaScript中实现随机产生字符串的方法,文中的示例代码简洁易懂,对我们学习JavaScript有一定的帮助,需要的可以参考一下
    2022-11-11
  • 浅谈javascript的原型继承

    浅谈javascript的原型继承

    javascript的继承在很多框架中都有运用,尤其是原型式继承。首先要理解一个概念,什么是原型式继承?所谓的原型式继承,就是在函数内部先创建一个临时性的构造函数,然后将传入的对象做这个构造函数的原型,最后返回这个临时类型的新实例
    2012-07-07
  • js拖拉表格实现内容计算

    js拖拉表格实现内容计算

    这篇文章主要为大家详细介绍了js拖拉表格实现内容计算,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • javascript+Canvas实现画板功能

    javascript+Canvas实现画板功能

    这篇文章主要为大家详细介绍了javascript+Canvas实现画板功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • JavaScript预解析及相关技巧分析

    JavaScript预解析及相关技巧分析

    这篇文章主要介绍了JavaScript预解析及相关技巧,结合实例形式分析了JavaScript与解析的原理,步骤与相关技巧,需要的朋友可以参考下
    2016-04-04
  • 原生js实现焦点轮播图效果

    原生js实现焦点轮播图效果

    本文主要分享了原生js实现焦点轮播图效果的示例代码,并解析了实例中的注意点。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • Javascript在IE或Firefox下获取鼠标位置的代码

    Javascript在IE或Firefox下获取鼠标位置的代码

    由于Firefox和IE等浏览器之间对JS解释的方式不一样,Firefox下面获取鼠标位置不能够直接使用clientX来获取。网上说的一般都是触发mousemove事件才行。我这里有两段代码,思路都一样,就是风格不同。
    2009-12-12

最新评论