HTML表單標(biāo)簽有哪些組成部分？如何創(chuàng)建表單

表單就是在網(wǎng)頁上用于輸入信息的區(qū)域，它的主要功能是收集數(shù)據(jù)信息，并將這些信息傳遞給后臺信息處理模塊。例如，注冊頁面中的用戶名和密碼輸入、性別選擇、提交按鈕等都是用表單中的相關(guān)標(biāo)簽定義的。

表單的三個組成部分：

表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復(fù)選框提交按鈕等。
提示信息：一個表單中通常還需要包含一些說明性的文字即表單控件前的文字說明，用于提示用戶進(jìn)行填寫和操作。
表單域：它相當(dāng)于一個容器，用來容納所有的表單控件和提示信息。

表單域<form>

在HTML中，<form>標(biāo)簽用于定義表單域，即創(chuàng)建一個</form>表單。標(biāo)簽基本語法如下所示：

<form action="url地址"method="提交方式"name="表單名稱">
各種表單控件
</form>

·action屬性：用于指定表單提交的地址。

·method屬性：用于設(shè)置表單數(shù)據(jù)的提交方式，它有GET和POST兩個值，其中，GET為默認(rèn)值，這種方式提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差且有數(shù)據(jù)量限制;而使用POST提交方式不但保密性好，還可以提交大量的數(shù)據(jù)，因此開發(fā)中通常使用POST方式提交表單。

表單控件<input>

瀏覽網(wǎng)頁時經(jīng)常會看到單行文本輸入框、單選按鈕、復(fù)選框、重置按鈕等，使用<input>控件可以在表單中定義這些元素。<input>控件基本語法格式如下：

type屬性為控件最基本的屬性，用來指定不同的控件類型。
<input>控件還可以定義很多其他屬性，其中，比較常用的有id、name、value、size，它們分別用<input>來指定控件的ID值、名稱、控件中的默認(rèn)值和控件在頁面中的顯示寬度。

創(chuàng)建一個用戶登錄表單

在chapter01文件夾中創(chuàng)建一個HTML文件htmlDemo05.html，添加表單，并設(shè)置提交方式為POST，再定義一個2列的表格。

<form action="#" method="post">
    <table align="center" cellpadding="2">
    </table>
</form>

在htmlDemo05.html中添加用戶名輸入控件和密碼輸入框控件。

<tr>
    <td align="right">
        用戶名：
    </td>
    <td>
        <！--1.文本輸入框控件-->
        <input name="username" type="text"/>
    </td>
</tr>
<tr>
    <td align="right">
        密碼：
    </td>
    <！--2.密碼輸入框控件-->
    <td>
        <input name="password" type="password"/>
    </td>
</tr>

在htmlDemo05.html中添加性別選擇控件和復(fù)選框控件。

<tr>
    <td align="right">性別：</td>
    <td>
        <input name="gender" type="radio" value="male"/>男
        <input name="gender" type="radio" value="female"/>女
    </td>
</tr>
<tr>
    <td align="right">興趣：</td>
    <td>
        <input name="interest" type="checkbox" value="film"/>看電影
        <input name="interest" type="checkbox" value="code"/>敲代碼
        <input name="interest" type="checkbox" value="game"/>玩游戲
    </td>
</tr>

在htmlDemo05.html中添加文件上傳控件、提交按鈕控件和重置按鈕。

<td align="right">頭像：</td>
    <td>
        <input name="photo">
    </td>
</tr>
<tr>
    <td align="center" colspan="2">
        <input type="submit" value="注冊"/>
        <input type="reset" value="重填"/>
    </td>

運行程序，使用瀏覽器打開htmlDemo05.html文件。

猜你喜歡：

HTML表單有哪些屬性？表單屬性簡介

表單的構(gòu)成是什么？如何創(chuàng)建表單

HTML5文檔頭部相關(guān)標(biāo)簽介紹

HTML img標(biāo)簽的用法及相關(guān)屬性介紹

黑馬程序員web前端與移動開發(fā)開發(fā)培訓(xùn)