Unified Diff: test/forms.html
Issue 29365594:
Issue 4633 - Default form styles (Closed)
Patch Set:
Created Nov. 29, 2016, 4:29 p.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« test/button-links.html ('K')
|
« test/button-links.html ('k')
|
test/index.html » ('j')
|
no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: test/forms.html |
| =================================================================== |
| new file mode 100644 |
| --- /dev/null |
| +++ b/test/forms.html |
| @@ -0,0 +1,216 @@ |
| +<!DOCTYPE html> |
| +<!-- |
| + This file is part of website-defaults |
| + Copyright (C) 2016 Eyeo GmbH |
| + |
| + website-defaults is free software: you can redistribute it and/or |
| + modify it under the terms of the GNU General Public License as published by |
| + the Free Software Foundation, either version 3 of the License, or |
| + (at your option) any later version. |
| + |
| + website-defaults is distributed in the hope that it will be useful, |
| + but WITHOUT ANY WARRANTY; without even the implied warranty of |
| + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
| + GNU General Public License for more details. |
| + |
| + You should have received a copy of the GNU General Public License |
| + along with website-defaults. If not, see <http://www.gnu.org/licenses/>. |
| +--> |
| +<html dir="ltr"> |
| + |
| +<head> |
| + <meta charset="utf-8"> |
| + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
| + <meta http-equiv="x-ua-compatible" content="ie=edge"> |
| + <title>Forms</title> |
| + <link rel="stylesheet" href="css/main.css"> |
| + <link rel="stylesheet" href="css/demo.css"> |
| +</head> |
| + |
| +<body> |
| + <div class="container"> |
| + |
| + <h1>Forms</h1> |
| + <p>Default styles for native form elements.</p> |
| + |
| + <h2>Requirements</h2> |
| + <ul> |
| + <li> |
| + <a href="#fields">Fields</a> |
| + <ul> |
| + <li><a href="#basic-text">Basic text</a></li> |
| + <li><a href="#advanced-text">Advanced text</a></li> |
| + <li><a href="#textareas">Textareas</a></li> |
| + <li><a href="#selects">Selects</a></li> |
| + <li><a href="#checkboxes">Checkboxes</a></li> |
| + <li><a href="#radios">Radios</a></li> |
| + <li><a href="#buttons">Buttons</a></li> |
| + </ul> |
| + </li> |
| + <li> |
| + <a href="#support">Support</a> |
| + <ul> |
| + <li><a id="dir" onclick="changeDirection()">Right-to-left</a></li> |
|
saroyanm
2016/12/06 18:26:55
Detail: we decided to remove Change direction and
juliandoucette
2016/12/07 17:31:10
Acknowledged.
I will change this.
|
| + <li><a href="http://browserl.ist/?q=last+2+versions%2C+Safari+6%2C+IE+8">Last 2 versions, Safari 6, IE 8</a></li> |
| + </ul> |
| + </li> |
| + </ul> |
| + |
| + <h3 id="fields">Fields</h3> |
| + |
| + <form> |
| + <fieldset> |
| + <legend id="basic-text">Basic text</legend> |
| + <p> |
| + <label for="default-text">Default text</label> |
| + <input id="default-text" type="text" placeholder="Placeholder" /> |
| + </p> |
| + <p class="invalid"> |
| + <label for="invalid-text">Invalid text</label> |
| + <input id="invalid-text" type="text" placeholder="Placeholder" aria-invalid="true" /> |
| + </p> |
| + <p class="disabled"> |
| + <label for="disabled-text">Disabled text</label> |
| + <input id="disabled-text" type="text" placeholder="Placeholder" disabled /> |
| + </p> |
| + </fieldset> |
| + |
| + <fieldset> |
| + <legend id="advanced-text">Advanced text</legend> |
| + <p>These should look like basic text inputs in <a href="http://browserl.ist/?q=last+2+versions%2C+Safari+6%2C+IE+8">last 2 versions, Safari 6, IE 8</a>.</p> |
| + <p><input type="search" placeholder="Search terms" /></p> |
| + <p><input type="tel" placeholder="+55-55-555-5555" /></p> |
| + <p><input type="url" placeholder="example.com" /></p> |
| + <p><input type="email" placeholder="user@example.com" /></p> |
| + <p><input type="password" placeholder="Password" /></p> |
| + <p><input type="date" placeholder="Date" /></p> |
| + <p><input type="time" placeholder="Time" /></p> |
| + <p><input type="number" placeholder="5" /></p> |
| + </fieldset> |
| + |
| + <fieldset> |
| + <legend id="textareas">Textareas</legend> |
| + <p> |
| + <label for="default-textarea">Default textarea</label> |
| + <textarea id="default-textarea"></textarea> |
| + </p> |
| + <p class="invalid"> |
| + <label for="invalid-textarea">Invalid textarea</label> |
| + <textarea id="invalid-textarea" aria-invalid="true"></textarea> |
| + </p> |
| + <p class="disabled"> |
| + <label for="disabled-textarea">Disabled textarea</label> |
| + <textarea id="disabled-textarea" disabled></textarea> |
| + </p> |
| + </fieldset> |
| + |
| + <fieldset> |
| + <legend id="selects">Selects</legend> |
| + <p> |
| + <label for="default-select">Default select</label> |
| + <select> |
| + <option selected>Default option</option> |
| + <optgroup label="Group 1"> |
| + <option>Option 1</option> |
| + <option>Option 2</option> |
| + </optgroup> |
| + <optgroup label="Group 2"> |
| + <option>Option 3</option> |
| + <option disabled>Option 4</option> |
| + </optgroup> |
| + </select> |
| + </p> |
| + <p class="invalid"> |
| + <label for="invalid-select">Invalid select</label> |
| + <select aria-invalid="true"> |
| + <option selected>Default option</option> |
| + <optgroup label="Group 1"> |
| + <option>Option 1</option> |
| + <option>Option 2</option> |
| + </optgroup> |
| + <optgroup label="Group 2"> |
| + <option>Option 3</option> |
| + <option disabled>Option 4</option> |
| + </optgroup> |
| + </select> |
| + </p> |
| + <p class="disabled"> |
| + <label for="disabled-select">Disabled select</label> |
| + <select disabled> |
| + <option selected>Default option</option> |
| + <optgroup label="Group 1"> |
| + <option>Option 1</option> |
| + <option>Option 2</option> |
| + </optgroup> |
| + <optgroup label="Group 2"> |
| + <option>Option 3</option> |
| + <option disabled>Option 4</option> |
| + </optgroup> |
| + </select> |
| + </p> |
| + </fieldset> |
| + |
| + <fieldset> |
| + <legend id="checkboxes">Checkboxes</legend> |
| + <p> |
| + <label> |
| + <input type="checkbox"> |
| + Default checkbox |
| + </label> |
| + </p> |
| + <p> |
| + <label class="invalid"> |
| + <input type="checkbox" aria-invalid="true"> |
| + Invalid checkbox |
| + </label> |
| + </p> |
| + <p> |
| + <label class="disabled"> |
| + <input type="checkbox" disabled> |
| + Disabled checkbox |
| + </label> |
| + </p> |
| + </fieldset> |
| + |
| + <fieldset> |
| + <legend id="radios">Radios</legend> |
| + <p> |
| + <label> |
| + <input type="radio"> |
| + Default radio |
| + </label> |
| + </p> |
| + <p> |
| + <label class="invalid"> |
| + <input type="radio" aria-invalid="true"> |
| + Invalid radio |
| + </label> |
| + </p> |
| + <p> |
| + <label class="disabled"> |
| + <input type="radio" disabled> |
| + Disabled radio |
| + </label> |
| + </p> |
| + </fieldset> |
| + |
| + <fieldset> |
| + <legend id="buttons">Buttons</legend> |
| + <p> |
| + <button type="button">Default button</button> |
| + <input type="button" value="Default input" /> |
| + <button type="reset">Reset button</button> |
| + <input type="reset" value="Reset input" /> |
| + <button type="submit">Submit button</button> |
| + <input type="submit" value="Submit input" /> |
| + </p> |
| + </fieldset> |
| + |
| + </form> |
| + |
| + </div> |
| + |
| + <script src="js/demo.js"></script> |
| +</body> |
| + |
| +</html> |
« test/button-links.html ('K')
|
« test/button-links.html ('k')
|
test/index.html » ('j')
|
no next file with comments »
