mirror_html/html5-test-page
1
0
Fork 0
mirror of https://github.com/cbracco/html5-test-page.git synced 2025-08-20 12:51:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

added back embedded content and form elements because they disappeared somehow

Browse Source
This commit is contained in:
cbracco
2014-04-08 11:39:54 -04:00
parent dde48f80cd
commit f050d81ff3
1 changed files with 182 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
test.html
View File

@@ -138,7 +138,6 @@
<header><h1>Tabular data</h1></header>
<table>
<caption>Table Caption</caption>
<thead>
<tr>
<th>Table Heading 1</th>
@@ -261,6 +260,188 @@ p q r s t u v w x y z { | } ~ </pre>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
</section>
<section id="embedded">
<header><h1>Embedded content</h1></header>
<article id="embedded__audio">
<header><h2>Audio</h2></header>
<div><audio controls="">audio</audio></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__video">
<header><h2>Video</h2></header>
<div><video controls="">video</video></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__canvas">
<header><h2>Canvas</h2></header>
<div><canvas>canvas</canvas></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__progress">
<header><h2>Progress bars</h2></header>
<div><progress>progress</progress></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__svg">
<header><h2>Inline SVG</h2></header>
<div><svg width="100px" height="100px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__iframes">
<header><h2>IFrames</h2></header>
<div><iframe src="http://www.google.com" width="100%" height="300" frameborder="0"></iframe></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
</section>
<section id="forms">
<header><h1>Form elements</h1></header>
<form action="">
<fieldset id="forms__text">
<legend>Text fields</legend>
<p>
<label for="text">Text Input <abbr title="Required">*</abbr></label>
<input id="text" type="text" placeholder="Text Input">
</p>
<p>
<label for="password">Password</label>
<input id="password" type="password" placeholder="Type your Password">
</p>
<p>
<label for="webaddress">Web Address</label>
<input id="webaddress" type="url" placeholder="http://yoursite.com">
</p>
<p>
<label for="emailaddress">Email Address</label>
<input id="emailaddress" type="email" placeholder="name@email.com">
</p>
<p>
<label for="search">Search</label>
<input id="search" type="search" placeholder="Enter Search Term">
</p>
<p>
<label for="text">Number Input <abbr title="Required">*</abbr></label>
<input id="text" type="number" placeholder="Enter a Number" pattern="[0-9]*">
</p>
<p>
<label for="textarea">Textarea</label>
<textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
</p>
<p>
<label class="error">Error</label>
<input class="is-error" type="text" placeholder="Text Input">
</p>
<p>
<label class="valid">Valid</label>
<input class="is-valid" type="text" placeholder="Text Input">
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__select">
<legend>Select menus</legend>
<p>
<label for="select">Select</label>
<select id="select">
<optgroup label="Option Group">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</optgroup>
</select>
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__checkbox">
<legend>Checkboxes</legend>
<ul class="list list--bare">
<li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
<li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
<li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
</ul>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__radio">
<legend>Radio buttons</legend>
<ul class="list list--bare">
<li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
<li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
<li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
</ul>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__html5">
<legend>HTML5 inputs</legend>
<p>
<label for="ic">Color input</label>
<input type="color" id="ic" value="#000000">
</p>
<p>
<label for="in">Number input</label>
<input type="number" id="in" min="0" max="10" value="5">
</p>
<p>
<label for="ir">Range input</label>
<input type="range" id="ir" value="10">
</p>
<p>
<label for="idd">Date input</label>
<input type="date" id="idd" value="1970-01-01">
</p>
<p>
<label for="idm">Month input</label>
<input type="month" id="idm" value="1970-01">
</p>
<p>
<label for="idw">Week input</label>
<input type="week" id="idw" value="1970-W01">
</p>
<p>
<label for="idt">Datetime input</label>
<input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
</p>
<p>
<label for="idtl">Datetime-local input</label>
<input type="datetime-local" id="idtl" value="1970-01-01T00:00">
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__action">
<legend>Action buttons</legend>
<p>
<input type="submit" value="Input">
<button type="submit">Button</button>
<input type="reset" value="Reset">
<input type="submit" value="Disabled" disabled>
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
</form>
</section>
</main>
<footer role="contentinfo">