StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You don't need to use JavaScript for this, when normal HTML elements can be used; with that in mind just use a <code>label</code> element, instead of an <code>a</code>, since your requirements are precisely met by the <code>label</code> element:</p> <pre><code><label for="commentnow">Post a comment</label> <textarea id="commentnow" name="comment" cols="45" rows="8" aria-required="true"></textarea> </code></pre> <p><a href="http://jsfiddle.net/davidThomas/uWQbZ/2/" rel="nofollow">JS Fiddle demo</a>.</p> <p>The <code>for</code> attribute of the <code>label</code> must be equal to the <code>id</code> of the element you want to focus on, and associate with, the <code>label</code>.</p> <p>In response to comment from OP (in comments, below):</p> <blockquote> <p>Two questions: How about compatibility and how can I make it a button where the text is clickable (cursor changes when hovering)...?</p> </blockquote> <p>To address compatibility, the <code>label</code> element's been around since HTML 4.01 and I've not come across a browser that doesn't work with it (including IE 7, I can't remember using it with IE 6 though).</p> <p>To make it appear like a button, just use CSS (in the same way you'd style an <code>a</code> element to appear like a button, for example:</p> <pre><code>label { color: #666; display: inline-block; padding: 0.3em 0.5em; border: 1px solid #aaa; background-color: #eee; margin: 0.5em; } label:hover, label:active, label:focus { color: #f90; box-shadow: 0 0 0.3em #f90; } </code></pre> <p><a href="http://jsfiddle.net/davidThomas/uWQbZ/8/" rel="nofollow">JS Fiddle demo</a>, this isn't a particularly beautiful example, but does show that styling possibilities both <em>exist</em> and are no different than any other element in that regard.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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