Résumé des méthodes d'opérations de formulaire et de soumission de formulaire en HTML

Cet article présente principalement la connaissance des éléments de formulaire et de la soumission de formulaires en HTML. Les amis qui en ont besoin peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

élément de formulaire Il possède également plusieurs propriétés et méthodes uniques :

HTMLFormElementHTMLElement

élément d'entrée

L'élément d'entrée est un élément de formulaire très largement utilisé En fonction de la valeur de l'attribut type, il a les utilisations courantes suivantes :

Saisie de texte9c0277ee990771d30fd543a38aca6c0e
Soumettre la saisie54b28e0e73a12e4a8ed487872a6fb5b8
Saisie du bouton radio6684d0ae8c43209f08fdf913c7efad65
Entrée de la case à cochera3ba2f7259366bd2ecccd7f458d58d17
Entrée du numéroecfd47977ad72b6210daa2538bed17fd La zone de saisie ne peut saisir que des nombres et les valeurs maximales et minimales peuvent être définies.
Entrée de plage 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.
Date input6e290236d7c77fdce98cb15bf0dfeea2 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 :

668fddbff26385b2ae80015387b590ffJouer à des jeux
1f7eba1f90c8bdebe5fda9a7f4bccda4Écrire le code

c179a68332954c65bd5a26509d7f8801Homme
ad211984f728158351cb73d2c352eb1bFemme,
Ce sont deux ensembles de radio

espace réservé

qui fournissent des indices qui décrivent la valeur attendue du champ de saisie.
L'invite apparaîtra lorsque le champ de saisie est vide et disparaîtra lorsque le champ recevra 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 Soumettre 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 de l'élément bouton dans la spécification, il s'agit de submit, mais la valeur par défaut sous IE678 est bouton, donc 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. l'élément bouton et l'événement de soumission du formulaire sont différents. L'ordre d'exécution dans les navigateurs est différent, donc 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), À ce stade, vous pouvez utiliser la méthode unique submit() de l'élément de formulaire pour soumettre le 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. la vérification et d'autres opérations doivent être effectuées avant d'appeler la méthode submit().

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

Soumission du formulaire et expérience utilisateur

Basé sur le populaire ajax + POST inter-domaines (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.

Validation du formulaire JavaScript

JavaScript peut être utilisé pour valider ces données d'entrée dans les formulaires HTML avant que les données ne soient envoyées au serveur.

Les données de formulaire typiques validées par JavaScript sont :

用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？
必填（或必选）项目

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

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

下面是连同 HTML 表单的代码：

<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>

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}

下面是连同 HTML 表单的完整代码：

Email: 
 

快捷键提交

在没有form元素包裹的情况下，即使当前页面的焦点在表单元素上，按回车键也不会触发表单提交，对于用户而言，需要从键盘控制切换到鼠标/手势控制，破坏了原有的流畅度。解决方法最简单的就是在外层用一个form元素包裹，并且确定form元素中起码有一个提交按钮。此时当表单中的输入域得到焦点时，用户按回车键便会触发提交。

浏览器记住账号密码

在提交表单时，高级浏览器包括移动端浏览器，会询问用户是否需要记住用户账号密码，对于一般用户而言，这是一个十分有用的特性，特别是在移动端，可以为用户节省很多时间。在没有form元素的情况下，浏览器不会弹出该询问窗口。

我们在开发一个表单应用的时候，不应该尝试去除form元素直接进行提交，在form元素中应该包含一个提交按钮，如果是button元素，应该手动加上type="submit"属性。提交事件的处理在form元素的submit事件中，而非提交按钮的click事件。

相关推荐：

html中Form表单提交时页面不跳转的方法详解

序列化form表单教程详解

有关jquery中form表单序列化的一些问题指导

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!