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 élément de forme:

• autofocus: Un élément avec cet attribut est le foyer de la première entrée de l'utilisateur. Il est commun pour appliquer la autofocus attribuer au premier élément de la forme, et d'avoir un seul autofocus champ par formulaire. Le code ressemble à:

  Si le navigateur ne pas accepter le autofocus attribuer, rien de nuisible qui se passera, et vous pouvez toujours utiliser une solution à base de javascript.

• motif: Avec cela, vous pouvez spécifier une expression régulière utilisée pour valider le formulaire. Si le contenu correspond à l'expression régulière, le domaine sera considérée comme valide. Utilisez cet attribut que lorsque les techniques de validation standard ne sont pas suffisantes, car il peut être difficile de déboguer les expressions régulières.

  Lorsque vous spécifiez un motif, inclure également un titre attribuer à indiquer ce que le motif est, comme dans l'exemple de code:

  Le navigateur peut utiliser cela comme une astuce pour l'utilisateur. Il peut également être utile d'ajouter des informations de motif que le texte de l'espace réservé.

  
  
  
  
  

  espace réservé: La espace réservé agit comme une étiquette temporaire montre l'effet d'un champ de texte, sans nécessiter un étiquette tag. Dès que l'utilisateur active le champ, le texte de l'espace réservé disparaît. Un échantillon du code simple:

  Pas tous les navigateurs supportent texte d'espace réservé, et certains vont tout simplement ignorer le espace réservé attribuer. De même, si le champ est déjà rempli, l'espace réservé ne sera pas visible. Pour ces raisons, ajouter une étiquette afin que les utilisateurs savent quoi taper dans chaque zone de texte.

  Texte d'espace réservé est particulièrement utile pour indiquer comment l'entrée doit être formaté (surtout si ce sera appliquée par la validation ou un motif).

• requis: Les navigateurs supportant marquera tous requis domaines (peut-être en les surlignant en rouge) si elles ne sont pas remplis. Certains navigateurs seront également envoyer un avertissement si l'utilisateur tente d'envoyer un formulaire avec les champs obligatoires vides.

  La spéciale : nécessaire pseudo-classe vous permet d'appliquer un style CSS à tous les éléments nécessaires à votre formulaire (en leur donnant une couleur de bordure ou de fond, par exemple). Voici un exemple de style CSS pour le marquage des éléments nécessaires avec une bordure rouge:

   : nécessaire {border: 1px solid rouges}

  Si un champ est nécessaire (avec le requis attribut), il sera considéré comme valide jusqu'à ce qu'elle contient une certaine valeur.

  Validation: La validation des formulaires est une des parties les plus délicates du développement Web. Il est assez facile à mettre en place une forme qui demande des informations de l'utilisateur, mais il peut être très difficile d'être certain que l'utilisateur saisit correctement les informations.

  HTML5 vous aide. Lorsque vous utilisez les éléments d'entrée spéciaux, le navigateur vérifie automatiquement le champ de formulaire pour vous assurer qu'il est dans un format approprié. Si l'entrée est pas valable, le formulaire (généralement) pas présenté, et la spéciale : invalide Pseudo-classe CSS sera associé avec le champ non valide. Il suffit de fournir à votre page CSS manipulation du : invalide Etat:

  : invalide {background-color: rouges}

  Lorsque cet état de CSS est actif, tous les champs invalides auront la : invalide style. Par exemple, si vous avez un couleur terrain et le style fond rouge CSS définie ici, le champ de couleur auront un fond rouge, sauf si l'utilisateur entre une couleur valide (un nom de couleur reconnu ou de la valeur de couleur hexadécimal). De même, la email champ affiche rouge jusqu'à une adresse e-mail valide est entré. Vous ne devez pas ajouter tout autre code dans le formulaire. Il suffit d'ajouter CSS pour afficher les entrées invalides, et le navigateur fera le reste.

  Vous pouvez désactiver la validation pour tout champ en ajoutant le novalidate attribuer à cet élément.

  Il est possible que le navigateur va refuser de traiter une forme jusqu'à ce que tous les champs sont validés, mais ce comportement ne semble pas encore être universel parmi les navigateurs HTML5 conformes.