5 astuces Html5 forme d'entrée

category Ordinateurs et logiciels / Programmation / Javascript

La façon la plus courante pour obtenir l'entrée d'utilisateur pour un programme javascript est en utilisant des éléments de formulaire HTML. La dernière version de HTML, HTML5, dispose de plusieurs nouveaux éléments de formulaire et les attributs.

Sommaire

Entrées de texte

Entrées de texte sont le type le plus fondamental de champ de formulaire HTML. Ils sont utilisés pour donner à l'utilisateur de site Web une entrée vierge où elle peut entrer une valeur. Voici un exemple du code utilisé pour créer une entrée de texte:

Voici ce que cette zone est dans un navigateur:

image0.jpg

Espace réservé

Texte d'espace réservé apparaît dans le champ de saisie avant que l'utilisateur commence à taper. Il est utile pour indiquer à l'utilisateur ce que vous attendez d'eux pour entrer.

Voici un exemple d'utilisation de texte d'espace réservé dans une saisie de texte:




Voici ce que cette zone est dans un navigateur Web.

image1.jpg

Autofocus

Lorsque le champ d'entrée est sélectionnée et vous pouvez voir votre curseur à l'intérieur de celui-ci, il “ a le focus ”. Si vous voulez un certain domaine (tels que le champ Prénom) d'avoir “ accent ” dès qu'une page web se charge, vous pouvez utiliser l'attribut autofocus. Voici à quoi il ressemble:

Entrée Email

Le champ email d'entrée ressemble à une entrée de la boîte de texte et il fonctionne exactement comme un champ de saisie de texte dans la plupart des cas, aussi. Mais parfois, le navigateur traite le champ d'entrée de courrier électronique différent d'un champ de saisie de texte. Par exemple, lorsqu'un champ d'entrée est email “ la mise au point ” sur un iPhone, un clavier spéciaux affiche qui met en vedette des raccourcis pour la saisie des adresses email.

Voici un exemple de l'utilisation du champ email d'entrée:

Entrée de curseur

Une entrée de curseur est un champ de saisie qui permet à l'utilisateur de sélectionner un nombre dans un intervalle de nombres, en utilisant un contrôle de glisser-déposer.

Voici le code pour créer un curseur:

Voici ce que un curseur ressemble à un navigateur Web.

image2.jpg

Nécessaire

Si vous voulez forcer votre utilisateur d'entrer une valeur dans un champ avant qu'il est capable de soumettre le formulaire, HTML5 a un attribut appelé requis.

Pour faire un champ de formulaire requis, il vous suffit d'ajouter le nouvel attribut dans un champ sous forme d'entrée, comme ceci:

Quand un utilisateur tente d'envoyer ce formulaire sans remplir la numéro de téléphone champ, elle reçoit un message lui demandant de le remplir:
image3.jpg
Comme de cette écriture, supportent pas tous les navigateurs Web du requis attribut, mais il est pris en charge par Chrome, Firefox, Internet Explorer et Opera.
Trouver savoir plus
Pour plus d'informations sur les éléments et attributs et la façon de travailler avec eux en javascript, visitez le guide des formulaires HTML à Mozilla Developer Network.
 
 
 
 
 
 
 
 
Articles Similaires
 
  

 
 
A propos Auteur
 
  Comment construire entrées de style de texte pour votre HTML5 et CSS3 pages Web en fonction Comment construire entrées de style de texte pour votre HTML5 et CSS3 pages Web en fonction 
