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

最新推荐文章于 2023-08-20 19:50:07 发布

UsherYue

最新推荐文章于 2023-08-20 19:50:07 发布

阅读量2.9k

点赞数 1

分类专栏： java 学习笔记文章标签： javascript html dreamweaver input button action

本文链接：https://blog.csdn.net/yue7603835/article/details/6944448

版权

java 学习笔记专栏收录该内容

139 篇文章 0 订阅

订阅专栏

最近开始了 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>

具体细节大同小异 ,基本上有一点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" >
   用户名: 
     <input name="user_name" type="text" maxlength="255" >
     <br>
     密码:   
     <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>
     性别:    <input type="radio" name="radio1" >男  <input type="radio" name="radio2">女   <br>
              <input type="submit" name="button_sub" value="提交">  <input type="reset" name="button_reset" value="重置" >
</form>
</body>
</html>