Comment utiliser la soumission de formulaire HTML en HTML

Cette fois, je vais vous montrer comment utiliser la soumission de formulaire html en HTML. Quelles sont les précautions lors de l'utilisation de la soumission de formulaire html. Voici des cas pratiques, jetons un coup d'œil.

Nous introduisons ici les connaissances sur les éléments de formulaire et la soumission de formulaire.

Élément de formulaire

L'interface DOM de l'élément de formulaire est HTMLFormElement, qui hérite de HTMLElement, il a donc les mêmes attributs par défaut que les autres éléments HTML, mais il a également plusieurs uniques 🎜>Attributs et méthodes :

Valeur de l'attribut

Description

accepter- charset Le jeu de caractères que le serveur peut gérer. Plusieurs jeux de caractères sont séparés par des espaces.

action L'URL qui accepte la demande. Cette valeur peut être remplacée par l'attribut formaction de l'élément input ou bouton dans le formulaire. element.

elements Collection de tous les contrôles du formulaire (HTMLCollection)

enctype Le type d'encodage demandé. Cette valeur peut être remplacée par l'entrée dans l'élément de formulaire ou l'attribut formenctype du bouton. element

length Le nombre de contrôles dans le formulaire

method Le HTTP type de requête à envoyer, généralement "get" ou "post". par l'attribut formmethod de l'élément input ou bouton dans l'élément de formulaire

name Le nom du formulaire

reset() Réinitialise tous les champs du formulaire aux valeurs par défaut

submit() Soumettre le formulaire

target Le nom de la fenêtre utilisée pour envoyer des demandes et recevoir des réponses, cette valeur peut être remplacée par l'attribut formtarget de l'élément d'entrée ou de bouton dans l'élément de formulaire

autocomplete Indique s'il faut compléter automatiquement l'élément de formulaire

élément d'entrée

l'élément d'entrée est très largement utilisé Les éléments de formulaire ont les utilisations courantes suivantes en fonction de la valeur de l'attribut type :

Saisie de texte
Soumettre la saisie
Saisie du bouton radio
Saisie de la case à cocher< input type="checkbox" name="Même nom" value="Différentes valeurs correspondantes">
Saisie du numéro< ;input type="number" min="" max=""> La zone de saisie ne peut saisir qu'un nombre pour définir la valeur maximale et la valeur minimale.
Range input Semblable au nombre, mais il affichera un curseur au lieu d'une zone de saisie.
Color input fera apparaître un sélecteur de couleurs.
La saisie de date fera apparaître un sélecteur de date.
La saisie de l'e-mail s'affiche sous forme de zone de saisie de texte et un clavier personnalisé apparaîtra.
tel input est similaire à la saisie d'e-mail
url input est similaire à la saisie d'e-mail, et un clavier personnalisé apparaîtra. L'élément
textarea peut créer une zone de texte multiligne.

Les valeurs d'attribut des colonnes et de la ligne représentent les caractères du respectivement la largeur et la hauteur de la zone de texte.
L'élément select et l'élément option sont utilisés ensemble pour créer un menu déroulant.
">

radio

Comment regrouper ? Définissez simplement différents attributs de nom

Exemple :

< ;input type="radio" name="favourite" value="Jouer à des jeux">Jouer à des jeux
Écrire le code

Homme
Femme,
C'est ici que les deux ensembles de radio

espace réservé

fournissent des indices qui décrivent la valeur attendue du champ de saisie.
Cette info-bulle apparaît lorsque le champ de saisie est vide et disparaît lorsque le champ prend le focus.

type=hidden

Définir l'entrée masquée. Les champs masqués ne sont pas visibles pour l'utilisateur. Les champs masqués stockent généralement une valeur par défaut et leurs valeurs peuvent également être modifiées par JavaScript.
Par exemple, il est utilisé à des fins de sécurité, transmettant des valeurs de nom et de valeur invisibles à l'arrière-plan, permettant à l'arrière-plan d'effectuer une vérification pour empêcher la falsification de page.

Bouton Soumettre

Ajoutez un bouton d'envoi au formulaire pour permettre aux utilisateurs de soumettre le formulaire.

Les trois boutons suivants peuvent déclencher l'événement de soumission du formulaire lorsqu'ils sont cliqués :

<input type="submit" />
<button type="submit"></button>
<input type="image" />

La valeur par défaut du type d'élément de bouton dans la spécification est submit, mais sous IE678, la valeur par défaut la valeur est un bouton. Par conséquent, pour des raisons de compatibilité, il est nécessaire d'ajouter manuellement l'attribut type="submit" à l'élément bouton.

événement de soumission

Les débutants peuvent penser que la soumission du formulaire est déclenchée par l'événement de clic du bouton de soumission. En fait, ce n'est pas le cas de l'événement de clic de l'élément de bouton et de la soumission. Les événements du formulaire sont exécutés dans un ordre différent dans différents navigateurs. Premièrement, afin de contrôler avec précision l'événement de soumission du formulaire, nous choisirons d'effectuer une vérification et d'autres opérations dans l'événement de soumission du formulaire.

form.addEventListener('submit', function (e) {
  if (valid()) {
    ...
  }
  e.preventDefault()
})

Lorsqu'il n'y a aucun des trois boutons ci-dessus dans l'élément de formulaire, l'utilisateur ne pourra pas soumettre le formulaire (la touche Entrée est également invalide. Dans ce cas, la soumission unique). () de l'élément de formulaire peut être utilisée. Lors de l'exécution d'une soumission de formulaire, il convient de noter que l'appel de la méthode submit() ne déclenchera pas l'événement de soumission de l'élément de formulaire et que d'autres opérations doivent être effectuées avant d'appeler la méthode submit(). méthode submit().

if (valid()) {
  form.submit()
}

Soumission du formulaire et expérience utilisateur

Basé sur la technologie populaire ajax + cross-domain POST (CORS), nous sommes susceptibles de soumettre des données directement au serveur sans utiliser l'élément de formulaire . Bien que cela fonctionne, cela dégrade l'expérience dans la plupart des cas.

JavaScript Validation de formulaire

JavaScript peut être utilisé pour valider les données saisies dans les formulaires HTML avant que les données ne soient envoyées au serveur.

Les données de formulaire typiques vérifiées par JavaScript sont :

L'utilisateur a-t-il rempli les champs obligatoires dans le formulaire ?
L'adresse e-mail saisie par l'utilisateur est-elle légale ?
L'utilisateur a-t-il saisi une date valide ?
L'utilisateur a-t-il saisi du texte dans le champ numérique ?
Éléments requis (ou requis)

La fonction suivante permet de vérifier si l'utilisateur a rempli les éléments requis (ou obligatoires) dans le formulaire. Si le champ obligatoire ou le champ obligatoire est vide, une boîte d'avertissement apparaîtra et la valeur de retour de la fonction est fausse, sinon la valeur de retour de la fonction est vraie (ce qui signifie qu'il n'y a pas de problème avec le data) :

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}

<html>
<head>
<script type="text/javascript">
 
function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {alert(alerttxt);return false}
  else {return true}
  }
}
 
function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}
  }
}
</script>
</head>
 
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
 
</html>

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment insérer une vidéo dans une page Web HTML

Comment formater et générer des données JSON en HTML

Comment utiliser HTML pour créer un champ de recherche translucide flottant fixe mobile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!