La plupart des éléments de formulaire sur les pages web HTML5 et CSS3 sont des variantes de la même étiquette. La balise peut créer une seule ligne de texte, boîtes boîtes de mot de passe, des boutons, et le contenu même invisibles (tels que…
  Comment créer des champs de téléchargement de fichiers en HTML5 Comment créer des champs de téléchargement de fichiers en HTML5 
Un formulaire Web HTML peut recevoir des documents et d'autres fichiers, comme des images, des utilisateurs. Quand un utilisateur soumet le formulaire, le navigateur prend une copie du fichier et l'envoient avec les autres données de formulaire.…
  Comment faire pour créer des formulaires web avec HTML5 Comment faire pour créer des formulaires web avec HTML5 
Formulaires HTML peuvent présenter des informations aux utilisateurs, en utilisant texte et des images. Chaque forme a la même structure de base. Quels éléments d'entrée que vous utilisez dépend des données que vous présentez et la…
  Comment utiliser les balises d'entrée dans les formulaires HTML5 Comment utiliser les balises d'entrée dans les formulaires HTML5 
Les balises que vous utilisez pour solliciter les commentaires des visiteurs de votre site constituent l'essentiel de toute forme. HTML prend en charge une variété d'options d'entrée, à partir des champs de texte à des boutons radio et à…
  Comment utiliser les champs de mot de passe et les champs cachés dans votre formulaire de html5 Comment utiliser les champs de mot de passe et les champs cachés dans votre formulaire de html5 
UN champ Mot de passe est un champ spécial de texte sur un formulaire web qui ne comporte pas ce que les types d'utilisateurs. Chaque touche est représentée à l'écran par un personnage fictif, comme un astérisque ou une balle, de sorte que…
  Comment utiliser les champs de texte dans votre formulaire de html5 Comment utiliser les champs de texte dans votre formulaire de html5 
Vous pouvez utiliser une variété de types de champs d'entrée dans vos formulaires, tels que texte, mot de passe, radio (bouton), case, caché, recherche, tél (numéro de téléphone), URL, email (adresse), datetime, date, mois, semaine, temps,…
  Comment valider les éléments de formulaire HTML dans javascript Comment valider les éléments de formulaire HTML dans javascript 
La validation est un élément important de travailler avec des formulaires HTML. Malheureusement, pas tous les navigateur prend en charge les fonctionnalités de validation de HTML5. L'exemple que vous trouverez ici ne fonctionnera pas avec…
  Comment gérer la saisie de texte et de sortie avec javascript pour HTML5 et CSS3 programmation Comment gérer la saisie de texte et de sortie avec javascript pour HTML5 et CSS3 programmation 
Peut-être l'application la plus intrigante du DOM dans javascript est la capacité de permettre à l'utilisateur de communiquer avec le programme à travers la page web HTML5, sans toutes ces boîtes de dialogue ennuyeux. Voici une page avec…
  Nouveaux trucs HTML5 / CSS3 pour la validation Nouveaux trucs HTML5 / CSS3 pour la validation 
HTML5 et CSS3 ajouter un peu plus de trucs pour simplifier la validation, et ils sont absolument merveilleux. Alors que vous pouvez toujours utiliser javascript et les expressions régulières pour valider vos pages, HTML5 promet une solution…
  Attributs de nouveaux éléments de formulaire dans html5 Attributs de nouveaux éléments de formulaire dans html5 
HTML5 introduit de nouveaux éléments de formulaire et donne tous les éléments de formulaire quelques nouveaux goodies. Comme vous concevez et construisez des pages Web, vous pouvez appliquer ces nouveaux attributs et les capacités à tout…
  Comment construire une case à cocher dans votre formulaire de html5 Comment construire une case à cocher dans votre formulaire de html5 
Parfois, vous voulez que vos utilisateurs de pages Web pour indiquer si l'information est vraie ou fausse. Le HTML5 case élément est parfait pour ce genre d'entrée, car l'utilisateur peut cliquer pour sélectionner ou désélectionner l'option.…
  Comment mettre des boîtes de texte dans un formulaire de html5 Comment mettre des boîtes de texte dans un formulaire de html5 
La plupart des utilisations éléments de formulaire HTML5 sont basées sur le contribution tag. Cette bête pages bâtiment-web est une balise à usage général utilisé pour faire un certain nombre d'objets d'entrée intéressants, mais il est…
  De nouveaux types de saisie de formulaire en HTML5 De nouveaux types de saisie de formulaire en HTML5 
Formulaires HTML sont centrées autour de l'humble mais flexible contribution élément. HTML5 ajoute un certain nombre de formes très utiles d'entrée qui aident à tourner HTML en un outil d'interface utilisateur plus moderne.Bien que le soutien…
  Nouveaux éléments de formulaire dans html5 Nouveaux éléments de formulaire dans html5 
HTML5 introduit un certain nombre de nouveaux éléments de formulaire avec de nouvelles fonctionnalités. Un sous-ensemble remarquable de ces éléments de formulaire est conçu pour permettre un programme de modifier une partie de la page…
 
 
 »  »  »  » 5 astuces Html5 forme d'entrée