Databases
StackOverflow2013
Postsdbo
POGood HTML and CSS to use with <input type="radio">?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGood HTML and CSS to use with <input type="radio">?
    text
    copied!<p>What's the best way to use <code>&lt;input type="radio"&gt;</code> in HTML?</p> <p>I'm looking for HTML that's semantically good, whose formatting is configurable via CSS.</p> <p>I want to be able to style/render it to look something like:</p> <pre><code> Car: (o) Yes (X) No (o) Maybe Train: (o) Yes (o) No (X) Maybe Address: [An input text box ] </code></pre> <p>Thinking of the CSS, I think that I'd like the labels on the left (e.g. "Car" and "Bus") to be in some kind of <code>text-align: right</code> block?</p> <p>I don't know about the radio buttons on the right: in some kind of <code>&lt;span&gt;</code> perhaps, with <code>"display: inline-block"</code>? Or <code>"white-space: pre"</code>?</p> <p>What kind of block-level tags (e.g. <code>&lt;p&gt;</code> or <code>&lt;div&gt;</code>) and/or other tags (e.g. <code>&lt;span&gt;</code> or <code>&lt;br/&gt;</code>) would you recommend?</p> <hr> <p><strong>Edit:</strong></p> <p>How about the following.</p> <p>HTML uses <code>&lt;legend&gt;</code>, like HTML is supposed to and as recommended in <a href="http://www.alistapart.com/articles/prettyaccessibleforms" rel="nofollow noreferrer">the alistapart article</a>:</p> <pre><code>&lt;fieldset&gt; &lt;legend&gt;Car&lt;/legend&gt; &lt;label&gt;&lt;input type="radio" name="car" value="yes"/&gt; Yes&lt;/label&gt; &lt;label&gt;&lt;input type="radio" name="car" value="no"/&gt; No&lt;/label&gt; &lt;label&gt;&lt;input type="radio" name="car" value="maybe"/&gt; Maybe&lt;/label&gt; &lt;/fieldset&gt; </code></pre> <p>To make it easer for Firefox to access/position the contents of the <code>&lt;legend&gt;</code>, place it within a <code>&lt;span&gt;</code>:</p> <pre><code>&lt;fieldset&gt; &lt;legend&gt;&lt;span&gt;Car&lt;/span&gt;&lt;/legend&gt; &lt;label&gt;&lt;input type="radio" name="car" value="yes"/&gt; Yes&lt;/label&gt; &lt;label&gt;&lt;input type="radio" name="car" value="no"/&gt; No&lt;/label&gt; &lt;label&gt;&lt;input type="radio" name="car" value="maybe"/&gt; Maybe&lt;/label&gt; &lt;/fieldset&gt; </code></pre> <p>Then, use the browser-specific CSS described in <a href="http://www.tyssendesign.com.au/articles/css/legends-of-style/" rel="nofollow noreferrer">Legends of Style Revised</a> to position the contents of the span to left of the fieldset.</p> <p>Does the CSS really have to be so complicated and browser-specific? What's the simplest CSS which ought theoretically to work, instead of the more-complicated CSS required to actually work with those imperfect browsers? If <code>&lt;legend&gt;</code> is hard to position then what's a good (semantic) alternative?</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