iOS: input labels don't focus on associated fields

[bradfrost]

trafficstars

Summary

Tapping a label doesn't put focus in the associated input field in iOS.

Platforms

iOS

How to Reproduce

Add
<label for="field">Label</label> <input id="field" type="text" />

In normal browsers, clicking on the label will focus you in the associated field declared by the for attribute. However, tapping the label in iOS does nothing.

Reduced Example

http://bradfrostweb.com/demo/ios-focus/

Workarounds

Adding a script: How to fix the broken iPad form label click issue

[toddparker]

This one is a real pain for checkboxes and radiobuttons because the label doesn't toggle the state of the controls. Sure makes hitting a native check or radio really tricky with a finger.

[hober]

This is not a bug.

Tapping a label and having the labelled control be activated is specified to be platform-dependent, because the behavior is supposed to match local platform conventions. Browsers on Windows differ from browsers on Mac which differ from mobile WebKit in this.

[toddparker]

This behavior may not be part of the spec, but it is convention on all other browsers. It's mystifying that a touch based browser like mobile Webkit would break with convention to make it more difficult to tap small UI elements like checkboxes and radiobuttons. What could be the rationale?

[johnholtripley]

There is a workaround - adding an empty 'onclick' to a parent element worked for me. More ideas here: http://stackoverflow.com/questions/5421659/html-label-command-doesnt-work-in-iphone-browser

[SelenIT]

It seems that in iOS 7 this behavior has been fixed. In your example both labels work identically for me (iOS 7.1.2 on iPad Mini 1).