文本字段

文本字段

文本輸入字段是聯繫表單中最常見的因素。您可能知道,HTML 有兩種類型的文本輸入字段元素:<input type="text"> 用於單行輸入;和<textarea> 多行輸入。

Contact Form 7 提供了幾種類型的表單標籤來表示這兩種類型的 HTML 元素:文本字段(text 和 text*);電子郵件字段(email 和 email*);電話號碼字段(tel 和 tel*);URL 字段(url 和 url*);和文本區域(textarea 和 textarea*) 。在本文中,我將向您展示有關這些表單標籤的用法和語義的詳細信息。

文本域

兩個 text 和 text*用於單行輸入和接受任何形式的文字。它們之間的區別在於表示 text*必填字段。在聯繫表格 7 的約定中,所有類型的帶有星號 「*」 的標籤表示這些都是必填字段。

選項 例子 描述
id:(ID) id:foo idinput 元素的屬性值。
class:(班級) class:bar classinput 元素的屬性值。要設置兩個或更多類,您可以使用多個 class: 選項,例如 [text your-text class:y2008 class:m01 class:d01].
minlength:(數量) minlength:10 此輸入字段允許的最小長度
maxlength:(數量) maxlength:90 此輸入字段允許的最大長度
size:(數量) size:50 size 此輸入字段的 HTML 屬性值。
akismet:author 使用 Akismet 的選項。
placeholder
watermark
將該值用作佔位符文本而不是默認值。 watermark 作為 的別名工作 placeholder 。
default:user_login
default:user_first_name
default:user_last_name
default:user_nickname
default:user_display_name
用於檢索登錄用户信息作為字段默認值的選項。

這些字段的值可以為零或一,該值將用作輸入字段的默認值。

例子:

[text* your-name class:required "John Smith"]

電子郵件字段

這兩個 email 和 email*是單行輸入,只接受電子郵件地址。 email*是必填字段。

選項 例子 描述
id:(ID) id:foo idinput 元素的屬性值。
class:(班級) class:bar classinput 元素的屬性值。要設置兩個或更多類,您可以使用多個 class: 選項,例如 [email your-email class:y2008 class:m01 class:d01].
minlength:(數量) minlength:10 此輸入字段允許的最小長度
maxlength:(數量) maxlength:90 此輸入字段允許的最大長度
size:(數量) size:50 size 此輸入字段的 HTML 屬性值。
akismet:author_email 使用 Akismet 的選項。
placeholder
watermark
將該值用作佔位符文本而不是默認值。 watermark 作為 的別名工作 placeholder 。
default:user_email 用於檢索登錄用户信息作為字段默認值的選項。

這些字段的值可以為零或一,該值將用作輸入字段的默認值。

例子:

[email your-email "[email protected]"]

網址字段

這兩個 url 和 url*是單行輸入,只接受 URL 。 url*是必填字段。

選項 例子 描述
id:(ID) id:foo idinput 元素的屬性值。
class:(班級) class:bar classinput 元素的屬性值。要設置兩個或更多類,您可以使用多個 class: 選項,例如 [url your-url class:y2008 class:m01 class:d01].
minlength:(數量) minlength:10 此輸入字段允許的最小長度
maxlength:(數量) maxlength:90 此輸入字段允許的最大長度
size:(數量) size:50 size 此輸入字段的 HTML 屬性值。
akismet:author_url 使用 Akismet 的選項。
placeholder
watermark
將該值用作佔位符文本而不是默認值。 watermark 作為 的別名工作 placeholder 。
default:user_url 用於檢索登錄用户信息作為字段默認值的選項。

這些字段的值可以為零或一,該值將用作輸入字段的默認值。

例子:

[url your-url "http://example.com"]

電話號碼字段

這兩個 tel 和 tel*是單行輸入,只接受電話號碼。 tel*是必填字段。

選項 例子 描述
id:(ID) id:foo idinput 元素的屬性值。
class:(班級) class:bar classinput 元素的屬性值。要設置兩個或更多類,您可以使用多個 class: 選項,例如 [url your-url class:y2008 class:m01 class:d01].
minlength:(數量) minlength:10 此輸入字段允許的最小長度
maxlength:(數量) maxlength:90 此輸入字段允許的最大長度
size:(數量) size:50 size 此輸入字段的 HTML 屬性值。
placeholder
watermark
將該值用作佔位符文本而不是默認值。 watermark 作為 的別名工作 placeholder 。

這些字段的值可以為零或一,該值將用作輸入字段的默認值。

例子:

[tel your-tel "123-456-7890"]

文本區

這兩個 textarea 和 textarea*是一個多行輸入和接受任何形式的文本。 textarea*是必填字段。

選項 例子 描述
id:(ID) id:foo idtextarea 元素的屬性值。
class:(班級) class:bar classtextarea 元素的屬性值。要設置兩個或更多類,您可以使用多個 class: 選項,例如 [textarea your-text class:y2008 class:m01 class:d01].
minlength:(數量) minlength:10 此輸入字段允許的最小長度
maxlength:(數量) maxlength:90 此輸入字段允許的最大長度
placeholder
watermark
將該值用作佔位符文本而不是默認值。 watermark 作為 的別名工作 placeholder 。

這些字段可以有零個或一個值,該值將用作輸入字段的默認值。

例子:

[textarea your-message "your message here …"]

還有另一種方法可以為 textarea 字段設置默認值:

[textarea your-message]   foo   bar  [/textarea]

通過這種方式,您可以設置多行默認值。

演示

注意:這是一個演示。這種形式實際上不發送郵件。

 

查看上述表格的來源:

您的姓名 (必填)[text* your-name size:30 maxlength:60]    您的邮箱 (必填)[email* your-email "[email protected]"]    您的留言  [textarea your-message]  default value for a textarea  can be multi-line  like this  [/textarea]    [submit "发送"]