最近开始了 java  web的学习在学习中学到了很多有用的东西 比如说 html 表单如何 和 javascript进行交互的  读完本篇文章后相信初学者会有一个

清晰的理解 。。。  对应下面的代码看我写的问题   。

其实表单的交互操作很简单  就是在 提交表单数据的时候调用一个   javascript  所写的函数 ,  注意看我下面所给的代码

这一行    <form name="Form1"onSubmit=" return on_submit() ;"method="post" action="register.jsp" >

注意看阴影地方 有一个 onSubmit 属性 这里将 这个属性设置为     return on_submit() ; 意思就是调用 on_submit() 函数

这个函数就在 <script></script> 中定义        这就是表单提交的原理  ,注意我这里只是说表单整体的提交 ，  如果我们想要判断 表单中

的某个元素 例如   text 也就是文本框的内容是否为  空也就是 "" 那么可以这样 判断在我们 自己写的javascript 函数中

<script language="javascript">
 function on_submit()
 {  
       
  if (Form1.user_name.value == "")              /*  这句就是检测文本区输入是否为空如果为空那么返回false 意思就是取消表单的提交注意表单元素name属性区分大小写一定不要写错   */
    {
     alert("用户名不能为空，请输入用户名！");
     return false;
    }

}
 </script>

具体细节大同小异 ,基本上有一点html基础的 朋友 都能看懂这个交互的过程吧,,,,,希望能帮助 像我一样的新手 。。。写的不好 高手 不要喷我

对于 html文件表单书写 以及事件的响应建议到 Dreamweaver中 书写    可以有事件提示可以更高效的写程序

<html>
 <script language="javascript">
 function on_submit()
 {  
       
  if (Form1.user_name.value == "")
    {
     alert("用户名不能为空，请输入用户名！");
     return false;
    }

}
 </script>
 <head>
 <title>this  is my first  java script page</title>
 </head>
 <body>用户信息提交 
    <form name="Form1" onSubmit=" return on_submit() ;" method="post" action="register.jsp" >
   用户名:&nbsp;
     <input name="user_name" type="text" maxlength="255" >
     <br>
     密码: &nbsp;&nbsp;
     <input name="user_password" type="text" maxlength="255"   ><br>
     出生日期:<input name="year" size="3" maxlength="4" >年<select> 
     <option selected="selected"> 1</option>
     <option > 2</option>
     <option > 3</option>
     <option > 4</option>
     <option> 5</option>
     <option> 6</option>
     <option> 7</option>
     <option > 8</option>
     <option > 9</option>
     <option > 10</option>
     <option > 11</option>
     <option > 12</option>
     </select>月<input name="day" size="3" maxlength="4"> <br> 
     性别:&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="radio1" >男&nbsp;&nbsp;<input type="radio" name="radio2">女   <br>
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="button_sub" value="提  交"> &nbsp;<input type="reset" name="button_reset" value="重  置" >
 </form>
 </body>
 </html>

转载于:https://www.cnblogs.com/yuedongwei/archive/2011/11/07/4145596.html

JavaScript与 HTML表单的交互过程，想要学习动态网页但是无从下手的新手看看。...相关推荐

  1. html表单 asp验证,ASP中JavaScript处理复杂表单的生成与验证

    ASP中JavaScript处理复杂表单的生成与验证 更新时间:2007年03月25日 00:00:00   作者: 这里所谓的复杂表单,是指表单中包含多种不同的输入类型,比如下拉列表框.单行文本.多 ...

  2. java 用户名不为空_[Java教程]【关于JavaScript】常见表单用户名、密码不能为空

    [Java教程][关于JavaScript]常见表单用户名.密码不能为空 0 2015-05-31 12:00:14 在论坛等系统的用户注册功能中,如果用户忘记填写必填信息,如用户名.密码等,浏览器会 ...

  3. 使用JavaScript创建智能表单

    使用javascript创建智能表单 2000-05-26· 吕晓波·CPCW 验证用户输入 在我们的网站中,经常会加入一些表单,要求用户输入类似姓名或邮件地址等的个人信息.为了确保用户输入的信息符合 ...

  4. element手机验证格式_基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)...

    前言 开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com ...

  5. spring mvc 基于表单的认证过程及cookie应用和session管理

    我们日常生活中都会接触到各种登录过程,基于表单的认证一般是将客户端发送过来的用户ID和密码与之前登录过的信息做匹配来进行认证的.这个过程我们都很清楚,不过HTTP协议是无状态协议,不能保存用户登陆的状 ...

  6. HTTP:Form表单的交互与抓包

    HTTP协议的学习,我之前避开了最基础最概念的东西,写到现在,我发现若是以前从来没接触过服务端,没了解过抓包,还不知道ABNF的一些核心规则.根本没法继续学下去 网络协议的概念实在太多,不动手实操一下 ...

  7. JavaScript中的表单编程

    表单编程 1获取表单相关信息 1.什么是表单元素 1.什么是表单元素 在H TML中表单就是指form标签,它的作用是将用户输入或选择的数据提交给指定的服务器 2.如何获取表单元素 <form ...

  8. javascript 自动填写表单

    在访问某些站点时,常常发现要填写一些没有实际意义但又必须得重复填写的表单,而且现在B/S的应用越来越多,下面的方法也许可以让你轻松点. 本文没有什么技术上创新,只要会一点Javascript的技术就可 ...

  9. 前端笔记-使用JavaScript防止空表单提交

    程序演示如下: 这里对应的ID卡号是没有填写的! 如果按下添加按钮 这里对应的JavaScript源码如下: <script type="text/javascript"&g ...

最新文章

  1. 用php做一个简单的汇率,vue实现简单实时汇率计算功能
  2. 我的电脑不联网，很安全，黑客：你还有风扇呢
  3. 转 java学习笔记（必看经典）
  4. linux java乱码怎么解决,linux中显示中文乱码如何解决
  5. java高级之Io流
  6. linux生成日志文件,linux实现按天生成日志文件并自动清理
  7. 肺功能曲线图怎么看_如何看肺功能结果报告单
  8. asp.net 生命周期中的时间流程
  9. ubuntu 安装ssh服务
  10. led灯光衰怎么解决_花小钱办大事 主流直插式LED大灯横评
  11. japid-conf目录文件配置
  12. mysql gui tools ojdbc14.jar_转 OJDBC驱动版本区别 [ojdbc14.jar，ojdbc5.jar跟ojdbc6.jar的区别]...
  13. ESP32 SIM800L：发送带有传感器读数的文本消息（SMS警报）
  14. 51单片机前言知识总结
  15. 频登各大时装周运动品牌FILA在得物App首发和平精英联名系列
  16. 《东周列国志》第十七回 宋国纳赂诛长万 楚王杯酒虏息妫
  17. 图文详解双向链表原理
  18. hbase snappy 安装_Hadoop HBase 配置 安装 Snappy 终极教程
  19. 一夜之间就能肝完的学生信息管理系统
  20. HTML+CSS 编辑的（多列布局、相册、百度首页）、盒子模型

热门文章

  1. 怎么取消苹果手机自动续费_手机腾讯视频的vip怎么取消自动续费？
  2. centos8配置本地光盘yum源_CentOS8 配置本地yum源的详细教程
  3. php滚动到指定位置,JQuery插件：ScrollTo平滑滚动到页面指定位置
  4. python 删除csv第一行_python 标准库学习之 csv
  5. 如何将四元数方向转化为旋转举证_是否有将四元数旋转转换为欧拉角旋转的算法？...
  6. 朗读评价语言集锦_英语老师批改作业时的精彩评语集锦，超实用！
  7. 计算机系统的指令系统,计算机指令系统指的是什么呢？
  8. 模拟视频光端机与数字光端机究竟有何区别
  9. 【渝粤教育】国家开放大学2018年秋季 0239-21T电子商务物流管理 参考试题
  10. 【渝粤教育】广东开放大学 会议运行管理 形成性考核 (38)