何谓表单？

    表单是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. ajax利用FormData异步文件提交

    通常情况下,我们上传文件都会使用form表单来提交文件.但有时候,我们会有异步提交文件的需求,在这种情况下,我们就需要新建一个Formdata来提交文件,后台如果使用的是PHP的话可以使用$_FILE ...

  2. 前端的UI设计与交互之设计原则篇

    1.亲密性 a)纵向间距示例这三种规格分别为:8px(小号间距).16px(中号间距).24px(大号间距). b)在这三种规格不适用的情况下,可以通过加减『基础间距』的倍数,或者增加元素来拉开信息层 ...

  3. 开源一套基于vue全家桶的webapp

    一.设计初衷 原本今年就是有一个打算要做一套商业的作品,恰巧目前离职,在找工作的过程中,所以有时间闲下来沉淀对原本的知识进行梳理. 说一个题外话,就是由于博主之前是很早一批使用vue的用户,也就是距今 ...

  4. Nginx正向代理与反向代理

    1.正向代理: 正向代理类似一个跳板机,代理访问外部资源. 典型应用:为在防火墙内的局域网客户端提供访问Internet的途径    如:IE例外设置代理服务器 正向代理配置实例:为不影响默认配置:添 ...

  5. 计时器setInterval()-慕课网

    计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码. 语法: setInterval(代码,交互时间); 参数说明: 1. 代码:要调用的函数或要执行的代码串. 2. 交互 ...

  6. 多线程&定时器Timer&同步&线程通信&ThreadLocal

    1.多线程 线程状态分为:新建状态.就绪状态.运行状态.阻塞状态.死亡状态 对象等待池的阻塞状态:运行状态执行了wait方法 对向锁池的阻塞状态:试图获得某个同步锁,已经被其他线程占用,就会放到对象的 ...

  7. Repository个人实践

    1.背景 最近,有空了,想着把之前一些乱七八糟的小项目给整理一下,尤其是涉及到Repository.UoW几处.为此,专门查阅了博客园中几个大神 关于Repository的实践,到最后都感觉依然莫衷一 ...

  8. vmware虚拟机和网络中的桥接和NAT

    vmware虚拟机和网络中的桥接和NAT 有许多人在网上回答类似的问题,但大多说的不够简单,且互相抄袭的嫌疑很大,这里我尽自己努力把问题说的明白一些 首先解释一下什么是NAT(network addr ...

  9. Linux安装java环境教程

    前言: 本教程基于jdk 1.8,但是此教程适用于jdk1.7等版本. 教程正文: 1.1. 登录Oracle官网下载jdk1.8安装包(gz结尾) 这里可以用"wget + 下载地址&qu ...

  10. JavaScript(第九天)【正则表达式】

    假设用户需要在HTML表单中填写姓名.地址.出生日期等.那么在将表单提交到服务器进一步处理前,JavaScript程序会检查表单以确认用户确实输入了信息并且这些信息是符合要求的.   一．什么是正则表 ...