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 texte9c0277ee990771d30fd543a38aca6c0e
Soumettre la saisief9f7c6f4b3828831e895f30b0536400d
Saisie du bouton radio00fea19a478468257ffce77d3f4ce522
Saisie de la case à cocher6d7f9add80ae25bb215435faf820fdeb
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 7a4313034c807dc840f651e5c24969b6 Semblable au nombre, mais il affichera un curseur au lieu d'une zone de saisie.
Color inputd0335cf169d1c69d5fb760bfbec3b54d fera apparaître un sélecteur de couleurs.
La saisie de date6e290236d7c77fdce98cb15bf0dfeea2 fera apparaître un sélecteur de date.
La saisie de l'e-mail e8dc7451c84937575e38c52150e3cc83 s'affiche sous forme de zone de saisie de texte et un clavier personnalisé apparaîtra.
tel input85f46f0e8aaaa3b9a68adb2fc5e483a4 est similaire à la saisie d'e-mail
url input b62e2bff68c9b56c3471a9e06cd94f80 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.
368b3d164100ae4e96620a1520b7c46040587128eee8df8f03d0b607fe983014
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.
701d81aaa14b8afd38d7545721c937f2 aba78b0dcb1db399ec615ce176d67bce4afa15d3069109ac30911f04c56f3338 aba78b0dcb1db399ec615ce176d67bce4afa15d3069109ac30911f04c56f3338 ">4afa15d3069109ac30911f04c56f3338 18bb6ffaf0152bbe49cd8a3620346341

radio

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

Exemple :

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

c179a68332954c65bd5a26509d7f8801Homme
a4353ce1cb381171d2d6de3681550745Femme,
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!