文本输入字段是联系表单的最常见因素。您可能知道,HTML有两种类型的文本输入字段元素:<input type="text">用于单行输入; 并<textarea>用于多行输入。
联系表单7提供了几种类型的表单标记,用于表示这两种类型的HTML元素:文本字段(text和text*); 电子邮件领域(email和email*); 电话号码字段(tel和tel*); URL字段(url和url*); 和textarea(textarea和textarea*)。在本文中,我将向您展示有关这些表单标记的用法和语义的详细信息。
文本域
两个text和text*用于单行输入和接受任何形式的文字。它们之间的区别在于它text*意味着必填字段。在Contact Form 7的约定中,带有星号’*’的所有类型的标签表示这些是必填字段。
| 选项 | 例子 | 描述 |
|---|---|---|
| id:(id) | id:foo |
idinput元素的属性值。 |
| 课程:( 上课) | class:bar |
classinput元素的属性值。要设置两个或更多类,可以使用多个class:选项,例如[text your-text class:y2008 class:m01 class:d01]。 |
| minlength:(num) | minlength:10 |
此输入字段允许的最小长度。 |
| maxlength:(num) | maxlength:90 |
此输入字段允许的最大长度。 |
| 大小:(num) | size:50 |
此输入字段的大小 HTML属性的值。 |
| 的Akismet:作者 | 使用Akismet的选项。 | |
| 占位符 水印 |
将值用作占位符文本而不是默认值。watermark作为占位符的别名 | |
| 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:bar |
classinput元素的属性值。要设置两个或更多类,可以使用多个class:选项,例如[email your-email class:y2008 class:m01 class:d01]。 |
| minlength:(num) | minlength:10 |
此输入字段允许的最小长度。 |
| maxlength:(num) | maxlength:90 |
此输入字段允许的最大长度。 |
| 大小:(num) | size:50 |
此输入字段的大小 HTML属性的值。 |
| Akismet在:AUTHOR_EMAIL | 使用Akismet的选项。 | |
| 占位符 水印 |
将值用作占位符文本而不是默认值。watermark作为占位符的别名 | |
| 默认:USER_EMAIL | 用于将登录用户信息检索为字段的默认值的选项。 |
这些字段可以具有零个或一个值,该值将用作输入字段的默认值。
例:
[email your-email "example@example.com"]
网址字段
这两个url和url*是单行输入,只接受URL。url*是必填字段。
| 选项 | 例子 | 描述 |
|---|---|---|
| id:(id) | id:foo |
idinput元素的属性值。 |
| 课程:( 上课) | class:bar |
classinput元素的属性值。要设置两个或更多类,可以使用多个class:选项,例如[url your-url class:y2008 class:m01 class:d01]。 |
| minlength:(num) | minlength:10 |
此输入字段允许的最小长度。 |
| maxlength:(num) | maxlength:90 |
此输入字段允许的最大长度。 |
| 大小:(num) | size:50 |
此输入字段的大小 HTML属性的值。 |
| Akismet在:author_url | 使用Akismet的选项。 | |
| 占位符 水印 |
将值用作占位符文本而不是默认值。watermark作为占位符的别名 | |
| 默认:user_url | 用于将登录用户信息检索为字段的默认值的选项。 |
这些字段可以具有零个或一个值,该值将用作输入字段的默认值。
例:
[url your-url "http://example.com"]
电话号码字段
这两个tel和tel*是单行输入,只接受电话号码。tel*是必填字段。
| 选项 | 例子 | 描述 |
|---|---|---|
| id:(id) | id:foo |
idinput元素的属性值。 |
| 课程:( 上课) | class:bar |
classinput元素的属性值。要设置两个或更多类,可以使用多个class:选项,例如[url your-url class:y2008 class:m01 class:d01]。 |
| minlength:(num) | minlength:10 |
此输入字段允许的最小长度。 |
| maxlength:(num) | maxlength:90 |
此输入字段允许的最大长度。 |
| 大小:(num) | size:50 |
此输入字段的大小 HTML属性的值。 |
| 占位符 水印 |
将值用作占位符文本而不是默认值。watermark作为占位符的别名 |
这些字段可以具有零个或一个值,该值将用作输入字段的默认值。
例:
[tel your-tel "123-456-7890"]
多行文本
这两个textarea和textarea*是一个多行输入和接受任何形式的文本。textarea*是必填字段。
| 选项 | 例子 | 描述 |
|---|---|---|
| id:(id) | id:foo |
idtextarea元素的属性值。 |
| 课程:( 上课) | class:bar |
classtextarea元素的属性值。要设置两个或更多类,可以使用多个class:选项,例如[textarea your-text class:y2008 class:m01 class:d01]。 |
| minlength:(num) | minlength:10 |
此输入字段允许的最小长度。 |
| maxlength:(num) | maxlength:90 |
此输入字段允许的最大长度。 |
| (cols) x (行) | 40x1080xx4 |
文本区域的列(宽度)和行(高度)。你可以省略其中一个。 |
| 占位符 水印 |
将值用作占位符文本而不是默认值。watermark作为占位符的别名 |
这些字段可以包含零个或一个值,该值将用作输入字段的默认值。
例:
[textarea your-message 40x10 "your message here ..."]
除此之外,下面是设置默认值的另一种方法:
[textarea your-message]
foo
bar
[/textarea]
通过这种方式,您可以设置多行默认值。
演示
注意:这是一个演示。这个表格实际上并不发送邮件。
查看以上表格的来源:
Your Name (required)
[text* your-name size:30 maxlength:60]
Your Email (required)
[email* your-email "yourmail@example.com"]
Your Message
[textarea your-message]
default value for a textarea
can be multi-line
like this
[/textarea]
[submit "Send"]
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/261593.html