HTML表格

探索如何在HTML和所有表單元素標籤中使用表單

表單是您與使用Web技術構建的頁面或應用程序進行交互的方式。

您具有一組控件,並且在提交表單時,通過單擊“提交”按鈕或以編程方式,瀏覽器會將數據發送到服務器。

默認情況下,此數據發送會導致在發送數據後重新加載頁面,但是使用JavaScript可以更改此行為(在本書中不做介紹)。

使用form標籤:

<form>
	...
</form>

默認情況下,表單是使用GET HTTP方法提交的。這有其缺點,通常您要使用POST。

您可以將表單設置為在提交時使用POSTmethod屬性:

<form method="POST">
	...
</form>

使用GET或POST將表單提交到其駐留的相同URL。

因此,如果表格位於https://flaviocopes.com/contacts頁面上,按“提交”按鈕將向該URL發出請求。

這可能導致什麼都不會發生。

您需要服務器端的東西來處理請求,通常您會在專用的URL上“監聽”那些表單提交事件。

您可以通過action範圍:

<form action="/new-contact" method="POST">
	...
</form>

這將導致瀏覽器使用POST向表單提交表單數據。/new-contact相同來源的網址。

如果來源(協議+域+端口)為https://flaviocopes.com(默認為端口80),這意味著會將表單數據發送到https://flaviocopes.com/new-contact

我談到了數據。哪些數據?

用戶通過Web平台上可用的控件集來提供數據:

  • 輸入框(單行文本)
  • 文字區域(多行文字)
  • 選擇框(從下拉菜單中選擇一個選項)
  • 單選按鈕(從始終可見的列表中選擇一個選項)
  • 複選框(選擇零,一個或多個選項)
  • 文件上傳
  • 和更多!

讓我們在以下表單字段概述中介紹其中的每一個。

input標籤

input字段是使用最廣泛的表單元素之一。這也是一個非常通用的元素,它可以根據type屬性。

默認行為是單行文本輸入控件:

<input />

等效於使用:

<input type="text" />

與後面的所有其他字段一樣,您需要給該字段命名,以便在提交表單時將其內容髮送到服務器:

<input type="text" name="username" />

placeholder屬性用於在字段為空時以淺灰色顯示文本。在向用戶提示輸入內容時很有用:

<input type="text" name="username" placeholder="Your username" />

電子郵件

使用type="email"在提交之前,它將在客戶端(在瀏覽器中)驗證電子郵件的正確性(語義正確性,不能確保電子郵件地址存在)。

<input type="email" name="email" placeholder="Your email" />

密碼

使用type="password"將使輸入的每個鍵都顯示為星號(*)或點,這對於承載密碼的字段很有用。

<input type="password" name="password" placeholder="Your password" />

號碼

您可以讓輸入元素僅接受數字:

<input type="number" name="age" placeholder="Your age" />

您可以指定可接受的最小值和最大值:

<input type="number" name="age" placeholder="Your age" min="18" max="110" />

step屬性有助於識別不同值之間的步驟。例如,它以5的步長接受10到50之間的值:

<input type="number" name="a-number"  min="10" max="50" step="5" />

隱藏的領域

可以向用戶隱藏字段。提交表單後,它們仍將發送到服務器:

<input type="hidden" name="some-hidden-field" value="some-value" />

這通常用於存儲諸如CSRF令牌之類的值,用於安全性和用戶標識,甚至使用特殊技術來檢測發送垃圾郵件的機器人。

它也可以僅用於識別表單及其動作。

設定默認值

所有這些字段均接受預定義的值。如果用戶不更改它,那麼它將是發送到服務器的值:

<input type="number" name="age" value="18" />

如果設置了佔位符,則當用戶清除輸入字段值時,將顯示該值:

<input type="number" name="age" placeholder="Your age" value="18" />

表格提交

type="submit"字段是一個按鈕,一旦被用戶按下,就會提交表單:

<input type="submit">

value屬性設置按鈕上的文本,如果缺少該文本,則會顯示“提交”文本:

<input type="submit" value="Click me">

表格驗證

瀏覽器為表單提供客戶端驗證功能。

您可以根據需要設置字段,以確保將其填充,並針對每個字段的輸入強制採用特定格式。

讓我們看看兩個選項。

根據需要設置字段

required屬性可幫助您進行驗證。如果未設置該字段,則客戶端驗證將失敗,並且瀏覽器不會提交表單:

<input type="text" name="username" required />

強制執行特定格式

我描述了type="email"上面的字段。它會根據規範中設置的格式自動驗證電子郵件地址。

在裡面type="number"領域,我提到了minmax屬性以限制輸入到區間的值。

您可以做更多。

您可以在任何字段上強制使用特定格式。

pattern屬性使您能夠設置正則表達式來驗證值。

我建議閱讀我的正則表達式指南,網址為flaviocopes.com/javascript-regular-expressions/

模式=“ https://.*”

<input type="text" name="username" pattern="[a-zA-Z]{8}" />

其他領域

文件上傳

您可以從本地計算機加載文件,然後使用type="file"輸入元素:

