HTML网页怎样获取input的值呢

网页中需要获取用户的信息，这就需要获取表单中的input的值，那么HTML网页怎样获取input的值呢

操作方法

  • 01

    如图，先布局好一个网页表单，这里我就设置一个input和一个button，并且我们给input添加一个id，id名我就取为in。

  • 02

    布局后结果如下，如图，有一个input输入框，和一个get按钮。

  • 03

    接着我们在页面中引入jq插件，使用jq封装的方法来获取input的值。

  • 04

    接着再书写一个get函数，待会我们将调用这个get函数来获取input里面的值。

  • 05

    如图，完善get函数，在里面写上代码jQuery("in").val()；jQuery("in")是用来获取到input这个元素（因为input的id是in），而获取到这个元素之后我们可以调用val()方法，这个方法就可以获取到input里面的值。

  • 06

    接着我们使用alert（）来括住jQuery("in").val()。这样，获取到的值就会以弹窗的方式显示出来。

  • 07

    接着我们再把get函数绑定在button按钮上面，这样，当我们点击按钮的时候就可以获取到input里面的值了。

  • 08

    如图，我们在input里面输入文字，然后点击按钮就会弹出input里面的值了哦。

操作方法2

  • 01

    当然，除了jq方法，我们还可以使用js原生代码来获取input里面的值。首先我们先注释掉jq插件。

  • 02

    然后我们再修改代码，如图，使用document.getElementById("in").value来获取input里面的值。注意，js获取id跟jq不一样的，js是通过document.getElementById()来获取id，并且通过value获取input的值。

  • 03

    接着我们再定义一个变量来保存获取到的input的值。

  • 04

    然后使用弹出形式来显示获取到的值。

  • 05

    最后，我们输入文字之后，点击按钮同样可以获取到input的值。

赞 (0)

相关推荐

  • 如何用js获取input的值

    如何用js获取input输入框的内容 操作方法 01 如图所示,[右键单击项目],选择[添加新项],先添加一个页面. 02 然后在弹出来的窗体,选择Web窗体,点击添加进入下一步. 03 接着输入图中 ...

  • 如何用js或者jquery获取input框里面的值

    处理表单的时候通常会通过获取input中的值来进行比较判断,或者赋值,对于前端的验证用到比较多,那么怎么获取input中的值呢? 通过js来获取input的值的准备工作 01 首先建立一个静态页面命名 ...

  • 如何获取input的value值

    在互联网开发中,会经常用到html的input控件,而获取input的value值也是前后端交互的常见方式,下面本文介绍一下怎么获取input的value值. 操作方法 01 例如,html中有如下i ...

  • 如何在支付宝获取会员成长值

    如何在支付宝获取会员成长值

    手机版支付宝软件被很多人使用,用来支付,理财等,有的用户在使用该软件时,想要获取会员成长值,但是却不知道如何获取,那么小编就来为大家介绍一下吧.具体如下:1. 第一步,点击并打开支付宝软件,接着点击右 ...

  • 如何使select2插件下拉框多选并获取选中的值

    select2是jQuery的一个下拉框插件,有单选.多选.搜索.禁用等功能.下面利用一个实例来说明select2多选框的使用方法,并获取选中的值,具体操作如下: 操作方法 01 第一步,创建静态页面 ...

  • 怎么获取checkbox的值和选中方法

    checkbox就是多选框,是我们经常使用HTML控件,也是在前端开发中不可避免使用的控件之一,获取checkbox的方式多种多样,笔者就来总结几种获取checkbox的方式供大家参考(笔者使用的是$ ...

  • js获取的src值的三种方式

    js获取<img>的src值的三种方式,并分析 DOM对象与jquery对象有什么不同 操作方法 01 var img1src = $("#jsb_czq_pic1") ...

  • 怎样从视频网页上获取下载地址？

    假如在网上看视频的时候,想把视频给下载下来保存起来,这时怎么办呢? 步骤/方法 01 首先到网上搜索"维棠FLV视频下载软件",接着安装该软件,装好后打开软件 02 打开软件后点击 ...

  • Jquery获取Label，TextBox的值

    Jquery获取Label,TextBox的值 操作方法 01 获取任意input的值 msg=$("#msg").attr("value"); date=$( ...