HTML中Form表单的使用

全栈程序员-站长 • 2026年3月19日下午6:32 • 未分类 • 阅读 1

1、form表单标记

表单标记以

标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。

HTML中Form表单的使用

示例：创建表单，设置表单名称为 myForm，传送方式为 post，当用户提交表单时，提交至 action.html 页面进行处理。

2、form表单的提交与重置

form表单的提交与重置可以通过HTML自带的表单按钮方式，或者使用JavaScript脚本的方式。

2.1 使用表单按钮

2.2 使用JavaScript脚本

2.2.1 使用JavaScript脚本提交form表单

//提交表单
myForm.method = 'POST';
myForm.action = "action.html";
myForm.submit();

2.2.2 使用JavaScript脚本重置form表单

//重置表单 document.getElementsByName("myForm")[0].reset();

示例：使用JavaScript脚本实现form表单的提交与重置。

 
   
   使用JavaScript脚本实现form表单的提交与重置 
    
     
      
      
        用户注册 
       
       
        
        博客信息： 
         您好，欢迎访问 pan_junbiao的博客  
        
        
        博客地址： 
         https://blog.csdn.net/pan_junbiao  
        
        
        登录账户： 
           
        
        
        登录密码：

用户注册
博客信息：	您好，欢迎访问 pan_junbiao的博客
博客地址：	https://blog.csdn.net/pan_junbiao
登录账户：
登录密码：

注意：使用JavaScript脚本实现form表单的提交与重置时，按钮是普通按钮：type=”button”。

执行结果：

HTML中Form表单的使用

3、form表单提交前数据校验

当我们在提交form表单前，需要对表单的数据进行有效性校验。下面将介绍如何使用JavaScript实现对form表单提交前的数据校验。

示例：创建login.html登录页面，并使用JavaScript实现提交表单前的数据校验。

3.1 校验方式一

使用form表单的 onsubmit 提交事件。

注意：

（1）登录按钮的类型必须是：type=”submit” 。

（2）提交方法是写在form元素的 onsubmit 提交事件上，并且方法名前面必须加上 return 。

完整代码：

 
   
   登录 
    
     
      
       
       
         请输入登录信息 
        
        
         
         博客信息： 
          您好，欢迎访问 pan_junbiao的博客  
         
         
         博客地址： 
          https://blog.csdn.net/pan_junbiao  
         
         
         登录账户： 
            
         
         
         登录密码：

请输入登录信息
博客信息：	您好，欢迎访问 pan_junbiao的博客
博客地址：	https://blog.csdn.net/pan_junbiao
登录账户：
登录密码：

3.2 校验方式二

使用普通按钮的 onclick 点击事件。

注意：

（1）登录按钮的类型必须是：type=”button”。

（2）提交方法是写在按钮的 onclick 点击事件上。

完整代码：

 
   
   登录 
    
     
      
       
       
         请输入登录信息 
        
        
         
         博客信息： 
          您好，欢迎访问 pan_junbiao的博客  
         
         
         博客地址： 
          https://blog.csdn.net/pan_junbiao  
         
         
         登录账户： 
            
         
         
         登录密码：

请输入登录信息
博客信息：	您好，欢迎访问 pan_junbiao的博客
博客地址：	https://blog.csdn.net/pan_junbiao
登录账户：
登录密码：

执行结果：

HTML中Form表单的使用

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/205211.html原文链接：https://javaforall.net

HTML中Form表单的使用

1、form表单标记

2、form表单的提交与重置

2.1 使用表单按钮

2.2 使用JavaScript脚本

2.2.1 使用JavaScript脚本提交form表单

2.2.2 使用JavaScript脚本重置form表单

3、form表单提交前数据校验

3.1 校验方式一

3.2 校验方式二

关于作者

全栈程序员-站长

发表回复

HTML中Form表单的使用

1、form表单标记

2、form表单的提交与重置

2.1 使用表单按钮

2.2 使用JavaScript脚本

2.2.1 使用JavaScript脚本提交form表单

2.2.2 使用JavaScript脚本重置form表单

3、form表单提交前数据校验

3.1 校验方式一

3.2 校验方式二

关于作者

全栈程序员-站长

相关推荐

java的常量

Python 计算机视觉（十四）—— OpenCV 进行霍夫变换

DTU连接自建MQTT服务器

新年放大招：Github 私库免费了！

python生兔子问题(递归算法)_java实现斐波那契数列

CentOS7开启端口（永久）

发表回复