Zusammenfassung der Methoden für Formular- und Formularübermittlungsvorgänge in HTML

Dieser Artikel stellt hauptsächlich das Wissen über Formularelemente und Formularübermittlung in HTML vor. Freunde, die es benötigen, können darauf zurückgreifen.

Formularelement Es verfügt außerdem über mehrere einzigartige Eigenschaften und Methoden:

HTMLFormElementHTMLElement

Eingabeelement

Das Eingabeelement ist ein sehr häufig verwendetes Formularelement. Abhängig vom Wert des Typattributs hat es die folgenden allgemeinen Verwendungszwecke:

Texteingabe< ;input type="text" name="">
Eingabe senden
Optionsfeldeingabe
Kontrollkästchen-Eingabe
Zahleneingabe< input type="number" min="" max=""> Das Eingabefeld kann nur Zahlen eingeben und die Maximal- und Minimalwerte können festgelegt werden.
Bereichseingabe Ähnlich wie Zahl, es wird jedoch ein Schieberegler anstelle eines Eingabefelds angezeigt.
Farbeingabe öffnet eine Farbauswahl.
Datumseingabe öffnet eine Datumsauswahl.
E-Mail-Eingabe wird als Texteingabefeld angezeigt und eine benutzerdefinierte Tastatur wird angezeigt.
Tel-Eingabe ähnelt der E-Mail-Eingabe
URL-Eingabe ähnelt der E-Mail-Eingabe und es wird eine benutzerdefinierte Tastatur angezeigt. Das
textarea-Element kann einen mehrzeiligen Textbereich erstellen.

Die Attributwerte von cols und row stellen die Zeichen dar Breite und Höhe des Textbereichs.
Das Select-Element und das Option-Element werden zusammen verwendet, um ein Dropdown-Menü zu erstellen.
">

radio

Wie gruppiere ich? Einfach verschiedene Namensattribute festlegen

Beispiel:

Spiele spielen
Code schreiben

Männlich
Weiblich,
Dies sind zwei Sätze von Radio-

Platzhaltern

, die Hinweise liefern, die den erwarteten Wert des Eingabefelds beschreiben.
Die Eingabeaufforderung erscheint, wenn das Eingabefeld leer ist, und verschwindet, wenn das Feld den Fokus erhält.

type=hidden

Versteckte Eingabe definieren. Ausgeblendete Felder sind für den Benutzer nicht sichtbar. Versteckte Felder speichern normalerweise einen Standardwert und ihre Werte können auch von JavaScript geändert werden.
Zum Beispiel wird es zu Sicherheitszwecken verwendet, indem für den Benutzer unsichtbare Namens- und Wertwerte an den Hintergrund übertragen werden, sodass der Hintergrund eine Überprüfung durchführen kann, um Seitenfälschungen zu verhindern.

Schaltfläche „Senden“

Fügen Sie dem Formular eine Schaltfläche „Senden“ hinzu, damit Benutzer das Formular senden können.

Die folgenden drei Schaltflächen können beim Klicken das Absendeereignis des Formulars auslösen:

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

Der Typstandardwert des Schaltflächenelements In der Spezifikation lautet es „submit“, aber der Standardwert unter IE678 ist „button“. Aus Kompatibilitätsgründen ist es daher erforderlich, das Attribut „type="submit" manuell zum Schaltflächenelement hinzuzufügen.

Sendeereignis

Anfänger denken möglicherweise, dass das Senden des Formulars durch das Klickereignis der Schaltfläche „Senden“ ausgelöst wird Das Schaltflächenelement und das Übermittlungsereignis des Formulars sind unterschiedlich. Die Ausführungsreihenfolge in Browsern ist unterschiedlich. Um das Formularübermittlungsereignis genau zu steuern, werden wir uns dafür entscheiden, Überprüfungen und andere Vorgänge im Übermittlungsereignis des Formulars durchzuführen.

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

Wenn im Formularelement keine der oben genannten drei Schaltflächen vorhanden ist, kann der Benutzer das Formular nicht senden (die Eingabetaste). ist ebenfalls ungültig. Zu diesem Zeitpunkt können Sie die eindeutige submit()-Methode des Formularelements verwenden, um das Formular zu senden. Beachten Sie, dass der Aufruf der Submit-Methode () das Submit-Ereignis des Formularelements nicht auslöst Vor dem Aufruf der submit()-Methode sollten Überprüfungen und andere Vorgänge durchgeführt werden.

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

Formularübermittlung und Benutzererfahrung

Basierend auf dem beliebten Ajax + domänenübergreifenden POST (CORS )-Technologie werden wir Daten wahrscheinlich direkt an den Server übermitteln, ohne das Formularelement zu verwenden. Dies funktioniert zwar, beeinträchtigt jedoch in den meisten Fällen das Erlebnis.

JavaScript-Formularvalidierung

JavaScript kann verwendet werden, um diese Eingabedaten in HTML-Formularen zu validieren, bevor die Daten an den Server gesendet werden.

Die typischen von JavaScript validierten Formulardaten sind:

用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (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表单序列化的一些问题指导

Das obige ist der detaillierte Inhalt vonZusammenfassung der Methoden für Formular- und Formularübermittlungsvorgänge in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!