Verzeichnis
A, bilden Einführung
Etikett auf einer Webseite Form ist für die Datenerfassung Elemente, die so genannten Form verantwortlich. Die häufigste Login - Seite, die eine Form ist , die Hauptform bildet, dessen Innenraum in der Regel eine Reihe von Eingabefeldern enthält , die für die Erhebung von Daten und eine Absenden - Button, wie in (Der weiße Bereich ist die Form):
Form Etikett von der Geburt des Internets früh war (es wurde früh in JavaScript geboren, so kann die Form normalerweise völlig unabhängig von JavaScript in der Tat in dem Fall verwendet werden, es ist eine Form gelaicht JavaScript). Hier ist eine häufige Form (Artcode weggelassen):
<form action="/user/userLogin.do" method="post">
<div class="form-example">
<label for="name">用户名: </label>
<input type="text" name="name" id="name" required>
</div>
<div class="form-example">
<label for="password">密码: </label>
<input type="password" name="password" id="password" required>
</div>
<div class="form-example">
<input type="submit" value="提交">
</div>
</form>
Geben Sie den Benutzernamen und das Kennwort, klicken Sie auf Senden der Daten an die Adresse zu senden /user/userLogin.do. Wenn validiert, wird die Seite in der Regel auf das System Startseite umgeleitet werden. Wenn die Überprüfung fehlschlägt, wird der allgemeine auf die aktuelle Seite umgeleitet werden, und prompt fehlgeschlagenen Login. Aufgrund der Notwendigkeit , umleiten, so dass , wenn Sie die Daten durch Formular abgesendet haben , neigen sie dazu, die Seite zu aktualisieren.
In der Front-End - Anwendungsentwicklung und technischen Überblick über den Artikel , den wir über vor gesprochen, ist in der frühen Entwicklung des Internets, Geschwindigkeit relativ langsam. Website - Benutzer sendet eine Form, in der Regel ein Dutzend oder sogar Dutzende von Sekunden vorgelegt , die Ergebnisse zu sehen. Wenn ein Benutzer fehlt ein Pflichtfeld in einer Form, wie die zehn Sekunden vor der Systemeingabeaufforderung, die der Benutzer nicht akzeptabel ist.
Um Daten einige einfache Validierung vorgelegt (zB ob ein Element leer ist, oder das richtige Format), bevor das Formular abgeschickt wird, wurde JavaScript geboren. Zu dieser Zeit ist die wichtigste Aufgabe JavaScript Formularvalidierung, um die lange Wartezeit aufgrund von Eingabefehlern durch den Benutzer zu reduzieren.
Mit der Entwicklung von JavaScript, die nicht mehr auf einfaches Feld begrenzt wird überprüft. Ajax-Technologie ermöglicht es Entwicklern, nicht das action-Attribut verwenden Sie das Formular einzureichen, anstatt über direkte manuelle Verwendung JavaScript. Vorteile von Ajax manuell über die Form ist, dass, nachdem Sie Ihre Formularseite einreichen nicht Redirect, und müssen daher nicht die Seite aktualisieren. Die in vielen Fällen kann die Benutzererfahrung verbessern.
Darüber hinaus bietet JavaScript DOM - Modul die native FormDataKonstruktor für ein Formular - Objekt zu konstruieren. Durch die FromData.prototype.appendMöglichkeiten , Daten fügen Ihnen das Formular eingereicht werden. Auf diese Weise, auch wenn Ihre HTML - Formular in der Form nicht enthalten ist, können Sie immer noch eine analoge Form Vorlage Daten. Dies wird später im Detail beschrieben.
Zwei Form von globalen Eigenschaften
1. Aktion
Adresse definiert das Formular abzuschicken.
Wenn Sie an Typ klicken , submitwenn Sie die Taste, wird der Browser auf das aktuelle Formular an die angegebene Adresse Aktion eingereicht werden. Wie zum Beispiel:
<form id="form" action="/user/userLogin.do">
<input name="username">
<input type="submit" value="提交">
</form>
Klicken Sie auf den Absenden - Button, wird der Benutzername auf die Parameter vorgelegt werden /user/userLogin.dofür die Verarbeitung.
Neben automatisch oben einreichen, können Sie auch Objekte bilden durch einen JavaScript - DOM Aufruf direkt Modul submitmanuelle Methode vorgelegt. Wie zum Beispiel:
var form = document.getElementById("form");
// 如果确定知道是页面的第几个表单，也可以这样写
// var form = document.forms[0];
form.submit(); // 提交表单
Diese Art von Verhalten mit einem Klick submitauf eine Schaltfläche ist das gleiche.
2. accept-charset
Encoding Listenformat von dem Server unterstützt, können mehrere Werte, Normen, die von einem Raum mehrere Werte getrennt haben (HTML4 erlauben Leerzeichen oder Komma, aber HTML5 Bestimmungen nur Leerzeichen verwenden können).
Der Standardwert für diese Eigenschaft ist „UNKNOWN“, diesmal Form der Codierung Formats im Einklang mit dem aktuellen Dokument. Wenn ein einzelner Wert, wird das Formular codiert, dass Format. Wenn eine Vielzahl von Sollwerten, wird der Browser in der Reihenfolge seiner ersten Codierungsformat codiert Form unterstützt geschrieben werden. Wie zum Beispiel:
<form action="" accept-charset="UTF-8 GBK ISO-8859-1">
...
</form>
Wenn der Browser unterstützt UTF-8, wird es eine Form auf UTF-8-Codierung sein, sonst prüfen. Im Allgemeinen verwendet das Formular das gleiche Codierung Format wie die aktuelle Seite, so wird diese Eigenschaft nur selten verwendet.
3. die automatische Vervollständigung
Autofill bildet.
Browser haben die Fähigkeit , die Erinnerung an die Geschichte zu betreten. Wie zum Beispiel:
die autocompleteEinstellung onkann diese Funktion (das Standardattribut ist auf, und deshalb hier weggelassen) eingeschaltet werden.
<form action="" autocomplete="on">
...
</form>
Zu diesem Zeitpunkt, wenn der Benutzer das Eingabefeld Daten klickt eingegeben wurde, wird der Browser automatisch Geschichte Pop, um Hilfe Benutzer schnell ein Formular ausfüllen. Wenn der Benutzer eine Anzahl von Zeichen eingibt, wird der Browser-Verlauf in Übereinstimmung mit der aktuellen Eingangsdaten auszufiltern.
Für Vertraulichkeit starkes Feld, können Sie autocompleteAttribut offdie Browser - History - Aufzeichnungen zu verhindern.
Um den Etikettensatz zu bilden autocompleteEigenschaft wird Auswirkungen auf alle Input - Kontrollen innerhalb der Form. Wenn eine kleine Anzahl von Kontrollen in Form inkonsistenter Performance mit anderen Steuerungen können diese Kontrollen werden als separate neu definiert autocompleteEigenschaft.
4. enctype
Wenn das Formular abzuschicken die POST-Methode definiert wird, verwendet, um die Form von MIME (Multipurpose Internet Mail Extensions, Typ Multipurpose Internet Mail Extensions, ist ein Standard-Dokumentenanalyse, verschiedene MIME-Typen, analytischen Methoden nicht gleich sind) Typ.
Frühe Formen können eine Datei nicht laden, werden alle Felder in dieser Zeit der Form kann ähnlich den Hintergrund URL - Abfrageparameter, wie Form MIME - Typ wie definiert in einem Format eingereicht werden application/x-www-form-urlencoded, wobei es die gleiche wie die URL - Parameter werden die Formulardaten zu analysieren.
Und wenn die Formulardateien Feld abgegeben wird , umfassen, können Sie diesen MIME - Typen verwendet werden , da die Datei nicht wie URL - Suchparameter behandelt werden. Für Formulardatei enthält Felder notwendig , um enctypeden Parametersatz multipart/form-data, die eine Konfiguration einer mehrteiligen Form (Text und Dateien) angezeigt wird . Wie zum Beispiel:
<form action="" enctype="multipart/form-data">
<input type="file" name="file">
...
</form>
Darüber hinaus fügt HTML5 auch eine Art: text/plaindiesmal die Form als Klartext zu laden.
5. Verfahren
Form der Unterwerfung, einschließlich post, getund dialog.
postDie gängigste Methode ist vorzulegen, Formulardaten ist sicherer, der empfohlene Weg ist das Formular abzuschicken.
getWird in der Rückseite des Eigenschaftswert der Aktion direkt gespleißt Parameter als Abfrageparameter bilden, senden Daten in die Quere zu kommen. So leicht zu Datendiebstahl führen können Daten nur dann, wenn Anforderungen keine Privatsphäre verwendet werden.
dialogWenn das Formular befindet sich zu bilden , <dialog>die Etiketten, kann es nach der Einreichung fertige Form in dem geschlossenen Dialog verwendet werden.
6. Name
Name des Formulars.
Im allgemeinen Substitution id. Im Gegensatz zu inputden nameAttributen, Formular - Tag - nameAttribute der Regel nur verwendet , um schnell die Form zu finden, und daher die ID stattdessen verwenden kann.
Beachten Sie, dass, erfordert HTML5 , dass alle Formen innerhalb der Seite nameAttribut kann nicht wiederholt werden, was id unwiederholbar Anforderungen sind ähnlich ist. Also , wenn die Nutzung von nameEigentum, sollten wir uns auf dieses Problem aufmerksam zu zahlen.
7. Ziel
Nachdem Sie das Formular Angabe vorgelegt wird, die Seite zu laden, Hintergrund, die der Rückgabewert.
Wir wissen, dass das Formular in der Regel durch diesen Parameter umgeleitet auftritt, können wir die Anzeigeposition der Umleitungsseite ändern. Dieser Parameter hat fünf Werte:
- _self , die aktuelle Seite Anzeige Umleitungsseite, der Standardwert der Immobilie. An dieser Stelle hinter der Bühne zurück umadressierenseite die aktuelle Seite ersetzt, aufgetreten , dass Seiten.
- _blank , in einem neuen Dokumentfenster des Rückgabewert zu laden. Zu diesem Zeitpunkt wird der Browser eine neue Registerkarte Anzeige der Umleitungsseite erstellen, die aktuelle Seite zu verlassen.
- _parent , der Rückgabewert wird in dem übergeordneten Fenster geladen. Wenn die aktuelle Form in den Iframe befindet, das Formular abgeschickt wird, wird die Umleitungsseite in die übergeordnete Seite geladen. Ansonsten ist das Verhalten im Einklang mit _self.
- zu _top , wird der Rückgabewert in dem oberen Fenster geladen. Redirect Seite wird in den oberen Rand des Fensters geladen werden, die vollständig die aktuelle Seite ersetzt, und zwar unabhängig davon , ob die Form in vielen Schichten iframe verschachtelt ist.
- IframeName , durchgeführt innerhalb eines iframe geladen Rückgabewert. Zu dieser Umleitungsseite wird in den angegebenen iframe geladen werden.
Drei, Form Eingabekontrolle
bilden bilden die inputHaupteingabesteuerelemente, entsprechend typeunterschiedliche Werte, verschiedene Arten von Daten eingegeben werden. Das allgemeine Format ist:
<input type="text" name="username">
nameDas Eigentum ist inputdas Etikett sehr wichtiges Attribut. Wenn das Formular abgeschickt wird, nameist der Feldname des Parameters, das heißt, ist der Hintergrund auf der Basis nameEigenschaft , um die Formularparameter zu erhalten. Der Ist - Wert an den Server gesendet werden , in den gespeicherten Objekteigenschaften.inputvalue
Das Folgende ist eine gemeinsame inputArt:
- die Taste , normale Taste. Und
<button>Etikett ähnlich wie JavaScript - Code für die Durchführung allgemeiner. - die CheckBox , ein Kontrollkästchen. Es wird durch eine Reihe von Kontrollkästchen definiert. Es sollte beachtet werden , dass die gleiche Gruppe mit der gleichen Box verwenden müssen
name, wird dies auf dem Hintergrund als ein Feld abgegeben werden. - Farbe (die HTML5) , Color Picker. Es ist eigentlich eine Farbeingabefeld und der allgemeine Unterschied ist , dass das Eingabefeld, auf dem Feld klicken , wird automatisch Browser um die Farbauswahl öffnen. Klicken Sie Mitnahmen Farbe, der Wert wird automatisch ausgefüllt
input. - DATE (HTML5) , Datumsauswahl. Klicken Sie auf ein Kalender - Steuerelement Pop - up, können Sie ein Datum auswählen, genau auf das Jahr / Monat / Tag.
- Datetime (HTML5) , mit der Zeit Datumsauswahl. Es ist genauer als das Datum, die Uhrzeit kann ausgewählt / min / sec werden.
- local-datetime (HTML5) , mit einer ähnlichen Datum Datumzeit Selektor. Aber das Format Zeitformat für die Website , die in Ihrer Umgebung, anstatt das internationale Standardformat.
- Der Monat (die HTML5) , für das Eingabefeld Monat auswählt.
- Woche (die HTML5) , für das Eingabefeld Wochen wählen.
- Zeit (die HTML5) , wird eine Steuerzeit, bei der Auswahl / min / sec eingeblendet.
- E - Mail (HTML5) , Postfach Eingabekontrolle. Geben Sie die E - Mail - Adresse verwendet.
- Datei , Datei - Upload - Steuerelement. Klicken Sie auf die Datei auszuwählen , werden vom lokalen Server hochgeladen. Um Satz
multipleEigenschaft ermöglicht die Steuerung mehrerer Dateien zu laden, die in einem Array gespeichert sind, durch das Steuerobjektfileskann die Eigenschaft zugreifen. - versteckt , verborgen Formularfelder. Eine Eigenschaft , die
type="hidden"sichinputauf der Seite nicht angezeigt, aber sein Wert wird in der Regel an den Server gesendet werden. Solches Eingabefeld benötigt keinen Benutzer manuell füllt mit den Formulardaten oder Speichern für ein paar globalen Daten in den eingereichten verwendet. Zum Beispiel, wenn wir erfassen müssen sich die Benutzer-Anmeldeposition, und dieser Wert nicht eine Benutzereingabe erfordern, können wir die Browser - Oberfläche aufrufen geographischen Ortsinformationen in einem versteckten Feld gespeichert zu erhalten , das Formular abzuschicken. In diesem Fall muss der Benutzer uns nicht zu sammeln Standortinformationen wahrnehmen (vorausgesetzt , dass der Benutzer nicht deaktivieren Lage). - Bild , Bildtyp Submit - Button. Die Funktion ist ähnlich wie
submitdie Schaltfläche zum Senden verwendet wird , wenn ein Bild. - Nummer (die HTML5) , digitales Eingabefeld ein . Das Eingabefeld kann nur Zahlen eingeben, einschließlich Ziffern und Dezimalstellen. Standard mit einem Pfeil nach unten, um den aktuellen Wert für ein plus oder minus ein.
- Passwort , Passwort - Eingabefeld. Inhalt der Steuerung wird Eingabe verdeckt, in der Regel angezeigt als Punkte oder Sternchen (und Browser - Implementierungen bezogen).
- Radio , Radio - Buttons. Beachten Sie, dass jede Option Optionsfeld Gruppe muss gleich sein
name. - Bereich (die HTML5) , mit einem Schieber der Gleitstücks numerischen Felder (z.B. Lautstärkeregler, schieben den Schieber um den Wert zu ändern).
- die RESET , die Reset - Taste. Klicken Sie auf diese Schaltfläche , um das Formular zurück.
- Suchen , das Suchfeld ein .
- das Absenden , Senden. Klicken Sie auf die Art
submitder Taste das aktuelle Formular einzureichen, eingereicht zu positionierenformdas LabelactionAttributwert. - Tel (HTML5) , für eine Telefonnummer eingegeben werden .
- Text , Klartextfelder, der Standard - Typ der Eingabesteuerung.
- URL für eine URL eingeben.
Zusätzlich zu inputoff-label unterstützt, Form, wie select(Auswahlfeld), textarea(mehrzeiligen Textfeld) einer solchen Eingangssteuerung, beschrieben hier nicht im Detail.
Vier, Form der manuellen Eingabe
Rufen Sie das Objekt nicht das Formular abzuschicken oben beschrieben, hier ist die manuelle submitMethode , um die Form zu unterbreiten, sondern durch ajaxdie Art und Weise das Formular abzuschicken. Dieser Ansatz erfordert keinen Hintergrund Umleitung, denn ohne eine Aktualisierung der Seite Szene sehr praktisch.
Um zu schreiben, einfach, wir jQuery verwenden, um zu erreichen, andere Frameworks wie axios ist ähnlich.
1. Die Konfiguration Form von Datenobjekten,
Bevor Sie das Formular manuell einreichen, müssen Sie die Formulardaten zu erhalten. JavaScript bietet ein Formular Objektkonstruktor nativer: FormData. Wenn es in Form der aktuellen Seite vorhanden ist, können Formularobjekte direkt die Formulardatenobjekte verwendet werden , zu konstruieren:
var form = document.getElementById("form");
var formData = new FormData(form);
Formdata hier ist unsere Form von Datenobjekten, kann es direkt an den Server gesendet werden.
Wenn wir nur einen Satz von Daten an den Server in Form von Form, während keine solchen Seite auf ein Formular einreichen möchten, kann direkt FormDataForm von Datenobjekten aufgebaut, und dann appenddazu Feldmethode hinzugefügt. Wie zum Beispiel:
var formData = new FormData();
formData.append("username", "carter");
formData.append("password", "123");
In diesem Fall wird formDataauch ein Objekt Vorlage Datenform, aber es ist nicht von bestehenden Objekten aufgebaut bildet.
2. Kontaktformular
Senden gemeinsamen Beitrag zu verwenden, indem Sie:
$.ajax({
url : "/user/userLogin.action",
type : "POST",
data : formData,
contentType: "multipart/form-data",
success : function(data) {
... // 提交成功
},
error: function (error) {
... // 提交失败
}
});
Wenn das Formular nicht eine Datendatei enthält, oder Sie können contentTypefestlegen application/x-www-form-urlencoded(Bedürfnisse in Einklang mit dem Backend).
Der Code ist eine einzelne Datei sehr üblicher Weg, zu diesem Zeitpunkt einen Dateityp von Input-Tag bieten wir nur noch zu unterbreiten, die Seite, um die Datei, die Sie hochladen möchten, erhalten verwendet und dann in den Formdata-Objekten gespeichert das Dateiobjekt sein kann, Sie haben keine Seite auf einem speziellen Formular zu setzen.
Über Formdata - Objekte, die MDN - Formdata hat Dokument eine sehr ausführliche Einführung, müssen Sie Sie selbst schauen wissen können.
Zusammenfassung
Wissensform enthielt insbesondere in einer Form , wenn auch nicht wirklich, aber fast alle eng mit der täglichen Entwicklung. Um die Form zu meistern, das Wichtigste ist es, verschiedene Arten von Fach zu verwenden input, durch die Notwendigkeit folgten die neuen HTML5 semantische Tags zu verwenden, wie filedset und Legende bilden.
