HTML5 Pratique PHP Web Page Form Design_html5 Compétences du didacticiel

HTML5 est très différent du HTML précédent sur de nombreux aspects tels que la structure des pages et le traitement multimédia. Dans ce didacticiel, nous vous amènerons à utiliser HTML5, CSS3 et PHP pour concevoir une page Web de soumission de formulaire simple conforme aux normes HTML5. Les lecteurs peuvent apprendre les éléments de base de la nouvelle page de formulaire HTML5. Les lecteurs de cet article sont ceux qui ont quelques connaissances en HTML, CSS et PHP.

　Croquis de conception de la forme

Puisque cet article ne concerne pas l'enseignement de la création de Photoshop, nous concevons simplement une esquisse du formulaire, puis utilisons HTML5, CSS3 et PHP pour l'implémenter. L'esquisse du formulaire que nous voulons concevoir est la suivante :

▲

Comme vous pouvez le voir, dans cette esquisse de conception, l'effet que nous espérons obtenir est le suivant : lorsque l'utilisateur saisit un nom, la zone de texte du champ NOM s'affichera sous forme de focus, et si vous regardez attentivement, la zone de saisie du courrier électronique est un cercle. Dans la zone de saisie de la bordure du coin et dans la zone de saisie de la zone de texte du message, vous pouvez voir un fond de carte. Le bouton Soumettre est un bouton personnalisé.

Commencez à concevoir

Ensuite, nous commençons à concevoir le formulaire. Cet article utilisera PHP, vous pouvez donc utiliser n'importe quel outil de programmation PHP pour créer d'abord un fichier index.php, puis commencer à écrire des formulaires conformes aux normes HTML5.

　1) À propos de DOCTYPE

En HTML5, la déclaration de DOCTYPE deviendra très simple, le code est le suivant :

Copier le code

Codez comme suit :

"text /html; charset=utf-8">
🎜>


L'avez-vous vu ? En HTML5, la déclaration de type en tête de page n'a désormais besoin que d'une seule phrase :
　C'est tout. , vous devez comparer Merci de le déclarer comme suit :

Copiez le code

Le code est le suivant : < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >.

Ensuite, nous commençons à concevoir la structure du formulaire de page. Examinons d'abord la structure du formulaire comme indiqué ci-dessous :

Comme vous pouvez. voyez, nous sommes divisés en zone d'en-tête et corps principal La zone principale du formulaire, et la zone de pied de page est la zone inférieure du formulaire. En HTML5, il est en réalité très simple de réaliser tout cela, comme le montre le code suivant :

Copiez le code

Le code est le suivant :

content="text/html; charset=utf -8">

="corps">

< >
< ;/body>



Comme vous pouvez le voir, il n'y a pas de div traditionnel ici, remplacé par le nouvel en-tête des éléments de balise , pied de page et section en HTML5. Celles-ci La balise d'en-tête dans la balise spécifie la zone d'en-tête de la page, la section spécifie la zone principale de la page et la partie de pied de page spécifie la zone de queue de la page. Par rapport à div, leurs significations sont plus claires et sémantiquement plus cohérentes avec les habitudes d'utilisation. Ici, le corps de la classe CSS est également spécifié pour qu'ils puissent unifier leurs styles.
Conception de la partie de formulaire
Examinons ensuite la conception de la partie de formulaire. Examinons d'abord le code comme suit :





Copier le code

Le code est le suivant :

Nom
/label>

Message placeholder="Tapez ici">
🎜>

Ce qui suit présente les différences entre les balises d'entrée en HTML5 et HTML4. En HTML5, les balises d'entrée ont également des attributs tels que le nom et l'identifiant. La plus grande différence est que de nombreux nouveaux types ont été ajoutés à l'attribut type dans HTML5 pour répondre aux besoins des utilisateurs. Malheureusement, tous les navigateurs ne prennent pas actuellement en charge ces nouveaux attributs de type, donc cet article ne les explique que par certains nouveaux attributs de type. la plupart des navigateurs, tels que type=email mentionné dans l'exemple ci-dessus, qui est une zone de texte qui permet uniquement aux utilisateurs de saisir une adresse e-mail. Même si certains navigateurs ne prennent pas en charge la zone de texte email, cela n'a pas d'importance car elle sera reconnue comme une zone de texte type=text traditionnelle Sur le système iOS, lorsque l'attribut type=email est rencontré, elle sera ouverte facilement. saisie. La disposition du clavier de l'e-mail est la suivante :

▲

Dans la balise type=email, veuillez faire attention à l'attribut placeholder. Il est défini sur "tapez ici", ce qui signifie que lorsque l'utilisateur ne saisit pas de contenu dans cette boîte e-mail, un texte invitant l'utilisateur à saisir sera automatiquement envoyé. apparaître. C'est très intéressant. Cela sert effectivement de rappel et est plus efficace que d'écrire avec beaucoup de javascript, comme indiqué ci-dessous :