Commit cac779f5 authored by Hugues's avatar Hugues

72-forms: ajout de fichier de documentation par sous-module

parent a4c39b82
# Forms-error
Présentation
---------------------------------------------------------------------
Le sous-module `forms-error` gere erreurs dans les forms.
Utilisation
---------------------------------------------------------------------
...
Exemple
---------------------------------------------------------------------
```html
<h3>Champ avec erreur</h3>
<div class="form-group has-error">
<p id="error-lorem" class="error-desc"> Le champ <em>Lorem ipsum</em> est obligatoire.</p>
<label for="lorem">Lorem ipsum&nbsp;<span class="symbol-required">*</span>
</label>
<input type="text" id="lorem" class="form-control" required aria-required="true" aria-describedby="error-lorem">
</div>
```
# Forms-inline
Présentation
---------------------------------------------------------------------
Le sous-module `forms-inline` gere les forms en inline.
Utilisation
---------------------------------------------------------------------
...
Exemple
---------------------------------------------------------------------
```html
<h3>Inline forms</h3>
<div class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control" id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
```
# Forms-plaintext
Présentation
---------------------------------------------------------------------
Le sous-module `forms-plaintext` gere les inputs affichés comme du texte.
Utilisation
---------------------------------------------------------------------
...
Exemple
---------------------------------------------------------------------
```html
<form>
<div class="form-group">
<label for="staticEmail">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</form>
```
# Forms Plus
Présentation
---------------------------------------------------------------------
Le sous-module `forms-plus` de Scampi contient les enrichissement Scampi.
Ajouts Scampi
---------------------------------------------------------------------
La classe `.fieldset-discrete` cache les bordures du fieldset.
La variable `.$symbol-required` définit une couleur au symbole utilisé pour indiquer les champs obligatoires ; la mise en oeuvre se fait en appliquant la class `.symbol-required` sur le span qui contient l’astérisque.
L’affichage en contexte des erreurs de formulaire se fait en plaçant une class `has-error` sur la div englobant le label et l’input et l’erreur liée avec un attribut aria-describedby.
exemple :
```html
<form>
<p>Les champs marqués d’un <span class="symbol-required">* </span>sont obligatoires.</p>
<div class="form-check">
<label for="form-check-input" class="form-check-label">
<input type="checkbox" class="form-check-input" id="form-check-input" required>
<span class="symbol-required">* </span>J’accepte les <a href="#">conditions générales d’utilisation</a>
</label>
</div>
<div class="form-group has-error">
<p id="loremOnError" class="error-desc">Le champ <em>Lorem ipsum</em> est obligatoire.</p>
<label for="lorem">Lorem ipsum&nbsp;<span class="symbol-required">*</span></label>
<input aria-describedby="loremOnError" type="text" id="lorem" class="form-control" required aria-required="true">
</div>
</form>
```
# Forms size
Présentation
---------------------------------------------------------------------
Le sous-module `forms-size` gere les tailles.
Utilisation
---------------------------------------------------------------------
...
Exemple
---------------------------------------------------------------------
```html
<div class="form-group">
<label for="input_lg">Input grande taille (.form-control-lg)</label>
<input type="text" class="form-control form-control-lg" id="input_lg" value="du texte">
</div>
<div class="form-group">
<label for="input_default">Input taille par default (.form-control)</label>
<input type="text" class="form-control" id="input_default" value="du texte">
</div>
<div class="form-group">
<label for="input_sm">Input petite taille (.form-control-sm)</label>
<input type="text" class="form-control form-control-sm" id="input_sm" value="du texte">
</div>
<div class="form-group">
<label for="select_lg">Select grande taille (.form-control-lg)</label>
<select class="form-control form-control-lg" id="select_lg">
<option>Large select</option>
</select>
</div>
<div class="form-group">
<label for="select_default">Select taille par default (.form-control)</label>
<select class="form-control" id="select">
<option>Default select</option>
</select>
</div>
<div class="form-group">
<label for="select_sm">Select petite taille (.form-control-sm)</label>
<select class="form-control form-control-sm" id="select_sm">
<option>Small select</option>
</select>
</div>
```
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment