屬性在文本字段中的重要性name
提交表單并將其發(fā)送到服務(wù)器時,服務(wù)器需要區(qū)分和區(qū)分它收集的不同類型的提交數(shù)據(jù)。
例如,它需要知道哪個是用戶名,哪個是密碼,哪個是電子郵件地址。
這意味著每個文本字段都需要一個屬性和一個值,以使提交的數(shù)據(jù)類型更清晰。name
例如,您可以使用以下內(nèi)容提示某人在文本字段中輸入其全名:
假設(shè)用戶在文本字段中輸入名稱“約翰·貝克斯利”。然后,這將成為屬性的值。name
如前所述,表單中的數(shù)據(jù)以名稱-值對的形式發(fā)送。在這種情況下,服務(wù)器將知道用戶的 是 ,具體來說它看起來像 。name John Bexley name=John Bexley
再舉個例子:
上面的代碼有兩個單獨的文本字段,供用戶分別輸入他們的名字和姓氏。
如果他們輸入“John”作為名字,則發(fā)送到服務(wù)器的名稱-值對將是 。first_name=John"
如果他們輸入“Bexley”作為姓氏,則發(fā)送到服務(wù)器的名稱值對將是 。last_name=Bexley
如何使文本信息成為必需
您可以將其設(shè)置為某些字段是必需的,并且需要由用戶填寫。
HTML5 引入了客戶端驗證。
此功能在用戶未填寫必填字段或未正確輸入信息時顯示消息。這也意味著他們將無法提交表單。
要啟用此功能,您需要做的就是將屬性添加到 元素。此屬性不需要具有值。required<input>
請記住,向元素添加多個屬性時,不必按特定順序添加元素。<input>
看看如果用戶不填寫其中一個字段會發(fā)生什么:
將顯示一條消息,如果必填字段尚未完成,用戶將無法提交表單。
如何在文本框中設(shè)置最小和最大字符數(shù)
您可以指定用戶可以在文本字段中輸入的最小和最大字符數(shù)。
若要創(chuàng)建最小字符數(shù),請使用 屬性。minlength
例如,您可以讓它使用戶的用戶名長度至少為三個字符:
如果用戶名短于三個字符,則用戶將無法提交表單:
要限制用戶在文本字段中輸入的字符數(shù),請使用 屬性。maxlength
將 和 屬性組合在一起的示例可能如下所示:minlength maxlength
在上面的示例中,用戶的用戶名長度必須至少為 3 個字符,并且不得超過 20 個字符。
如何形成控件label
到目前為止,我一直在使用元素在文本框之前編寫一些文本,以這種方式提示用戶并讓他們知道他們需要輸入的內(nèi)容。<p>
但這不是最佳實踐,也無法訪問。
每個窗體控件(在本例中為每個文本字段)都應(yīng)有自己的元素。<label>
這使得使用輔助技術(shù)(如屏幕閱讀器)的視障用戶可以訪問表單。
使用它的一種方法是嵌套任何介紹性文本和 元素,如下所示:<input type="text"><label>
使用元素并具有相同結(jié)果的另一種方法是將其與元素分開。<label><input>
在這種情況下,需要將屬性添加到 ,并將屬性添加到 中,以便將兩者彼此關(guān)聯(lián)。for<label>id<input>的值將與 相同。fo rid
結(jié)論
總而言之,要在HTML中創(chuàng)建文本輸入字段,您至少需要:
元素,通常位于 元素內(nèi)部。<input><form>
將屬性設(shè)置為具有 值 。這將創(chuàng)建一個單行文本輸入字段。type text
不要忘記添加屬性。這將標(biāo)識所創(chuàng)建的每個窗體控件的信息,并使服務(wù)器更清楚地了解情況。name