何谓表单？

    表单是html页面中负责数据采集功能的部件，它往往由三个部分组成：

        表单标签：<form></form> 用于声明表单的范围，位于表单标签中的元素将被提交。属性有method，entype，action等

        表单域：<input...../>包含了 包含了文本框，密码框等多种类，属性有type，name, value...

                    type=text 文本框

                    type=password 密码框

                    type=textarea文本区域

                    type=file文件上传框

                    type=radid单选框

                    type=checkbox复选框

        表单按钮

                提交按钮

                复位按钮

                一般按钮 

    我们可以通过表单，将用户输入的数据提交给服务端，并交由服务端进行处理。

例子：

<html>

    <head>

        <title>form表单</title>

        <meta charset="utf-8">

        <script type="text/javascript" src="getValue.js"></script>

    </head>

        <body>

            <form name="form1">

                <!--文本-->

                <input type="text" placeholder="text" name="text1" />

                <!--密码-->

                <input type="password" placeholder="password" name="password" />

                <!--多行文本域-->

                <textarea placeholder="textarea" name="textarea" style="resize:none"></textarea>

                <!--文件上传-->

                <input type="file" name="file"/>

                <!--单选框,注意name值一样-->

                <input type="radio" name="option" value="option1"/>option1

                <input type="radio" name="option" value="option1"/>option2

                <!--复选框-->

                <input type="checkbox" name="check" value="option1"/>option1

                <input type="checkbox" name="check" value="option2"/>option2

                <input type="checkbox" name="check" value="option3"/>option3

                <input type="submit" value="submit"/>

                <input type="reset" value="reset"/>

                <input type="button" value="button" onclick="getValue()"/>

            </form>

        </body>

</html>

javascrpt获取表单的值

function getValue(){

    var v1 = document.form1.text1.value;

    var arr = document.form1.check;

    alert(arr[0].value)

}

javascript获取表单的各项值的更多相关文章

  1. jquery的attr获取表单checked 布尔值问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 获取表单的初始值，模拟placeholder属性

    input和textarea有一个默认属性defaultValue,即初始值. 即使在页面操作修改了input和textarea的内容,获取到的defaultValue依然是初始值.可通过该值模拟pl ...

  3. ionic获取表单input的值的两种方法

    1.参数传递法 直接在input处使用 #定义参数的name值,注意在ts中参数的类型 html页面: <ion-input type="text" placeholder= ...

  4. 使用js获取表单元素的值

    function getParams(formName) { var frmMain = document.getElementById(formName)?document.getElementBy ...

  5. JavaScript之控制表单元素的值

    表单元素.value 获取表单元素的值 表单元素.value='这是修改后的值' 修改表单元素的值 案例: (1)html <input type="text" id=&qu ...

  6. JS获取表单元素的value

    <!-- 1.option selected属性,如果我们在下拉列表里面选择了一个option那么他的selected="true" ,如果我们想设置当前的option是选中 ...

  7. 用jQuery获取表单的值

    在日常开发过程中,有许多用到表单的地方.比如登录,注册,比如支付,填写订单,比如后台管理等等. 使用jQuery来获取表单的值是比较常见的做法. 常见表单 单行文字域:<input type=' ...

  8. jQuery 获取、设置表单元素的值

    获取表单元素值: 文本框,文本区域: $("#txt").attr("value"): 多选框 checkbox:$("#checkbox_id&qu ...

  9. javaWeb中怎么获取提交表单里面的值

    在javaWeb中如何获得html文件中的表单里面的值? <!DOCTYPE html> <html> <head> <meta charset=" ...

随机推荐

  1. python为运维人员打造一个监控脚本

    0x00前言: 一直想写一个监控方面的脚本,然后想到了运维这方面的 后来就写了个脚本. 0x001准备: psutil模块 0x02正文: import os import time import r ...

  2. 笔记：Spring Cloud Hystrix 异常处理、缓存和请求合并

    异常处理 在 HystrixCommand 实现的run方法中抛出异常,除了 HystrixBadRequestException之外,其他异常均会被Hystrix 认为命令执行失败并触发服务降级处理 ...

  3. Nginx+Tomcat 配置负载均衡集群

    一.Hello world 1.前期环境准备 准备两个解压版tomcat,如何同时启动两个tomcat,请看我的另一篇文章<一台机器同时启动多个tomcat>. nginx官网下载解压版n ...

  4. 【Flask】 使用Flask-Moment进行日期时间的管理

    Flask-Moment Flask-Moment又是一个flask的扩展模块,用来处理时间日期等信息.用这个模块主要是考虑到两点,第一是为了让不同时区的用户看到的都是各自时区的实际时间,而不是服务器 ...

  5. Nginx+Tomcat动静分离及Nginx优化

    目的:nginx处理用户请求的静态页面,tomcat处理用户请求jsp页面,来实现动态分离,nginx处理静态页面效率远高于tomcat,这样一来就能更好的提高并发,处理性能. 准备软件: 下载jdk ...

  6. SQL注入之Sqli-labs系列第三篇

    废话不在多说  let's go!   继续挑战第三关(Error Based- String) 1.访问地址,加入参数后 and 1=1和and 1=2进行测试,木有任何动静 2.再使用 ' 出现报 ...

  7. [poj3740]Easy Finding_状态压缩_dfs

    Easy Finding poj-3470 题目大意:给你一个01矩阵,问能否选出一些行,使得这些行所新组成的01矩阵每列中有且只有1个1. 注释:1<=行数<=16,1<=列数&l ...

  8. java设计模式-State（状态）模式

    state定义     不同的状态,不同的行为;或者说,每个状态有着相应的行为.         就像电风扇的开关,一档的上一个是关闭,关闭的上一个是五档,五档的上一个是四档,以此类推,而且五档的下一 ...

  9. Item 15: 只要有可能，就使用constexpr

    本文翻译自modern effective C++,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 如果说C++11中有什么新东西能拿"最佳困惑奖" ...

  10. xpath获取下一页,兄弟结点的妙用

    第一页的情况: 第四页的情况 : 文章的链接:  http://tech.huanqiu.com/science/2018-02/11605853_4.html 从上面我们可以看到,如果仅仅用xpat ...