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>

目录
相关文章
|
JavaScript 算法 开发者
如何用JS实现在网页上通过鼠标移动批量选择元素的效果?
本文介绍了类似电脑桌面通过鼠标选择多个图标的实现原理。主要通过监听mousedown、mousemove和mouseup事件,动态调整选择框大小并计算与元素的重叠情况。提供了角重叠和相交重叠的检测方法,并附有示例代码和在线演示链接,方便开发者参考与测试。
443 56
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
1774 58
|
9月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
2868 0
|
数据采集 Web App开发 JavaScript
Python爬虫如何获取JavaScript动态渲染后的网页内容?
Python爬虫如何获取JavaScript动态渲染后的网页内容?
|
移动开发 JavaScript 前端开发
HTML5 表单属性7
`pattern` 属性使用正则表达式验证 `&lt;input&gt;` 元素的值,适用于 `text`, `search`, `url`, `tel`, `email`, 和 `password` 类型。
|
移动开发 UED HTML5
HTML5 表单属性6
`min`、`max` 和 `step` 属性用于限制 `&lt;input&gt;` 标签中的数值或日期范围。例如,可以设置日期选择器的最早和最晚日期,或限制数字输入框的值范围。`multiple` 属性允许在 `&lt;input&gt;` 中选择多个值,适用于邮箱和文件类型。这些属性增强了表单控件的功能性和用户体验。
|
移动开发 HTML5
HTML5 表单属性4
`formnovalidate` 属性是一个布尔属性,用于 `&lt;input&gt;` 元素,指示该输入在表单提交时不需验证,可覆盖 `&lt;form&gt;` 元素的 `novalidate` 属性,常与 `type=&quot;submit&quot;` 一起使用。示例中展示了如何通过两个提交按钮(一个使用验证,另一个不使用)实现不同的表单提交方式。
|
移动开发 HTML5
HTML5 表单属性5
`height` 和 `width` 属性用于 `&lt;input&gt;` 标签中的 `image` 类型,定义图像的高度和宽度。
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
431 2