I Les principaux éléments d'une page WEB permettant d'interagir avec un utilisateur.

Les plus connus sont les liens hypertextes, les zones de texte, les boutons ou les listes déroulantes.

L'interaction peut se faire via l'utilisation de style CSS, à l'aide du langage JavaScript, ou encore en déclanchant une action sur le serveur lors d'une validation de formulaire.

II Interaction via le style CSS.

Rappelons nous de l'interaction utilisant la pseudo-class de style :hover.

Un exemple vaut mieux qu'un long discours.

Regardons à nouveau ce que cela donne. Ouvrez le lien vers jsfiddle. Et copiez-collez dans le html et le css les lignes suivantes:

html

<h1>Que peut-on faire avec la pseudo-class de style : hover?</h1>

css

h1:hover
{
	background-color: orange;
	cursor: pointer;
	font-size:400%
}

Appuyez sur run et survoler avec votre souris sur le texte affiché.

III Interactions sur la base d'un input:

Comme nous l'avons déjà vu, nous pouvons via un champ input récupérer des informations entrées par l'utilisateur, traitées par du Javascript pour interagir dans la page active.

Nous pouvons égamenent utiliser des champs input pour remplir un formulaire qui sera traité par la suite.

Ces input devrons être encadrés par la balise form qui indique que les saisies seront traités dans un formulaire.

Encore une fois, des exemples vallent mieux qu'un long discours. Copiez-collez le html dans jsfiddle pour voir ce qu'il donne.

Type text

<form>
	<p>Login : <input type="text" name="login"/></p>
</form>

type password

<form>
	<p>Mot de passe :<input type="passwd" name="pass"/></p>
</form>

type radio

<form>
	<p>Catégorie :</p>
	<p>
	<input type="radio" name="cat" value="hu"/> Humain<br>
	<input type="radio" name="cat" value="ex"/> Extraterrestre
	</p>
</form>

type checkbox

<form>
	<p>Pour le petit-déjeuner :</p>
	<p>
	<input type="checkbox" name="lait" value="lait"/> Lait<br>
	<input type="checkbox" name="beurre" value="beurre"/> Beurre<br>
	<input type="checkbox" name="fromage" value="fromage"/> Fromage 
	</p>
</form>

type button

<form>
	<p><input type="button" value="bouton"/></p>
</form>

type submit

<form>
	<p><input type="submit" value="Envoyer"/></p>
</form>

type file

<form>
	<p><input type="file" name="fichier" value="Choisir le fichier"/></p>
</form>

Si vous cliquez sur choisir un fichier, vous devriez pouoir naviguer.

type tel

<form>
	<p>Numéro de téléphone<input type="tel" name="ntel"/></p>
</form>

type number

<form>
	<p>Choisir un nombre<input type="number" name="nombre"/></p>
</form>

Si vous avez essayé de taper du texte, rien ne s'est affiché.

type range

<form>
	<p>Un curseur<input type="range"/></p>
</form>

type color

<form>
	<p>Choisir une couleur<input type="color" name="couleur"/></p>
</form>

Amusez vous avec les différentes options.

type date

<form>
	<p>Choisir la date<input type="date" name="date"/></p>
</form>

Choisissez une date dans le calendrier

Il y a bien d'autres possibilités : search, url, email, list,...

Vous aurez remarqué l'attribut value que vous avez déjà rencontré. Vous aurez certainement remarqué l'attribut name. Celui-ci nous permettra lorsque nous soumettrons le formulaire de récupérer les données de celui-ci.

IV Interaction sur la base d'un select.

Nous parlons ici de liste déroulante.

Exemple à copier-coller dans jsfiddle

<form>
	<select name="menu">
		<option value="volaille">Poulet frites</option>
		<option value="veggie">Riz et lentilles</option>
		<option value="poisson">Anchois marinés</option>
	</select>
</form>

Le select autorise un seul choix par défaut mais peut être précisé multiple pour permettre de valider plusieurs choix simultanés. Dans ce cas les valeurs sélectionnées sont traitées comme un tableau, noté par []. Par exemple:

<form>
	<select name="menu[]" multiple>
		<option value="volaille">Poulet frites</option>
		<option value="veggie">Riz et lentilles</option>
		<option value="poisson">Anchois marinés</option>
	</select>
</form>