Ce site est entièrement responsive. Néanmoins, certains styles peuvent être mieux appréciés sur un écran plus grand.

Documentation

Découvrez le fonctionnement du framework Slim à travers la documenation. Tous les composants y sont abordés, et illustrés des mises en situation.

Formulaires

Formulaire simple (input à largeur réglable)

Régler la largeur de vos <input> avec .width-xxx

<form action="" method="POST">

	<label class="help" for="name">Votre nom: </label>
	<input id="name" class="input width-100 facultatif" placeholder="Nom (falcutatif)" type="text" name="name">

	<label for="mail">Votre adresse e-mail : </label>
	<input id="mail" class="input width-100" placeholder="Adresse e-mail" type="email" name="email">

	<label for="psw">Votre mot de passe : </label>
	<input id="psw" class="input width-100" placeholder="Mot de passe" type="password" name="motdepasse">

	<input type="submit" class="btn width-100" value="Inscription">

</form>

Formulaire avec colonnes

La grille fonctionne tout aussi bien avec votre site qu'avec vos formulaires

<form action="" method="POST">
	<div class="cols-row">
		<div class="col-40">
			<label for="mail">Votre adresse e-mail : </label>
		</div>
		<div class="col-60">
			<input id="mail" class="input width-100" placeholder="Adresse e-mail" type="email" name="email">
		</div>
	</div>
	<div class="cols-row">
		<div class="col-40">
			<label for="psw">Votre mot de passe : </label>
		</div>
		<div class="col-60">
			<input id="psw" class="input width-100" placeholder="Mot de passe" type="password" name="motdepasse">
		</div>
	</div>
	<input type="submit" class="btn width-100" value="Inscription">
</form>

Formulaire avec icones

Personalisation des champ du formulaire avec une div .input-icon. La balise <span></span> a pour class l'icon de votre choix .icon-xxx (liste des icones proposées par SLIM).

<form action="" method="POST">

	<div class="input-icon">
		<label for="identifiant">Votre identifiant : </label>
		<input id="identifiant" class="input width-100" placeholder="Identifiant" type="text" name="identifiant">
		<span class="icon-user"></span>
	</div>

	<div class="input-icon">
		<label for="mail">Votre adresse e-mail : </label>
		<input id="mail" class="input width-100" placeholder="Adresse e-mail" type="email" name="email">
		<span class="icon-mail"></span>
	</div>
	
	<input type="submit" class="btn width-100" value="Inscription">

</form>	
					

Formulaire en ligne

Création d'un formulaire sur une ligne avec .input-line sur le conteneur principal. Très pratique pour des blocs comme les newsletters.

<form action="" method="POST">

	<div class="cols-row input-line">
		<div class="col-75">
			<input id="mail" class="input width-100" placeholder="Entrez votre adresse e-mail" type="email" name="email">	
		</div>
		<div class="col-25">
			<input type="submit" class="btn btn-blue width-100 upper" value="Inscription">
		</div>
	</div>

</form>
					

Input avec Radio et Checkbox

Input de type radio & checkbox alignés avec la class .group-input

Input de type radio & checkbox en ligne


<form action="" method="POST">

	<div class="group-input">
		<label>
			<input type="radio" name="oui"> oui
		</label>

		<label>
			<input type="radio" name="non"> non
		</label>
	</div>

	<div class="group-input">
		<label>
			<input type="checkbox" name="oui"> oui
		</label>

		<label>
			<input type="checkbox" name="non"> non
		</label>
	</div>

	ou

	<label>
		<input type="radio" name="oui"> oui
	</label>

	<label>
		<input type="radio" name="non"> non
	</label>

	<label>
		<input type="checkbox" name="oui"> oui
	</label>

	<label>
		<input type="checkbox" name="non"> non
	</label>

</form>	

Styles en cas d'erreur ou de succés

La gestion du style d'affichage en cas d'erreur, de problème ou de succés dans un champ du formulaire se fait avec .input-success, .input-problem et .input-error.

La class .input-success customise un champ du formulaire pour un succés. La class .input-problem customise un champ du formulaire pour un problème. Et La class .input-success customise un champ du formulaire pour un succés une erreur.

<form action="" method="POST">

	<label for="mail">Votre adresse e-mail : </label>
	<input id="mail" class="input input-success width-100" placeholder="Adresse e-mail" type="email" name="email">
	
	<label for="mail">Votre adresse e-mail : </label>
	<input id="mail" class="input input-problem width-100" placeholder="Adresse e-mail" type="email" name="email">

	<label for="mail">Votre adresse e-mail : </label>
	<input id="mail" class="input input-error width-100" placeholder="Adresse e-mail" type="email" name="email">

	<label class="input-success">
		<input type="radio"> radio
	</label>

	<label class="input-error">
		<input type="checkbox"> Coche moi
	</label>

</form>

Ces styles sont applicables a un groupe avec .group-input-success, .group-input-problem et .group-input-error.

<form action="" method="POST">
	<div class="group-input-success">
		<label for="mail">Votre adresse e-mail : </label>
		<input id="mail" class="input width-100" placeholder="Adresse e-mail" type="email" name="email">
	</div>
	
	<div class="group-input-problem">
		<label for="mail">Votre adresse e-mail : </label>
		<input id="mail" class="input width-100" placeholder="Adresse e-mail" type="email" name="email">
	</div>

	<div class="group-input-error">
		<label for="mail">Votre adresse e-mail : </label>
		<input id="mail" class="input width-100" placeholder="Adresse e-mail" type="email" name="email">
	</div>
</form>

Select

La balise <select> est stylisé par le navigateur par défault. Slim le stylise sur les points autorisés par les navigateurs. Avec la class .input le select correspond parfaitement au style de Slim mais a un problème d'affichage sous Webkit (Safari et Chrome).

select sans class mais stylisé

select avec la class .input mais qui n'affiche pas la flèche sous Chrome et Safari.

<select>
	<option value="value1">Valeur 1</option> 
	<option value="value2" selected>Valeur 2</option>
	<option value="value3">Valeur 3</option>
</select>

<select class="input">
	<option value="value1">Valeur 1</option> 
	<option value="value2" selected>Valeur 2</option>
	<option value="value3">Valeur 3</option>
</select>

Type de <input>

Il existe de nombreux types de champs de saisie dans un formulaire. La valeur par défaut est text, mais plusieurs valeurs sont possibles :

Type de champs Resultat Syntaxe HTML
input[type="text"]
<input type="text" class="input">
input[type="password"]
<input type="password" class="input">
input[type="email"]
<input type="email" class="input">
input[type="url"]
<input type="url" class="input">
input[type="tel"]
<input type="tel" class="input">
input[type="number"]
<input type="number" class="input">
input[type="datetime"]
<input type="datetime" class="input">
input[type="date"]
<input type="date" class="input">
input[type="search"]
<input type="search" class="input">
input[type="color"]
<input type="color" class="input">
input[type="datetime-local"]
<input type="datetime-local" class="input">
textarea
<textarea name="" id="" cols="30" rows="10" class="input"></textarea>
select[]
<select name="" class="input"> <option value="value1">Valeur 1</option> <option value="value2" selected>Valeur 2</option> <option value="value3">Valeur 3</option> </select>
select[multiple="multiple"]
<select name="" multiple="multiple" class="input"> <option value="value1">Valeur 1</option> <option value="value2" selected>Valeur 2</option> <option value="value3">Valeur 3</option> </select>
input[type="range"]
<input type="range" class="input">