JavaScript与 HTML表单的交互过程,想要学习动态网页但是无从下手的新手看看。

简介: 最近开始了 java  web的学习在学习中学到了很多有用的东西 比如说 html 表单如何 和 javascript进行交互的  读完本篇文章后相信初学者会有一个 清晰的理解 。。。  对应下面的代码看我写的问题   。
最近开始了 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>

目录
相关文章
|
4天前
|
JavaScript
通过使用online表单的获取使用,了解vue.js数组的常用操作
通过使用online表单的获取使用,了解vue.js数组的常用操作
|
6天前
|
JavaScript 前端开发
JS实现网页页面的框架(demo)
JS实现网页页面的框架(demo)
9 1
|
8天前
|
JavaScript 前端开发
js的交互事件
js的交互事件
13 1
|
13天前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
13天前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。
|
13天前
|
移动开发 缓存 前端开发
【专栏:HTML与CSS实践篇】网页性能优化:CSS与HTML的最佳实践
【4月更文挑战第30天】本文探讨了优化CSS和HTML以提升网页性能的最佳实践。HTML优化包括:精简结构、压缩代码、异步加载脚本和利用缓存。CSS优化则涉及:精简代码、合并文件、使用CSS Sprite、善用CSS3属性、避免@import及响应式设计。这些方法能加快加载速度,改善用户体验。
|
13天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 实践篇】网页图标与字体图标的使用
【4月更文挑战第30天】本文探讨了网页设计中两种主要图标形式——传统图标和字体图标。传统图标(PNG, JPEG, GIF)视觉效果丰富但文件大,易影响加载速度且维护不便。字体图标占用空间小,易于维护和定制,但视觉效果相对简单,选择有限。实际应用中,两者可结合使用,以导航栏、操作按钮和提示信息为例说明了图标的重要性。设计师需注意兼容性、清晰度和性能优化问题,根据项目需求选择合适图标类型,以提升网页质量和用户体验。
|
13天前
|
运维 前端开发 JavaScript
【专栏:HTML进阶篇】HTML与Web标准:构建可访问与可维护的网页
【4月更文挑战第30天】本文探讨了HTML与Web标准的关系,强调遵循标准对创建高质量、可访问、可维护网页的重要性。通过使用语义化标签、提供文本替代、合理使用表格和列表,可提升网页可访问性;通过结构化文档、添加注释、分离结构与表现,能增强网页可维护性。遵循Web标准,可确保网页在不同设备上的兼容性,并满足各类用户需求。
|
13天前
|
XML 前端开发 安全
【专栏:HTML 进阶篇】HTML 表单验证与 AJAX 交互
【4月更文挑战第30天】本文探讨了HTML表单验证和AJAX在现代网页开发中的重要性。HTML表单验证通过必填、数据格式和范围验证确保用户输入的准确性,而AJAX则实现异步通信,提供动态数据加载、局部更新和实时交互。两者的结合优化了表单处理,提高用户体验并减少服务器负担。实际应用包括在线注册、购物车系统和表单反馈。然而,开发者需注意浏览器兼容性、错误处理和安全性问题。掌握这些技术,能打造更智能、高效的网页应用,为用户提供更好的体验。在数字化时代,HTML表单验证和AJAX是网页创新与进步的关键。
|
13天前
|
移动开发 JavaScript 前端开发
【专栏:HTML进阶篇】HTML模板与Web组件:可复用的网页元素
【4月更文挑战第30天】HTML模板和Web组件提升网页开发效率和可维护性。HTML模板,如&lt;template&gt;元素和服务器端模板引擎,用于创建可复用的HTML结构。Web组件是自定义的HTML元素,结合影子DOM和模板,实现封装的可重用组件。两者助力构建高效、现代的网页和网站。