HTML5 Praktisches PHP-Webseitenformular-Design_html5-Tutorial-Fähigkeiten

HTML5 unterscheidet sich in vielen Aspekten wie der Seitenstruktur und der Multimedia-Verarbeitung stark vom bisherigen HTML. In diesem Tutorial führen wir Sie durch die Verwendung von HTML5, CSS3 und PHP, um tatsächlich eine einfache Formularübermittlungsseite zu entwerfen, die den HTML5-Standards entspricht. Leser können die Grundelemente der neuen HTML5-Formularseite erlernen. Die Leser dieses Artikels sind diejenigen, die über gewisse Kenntnisse in HTML, CSS und PHP verfügen.

　Entwurfsskizze des Formulars

Da es in diesem Artikel nicht darum geht, zu lehren, wie man Photoshop erstellt, entwerfen wir lediglich eine Skizze des Formulars und verwenden dann HTML5, CSS3 und PHP, um es zu implementieren. Die Skizze des Formulars, das wir entwerfen möchten, ist wie folgt:

▲

Wie Sie in dieser Entwurfsskizze sehen können, erwarten wir folgende Wirkung: Wenn der Benutzer einen Namen eingibt, wird das Textfeld des NAME-Felds in Form eines Fokus angezeigt, und wenn Sie genau hinschauen, Das E-Mail-Eingabefeld ist ein Kreis. Im Eingabefeld für den Eckrand und im Eingabefeld für den Nachrichtentext können Sie eine Hintergrundgrundkarte sehen. Die Schaltfläche „Senden“ ist eine benutzerdefinierte Schaltfläche.

Beginnen Sie mit dem Entwerfen

Als nächstes beginnen wir mit der Gestaltung des Formulars. In diesem Artikel wird PHP verwendet, sodass Sie mit jedem PHP-Programmiertool zunächst eine index.php-Datei erstellen und dann mit dem Schreiben von Formularen beginnen können, die den HTML5-Standards entsprechen.

　1) Über DOCTYPE

In HTML5 wird die Deklaration von DOCTYPE sehr einfach, der Code lautet wie folgt:

Code kopieren

Code wie folgt: