什么是 HTML 表單

HTML表單需要收集不同類型的用戶輸入，例如姓名、電子郵件地址、電話號(hào)碼等聯(lián)系方式或信用卡信息等詳細(xì)信息。

表單包含稱為控件的特殊元素，如輸入框、復(fù)選框、單選按鈕、提交按鈕等。用戶通常通過修改其控件來完成表單，例如輸入文本、選擇項(xiàng)目等，并將此表單提交給 Web 服務(wù)器以進(jìn)行進(jìn)一步處理。

該<form>標(biāo)簽用于創(chuàng)建 HTML 表單。下面是一個(gè)簡(jiǎn)單的登錄表單示例：

<form>
    <label>Username: <input type="text"></label>
    <label>Password: <input type="password"></label>
    <input type="submit" value="Submit">
</form>

以下部分描述了您可以在表單中使用的不同類型的控件。

輸入元素

這是 HTML 表單中最常用的元素。

它允許您根據(jù)type屬性指定各種類型的用戶輸入字段。輸入元素的類型可以是文本字段、密碼字段、復(fù)選框、單選按鈕、提交按鈕、重置按鈕、文件選擇框，以及HTML5 中引入的幾種新輸入類型。

最常用的輸入類型如下所述。

文本字段

文本字段是允許用戶輸入文本的一行區(qū)域。

單行文本輸入控件是使用一個(gè)<input>元素創(chuàng)建的，該元素的type屬性值為text。這是用于獲取用戶名的單行文本輸入示例：

<form>
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
</form>

— 上述示例的輸出將如下所示：

密碼字段

密碼字段類似于文本字段。唯一的區(qū)別是;密碼字段中的字符被屏蔽，即它們顯示為星號(hào)或圓點(diǎn)。這是為了防止其他人讀取屏幕上的密碼。這也是使用屬性值為<input>的元素創(chuàng)建的單行文本輸入控件。typepassword

這是一個(gè)用于獲取用戶密碼的單行密碼輸入示例：

<form>
    <label for="user-pwd">Password:</label>
    <input type="password" name="user-password" id="user-pwd">
</form>

— 上述示例的輸出將如下所示：

單選按鈕

單選按鈕用于讓用戶從一組預(yù)定義的選項(xiàng)中準(zhǔn)確選擇一個(gè)選項(xiàng)。它是使用屬性值為<input>的元素創(chuàng)建的。typeradio

以下是可用于收集用戶性別信息的單選按鈕示例：

<form>
    <input type="radio" name="gender" id="male">
    <label for="male">Male</label>
    <input type="radio" name="gender" id="female">
    <label for="female">Female</label>
</form>

— 上述示例的輸出將如下所示：

復(fù)選框

復(fù)選框允許用戶從一組預(yù)定義的選項(xiàng)中選擇一個(gè)或多個(gè)選項(xiàng)。它是使用屬性值為<input>的元素創(chuàng)建的。typecheckbox

以下是可用于收集有關(guān)用戶愛好的信息的復(fù)選框示例：

<form>
    <input type="checkbox" name="sports" id="soccer">
    <label for="soccer">Soccer</label>
    <input type="checkbox" name="sports" id="cricket">
    <label for="cricket">Cricket</label>
    <input type="checkbox" name="sports" id="baseball">
    <label for="baseball">Baseball</label>
</form>

— 上述示例的輸出將如下所示：

文件選擇框

文件字段允許用戶瀏覽本地文件并將其作為表單數(shù)據(jù)的附件發(fā)送。諸如 Google Chrome 和 Firefox 之類的 Web 瀏覽器使用瀏覽按鈕呈現(xiàn)文件選擇輸入字段，使用戶能夠?yàn)g覽本地硬盤驅(qū)動(dòng)器并選擇文件。

這也是使用屬性值設(shè)置為的<input>元素創(chuàng)建的。typefile

<form>
    <label for="file-select">Upload:</label>
    <input type="file" name="upload" id="file-select">
</form>

— 上述示例的輸出將如下所示：

文本區(qū)域

Textarea 是一個(gè)多行文本輸入控件，允許用戶輸入多行文本。多行文本輸入控件是使用<textarea>元素創(chuàng)建的。

<form>
    <label for="address">Address:</label>
    <textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>

— 上述示例的輸出將如下所示：

選擇框

選擇框是選項(xiàng)的下拉列表，允許用戶從選項(xiàng)的下拉列表中選擇一個(gè)或多個(gè)選項(xiàng)。選擇框是使用<select>元素和<option>元素創(chuàng)建的。

<option>元素中的元素<select>定義了每個(gè)列表項(xiàng)。

<form>
    <label for="city">City:</label>
    <select name="city" id="city">
        <option value="sydney">Sydney</option>
        <option value="melbourne">Melbourne</option>
        <option value="cromwell">Cromwell</option>
    </select>
</form>

— 上述示例的輸出將如下所示：

提交和重置按鈕

提交按鈕用于將表單數(shù)據(jù)發(fā)送到 Web 服務(wù)器。單擊提交按鈕時(shí)，表單數(shù)據(jù)將發(fā)送到表單action屬性中指定的文件以處理提交的數(shù)據(jù)。

重置按鈕將所有表單控件重置為默認(rèn)值。通過在文本字段中輸入您的姓名來嘗試以下示例，然后單擊提交按鈕以查看它的運(yùn)行情況。

<form action="action.php" method="post">
    <label for="first-name">First Name:</label>
    <input type="text" name="first-name" id="first-name">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

在上面的文本字段中輸入您的姓名，然后單擊提交按鈕以查看它的運(yùn)行情況。

分組表單控件

<legend>您還可以使用該元素在 Web 表單中對(duì)邏輯相關(guān)的控件和標(biāo)簽進(jìn)行分組。將表單控件分組到類別使用戶更容易找到使表單更加用戶友好的控件。讓我們?cè)囋囅旅娴睦樱纯此侨绾喂ぷ鞯模?/p>

<form>
    <fieldset>
        <legend>Contact Details</legend>
        <label>Email Address: <input type="email" name="email"></label>
        <label>Phone Number: <input type="text" name="phone"></label>
    </fieldset>
</form>

常用表單屬性

下表列出了最常用的表單元素的屬性：

以上就是關(guān)于“創(chuàng)建表單HTML的方法”介紹，大家如果想了解更多相關(guān)知識(shí)，不妨來關(guān)注一下動(dòng)力節(jié)點(diǎn)的HTML教程，里面的課程內(nèi)容更加全面，希望對(duì)大家能夠有所幫助。