HTML5 wurde von WhatWG (Web Hypertext Application Technology Working Group) initiiert. Der ursprüngliche Name war die Webanwendung 1.0. Dieser Standard nahm den Standard -Formen 2.0 -Standard ab und wurde von W3C -Organisationen übernommen, um sich in die nächste Generation von HTML5 -Standard zu verschmelzen.
Vorwort
Als Sprache mit der heutigen Programmiersprache hat die HTML-Sprache die Eigenschaften einer benutzerfreundlichen, schnellen und multi-Browsing-Plattformkompatibilität. Mit dem Fortschritt der Zeit hat der HTML -Standard jedoch gestagelt. Dieses Mal kann das Update des HTML5 -Standards, das noch in der Entwicklung befindet, diese Markup -Sprache neue Vitalität gebracht haben. Dieser Artikel konzentriert sich auf Webformen 2.0 in HTML5, d. H. Der Teil des Formens.
Formulare sind auf Webseiten übliche Steuerelemente (Sätze). Von der Registrierung der Website und der Anmeldung bis zu Unternehmensdatenverwaltungssystemen gibt es im Grunde genommen Formulare. Der Grund, warum Formulare so wichtig sind, liegt hauptsächlich daran, dass sie für die Aktualisierung und Interaktion mit einer großen Anzahl von Benutzern und Webhintergrundsdaten verantwortlich sind. Webentwickler können Webformen lieben und hassen. Sie lieben ihre bequeme Funktion, Daten zu sammeln und zu organisieren, und sie hassen ihre Funktionen weitgehend. Einige Funktionen, die bei den endgültigen Website -Benutzern gewöhnlich erscheinen, wie z. B. Eingabe -Typ -Überprüfungen, Formularüberprüfung, Fehleranforderungen usw., müssen alle Entwickler viel Aufwand für die Verwendung von JavaScript und DOM -Programmierungen aufwenden, um diese natürlich erforderlichen Funktionspunkte zu erfüllen. Mit der Popularität von Ajax haben einige JavaScript -Tool -Bibliotheken wie Dojo, Yui usw. bequeme JavaScript -Widgets oder APIs bereitgestellt, um die Belastung der Entwickler zu verringern.
HTML5 -Webformulare 2.0 ist eine umfassende Verbesserung der aktuellen Webformen. Während die einfachen und benutzerfreundlichen Funktionen beibehalten werden, werden viele integrierte Steuerelemente oder Steuerungsattribute hinzugefügt, um die Bedürfnisse der Benutzer zu erfüllen und die Programmierung der Entwickler zu verringern. Meiner Meinung nach hat HTML5 das aktuelle Webformular in den folgenden Aspekten hauptsächlich verbessert:
<Eingabetyp = url> </input><Eingabetyp = E -Mail> </input>
<Eingabetyp = Datum> </input>
<select data = http: // domain/getMyOptions> </select>
<Eingabetyp = Text erforderlich> </input><Eingabetyp = Zahl min = 10 max = 100> </input>
<Beening><Feldname = Name Index = 0> Peter </field>
<Feldname = Passwort index = 0> Passwort </field>
</submission>
Ich werde das neue Formularsystem von HTML5 verwenden, um eine einfache Benutzerregistrierungsschnittstelle zu erstellen, einschließlich Benutzername, Kennwort, Geburtsdatum, Vertraulichkeitsprobleme usw. Der Code lautet wie folgt:
<! docType html> <html> <Head> <style> p Label {width: 180px; float: links; Text-Align: Recht; Padding-Right: 10px} Tabelle {Margin-Left: 80px} Tabelle TD {Border-Bottom: 1PX Solid #ccccc} Eingabe.Submit {Margin-Links: 80px} </style> </head> <body> <Form Action = '/Register' Enctype = x-wwww-Form+xml+xml+xml-method = pl. Um sich zu registrieren) </Label> <Eingabename = 'Name' Erforderlich Typ = 'E -Mail'> </input> </p> <p> <Label für = 'Passwort'> Kennwort </Label> <Eingabename = 'Passwort' Erforderliches Typ = 'Passwort'> </input> </p> <p> <Label für = 'Geburtstag'> Datum der Geburt </label> <Eingabe -Typ = ' für = 'Geschlecht'> Nationalität </label> <select name = 'landes' data = 'Länder <td> Antwort </td> <td> </td> </head> <tr id = Frage id repepa. template repeat-start = 1 repreate-min = 1 repep-max = 3> <td> <Eingabe type = textname = Fragen [Frage] .Q> </td> <td> <Eingabe type = Textname = Fragen. </tr> </table> <p> <Eingabe type = 'sure' value = 'send' class = 'sure'/> </p> </form> </body> </html>Da der HTML5 -Standard noch in der Entwicklung ist, unterstützen verschiedene Browser HTML5 -Funktionen ziemlich begrenzt. Unter ihnen unterstützt die Oper es besser in Form. Dieses Beispiel läuft normalerweise auf Opera9. Die Renderings sind wie folgt:
In diesem Beispiel werden einige neue HTML5 -Formularelemente verwendet, z. Und ein doppeltes Modell wird verwendet, um die Benutzer dazu zu führen, Vertraulichkeitsprobleme auszufüllen. Im Hochladen personalisierter Avatare können Benutzer durch Einschränkung von Dateitypen Bilder zum Hochladen von Inhalten auswählen, die den Standards entsprechen. Das Dropdown-Auswahl-Eingabefeld für die Benutzerauswahl der Nationalität wird in Form einer Outreach-Datenquelle verwendet. Die Outreach -Datenquelle verwendet couties.xml, und der Inhalt lautet wie folgt:
<select xmlns = http: //www.w3.org/1999/xhtml> <option> China </Option> <option> Japan </Option> <option> Korea </Option> </select>
Und das EngTePe of Form ist Anwendung/x-www-form+xml, dh HTML5 XML-Einreichung. Sobald die Formularüberprüfung bestanden wurde, wird der Formularinhalt in XML eingereicht. Sie werden auch feststellen, dass wenn im ID-Eingabefeld keinen Wert aufweist oder wenn eine Zeichenfolge von Nicht-E-Mail-Typ eingegeben wird. Sobald Sie versucht, das Formular einzureichen, wird eine Fehlermeldung vorhanden, die in den Browser integriert ist.
Das Update von HTML5 to Formular Controls ist zweifellos sehr aufregend. Dieser Artikel beschreibt einige neue Funktionen von Formularen, und einige neue Funktionen sind auch sehr aufregend. Ich glaube, dass mit der eingehenden Entwicklung von Standards und der weiteren Verbesserung der Browser-Unterstützung für HTML5 die Arbeit der Gestaltung einer einfachen und einfach zu verwendenden Form sehr einfach wird.