Comment ajouter un formulaire avec KompoZer

Lorsque vous créez des pages Web, vous devez souvent traiter des entrées soumises par l'utilisateur, telles qu'une page de connexion, la création d'un nouveau compte, ou soumettre des questions ou des commentaires. Les entrées utilisateur sont collectées et envoyées au serveur Web à l'aide d'un formulaire HTML. Les formulaires sont faciles à ajouter avec les outils intégrés de KompoZer. Tous les types de champs de formulaire pris en charge par HTML 4.0 peuvent être ajoutés et modifiés avec KompoZer, mais pour ce didacticiel, nous allons utiliser les boutons texte, zone de texte, soumettre et réinitialiser.

Créer un nouveau formulaire

KompoZer propose de nombreux outils de formulaire que vous pouvez utiliser pour ajouter des formulaires à vos pages Web. Vous accédez aux outils de formulaire en cliquant sur le bouton Formulaire ou sur le menu déroulant correspondant de la barre d’outils. Notez que si vous n'écrivez pas vos propres scripts de gestion de formulaire, vous devrez obtenir des informations pour cette étape dans la documentation ou auprès du programmeur qui a écrit le script. Vous pouvez également utiliser des formulaires mailto mais ils ne fonctionnent pas toujours.

1. Placez votre curseur à l'emplacement où vous souhaitez que votre formulaire apparaisse sur la page.
2. Clique le Forme bouton dans la barre d’outils. La boîte de dialogue Propriétés du formulaire s'ouvre.
3. Ajoutez un nom pour le formulaire. Le nom est utilisé dans le code HTML généré automatiquement pour identifier le formulaire et est requis. Vous devez également enregistrer votre page avant de pouvoir ajouter un formulaire. Si vous travaillez avec une nouvelle page non enregistrée, KompoZer vous invitera à enregistrer.
4. Ajoutez l'URL au script qui traitera les données du formulaire dans le champ URL de l'action. Les gestionnaires de formulaire sont généralement des scripts écrits en PHP ou un langage similaire côté serveur. Sans ces informations, votre page Web ne pourra rien faire avec les données saisies par l'utilisateur. KompoZer vous demandera d’entrer l’URL du gestionnaire de formulaire si vous ne l’entrez pas.
5. Sélectionnez le Méthode utilisé pour soumettre les données de formulaire au serveur. Les deux choix sont GET et POST. Vous aurez besoin de savoir quelle méthode le script nécessite.
6. Cliquez sur D'accord et le formulaire est ajouté à votre page.

Ajouter un champ de texte à un formulaire

Une fois que vous avez ajouté un formulaire à une page avec KompoZer, celui-ci est présenté en trait pointillé bleu clair. Vous ajoutez vos champs de formulaire dans cette zone. Vous pouvez également taper du texte ou ajouter des images, comme vous le feriez sur n'importe quelle autre partie de la page. Le texte est utile pour ajouter des invites ou des étiquettes aux champs de formulaire afin de guider l'utilisateur.

1. Choisissez l'endroit où vous souhaitez que le champ de texte aille dans la zone de formulaire indiquée. Si vous souhaitez ajouter une étiquette, vous pouvez commencer par taper le texte.
2. Clique le flèche vers le bas à côté de la Forme bouton de la barre d’outils et choisissez Champ de formulaire dans le menu déroulant.
3. La fenêtre Propriétés du champ de formulaire s’ouvrira. Pour ajouter un champ de texte, choisissez Texte dans le menu déroulant intitulé Type de champ.
4. Donnez un nom au champ de texte. Le nom est utilisé pour identifier le champ dans le code HTML et le script de traitement de formulaire nécessite le nom pour traiter les données. Un certain nombre d’autres attributs facultatifs peuvent être modifiés dans cette boîte de dialogue en basculant le curseur vers le bas. Plus de propriétés / Moins de propriétés ou en appuyant sur le bouton Édition avancée, mais pour l'instant, nous allons simplement entrer le nom du champ.
5. Cliquez sur D'accord et le champ de texte apparaît sur la page.

