Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Generally it's done for the purpose of extension of the input control surface. When there is a radio button or a checkbox, everything that is inside <code>&lt;label for="given_control"&gt;&lt;/label&gt;</code> engages control. </p> <p>Ok, one more time: Now control surfaces are seen in grey (If Your CSS is not disabled).If You want control to be sensitive to the clicks on the both sides of control, enclose <code>&lt;input&gt;</code> between label tags <code>&lt;label...&gt;</code>, if its enough for one side of the control to be sensitive to the click, put <code>&lt;label&gt;</code> tags either before or after <code>&lt;input&gt;</code>. On the following example: First 2 controls are sensitive to the clicks on the both sides (including whitespace on the left) of the control, the third one - just for the left side. </p> <p>Check this example:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;title&gt;Visual Label example&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8" /&gt; &lt;style&gt; .control { background-color:#ddd } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form action="" method="post" name="f1"&gt; &lt;label class="control" for="id_1"&gt;1. &lt;input checked="checked" name="check" id="id_1" value="1" type="checkbox"&gt;One &lt;/label&gt; &lt;br /&gt; &lt;label class="control" for="id_2"&gt;2. &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;input name="check" id="id_2" value="2" type="checkbox"&gt;Two &lt;/label&gt; &lt;br /&gt; &lt;label class="control" for="id_3"&gt;3. &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/label&gt; &lt;input name="check" id="id_3" value="3" type="checkbox"&gt;Three &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload