Permalink
Browse files

Autocomplete / Form validation: Corrected markup for option elements (f…

…ixes #2721 and fixes #2823).
  • Loading branch information...
pjackson28 committed Aug 14, 2013
1 parent 9da3160 commit 6e6f36655569f7123f51b033c872bfd0695d42d4
@@ -115,28 +115,28 @@ <h2 class="background-dark margin-bottom-medium">Example</h2>
<input type="text" id="city" name="city" list="suggestions" />
<datalist id="suggestions">
<!--[if lte IE 9]><select><![endif]-->
<option label="" value="Barrie"></option>
<option label="" value="Calgary"></option>
<option label="" value="Charlottetown"></option>
<option label="" value="Chibougamau"></option>
<option label="" value="Chilliwack"></option>
<option label="" value="Cold Lake"></option>
<option label="" value="Dorval"></option>
<option label="" value="Edmonton"></option>
<option label="" value="Flin Flon"></option>
<option label="" value="Hamilton"></option>
<option label="" value="Iqualuit"></option>
<option label="" value="Ottawa"></option>
<option label="" value="Miramichi"></option>
<option label="" value="Montreal"></option>
<option label="" value="Red Deer"></option>
<option label="" value="St. John"></option>
<option label="" value="St. John's"></option>
<option label="" value="Toronto"></option>
<option label="" value="Vancouver"></option>
<option label="" value="Whitehorse"></option>
<option label="" value="Winnipeg"></option>
<option label="" value="Yellowknife"></option>
<option label="Barrie" value="Barrie"></option>
<option label="Calgary" value="Calgary"></option>
<option label="Charlottetown" value="Charlottetown"></option>
<option label="Chibougamau" value="Chibougamau"></option>
<option label="Chilliwack" value="Chilliwack"></option>
<option label="Cold Lake" value="Cold Lake"></option>
<option label="Dorval" value="Dorval"></option>
<option label="Edmonton" value="Edmonton"></option>
<option label="Flin Flon" value="Flin Flon"></option>
<option label="Hamilton" value="Hamilton"></option>
<option label="Iqualuit" value="Iqualuit"></option>
<option label="Ottawa" value="Ottawa"></option>
<option label="Miramichi" value="Miramichi"></option>
<option label="Montreal" value="Montreal"></option>
<option label="Red Deer" value="Red Deer"></option>
<option label="St. John" value="St. John"></option>
<option label="St. John's" value="St. John's"></option>
<option label="Toronto" value="Toronto"></option>
<option label="Vancouver" value="Vancouver"></option>
<option label="Whitehorse" value="Whitehorse"></option>
<option label="Winnipeg" value="Winnipeg"></option>
<option label="Yellowknife" value="Yellowknife"></option>
<!--[if lte IE 9]></select><![endif]-->
</datalist>
</form>
@@ -149,36 +149,36 @@ <h2 class="background-dark margin-bottom-medium">Usage</h2>
&lt;input type="text" id="city" name="city" list="suggestions" /&gt;
&lt;datalist id="suggestions"&gt;
&lt;!--[if lte IE 9]&gt;&lt;select&gt;&lt;![endif]--&gt;
&lt;option label="" value="Barrie"&gt;&lt;/option&gt;
&lt;option label="" value="Calgary"&gt;&lt;/option&gt;
&lt;option label="" value="Charlottetown"&gt;&lt;/option&gt;
&lt;option label="" value="Chibougamau"&gt;&lt;/option&gt;
&lt;option label="" value="Chilliwack"&gt;&lt;/option&gt;
&lt;option label="" value="Cold Lake"&gt;&lt;/option&gt;
&lt;option label="" value="Dorval"&gt;&lt;/option&gt;
&lt;option label="" value="Edmonton"&gt;&lt;/option&gt;
&lt;option label="" value="Flin Flon"&gt;&lt;/option&gt;
&lt;option label="" value="Hamilton"&gt;&lt;/option&gt;
&lt;option label="" value="Iqualuit"&gt;&lt;/option&gt;
&lt;option label="" value="Ottawa"&gt;&lt;/option&gt;
&lt;option label="" value="Miramichi"&gt;&lt;/option&gt;
&lt;option label="" value="Montreal"&gt;&lt;/option&gt;
&lt;option label="" value="Red Deer"&gt;&lt;/option&gt;
&lt;option label="" value="St. John"&gt;&lt;/option&gt;
&lt;option label="" value="St. John's"&gt;&lt;/option&gt;
&lt;option label="" value="Toronto"&gt;&lt;/option&gt;
&lt;option label="" value="Vancouver"&gt;&lt;/option&gt;
&lt;option label="" value="Whitehorse"&gt;&lt;/option&gt;
&lt;option label="" value="Winnipeg"&gt;&lt;/option&gt;
&lt;option label="" value="Yellowknife"&gt;&lt;/option&gt;
&lt;option label="Barrie" value="Barrie"&gt;&lt;/option&gt;
&lt;option label="Calgary" value="Calgary"&gt;&lt;/option&gt;
&lt;option label="Charlottetown" value="Charlottetown"&gt;&lt;/option&gt;
&lt;option label="Chibougamau" value="Chibougamau"&gt;&lt;/option&gt;
&lt;option label="Chilliwack" value="Chilliwack"&gt;&lt;/option&gt;
&lt;option label="Cold Lake" value="Cold Lake"&gt;&lt;/option&gt;
&lt;option label="Dorval" value="Dorval"&gt;&lt;/option&gt;
&lt;option label="Edmonton" value="Edmonton"&gt;&lt;/option&gt;
&lt;option label="Flin Flon" value="Flin Flon"&gt;&lt;/option&gt;
&lt;option label="Hamilton" value="Hamilton"&gt;&lt;/option&gt;
&lt;option label="Iqualuit" value="Iqualuit"&gt;&lt;/option&gt;
&lt;option label="Ottawa" value="Ottawa"&gt;&lt;/option&gt;
&lt;option label="Miramichi" value="Miramichi"&gt;&lt;/option&gt;
&lt;option label="Montreal" value="Montreal"&gt;&lt;/option&gt;
&lt;option label="Red Deer" value="Red Deer"&gt;&lt;/option&gt;
&lt;option label="St. John" value="St. John"&gt;&lt;/option&gt;
&lt;option label="St. John's" value="St. John's"&gt;&lt;/option&gt;
&lt;option label="Toronto" value="Toronto"&gt;&lt;/option&gt;
&lt;option label="Vancouver" value="Vancouver"&gt;&lt;/option&gt;
&lt;option label="Whitehorse" value="Whitehorse"&gt;&lt;/option&gt;
&lt;option label="Winnipeg" value="Winnipeg"&gt;&lt;/option&gt;
&lt;option label="Yellowknife" value="Yellowknife"&gt;&lt;/option&gt;
&lt;!--[if lte IE 9]&gt;&lt;/select&gt;&lt;![endif]--&gt;
&lt;/datalist&gt;</code></pre>
</section>
</div>
<!-- End of Datalist content -->
<dl id="gcwu-date-mod" role="contentinfo">
<dt>Date modified:</dt><dd><span><time>2013-04-11</time></span></dd>
<dt>Date modified:</dt><dd><span><time>2013-08-14</time></span></dd>
</dl>
<div class="clear"></div>
<!-- MainContentEnd -->
@@ -114,28 +114,28 @@ <h2 class="background-dark margin-bottom-medium">Exemple</h2>
<input id="city" name="city" list="suggestions" />
<datalist id="suggestions">
<!--[if lte IE 9]><select><![endif]-->
<option label="" value="Barrie"></option>
<option label="" value="Calgary"></option>
<option label="" value="Charlottetown"></option>
<option label="" value="Chibougamau"></option>
<option label="" value="Chilliwack"></option>
<option label="" value="Cold Lake"></option>
<option label="" value="Dorval"></option>
<option label="" value="Edmonton"></option>
<option label="" value="Flin Flon"></option>
<option label="" value="Hamilton"></option>
<option label="" value="Iqualuit"></option>
<option label="" value="Ottawa"></option>
<option label="" value="Miramichi"></option>
<option label="" value="Montreal"></option>
<option label="" value="Red Deer"></option>
<option label="" value="St. John"></option>
<option label="" value="St. John's"></option>
<option label="" value="Toronto"></option>
<option label="" value="Vancouver"></option>
<option label="" value="Whitehorse"></option>
<option label="" value="Winnipeg"></option>
<option label="" value="Yellowknife"></option>
<option label="Barrie" value="Barrie"></option>
<option label="Calgary" value="Calgary"></option>
<option label="Charlottetown" value="Charlottetown"></option>
<option label="Chibougamau" value="Chibougamau"></option>
<option label="Chilliwack" value="Chilliwack"></option>
<option label="Cold Lake" value="Cold Lake"></option>
<option label="Dorval" value="Dorval"></option>
<option label="Edmonton" value="Edmonton"></option>
<option label="Flin Flon" value="Flin Flon"></option>
<option label="Hamilton" value="Hamilton"></option>
<option label="Iqualuit" value="Iqualuit"></option>
<option label="Ottawa" value="Ottawa"></option>
<option label="Miramichi" value="Miramichi"></option>
<option label="Montreal" value="Montreal"></option>
<option label="Red Deer" value="Red Deer"></option>
<option label="St. John" value="St. John"></option>
<option label="St. John's" value="St. John's"></option>
<option label="Toronto" value="Toronto"></option>
<option label="Vancouver" value="Vancouver"></option>
<option label="Whitehorse" value="Whitehorse"></option>
<option label="Winnipeg" value="Winnipeg"></option>
<option label="Yellowknife" value="Yellowknife"></option>
<!--[if lte IE 9]></select><![endif]-->
</datalist>
</form>
@@ -148,36 +148,36 @@ <h2 class="background-dark margin-bottom-medium">Usage</h2>
&lt;input type="text" id="city" name="city" list="suggestions" /&gt;
&lt;datalist id="suggestions"&gt;
&lt;!--[if lte IE 9]&gt;&lt;select&gt;&lt;![endif]--&gt;
&lt;option label="" value="Barrie"&gt;&lt;/option&gt;
&lt;option label="" value="Calgary"&gt;&lt;/option&gt;
&lt;option label="" value="Charlottetown"&gt;&lt;/option&gt;
&lt;option label="" value="Chibougamau"&gt;&lt;/option&gt;
&lt;option label="" value="Chilliwack"&gt;&lt;/option&gt;
&lt;option label="" value="Cold Lake"&gt;&lt;/option&gt;
&lt;option label="" value="Dorval"&gt;&lt;/option&gt;
&lt;option label="" value="Edmonton"&gt;&lt;/option&gt;
&lt;option label="" value="Flin Flon"&gt;&lt;/option&gt;
&lt;option label="" value="Hamilton"&gt;&lt;/option&gt;
&lt;option label="" value="Iqualuit"&gt;&lt;/option&gt;
&lt;option label="" value="Ottawa"&gt;&lt;/option&gt;
&lt;option label="" value="Miramichi"&gt;&lt;/option&gt;
&lt;option label="" value="Montreal"&gt;&lt;/option&gt;
&lt;option label="" value="Red Deer"&gt;&lt;/option&gt;
&lt;option label="" value="St. John"&gt;&lt;/option&gt;
&lt;option label="" value="St. John's"&gt;&lt;/option&gt;
&lt;option label="" value="Toronto"&gt;&lt;/option&gt;
&lt;option label="" value="Vancouver"&gt;&lt;/option&gt;
&lt;option label="" value="Whitehorse"&gt;&lt;/option&gt;
&lt;option label="" value="Winnipeg"&gt;&lt;/option&gt;
&lt;option label="" value="Yellowknife"&gt;&lt;/option&gt;
&lt;option label="Barrie" value="Barrie"&gt;&lt;/option&gt;
&lt;option label="Calgary" value="Calgary"&gt;&lt;/option&gt;
&lt;option label="Charlottetown" value="Charlottetown"&gt;&lt;/option&gt;
&lt;option label="Chibougamau" value="Chibougamau"&gt;&lt;/option&gt;
&lt;option label="Chilliwack" value="Chilliwack"&gt;&lt;/option&gt;
&lt;option label="Cold Lake" value="Cold Lake"&gt;&lt;/option&gt;
&lt;option label="Dorval" value="Dorval"&gt;&lt;/option&gt;
&lt;option label="Edmonton" value="Edmonton"&gt;&lt;/option&gt;
&lt;option label="Flin Flon" value="Flin Flon"&gt;&lt;/option&gt;
&lt;option label="Hamilton" value="Hamilton"&gt;&lt;/option&gt;
&lt;option label="Iqualuit" value="Iqualuit"&gt;&lt;/option&gt;
&lt;option label="Ottawa" value="Ottawa"&gt;&lt;/option&gt;
&lt;option label="Miramichi" value="Miramichi"&gt;&lt;/option&gt;
&lt;option label="Montreal" value="Montreal"&gt;&lt;/option&gt;
&lt;option label="Red Deer" value="Red Deer"&gt;&lt;/option&gt;
&lt;option label="St. John" value="St. John"&gt;&lt;/option&gt;
&lt;option label="St. John's" value="St. John's"&gt;&lt;/option&gt;
&lt;option label="Toronto" value="Toronto"&gt;&lt;/option&gt;
&lt;option label="Vancouver" value="Vancouver"&gt;&lt;/option&gt;
&lt;option label="Whitehorse" value="Whitehorse"&gt;&lt;/option&gt;
&lt;option label="Winnipeg" value="Winnipeg"&gt;&lt;/option&gt;
&lt;option label="Yellowknife" value="Yellowknife"&gt;&lt;/option&gt;
&lt;!--[if lte IE 9]&gt;&lt;/select&gt;&lt;![endif]--&gt;
&lt;/datalist&gt;</code></pre>
</section>
</div>
<!-- End of Datalist content -->
<dl id="gcwu-date-mod" role="contentinfo">
<dt>Date de modification&#160;:</dt><dd><span><time>2013-04-11</time></span></dd>
<dt>Date de modification&#160;:</dt><dd><span><time>2013-08-14</time></span></dd>
</dl>
<div class="clear"></div>
<!-- MainContentEnd -->
@@ -110,7 +110,7 @@ <h1 id="wb-cont">Form validation</h1>
<fieldset class="margin-top-large"><legend>Contact information</legend>
<label for="title1"><span class="field-name">Title</span> <strong>(required)</strong></label>
<select id="title1" name="title1" required="required">
<option></option>
<option label="Select a title"></option>
<option value="dr">Dr.</option>
<option value="esq">Esq.</option>
<option value="mr">Mr.</option>
@@ -109,7 +109,7 @@ <h1 id="wb-cont">Validation de formulaires</h1>
<fieldset class="margin-top-large"><legend>Coordonnées</legend>
<label for="title1"><span class="field-name">Titre</span> <strong>(obligatoire)</strong></label>
<select id="title1" name="title1" required="required">
<option></option>
<option label="Sélectionner un titre"></option>
<option value="dr">D. Ph.</option>
<option value="esq">Me</option>
<option value="mr">M.</option>
@@ -161,7 +161,7 @@ <h1 id="wb-cont">Validation de formulaires</h1>
</noscript>
<dl id="gcwu-date-mod" role="contentinfo">
<dt>Date de modification&#160;:</dt><dd><span><time>2013-04-11</time></span></dd>
<dt>Date de modification&#160;:</dt><dd><span><time>2013-08-14</time></span></dd>
</dl>
<div class="clear"></div>
<!-- MainContentEnd -->

0 comments on commit 6e6f366

Please sign in to comment.