Der Zweck der neuen HTML5 -Funktion besteht darin, die Unterstützung der Einbettung wie Video und Audio zu verbessern und Entwicklern und Endbenutzern eine einfache Programmierung und eine bessere Benutzererfahrung zu bieten. Jetzt wartet die Internet -Welt und der Browser kann die neue Version von HTML5 unterstützen, wenn sie aktualisiert wird. HTML5 wurde von vielen Browsern wie Safari, Chrome, Firefox, Opera, IE9 unterstützt. Es ist rückwärts kompatibel, aber die heutigen Browser können nicht vollständig mit HTML5 kompatibel sein.
Das Upgrade einer Website auf HTML5 ist ziemlich einfach, da sie mit HTML4 kompatibel ist. Sie müssen nur Ihren DocType ändern. Dieses neue Update macht die Dinge einfach, sodass Sie jetzt alle Ihre Websites aktualisieren können und sie werden nicht abstürzen, da alle HTML4 -Tags in HTML5 immer noch zu 100% unterstützt werden.
HTML5 -Formulare definieren mehr als ein Dutzend neue Eingangstypen und -funktionen, und diese neuen Elemente ermöglichen es den Programmierern, einfacher zu programmieren. Lassen Sie uns unten über diese neuen Funktionen sprechen.
1. Eingabefeld Platzhalter
In HTML4 verwenden Entwickler JavaScript und JQuery als Input -Box -Platzhalter, während Entwickler in HTML5 einen Platzhalter problemlos anzeigen können. Was sind Platzhalter? Platzhalter ist der schnelle Text, der im Eingabefeld angezeigt wird. Wenn Sie auf das Eingangsfeld klicken, verschwindet es automatisch. Sie können das Textspiel auffordern, das der Benutzer in das Textfeld eingeben sollte. Es gibt vielmehr ein E-Mail-Eingabefeld, in dem Sie die Platzhalter [email protected] festlegen können, und es wird verschwinden, wenn Sie auf sie klicken.
Dh FF Safari Chrome Opera iPhone Android
- 3,7+ 4+ 4+ 11+ 4+ -
2. Automatische Fokusereignisse
HTML5 laden einfach eine Webseite, und die Webseite verschiebt den Fokus automatisch auf ein bestimmtes Eingabefeld, genau wie JavaScript. Was ist der Unterschied? Da es sich jetzt nur um ein HTML -Tag handelt, können Benutzer diese Eigenschaft in ihrem Browser leicht deaktivieren. Nicht alle Browser unterstützen Autofokus, aber Browser ignorieren diese Eigenschaft nicht einfach. Wenn Sie möchten, dass alle Browser funktionieren, fügen Sie einfach neue HTML5 -Autofokuseigenschaften hinzu und überprüfen Sie dann, ob der Browser Autofokus unterstützt. Wenn Sie können, müssen Sie kein Autofokus -Skript verwenden. Wenn Sie keinen haben, müssen Sie ein Autofokus -Skript hinzufügen.
Ff dh Safari Chrome Opera iPhone Android
- 4+ 4+ 3+ 10+ - - - -
3. HTML Neu definierter Eingangstyp
1. E -Mail
Das erste Eingabefeld, das ich sagen möchte, ist die E -Mail -Adresse. Ältere Browser, die keine neuen Typen unterstützen, behandeln sie auch einfach als Textfeld, und 99% der Benutzer bemerken diese Änderung erst, wenn sie das Formular einreichen (es wird zu diesem Zeitpunkt eine Formularvalidierung vorliegen).
2. Website
Sprechen wir über das URL -Eingabefeld. Wenn Sie eine URL eingeben müssen, erwarten Sie, sie wie http://www.vevb.com einzugeben. Im URL -Eingangsfeld wird nun eine variable virtuelle Tastatur wie im iPhone angezeigt. Benutzer können problemlos Schrägstriche und .com eingeben. In ähnlicher Weise sind Benutzer diese nicht bewusst, bevor sie das Formular einreichen.
3. Zahlen
Um passende Nummern in HTML4 zu erhalten, müssen Sie JQuery -Skripte verwenden, um die Überprüfung zu unterstützen. HTML5 fügt numerische Typen hinzu. Einige zusätzliche Eigenschaften (optional): min: Gibt die minimale Eingangsnummer an, die vom Eingabefeld akzeptiert werden kann. Max: Ist die maximale Zahl eingereicht. Schritt: Das rechtliche Intervall für die Attribut -Eingabedomäne beträgt 1.
Wie in der obigen Abbildung gezeigt, sind nur Zahlen zulässig (in den meisten Fällen werden diese erst dann bemerkt, bis ein Fehler beim Senden aufgefordert wird), nur 0, 2, 4 sind legal (6 ist illegal, weil der Schritt 10 und legal 0, 10, 20 ...).
4. Digitaler Schieberegler
Mit HTML5 können Sie einen neuen Typ namens Bereich verwenden, und das Eingabefeld wird zum Schieberegler. Ihr Website -Formular kann einen Schieberegler verwenden. Das Attribut -Tag entspricht dem Zahlentyp. Ändern Sie einfach den Typ -Einstellungsart = 'Nummer' in type = 'range'.
5. Kalender
Die besten Neuzugänge bis Datum, Datumspicker -Typen mit dem Namen Datum und DateTime (es gibt weitere zusätzliche Datums-/Zeittypen wie Uhrzeit, Woche, Monat und lokaler Kalender). Viele JavaScript -Frameworks wie JQuery UI und Yiu haben diese Steuerelemente bereits, aber das Hinzufügen eines Kalenderwählers ist ziemlich ärgerlich. HTML5 definiert einen neuen lokalen Datumsauswahl, der keine Skripte auf der Seite verwenden muss. Ab sofort ist die Opera die einzige, die diese Funktion vollständig unterstützt, und für andere Browser können Sie ein alternatives Skript durchführen, falls der Browser es nicht unterstützt. Letztendlich werden jedoch alle Browser aktualisiert.
6. Suche
HTML5 fügt Sucheingabefeldentyp hinzu. Dies ist nichts, aber es ist eine gute Veränderung für einige Benutzer. Es kann einfach die Kanten des Eingangsfelds automatisch kreisen, und wenn Sie mit dem Eingeben beginnen, gibt es rechts ein kleines X. Nicht alle Browser unterstützen es derzeit.
7. Farbe
HTML5 definiert auch die Farbe des Typs, mit dem Sie eine Farbe auswählen und den hexademischen Wert zurückgeben können. Opera11 ist der einzige Browser, der diese Art von Browser unterstützt. Es sollte jedoch nicht viele Leute geben, die diesen Typ verwenden, daher ist es kein großes Problem, ihn nicht zu unterstützen.
8. Formüberprüfung
Das aufregendste neue Feature ist die Formüberprüfung. Die meisten Entwickler bilden eine Validierung, entweder Client oder Server. Vielleicht ersetzt der Formular des HTML5-Formulars Ihre serverseitige Überprüfung möglicherweise nicht, ersetzt jedoch sicherlich Ihre clientseitige Überprüfung. Das Problem bei der Überprüfung von JavaScript ist, dass es für Benutzer einfach ist, es zu umgehen. Es kann einfach durch Deaktivieren von JavaScript umgangen werden. Jetzt, da HTML5 betroffen ist, müssen Sie sich darüber keine Sorgen machen. Die Fehler sind alle native HTML5 -Eingabeaufforderungen und JavaScript wird nicht verwendet.
Dh FF Safari Chrome Opera iPhone Android
- 4+ 5+ 10+ 9+ - - - -
9. Erforderliche Felder
Die Formularvalidierung von HTML5 ist nicht auf die Art des Überprüfungsfeldes beschränkt, sondern ermöglicht auch, dass ein neues zusätzliches Tag aufgerufen wird. Mit dieser neuen Eigenschaft können Entwickler überprüfen, ob das Eingabefeld ohne JavaScript ausgefüllt wird.
Zusammenfassung: Die oben genannten Aktualisierungen sind entscheidend, um die Entwicklungszyklen zu verkürzen und die Benutzererfahrung zu verbessern. Sobald alle Browser HTML5 akzeptieren, übertreffen die nächste Generation von Websites die Erwartungen anderer. HTML5 ist kein Ärger, es wird den Entwicklern sehr helfen und die Benutzererfahrung verbessern.