单击时,输入字段/文本框不会保持选中状态

Question

我是HTML的新手.这可能是非常基本的,但无论我做什么,我都无法让我的形式发挥作用.每当我单击输入字段(文本区域)时,只要我按住鼠标,输入字段就会保持选中状态,但每当我释放它时,焦点就会直接返回到表单的第一个字段.这是HTML/CSS吗？我不知道如何解决它.

这是我正在处理的表单的URL(http://www.seanmccully.com/apps/langham/tea.html) - 但它现在可能已修复.您可以看到您无法选择名字,姓氏,城市,电子邮件(您只能通过标签输入数据).

Answer 1

这是因为您已将所有表单元素包装在一个label元素中.摆脱它,它会工作正常.

甲label元件只能与单一形式的控制相关联,并且点击一个label会给聚焦到其相关联的控制.由于您的控件中有多个控件label,因此它与第一个控件相关联,并且当点击事件向上传播时,任何其他表单控件的点击将到达标签并使其关注其关联控件(第一个).

如果要使用label元素,则每个控件都需要一个元素.您可以将span元素更改为label元素,并使用该for属性将该标签与控件相关联,或者可以将每个控件包装在标签中:

<label class="labelstyle" for="fname">First Name</label>
<input name="fname" type="text" class="fieldstyle" id="fname" size="25" maxlength="50"/>

<!-- or -->

<label class="labelstyle">
    First Name <input name="fname" type="text" class="fieldstyle" id="fname" size="25" maxlength="50"/>
</label>