<input type="file" name="secret-documents">

您可以附加多個文件:

<input type="file" name="secret-documents" multiple>

您可以使用accept屬性。這接受圖像:

<input type="file" name="secret-documents" accept="image/*">

您可以使用特定的MIME類型,例如application/json或將文件擴展名設置為.pdf。或設置多個文件擴展名,如下所示:

<input type="file" name="secret-documents" accept=".jpg, .jpeg, .png">

鈕扣

type="button"輸入字段可用於向表單添加不是提交按鈕的其他按鈕:

<input type="button" value="Click me">

它們用於使用JavaScript以編程方式執行某些操作。

有一個特殊的字段呈現為按鈕,其特殊動作是清除整個表單並將字段的狀態恢復為初始狀態:

<input type="reset">

單選按鈕

單選按鈕用於創建一組選項,其中一個選項被按下,其他所有選項均被禁用。

這個名字來自具有這種接口的老式汽車收音機。

您定義了一組type="radio"輸入都相同name屬性,與眾不同value屬性:

<input type="radio" name="color" value="yellow">
<input type="radio" name="color" value="red">
<input type="radio" name="color" value="blue">

表單提交後,color數據屬性將具有一個單一值。

總會檢查一個元素。第一項是默認情況下選中的項。

您可以使用checked屬性。每個無線電輸入組只能使用一次。

選框

與單選框相似,但是它們允許選擇多個值,或者根本不選擇。

您定義了一組type="checkbox"輸入都相同name屬性,與眾不同value屬性:

<input type="checkbox" name="color" value="yellow">
<input type="checkbox" name="color" value="red">
<input type="checkbox" name="color" value="blue">

默認情況下,所有這些複選框都不會選中。使用checked屬性以在頁面加載時啟用它們。

由於此輸入字段允許多個值,因此在表單提交時,這些值將作為數組發送到服務器。

日期和時間

我們有一些輸入類型可以接受日期值。

type="date"輸入字段允許用戶輸入日期,並在需要時顯示日期選擇器:

<input type="date" name="birthday">

type="time"輸入字段允許用戶輸入時間,並在需要時顯示時間選擇器:

<input type="time" name="time-to-pickup">

type="month"輸入字段允許用戶輸入月份和年份:

<input type="month" name="choose-release-month">

type="week"輸入字段允許用戶輸入一周和一年:

<input type="week" name="choose-week">

所有這些字段均允許限制範圍和每個值之間的步長。我建議檢查MDN以獲取有關其用法的詳細信息。

type="datetime-local"字段可讓您選擇日期和時間。

<input type="datetime-local" name="date-and-time">

這是測試所有頁面的頁面:https://codepen.io/flaviocopes/pen/ZdWQPm

選色器

您可以讓用戶使用type="color"元素:

<input type="color" name="car-color">

您可以使用value屬性:

<input type="color" name="car-color" value="#000000">

瀏覽器將負責向用戶顯示顏色選擇器。

範圍

該輸入元素顯示一個滑塊元素。人們可以使用它從開始值到結束值:

<input type="range" name="age" min="0" max="100" value="30">

您可以提供一個可選步驟:

<input type="range" name="age" min="0" max="100" value="30" step="10">

電話

type="tel"輸入字段用於輸入電話號碼:

<input type="tel" name="telephone-number">

使用的主要賣點tel超過text在移動設備上,設備可以選擇顯示數字鍵盤。

指定一個pattern用於其他驗證的屬性:

<input type="tel" pattern="[0-9]{3}-[0-9]{8}" name="telephone-number">

網址

type="url"字段用於輸入URL。

<input type="url" name="website">

您可以使用pattern屬性:

<input type="url" name="website"  pattern="https://.*">

textarea標籤

textarea元素允許用戶輸入多行文本。相比input,它需要一個結束標記:

<textarea></textarea>

您可以使用CSS設置尺寸,也可以使用rowscols屬性:

<textarea rows="20" cols="10"></textarea>

與其他表單標籤一樣,name屬性確定發送到服務器的數據中的名稱:

<textarea name="article"></textarea>

select標籤

該標籤用於創建下拉菜單。

用戶可以選擇可用的選項之一。

每個選項都是使用option標籤。您為選擇添加一個名稱,並為每個選項添加一個值:

<select name="color">
	<option value="red">Red</option>
	<option value="yellow">Yellow</option>
</select>

您可以將選項設置為禁用:

<select name="color">
	<option value="red" disabled>Red</option>
	<option value="yellow">Yellow</option>
</select>

您可以有一個空選項:

<select name="color">
	<option value="">None</option>
	<option value="red">Red</option>
	<option value="yellow">Yellow</option>
</select>

可以使用optgroup標籤。每個選項組都有一個label屬性:

<select name="color">
	<optgroup label="Primary">
		<option value="red">Red</option>
		<option value="yellow">Yellow</option>
		<option value="blue">Blue</option>
	</optgroup>
	<optgroup label="Others">
		<option value="green">Green</option>
		<option value="pink">Pink</option>
	</optgroup>
</select>

免費下載我的HTML手冊


更多HTML教程: