首頁 > IT教程 > 正文

HTML中Form表單的使用

2020-02-13 13:30:00 來源:金橙教程網 作者:admin8 瀏覽:89次 「手機版」

form

1、form表單標記

表單標記以<form>標記開頭,以</form>標記結尾。在表單標記中可以定義處理表單數據程序的URL地址等信息。

<form>標記的基本語法如下:

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

<form>標記的屬性說明:

屬性 說明
action 該屬性用來指定處理表單數據程序的URL地址。
method 該屬性用來指定數據傳送到服務器的方式。它有兩種屬性值,分別為 get 和 post。get 屬性值表示將輸入的數據追加在 action 指定的地址后面,并傳送到服務器。當屬性值為 post 時,會將輸入的數據按照 HTTP 協議中的 post 傳輸方式傳送到服務器。
name 該屬性指定表單的名稱,程序員可以自定義其值。
onsubmit 該屬性用于指定當前用戶單擊提交按鈕時觸發的事件。
target 該屬性指定輸入數據結果顯示在哪個窗口中,其屬性值可以設置為_blank、_self、_parent 和 _top。其中,_blank 表示在新窗口中打開目標文件;_self 表示在同一個窗口中打開,該項一般不用設置;_parent 表示在上一級窗口中打開,一般使用框架頁時經常使用;_top 表示在瀏覽器的整個窗口中打開,忽略任何框架。

示例:創建表單,設置表單名稱為 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>
</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="提交" οnclick="submitFrom()"/>
                    <input type="button" value="重置" οnclick="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"。

執行結果:

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" οnsubmit="return SubmitLogin()">
</form>

完整代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄</title>
</head>
<body>
<p align="center">
    <form action="action.html" method="post" name="myForm" οnsubmit="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>
</p>
</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 οnclick="SubmitLogin()" type="button" value="登錄"/>

完整代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄</title>
</head>
<body>
<p 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 οnclick="SubmitLogin()" type="button" value="登錄"/>
                </td>
                <td>
                    <input type="reset" value="取消"/>
                </td>
            </tr>
        </table>
        <span id="tips" style="color: red; font-weight: bold"></span>
    </form>
</p>
</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頁面引入其他html頁面代碼

{include file="/course/common/footer.html

10個最常見的HTML5面試題

本文為大家分享了最常見的10個HTML5面試題,希望大家喜歡。 問題1、新的 HTML5 文檔類型和字符集是? 答:HTML5 文檔類型很簡單: HTML5

MySQL中information_schema表

information_schema這張數據表保存了MySQL服務器所有數據庫的信息。如數據庫名,數據庫的表,表的數據類型與訪問權限等。再簡單點,這

txplatform,教您TXPlatform.exe是什么進程

有些用戶就知道,QQ和TM共同使用的外部應用開發接口管理程序。如果刪除該程序,QQ 或 TM 將喪失與周邊功能模塊以及外部應用程序相互

HTML圖片透明度案例

什么是opacity? Opacity中文意思是圖片透明度,使用opacity來設定圖片的透明度。Opacity屬性能夠設置的值從0.0到1.0值越小,越透明。

(責任編輯:jjjccc)

關鍵詞:html,form,表單,表單

福彩3d字谜画谜藏机图