Input field/ text box won't stay selected when clicked
css, forms, html, input
Solution
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>
Problem
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).