理论基础

  HTML <input> value属性。value规定<input>元素的值。value对于不同input类型,用法也不同。

  1.对于"button","reset","submit"类型 —— 定义按钮上的文字;

  2.对于"text","password","hidden"类型 ——定义输入字段的初始(默认)值;

  3.对于"checkbox","radio","image"类型 ——定义与input元素相关的值,当提交表单时该值会发送到表单的action URL。

最需要注意的是 ,value属性对于<input type="checkbox">和<input type="radio">是必需的。而对于<input type="file"> value属性是不适用的。

实现原理

  使用document.getElementByid("idName").value获取元素的值,然后输出到页面上。

实现代码

<h1>登录</h1>
<small>本网页展示了使用HTML DOM来访问HTML元素最常用的方法</small>
<hr/> Account &nbsp;<input type="text" id="account" value="15515"><br/>
Password <input type="password" id="pwd" value="123456"><br/>
<input type="button" value="Show Values" onclick="getValue()">
<hr/>
<p id="show"></p> <script>
var a = document.getElementById("account").value;
var p = document.getElementById("pwd").value;
function getValue() {
document.getElementById("show").innerHTML = "Account: " + a + "<br/>" + "Password: " + p;
}

效果图

使用“原生”HTML DOM获取input的输入值并显示的更多相关文章

  1. js通過name获取input框输入值

    var account = $("input[name='account']").val();//获取input框输入值

  2. 小程序批量获取input的输入值,监听输入框,数据同步

    在使用小程序时,跟vue的数据绑定不一样,没有v-model这个属性了,官网也只是给了一些事件监听. 但是我们如果有多个表单时,需要写多个事件来同步数据.这样做很麻烦.下面的方法可以解决,只需要一个方 ...

  3. Vue(4)- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用

    一.获取原生的DOM的方式 在js中,我们可以通过id.class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如 ...

  4. Vue 4 -- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用

    一.获取原生的DOM的方式 在js中,我们可以通过id.class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如 ...

  5. 获取原生的DOM方式,DIY脚手架,vue-cli的使用

    一 . 获取原生的DOM的方式 在js中,我们可以通过id, class 或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加 ref 属性,通过 this.$r ...

  6. vue之获取原生的dom的方式

    1.获取原生的DOM的方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. 原生js dom记忆的内容

    1.DOM基础getElementByIdgetElementByTagNamegetElementByName getElementsByClass querySelector querySelec ...

  8. mui选择器和dom获取元素的区别(记得把mui对象转为dom对象才能调用用dom方法)

    <!DOCTYPE html><html> <head><meta charset="UTF-8"><meta name=&q ...

  9. js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径(转载)

     原文:http://blog.csdn.net/niyingxunzong/article/details/16989947 js/jquery 获取本地文件的文件路劲 获取input框中type= ...

随机推荐

  1. http协议读书笔记1-概述

    1.http协议在网络中的位置: http协议位于TCP协议的上层,http试用tcp来传输其报文数据,tcp在ip的上层. 2.浏览器发起连接的过程 上述图的过程是: 浏览器从url中解析出服务区的 ...

  2. Web app 的性能瓶颈与性能调优方法

    1. web app 性能测试工具使用 2. mysql 性能分析与调优方法

  3. java后台进程和线程优先级

    1. 后台线程:处于后台运行,任务是为其他线程提供服务.也称为“守护线程”或“精灵线程”.JVM的垃圾回收就是典型的后台线程. 特点:若所有的前台线程都死亡,后台线程自动死亡. 设置后台线程:Thre ...

  4. [Javascript] The "this" keyword

    The very first thing to understand when we're talking about this-keyword is really understand what's ...

  5. LINUNX下PHP下载中文文件名代码

            function get_basename($filename){                 return preg_replace('/^.+[\\\\\\/]/', '',  ...

  6. Filter之——GZIP全站压缩

    GZIP压缩:将压缩后的文本文件,发送给浏览器,减少流量. 一.进行gzip压缩条件: 1.请求头:Accept-Encoding : gzip  告诉服务器,该浏览器支持gzip压缩. 2.响应头: ...

  7. 通过Jni实现AES的CBC模式加密解密

    AES加密方式基本实现,出现一个问题就是代码的安全性.我们知道java层代码很容易被反编译,很有可能泄漏我们加密方式与密钥 内容,那我们该怎么办呢?我们可以使用c/c++实现加密,编译成So库的形式, ...

  8. Phantomjs 一些简单实用

    Phantomjs是一个基于webkit的服务器端JavaScirpt API.它全面支持web而不需要浏览器支持,并且原生支持web的各种标准:DOM处理,CSS选择器,JSON,Canvas和SV ...

  9. 实时流式计算框架Storm 0.9.0发布通知(中文版)

    Storm0.9.0发布通知中文翻译版(2013/12/10 by 富士通邵贤军 有错误一定告诉我 shaoxianjun@hotmail.com^_^) 我们很高兴宣布Storm 0.9.0已经成功 ...

  10. Part 1: Running Oracle E-Business Suite on Oracle Cloud

    You can now run Oracle E-Business Suite on Oracle Cloud.  EBS customers can take advantage of rapid ...