Question

I’m new to HTML. This is probably very basic, but no matter what I do, I can’t get my form to work. Whenever I click on an input field (text area), the input field will stay selected as long as I hold the mouse down, but whenever I release it, the focus goes right back to the first field of the form. Is this HTML/ CSS? I have no idea how to fix it.

This is the URL for the form I was working on (http://www.seanmccully.com/apps/langham/tea.html) — but it is probably fixed by now. You can see that you can’t select first name, last name, city, email (you can only enter data by tabbing).

Answer 1

It’s because you have wrapped all of the form elements in one label element. Get rid of that and it will work fine.

A label element can only be associated with a single form control, and clicking on a label will give focus to its associated control. Since you have multiple controls within your label, it is associated with the first, and as click events propagate up the DOM, clicks on any other form control will reach the label and cause it to give focus to its associated control (the first one).

If you want to use label elements, you will need one for each control. You could change your span elements to label elements, and use the for attribute to associate that label with a control, or you could wrap each control in a label:

<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>