Ajouter une zone de texte à un formulaire

Parfois, il est nécessaire de saisir beaucoup de texte sur un formulaire, tel qu'un message ou un champ de questions / commentaires. Dans ce cas, un champ de texte n'est tout simplement pas approprié. Vous pouvez ajouter un champ de formulaire de zone de texte à l'aide des outils de formulaire.

1. Placez votre curseur dans le contour du formulaire à l'endroit où vous souhaitez placer votre zone de texte. Si vous voulez taper une étiquette, c'est souvent une bonne idée de taper le texte de l'étiquette, appuyez sur Entrée pour passer à une nouvelle ligne, puis ajoutez le champ de formulaire, car la taille de la zone de texte sur la page rend la tâche difficile. l'étiquette doit être à gauche ou à droite.
2. Clique le flèche vers le bas à côté de la Forme bouton dans la barre d’outils et choisissez Texte Surface dans le menu déroulant. La fenêtre Propriétés de la zone de texte s’ouvrira.
3. Entrez un nom pour le champ de la zone de texte. Le nom identifie le champ dans le code HTML et est utilisé par le script de traitement de formulaire pour traiter les informations soumises par l'utilisateur.
4. Entrez le nombre de lignes et de colonnes que vous souhaitez que la zone de texte affiche. Ces dimensions déterminent la taille du champ de la page et la quantité de texte pouvant être entrée dans le champ avant que le défilement ne soit nécessaire.
5. Des options plus avancées peuvent être spécifiées avec les autres contrôles de cette fenêtre, mais pour l'instant, le nom du champ et les dimensions suffisent.
6. Cliquez sur D'accord et la zone de texte apparaît sur le formulaire.

Ajouter un bouton d'envoi et de réinitialisation à un formulaire

Une fois que l'utilisateur a rempli le formulaire sur votre page, il doit exister un moyen de soumettre les informations au serveur. De plus, si l'utilisateur veut recommencer ou faire une erreur, il est utile d'inclure un contrôle qui réinitialisera toutes les valeurs du formulaire à la valeur par défaut. Des contrôles de formulaire spéciaux gèrent ces fonctions, appelées respectivement les boutons Soumettre et Réinitialiser.

1. Placez votre curseur dans la zone de formulaire indiquée à l'endroit où vous souhaitez placer le bouton Envoyer ou Réinitialiser. Le plus souvent, ceux-ci seront situés sous le reste des champs d'un formulaire.
2. Clique le flèche vers le bas à côté de la Forme bouton dans la barre d’outils et choisissez Bouton Définir dans le menu déroulant. La fenêtre Propriétés du bouton apparaîtra.
3. Choisissez le type de bouton dans le menu déroulant intitulé Type. Vos choix sont Soumettre, Réinitialiser et Bouton. Dans ce cas, nous choisirons le Soumettre type.
4. Donnez un nom au bouton, qui sera utilisé dans le code HTML et le code de gestion de formulaire pour traiter la demande de formulaire. Les développeurs Web appellent généralement ce champ «submit».
5. Dans la case intitulée Valeur, entrez le texte devant apparaître sur le bouton. Le texte doit être court mais descriptif de ce qui se passera lorsque vous appuierez sur le bouton. Quelque chose comme «Soumettre», «Soumettre le formulaire» ou «Envoyer» sont de bons exemples.
6. Cliquez sur OK et le bouton apparaît sur le formulaire.

le Réinitialiser bouton peut être ajouté au formulaire en utilisant le même processus, mais choisissez Réinitialiser du Type champ au lieu de Soumettre.

Modification d'un formulaire avec KompoZer

La modification d'un formulaire ou d'un champ de formulaire dans KompoZer est très simple. Double-cliquez simplement sur le champ que vous souhaitez modifier. La boîte de dialogue appropriée apparaît et vous permet de modifier les propriétés du champ selon vos besoins. Le diagramme ci-dessus montre un formulaire simple utilisant les composants abordés dans ce tutoriel.