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

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

表单的目的提交信息

获得要提交的信息

  1. <body>
  2.     <form action = "post">
  3.         <p>
  4.             <span>用户名：</span><input type="text" id = "username" />
  5.         </p>
  6.         <!--多选框的值就是定义好的value-->
  7.         <p>
  8.             <span>性别：</span>
  9.             <input type = "radio" name = "sex" value = "man" id = "boy"/>男
  10.                <input type = "radio" name = "sex" value = "woman" id = "girl"/>女
  11.         </p>
  12.     </form>
  13.     <script>
  14.         var input_text = document.getElementById("username");
  15.         var boy_radio = document.getElementById("boy");
  16.         var girl_radio = document.getElementById("girl");
  17.         //得到输入框的值
  18.         input_text.value
  19.         //修改输入框的值
  20.         input_text.value  = "value";
  21.  
  22.         //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
  23.         boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中。
  24.         girl_radio.checked = true;//赋值
  25.  
  26.     </script>
  27. </body>

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

  1. <!DOCTYPE html>
  2. <html lang = "en">
  3.     <head>
  4.         <meta charset = "UTF-8">
  5.         <title>Title</title>
  6.         <!--MD5加密工具类-->
  7.         <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">
  8.  
  9.         </script>
  10.     </head>
  11.     <body>
  12.         <!--表达绑定提交事件
  13.             οnsubmit= 绑定一个提交检测的函数，true，false
  14.             将这个结果返回给表单，使用onsubmit接收
  15.         -->
  16.         <form action = "https://www.baidu.com" method = "post" onsubmit = "return aaa()">
  17.             <p>
  18.                 <span>用户名：</span><input type="text" id = "username" name = "username"/>
  19.             </p>
  20.             <p>
  21.                 <span>密码：</span><input type="password" id = "password" />
  22.             </p>
  23.             <input type = "hidden" id = "md5-password" name = "password"> 
  24.  
  25.             <!--绑定事件 onclick 被点击-->
  26.             <button type = "submit">提交</button>
  27.  
  28.         </form>
  29.  
  30.         <script>
  31.             function aaa(){
  32.                 alert(1);
  33.                 var username = document.getElementById("username");
  34.                 var pwd = document.getElementById("password");
  35.                 var md5pwd = document.getElementById("md5-password");
  36.                 //pwd.value = md5(pwd,value);
  37.                 md5pwd.value = mad5(pwd.value);
  38.                 //可以校验判断表单内容，true就是通过提交，false就是阻止提交
  39.                 return false;
  40.  
  41.             }
  42.         </script>
  43.  
  44.     </body>
  45. </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. Python使用wxpy模块实现微信两两群组消息同步

    python使用wxpy模块提供的微信API接口实现两两群组的消息同步 安装模块: pip install wxpy 注意:需要同步的微信群需要保存到通讯录中 以下是自己闲来无事写的代码,暂时还存在以 ...

  2. 最全的DOM事件笔记

    1. DOM事件模型 DOM是微软和网景发生"浏览器大战"时期留下的产物,后来被"W3C"进行标准化,标准化一代代升级与改进,目前已经推行至第四代,即 leve ...

  3. 使用阿里云K8S 服务，丢失访问中原始IP 问题

    解决步骤: 1. 利用kubectl 修改 k8s 配置, 设置 external** = Local 2. 在服务发现与负载均衡界面,选择对应的LB 服务, 设置服务LB 的 external** ...

  4. Android开发Fragment的使用学习

    基本概念 Fragment是Android3.0(API11)提出的概念,support-v4库中也开发了一套Fragment API,最低兼容Android 1.6.所以在开发中要注意不要导错包 导 ...

  5. Dubbo——SPI及自适应扩展原理

    文章目录 引言 正文 一.什么是SPI? 1. Java SPI的实现 2. Dubbo SPI实现原理 由配置文件得到的猜想 SPI源码 二.自适应扩展机制 三.Dubbo IOC 总结 引言 Du ...

  6. skynet 初步分析

    自己想实现一个tcp 粘包,残包的功能.  先看看一些开源的库是怎么实现的. 首先开启一个线程.使劲的执行: skynet_socket_poll skynet_socket_poll  这个玩意是干 ...

  7. Java并发编程的本质是解决这三大问题

    [本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] 前言 并发编程的 ...

  8. JavaScript 集合基本操作

    参考 MDN 集合 Array 1. 2种创建数组的方式 var fruits = [] ; var friuits = new Array(); 2. 遍历 fruits.forEach(funct ...

  9. Python3-随笔目录

      Python3-面向对象 标准库模块 Python3-collections模块-容器数据类型 Python3-datetime模块-日期与时间 Python3-re模块-正则表达式 Python ...

  10. ceph对象存储RADOSGW安装与使用

    本文章ceph版本为luminous,操作系统为centos7.7,ceph安装部署方法可以参考本人其他文章. [root@ceph1 ceph-install]# ceph -v ceph vers ...