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

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

表單的三個(gè)組成部分：

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

表單域<form>

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

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

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

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

表單控件<input>

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

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

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

在chapter01文件夾中創(chuàng)建一個(gè)HTML文件htmlDemo05.html，添加表單，并設(shè)置提交方式為POST，再定義一個(gè)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="注冊(cè)"/>
        <input type="reset" value="重填"/>
    </td>

運(yùn)行程序，使用瀏覽器打開htmlDemo05.html文件。

猜你喜歡：

HTML表單有哪些屬性？表單屬性簡(jiǎn)介

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

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

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

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