2009-06-25 81 views
3

我看到一些代码,HTML表单代码,看起来像这样:什么是这些HTML表单域?

<form name="form1" method="post" action="action.php"> 
    <label for="name"> Name: <input type="text" name="name"> 
    <label for="email">Email: <input type="text" name="email"> 
</form> 

哪些形式为“名”? ( - > form1)

什么是标签标签? (我从来没有使用这一点,所以,我可能错了,当输入代码)

回答

6

标签是文本片段旁边输入字段 - 他们不看任何不同于普通文本,但:

  • 点击在他们把焦点放在该领域
  • 屏幕阅读器将它们作为相应字段的说明读出它们。

它们对CSS也很有用 - 通过使用标签,您可以轻松地设置独立于其他页面元素的字段标签。

form name属性可以更容易地从JavaScript引用表单(尽管这些日子您可以使用id)。

+0

感谢您的解释。你的答案已被评为这个问题的答案。 – jingleboy99 2009-06-25 08:21:10

+0

+1表示点击关注输入字段:小而重要的点(在其他高评分答案中未提及)。 http://www.google.fi/search?q=html+label+usability – Jonik 2009-06-25 09:32:11

+5

请注意,标签的for属性必须匹配输入的ID而非NAME。 – Quentin 2009-06-25 09:45:51

5

标签是将某个文本与表单元素相关联的标签。这是显示每个输入框的推荐方式 - 屏幕阅读器和其他辅助功能软件将能够使用此元素告诉用户输入框的用途。它的样式可以与页面上的其他元素相同,甚至不必紧挨着输入 - 只要名称相同,它就可以工作。请注意,这样做的正确的格式实际上应该是

<label for="name">Name:</label><input type="text" name="name" /> 
<label for="email">Email:</label><input type="text" name="email" /> 

对于标签元素的更多信息,请访问:http://www.w3.org/TR/html401/interact/forms.html#h-17.9 - 页面有大量的一切信息,做与HTML表单。

表单元素的name属性可以用于从javascript和css访问不同的表单,但不一定要包含它。根据http://www.w3.org/TR/html401/interact/forms.html#adef-name-FORM它仅包含向后兼容性 - 建议您使用id属性来代替(或者也可以)。

+0

那么,你是否建议我将标签标签包含在未来的每个html表单中? – jingleboy99 2009-06-25 08:20:38

2

标签将“Name:”字符串语义连接到由for属性指定的相应输入字段。详见w3c html documentation

此外,当用户点击标签时,相应的输入字段会被重点关注 - 这在表单可用性方面很重要。

2

表单名称用于唯一标识此表单,因此您可以在JavaScript中编写脚本时参考它。你也可以使用这个“id”属性,它没有区别。

一个标签元素的可用性,并没有提供任何不同于普通文本,但如果你填充相关输入的“id”属性的“for”属性,那么这些将被绑定在一起,使用户可以点击标签文本,它将关注适当的输入。

值得注意的是,您在问题中使用的标签代码不正确,因为您需要关闭标签标签后面的文本。

<label for="name">Name:</label><input id="name" type="text" name="name" />