|
|
@@ -10,10 +10,10 @@
|
|
|
<title>Document</title>
|
|
|
</head>
|
|
|
|
|
|
-<body class="body-- debug">
|
|
|
- <h1>Full-page form</h1>
|
|
|
+<body class="body-- nodebug">
|
|
|
+ <h1>Full-page form (flexbox fields)</h1>
|
|
|
<form class="form form--full-page" action="#" method="post">
|
|
|
- <h1 class="form__title">Ajouter un nouveau lien</h1>
|
|
|
+ <h1 class="form__title">Form title</h1>
|
|
|
<div class="form__field">
|
|
|
<div class="field" id="input-text">
|
|
|
<label class="field__label" for="text">Text</label>
|
|
|
@@ -59,6 +59,83 @@
|
|
|
<button class="form__submit button button-success" type="submit">Go</button>
|
|
|
</form>
|
|
|
|
|
|
+ <h1>Full-page form (grid fields)</h1>
|
|
|
+ <form class="form form--full-page" action="#" method="post">
|
|
|
+ <h1 class="form__title">Form title</h1>
|
|
|
+ <div class="form__field field field--grid" id="input-text">
|
|
|
+ <label class="field__label" for="text">Text</label>
|
|
|
+ <input class="field__input input" type="text" name="text" label="Text">
|
|
|
+ </div>
|
|
|
+ <div class="form__field field field--grid" id="input-radio">
|
|
|
+ <label class="field__label" for="radio">Radio</label>
|
|
|
+ <div class="field__input radio radio--grid">
|
|
|
+ <input class="radio__option" type="radio" value="Option 1" name="radio" id="option-1">
|
|
|
+ <label class="radio__label" for="option-1">Option 1</label>
|
|
|
+ <input class="radio__option" type="radio" value="Option 2" name="radio" id="option 2">
|
|
|
+ <label class="radio__label" for="option-2">Option 2</label>
|
|
|
+ <input class="radio__option" type="radio" value="Option 3" name="radio" id="option-3">
|
|
|
+ <label class="radio__label" for="option-3">Option 3</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form__field field field--grid" id="input-select">
|
|
|
+ <label class="field__label" for="select">Select</label>
|
|
|
+ <select class="field__input select" id="select" name="select">
|
|
|
+ <option class="select__option" value="option-1">Option 1</option>
|
|
|
+ <option class="select__option" value="option-2">Option 2</option>
|
|
|
+ <option class="select__option" value="option-3">Option 3</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="form__field field field--grid" id="input-textarea">
|
|
|
+ <label class="field__label" for="textarea">Textarea</label>
|
|
|
+ <textarea class="field__input input" id="textarea" type="textarea" name="text" label="Texte" placeholder="Ajouter une note"></textarea>
|
|
|
+ </div>
|
|
|
+ <div class="form__field">
|
|
|
+ <input class="input input--hidden" type="hidden" name="kind" value="internetcontent">
|
|
|
+ </div>
|
|
|
+ <button class="form__submit button button-success" type="submit">Go</button>
|
|
|
+ </form>
|
|
|
+
|
|
|
+ <h1>Full-page form, with errors (grid fields)</h1>
|
|
|
+ <form class="form form--full-page" action="#" method="post">
|
|
|
+ <h1 class="form__title">Form title</h1>
|
|
|
+ <p class="form__error">Please fix the errors</p>
|
|
|
+ <div class="form__field field field--grid field--error" id="input-text">
|
|
|
+ <label class="field__label" for="text">Text</label>
|
|
|
+ <input class="field__input input" type="text" name="text" label="Text">
|
|
|
+ <p class="field__error">This field is bad, and you should feel bad</p>
|
|
|
+ </div>
|
|
|
+ <div class="form__field field field--grid field--error" id="input-radio">
|
|
|
+ <label class="field__label" for="radio">Radio</label>
|
|
|
+ <div class="field__input radio radio--grid field--error">
|
|
|
+ <input class="radio__option" type="radio" value="Option 1" name="radio" id="option-1">
|
|
|
+ <label class="radio__label" for="option-1">Option 1</label>
|
|
|
+ <input class="radio__option" type="radio" value="Option 2" name="radio" id="option 2">
|
|
|
+ <label class="radio__label" for="option-2">Option 2</label>
|
|
|
+ <input class="radio__option" type="radio" value="Option 3" name="radio" id="option-3">
|
|
|
+ <label class="radio__label" for="option-3">Option 3</label>
|
|
|
+ </div>
|
|
|
+ <p class="field__error">This field is bad, and you should feel bad</p>
|
|
|
+ </div>
|
|
|
+ <div class="form__field field field--grid field--error" id="input-select">
|
|
|
+ <label class="field__label" for="select">Select</label>
|
|
|
+ <select class="field__input select" id="select" name="select">
|
|
|
+ <option class="select__option" value="option-1">Option 1</option>
|
|
|
+ <option class="select__option" value="option-2">Option 2</option>
|
|
|
+ <option class="select__option" value="option-3">Option 3</option>
|
|
|
+ </select>
|
|
|
+ <p class="field__error">This field is bad, and you should feel bad</p>
|
|
|
+ </div>
|
|
|
+ <div class="form__field field field--grid field--error" id="input-textarea">
|
|
|
+ <label class="field__label" for="textarea">Textarea</label>
|
|
|
+ <textarea class="field__input input" id="textarea" type="textarea" name="text" label="Texte" placeholder="Ajouter une note"></textarea>
|
|
|
+ <p class="field__error">This field is bad, and you should feel bad</p>
|
|
|
+ </div>
|
|
|
+ <div class="form__field">
|
|
|
+ <input class="input input--hidden" type="hidden" name="kind" value="internetcontent">
|
|
|
+ </div>
|
|
|
+ <button class="form__submit button button-success" type="submit">Go</button>
|
|
|
+ </form>
|
|
|
+
|
|
|
<h1>Inline forms</h1>
|
|
|
<form class="form form--horizontal" action="#" method="post">
|
|
|
<div class="form__field">
|
|
|
@@ -88,7 +165,7 @@
|
|
|
<h1>Tag-like forms</h1>
|
|
|
<form class="form form--inline" action="#" method="post">
|
|
|
<h1 class="form__title">the tag</h1>
|
|
|
- <button class="form__submit button button--inline" type="submit">×</button>
|
|
|
+ <button class="form__submit button button--inline button--danger" type="submit">×</button>
|
|
|
</form>
|
|
|
</body>
|
|
|
|
