分類
網頁製作/軟體開發知識

HTML 表單元素:創建用戶輸入表單和提交按鈕

在網頁開發中,表單是一個重要的元素,它允許用戶輸入數據並將其提交到後端處理。HTML 提供了一組表單元素,使我們能夠創建交互式的用戶界面。本文將介紹如何使用 HTML 表單元素來創建用戶輸入表單和提交按鈕。

一、創建表單

要創建一個表單,我們需要使用 HTML <form> 元素。以下是一個基本的表單結構:

<form>
  <!-- 表單元素 -->
</form>

<form> 元素中,我們可以添加各種表單元素,例如文本框、單選框、多選框等,以便用戶輸入數據。

二、添加文本框

文本框是最常用的表單元素之一,用戶可以在其中輸入文本。我們可以使用 HTML <input> 元素創建文本框。以下是一個示例:

<form>
  <label for="username">用戶名:</label>
  <input type="text" id="username" name="username">
</form>

上面的代碼創建了一個用戶名文本框。<label> 元素用於定義文本框的標籤,for 屬性指定了與文本框關聯的標籤。<input> 元素的 type 屬性設置為 "text",指定了文本框的類型。id 屬性是為了連接 <label> 元素和 <input> 元素,name 屬性是為了在提交表單時識別文本框的值。

三、添加提交按鈕

提交按鈕用於將表單數據提交到後端處理。我們可以使用 HTML <input> 元素的 type 屬性設置為 "submit" 創建提交按鈕。以下是一個示例:

<form>
  <!-- 表單元素 -->
  <input type="submit" value="提交">
</form>

上面的代碼創建了一個提交按鈕,顯示為 “提交”。當用戶點擊該按鈕時,表單的數據將被提交到後端處理。

四、完整的表單示例

現在,我們將結合前面的示例,創建一個包含用戶名和密碼輸入框以及提交按鈕的完整表單:

<form>
  <label for="username">用戶名:</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">密碼:</label>
  <input type="password" id="password" name="password"><br>

  <input type="submit" value="提交">
</form>

上面的代碼創建了一個包含用戶名和密碼輸入框以及提交按鈕的完整表單。用戶可以在文本框中輸入相應的值,然後點擊提交按鈕將數據提交到後端處理。

總結

通過 HTML 表單元素,我們可以創建用戶輸入表單和提交按鈕,實現與用戶的交互。在本文中,我們學習了如何使用 <form> 元素創建表單,以及如何使用 <input> 元素創建文本框和提交按鈕。這些是開發交互式網頁的基礎,通過學習和熟練應用,你可以創建更多功能強大的表單和用戶界面。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *