1. IT分享知识网首页
  2. 开发框架
  3. HTML

HTML中Form表单的使用

老牧童 • • HTML • 阅读 137

HTML中Form表单的使用1、form表单标记表单标记以<form>标记开头，以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。<form>标记的基本语法如下：<formaction=”url”method=”get|post”name=”formName”onsubmit=””target=””></for…

大家好，欢迎来到IT知识分享网。

1、form表单标记

表单标记以<form>标记开头，以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。

<form>标记的基本语法如下：

<form action="url" method="get | post" name="formName" onsubmit="" target="">
</form>

<form>标记的属性说明：

HTML中Form表单的使用

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

<form id="form1" name="myForm" method="post" action="action.html" target="_blank">
</form>

 

2、form表单的提交与重置

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

2.1 使用表单按钮

<form id="form1" name="myForm" method="post" action="action.html" target="_blank">
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
</form>

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表单的提交与重置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用JavaScript脚本实现form表单的提交与重置</title>
    <meta name="author" content="pan_junbiao的博客">
</head>
<body>
    <form name="myForm">
        <table align="center">
            <caption>用户注册</caption>
            <tr>
                <td>博客信息：</td>
                <td>
                    <label>您好，欢迎访问 pan_junbiao的博客</label>
                </td>
            </tr>
            <tr>
                <td>博客地址：</td>
                <td>
                    <label>https://blog.csdn.net/pan_junbiao</label>
                </td>
            </tr>
            <tr>
                <td>登录账户：</td>
                <td>
                   <input type="text" name="loginName" />
                </td>
            </tr>
            <tr>
                <td>登录密码：</td>
                <td>
                    <input type="password" name="loginPwd" />
                </td>
            </tr>
            <!-- 以下是提交、取消按钮 -->
            <tr>
                <td colspan="2" style="text-align: center; padding: 5px;">
                    <input type="button" value="提交" onclick="submitFrom()"/>
                    <input type="button" value="重置" onclick="resetFrom()"/>
                </td>
            </tr>
        </table>
    </form>
</body>
<script>
    //提交
    function submitFrom()
    {
        //验证数据
        if(!myForm.loginName.value)
        {
            alert("请输入登录账户！");
            myForm.loginName.focus();
            return;
        }

        if(!myForm.loginPwd.value)
        {
            alert("请输入登录密码！");
            myForm.loginPwd.focus();
            return;
        }

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

    //重置
    function resetFrom()
    {
        //重置表单
        document.getElementsByName("myForm")[0].reset();
    }
</script>
</html>

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

执行结果：

HTML中Form表单的使用

 

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

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

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

3.1 校验方式一

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

注意：

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

<input type="submit" value="登录"/>

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

<form action="action.html" method="post" name="myForm" onsubmit="return SubmitLogin()">
</form>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="author" content="pan_junbiao的博客">
</head>
<body>
<div align="center">
    <form action="action.html" method="post" name="myForm" onsubmit="return SubmitLogin()">
        <table>
            <caption>请输入登录信息</caption>
            <tr>
                <td>博客信息：</td>
                <td>
                    <label>您好，欢迎访问 pan_junbiao的博客</label>
                </td>
            </tr>
            <tr>
                <td>博客地址：</td>
                <td>
                    <label>https://blog.csdn.net/pan_junbiao</label>
                </td>
            </tr>
            <tr>
                <td>登录账户：</td>
                <td>
                    <input type="text" name="loginName" />
                </td>
            </tr>
            <tr>
                <td>登录密码：</td>
                <td>
                    <input type="password" name="loginPwd" />
                </td>
            </tr>
            <!-- 以下是提交、取消按钮 -->
            <tr>
                <td>
                    <input type="submit" value="登录"/>
                </td>
                <td>
                    <input type="reset" value="取消"/>
                </td>
            </tr>
        </table>
        <span id="tips" style="color: red; font-weight: bold"></span>
    </form>
</div>
</body>
<script>
    //提交登录
    function SubmitLogin() {
        let tips = document.getElementById("tips");

        //判断用户名是否为空
        if (!myForm.loginName.value) {
            tips.innerText = "请输入登录账户！"
            myForm.loginName.focus();
            return false;
        }
        //判断密码是否为空
        if (!myForm.loginPwd.value) {
            tips.innerText = "请输入登录密码！"
            myForm.loginPwd.focus();
            return false;
        }
        //校验成功
        return true;
    }
</script>
</html>

3.2 校验方式二

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

注意：

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

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

 <input onclick="SubmitLogin()" type="button" value="登录"/>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="author" content="pan_junbiao的博客">
</head>
<body>
<div align="center">
    <form action="action.html" method="post" name="myForm">
        <table>
            <caption>请输入登录信息</caption>
            <tr>
                <td>博客信息：</td>
                <td>
                    <label>您好，欢迎访问 pan_junbiao的博客</label>
                </td>
            </tr>
            <tr>
                <td>博客地址：</td>
                <td>
                    <label>https://blog.csdn.net/pan_junbiao</label>
                </td>
            </tr>
            <tr>
                <td>登录账户：</td>
                <td>
                    <input type="text" name="loginName" />
                </td>
            </tr>
            <tr>
                <td>登录密码：</td>
                <td>
                    <input type="password" name="loginPwd" />
                </td>
            </tr>
            <!-- 以下是提交、取消按钮 -->
            <tr>
                <td>
                    <input onclick="SubmitLogin()" type="button" value="登录"/>
                </td>
                <td>
                    <input type="reset" value="取消"/>
                </td>
            </tr>
        </table>
        <span id="tips" style="color: red; font-weight: bold"></span>
    </form>
</div>
</body>
<script>
    //提交登录
    function SubmitLogin() {
        let tips = document.getElementById("tips");

        //判断用户名是否为空
        if (!myForm.loginName.value) {
            tips.innerText = "请输入登录账户！"
            myForm.loginName.focus();
            return;
        }
        //判断密码是否为空
        if (!myForm.loginPwd.value) {
            tips.innerText = "请输入登录密码！"
            myForm.loginPwd.focus();
            return;
        }
        
        //提交表单
        myForm.submit();
    }
</script>
</html>

执行结果：

HTML中Form表单的使用

 

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/22419.html

赞 (0)
老牧童老牧童
0
上一篇 2024-01-02 19:00
下一篇 2024-01-05 16:45

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信