表单是什么？form-----DOM树

  • 文本框----text
  • 下拉框----select
  • 单选框----radio
  • 多选框----checkbox
  • 隐藏域----hidden
  • 密码框----password
  • …

表单的目的提交信息

获得要提交的信息

<body>

    <form action = "post">

        <p>

            <span>用户名：</span><input type="text" id = "username" />

        </p>

        <!--多选框的值就是定义好的value-->

        <p>

            <span>性别：</span>

            <input type = "radio" name = "sex" value = "man" id = "boy"/>男

               <input type = "radio" name = "sex" value = "woman" id = "girl"/>女

        </p>

    </form>

    <script>

        var input_text = document.getElementById("username");

        var boy_radio = document.getElementById("boy");

        var girl_radio = document.getElementById("girl");

        //得到输入框的值

        input_text.value

        //修改输入框的值

        input_text.value  = "value";

        //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值

        boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中。

        girl_radio.checked = true;//赋值

    </script>

</body>

提交表单。md5加密密码，表单优化

<!DOCTYPE html>

<html lang = "en">

    <head>

        <meta charset = "UTF-8">

        <title>Title</title>

        <!--MD5加密工具类-->

        <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">

        </script>

    </head>

    <body>

        <!--表达绑定提交事件

            οnsubmit= 绑定一个提交检测的函数，true，false

            将这个结果返回给表单，使用onsubmit接收

        -->

        <form action = "https://www.baidu.com" method = "post" onsubmit = "return aaa()">

            <p>

                <span>用户名：</span><input type="text" id = "username" name = "username"/>

            </p>

            <p>

                <span>密码：</span><input type="password" id = "password" />

            </p>

            <input type = "hidden" id = "md5-password" name = "password"> 

            <!--绑定事件 onclick 被点击-->

            <button type = "submit">提交</button>

        </form>

        <script>

            function aaa(){

                alert(1);

                var username = document.getElementById("username");

                var pwd = document.getElementById("password");

                var md5pwd = document.getElementById("md5-password");

                //pwd.value = md5(pwd,value);

                md5pwd.value = mad5(pwd.value);

                //可以校验判断表单内容，true就是通过提交，false就是阻止提交

                return false;

            }

        </script>

    </body>

</html>

javascript基础（四）： 操作表单的更多相关文章

  1. Javascript学习笔记四——操作表单

    Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...

  2. JavaScript基础四

    1.13 Js中的面向对象 1.13.1 创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或 ...

  3. javascript基础 之 表单

    1,js可以验证表单 实例1,js获取表单的内容 //html表单是这样的 <form name="myForm" action="demo_form.php&qu ...

  4. JavaScript 基础(四) - HTML DOM Event

    HTML DOM Event(事件) HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下 ...

  5. Javascript基础四（数组，字符，对象，日期）

    第一节:数组 1.数组的概念及定义     可以存放一组数据:          当需要操作多个数据时: 2.数组的创建方式 var arr1 = [1,2,3]; //字面量方式 var arr2 ...

  6. Javascript基础form表单

    <!DOCTYPE HTML> <html> <head> <script type="text/javascript" charset= ...

  7. JavaScript 基础(四) 循环

    JavaScript的循环有两种,一种是for 循环,通过初始条件,结束条件和递增条件来循环执行语句块: var x = 0; var i; for(i=1; i <=10000; i++){ ...

  8. JavaScript 基础四

    遍历对象的属性 for...in 语句用于对数组或者对象的属性进行循环操作. for (变量 in 对象名字) { 在此执行代码 } 这个变量是自定义 符合命名规范 但是一般我们 都写为 k 或则 k ...

  9. JQuery：各种操作表单元素方法小结

    来源:http://www.ido321.com/1220.html 表单元素无处不在,已然成了Web应用不可或缺的一个部分.对表单最最最常见的操作就是获取表单元素的值或者更改表单元素的值.那在JQu ...

  10. JavaScript基础笔记（十）表单脚本

    表单脚本 一.表单基础知识 JavaScript中表单对应的是HTMLFormElement类型,该类型继承自HTMLElement类型. 通过document.forms可以获得所有表单元素,通过数 ...

随机推荐

  1. 面试：在面试中关于List（ArrayList、LinkedList）集合会怎么问呢？你该如何回答呢？

    前言 在一开始基础面的时候,很多面试官可能会问List集合一些基础知识,比如: ArrayList默认大小是多少,是如何扩容的? ArrayList和LinkedList的底层数据结构是什么? Arr ...

  2. TensorFlow从0到1之浅谈感知机与神经网络（18）

    最近十年以来,神经网络一直处于机器学习研究和应用的前沿.深度神经网络(DNN).迁移学习以及计算高效的图形处理器(GPU)的普及使得图像识别.语音识别甚至文本生成领域取得了重大进展. 神经网络受人类大 ...

  3. Java容器面试总结

    1.List,Set,Map三者的区别? List:用于存储一个有序元素的集合. Set:用于存储一组不重复的元素. Map:使用键值对存储.Map会维护与Key有关联的值.两个Key可以引用相同的对 ...

  4. SpringCloud教程第4篇：Hystrix（F版本）

    在微服务架构中,根据业务来拆分成一个个的服务,服务与服务之间可以相互调用(RPC),在Spring Cloud可以用RestTemplate+Ribbon和Feign来调用.为了保证其高可用,单个服务 ...

  5. springcloud2.0 添加配置中心遇到的坑

    新手入门,在springcloud 配置config的时候遇到了几个比较烦的坑 先说1.5x版本的一些配置吧 首先是端点暴露的方式 management: security: enabled: fal ...

  6. android异步任务asyncTask详细分析

    android中的耗时操作需要放在子线程中去执行 asynctask是对Handler和和线程池的封装,直接使用比THread效率更加的高效因为封装了线程池,比我们每次直接new Thread效率更高 ...

  7. React实战教程之从零开始手把手教你使用 React 最新特性Hooks API 打造一款计算机知识测验App

    项目演示地址 项目演示地址 项目代码结构 前言 React 框架的优雅不言而喻,组件化的编程思想使得React框架开发的项目代码简洁,易懂,但早期 React 类组件的写法略显繁琐.React Hoo ...

  8. C#数据结构与算法系列（二十）：插入排序算法（InsertSort）

    1.介绍 插入排序算法属于内部排序算法,是对于欲排序的元素以插入的方式找寻该元素的适当位置,以达到排序的目的 2.思想 插入排序(Insertion Sorting)的基本思想是:把n个待排序的元素看 ...

  9. Idea集成git常用命令

    git status --查看文件状态   untracked: 未跟踪 一般为新增文件  git add 状态改为staged git add +文件 git add -A +路径  修改过的未被跟 ...

  10. webpack的入门实践，看这篇就够了

    webpack的入门实践 我会将所有的读者概括为初学者,即使你可能有基础,学习本节之前我希望你具有一定的JavaScript和node基础 文中的 ... ...代表省略掉部分代码,和上面的代码相同 ...