Archives des tags : input

Pas encore de description pour le tag input. Suggérez à l'administrateur du site de d'y remédier.
Helper HTML

Selectize.js — donner du peps à vos éléments select avec jQuery

Selectize — Dans la lignée de Chosen, Select2, and Tags Input, Selectize est une surcouche Javascript  développée par @brianreavis avec jQuery pour moderniser l’élément HTML select dans l’optique d’améliorer l’expérience utilisateur dont cet élément a bien besoin. Selectize sera en tout cas bien pratique pour la gestion des tags, des listes de contacts, la sélection des pays, etc. Le tout pour un poids modique de 7kb (gzipped).

Plugin jQuery

jQuery Placeholder — L’attribut de formulaire HTML5 «placeholder» pour les navigateurs anciens

jQuery-Placeholder permet d’utiliser l’attribut de formulaire «placeholder» dans les navigateurs ne prenant pas en charge HTML5. Cet attribut affiche une courte description ou une brève indication de la raison d’être du champs de formulaire en question : «Un Email valide, de préférence !» ou «N’oubliez pas http://», etc. Il ne se substitut pas à la balise label qui indiquerait «Votre Email» ou «Votre site web» (1). →

Helper HTML

jQuery File Upload

jQuery File Upload est un plugin basé sur jQuery et HTML5. Il ne nécessite aucun module pour votre navigateur comme c’est le cas pour les Uploaders réalisés avec Flash. Parmi ses fonctionnalités, jQuery File Upload, permet d’uploader des fichiers multiples en affichant une barre de progression pendant le téléchargement ainsi qu’une miniature si votre fichier est une image. →

Helper HTML

jQuery radioSwitch — Transformez vos boutons radio en Sliders

jQuery radioSwitch est un plugin créé par Ammon Casey dont l’objectif est de transformer des boutonsradio HTML en superbes Sliders d’un coup de magie CSS3 et Javascript. Il suffit d’envelopper les boutons radio avec un container sur lequel s’effectuera l’appel de la fonction. Chaque bouton radio doit posséder un label avec l’attribut for pointant vers l’identifiant du bouton correspondant. →

Helper HTML

«input type = password» — Affichage des mots de passe à la demande avec jQuery

Afficher ou masquer les mots de passe de vos formulaires en jQuery — Le comportement normal d’un champ input de type password en HTML est de masquer les caractères en cours de frappe en les remplaçant par des bulles pour garantir la confidentialité de votre mot de passe. Pratique, au cas où quelqu’un lirait par-dessus votre épaule ou vous épierait avec une paire de jumelle. Si ce comportement par défaut a son utilité, il pourrait être intéressant d’avoir le choix et de n’afficher ou masquer ce mot de passe qu’en cas de besoin, à l’aide d’une case à cocher. →

Helper CSS

Ajax Upload — input type file reloaded

Les navigateurs imposent la balise <input type= »file » /> pour «uploader» (téléverser comme disent les québecois) un fichier sur le serveur. Cette balise est quasi impossible à personnaliser et le style par défaut de cette pauvre chose fait souvent tâche au milieu des applications web 2.0… Pour y remédier, Flash est une alternative souvent utilisée alors que Javascript peut tout aussi bien faire l’affaire. →

HTML & CSS

Styler vos champs de formulaires de recherche avec CSS

Ce tutoriel pour styler les champs input de vos formulaires de recherche vous permettra d’offrir à vos visiteurs un formulaire design au lieu du traditionnel — mais efficace — champ *input type=text* blanc avec contour.

L’auteur utilise un *button* à la place du *input type= »submit »* pour éviter les problèmes d’alignement afin d’utiliser une seule image pour le champ *input* et le *button*. Ce qui permet de gérer facilement les différents état *:focus* ou *:hover* avec *background-position*.

PS : En cas de problème avec l’utilisation de l’élément button, jettez un oeil sur ce fil de discussion paru sur le forum Alsacréations.

HTML & CSS

Aligner le contenu d’un champ input avec le label associé

Lorsqu’on donne une hauteur height à un champ input, il arrive que le texte saisi à l’intérieur ne s’aligne pas correctement avec la base du texte présent dans le label. Dans ce cas, je diminue la hauteur et je distribue un soupçon de padding en haut et/ou en bas selon l’alignement souhaité. →