html输入表,HTML 表单输入

HTML表单输入

如果将type属性设置为input元素的文本，浏览器将显示单行文本框。

以下列表总结了可用于文本输入元素类型的属性。dirname - 控制文本方向性。

list - 指定为此元素提供值的datalist元素的ID。

maxlength - 指定用户可以在文本框中输入的最大字符数。

pattern - 指定正则表达式模式以用于输入验证。

placeholder - 指定一个提示，告诉用户您希望输入的种类。

readonly - 如果存在，此属性使文本框为只读。

required - 指定用户必须输入值以进行输入验证。

size - 指定元素在文本框中可见的字符数中的宽度。

value - 指定文本框的初始值。

文本输入大小和最大长度

有两个属性对文本框的大小有影响。

maxlength属性指定用户可以输入的最大字符数，而size属性指定文本框可以显示的字符数。

对于这两个属性，字符数表示为正整数值。

以下代码显示了正在使用的这两个属性。

HTML>

 Name:

 City:

 Fruit:

Submit Vote

第一个输入元素具有值为10的maxlength属性。

第二个输入元素的size属性的值为10.这意味着浏览器必须确保其大小的文本框，以便它可以显示十个字符。

size属性不会对用户可以输入的字符数量应用任何限制。

第三个输入元素具有两个大小设置，效果是：固定屏幕上的大小，并限制用户可以输入的字符数。

文本输入占位符和值

您可以使用value属性指定默认值，并使用placeholder属性为用户提供有用的提示。

以下代码显示了正在使用的这些属性。

HTML>

 Name:

 City:

 Fruit:

Submit Vote

当您使用按钮元素重置表单时，浏览器将恢复占位符和默认值。

文本输入数据列表

list属性允许您指定datalist元素的id值，这将用于建议用户可能的值。

对于text类型，值显示为自动完成建议。您可以通过选项元素指定要给用户的值。

datalist可以有option元素。

option元素可以具有局部属性:disabled，selected，label，value。

以下代码显示用于文本框创建一组值的datalist和option元素。

HTML>

 Name: 

id="name" name="name" />

 City: 

id="city" name="city" />

 Fruit: 

name="fave" />

Submit Vote

Second

datalist中包含的每个option元素表示要向用户建议的值。

value属性指定将在输入元素中使用的数据值(如果选择了该选项)。

您可以使用不同的label来描述该option，方法是使用label属性或在选项元素中定义内容。

文本输入只读和禁用

readonly和 disabled属性允许您创建用户无法编辑的文本框。每个都创建不同的视觉效果。

以下代码使用readonly和disabled属性。

HTML>

 Name: 

id="name" name="name" />

 City: 

id="city" name="city" />

 Fruit: 

Submit Vote

来自输入元素的数据(具有disabled属性)不会提交到服务器。

输入自动对焦

您可以选择在显示表单时浏览器专注于哪个输入元素。

以下代码使用autofocus属性设置自动对焦输入元素。

HTML>

Fruit: 

name="fave" />

Name: 

Submit Vote

您可以将autofocus属性仅应用于一个input元素。如果尝试多次应用元素，最后一个获得焦点。

使用tabindex属性设置制表顺序

以下代码显示如何使用tabindex属性设置Tabbing Order。

Tabbing Order using the tabindex Attribute

 One

 Two

 Three

 Four

 Five

 Six

 Seven

 Eight

 Nine

 Ten