| <html> |
| <head> |
| <style> |
| div { |
| width: 300px; |
| margin-bottom: 10px; |
| } |
| |
| #div_container { |
| display: inline-block; |
| } |
| |
| #div_container div { |
| width: 100px; |
| height: 100px; |
| border: 2px solid black; |
| padding: 10px; |
| margin: 0 10px 0 10px; |
| float: left; |
| } |
| |
| #div_container div:focus { |
| border: 2px solid red; |
| } |
| |
| #form_container span { |
| display: block; |
| padding-bottom: 10px; |
| } |
| |
| #form_container label { |
| float: left; |
| text-align: right; |
| width: 50px; |
| margin-right: 20px; |
| } |
| </style> |
| </head> |
| |
| <body onload="document.getElementById('first_div').focus()"> |
| <div id="div_container"> |
| <div id="first_div" tabindex="0">First</div> |
| <div id="second_div" tabindex="0">Second</div> |
| </div> |
| |
| <div id="form_container"> |
| <form><fieldset> |
| <legend>Form</legend> |
| |
| <span> |
| <label for="text_input">text</label> |
| <input id="text_input" type="text" /> |
| </span> |
| |
| <span> |
| <input id="radio1" type="radio" name="radio">radio1</input> |
| <input id="radio2" type="radio" name="radio">radio2</input> |
| </span> |
| |
| <span> |
| <input id="checkbox1" type="checkbox" name="checkbox1" checked="true">checkbox1</input> |
| <input id="checkbox2" type="checkbox" name="checkbox2" checked="true">checkbox2</input> |
| </span> |
| |
| <span> |
| <label for="number_input">number</label> |
| <input id="number_input" type="number" min="0" max="10" value="5" /> |
| </span> |
| |
| <span> |
| <label for="range_input">range</label> |
| <input id="range_input" type="range" min="0" max="10" value="5" /> |
| </span> |
| |
| <span> |
| <label for="search_input">search</label> |
| <input id="search_input" type="search" value="test" /> |
| </span> |
| |
| <input id="submit_button" type="submit" value="Submit" /> |
| </fieldset></form> |
| </div> |
| |
| <div> |
| <select id="combobox"> |
| <option value="a">a</option> |
| <option value="b">b</option> |
| <option value="c">c</option> |
| </select> |
| </div> |
| |
| <div> |
| <a id="first_hyperlink" href="">First</a> |
| <br /> |
| <a id="second_hyperlink" href="">Second</a> |
| </div> |
| </body> |
| </html> |
