Apprendre HTML Partie 27: Comment créer des formulaires simples en HTML
Vous connaissez certainement le terme"Forme". Form est une table des matières qui est l'une des performances interactives les plus populaires sur Internet. Ce formulaire ou cette liste de contrôle est utilisé pour demander des informations aux utilisateurs qui seront ensuite traités. En général, le traitement des formulaires se fait à l'aide de scripts côté serveur.
À certaines fins, bien sûrnécessite l'utilisation de formulaires sur votre site Web tels que des formulaires d'enquête, des formulaires de biodonnées, des formulaires d'inscription, des formulaires de connexion et autres. Les formulaires permettent aux utilisateurs d'interagir avec du texte, des graphiques ou tout autre élément affiché dans le navigateur. Dans cette discussion, je vais expliquer comment créer des formulaires en HTML. Pour plus de détails, considérons l'explication ci-dessous:
Balise de formulaire
La balise <form> est la balise utilisée pourdéfinir un formulaire. Ainsi, un formulaire est formé par la paire de balises <form> ... .. </form>. Dans la balise <form>, il y a deux attributs, à savoir les attributs de méthode et d'action qui ont les fonctions suivantes:
Attribut | Fonction |
La méthode | Utilisé pour déterminer comment envoyer des donnéesque l'utilisateur entre sur le serveur web (méthode de traitement des formulaires). Où il existe deux méthodes, à savoir GET et POST. La méthode POST envoie toutes les données d'un formulaire distinct de l'URL. Pendant ce temps, la méthode GET envoie des données au serveur en les plaçant à la fin de l'URL. |
Action | Utilisé pour déterminer l'emplacement ou l'URL du fichier qui sera utilisé pour traiter le formulaire. |
Voici un exemple d'utilisation de la balise <form>:
<form action=”proses_input.php” method=”get”>
…………………………………
</form>
Balise d'entrée
La balise <input> est la balise utilisée pourcréer des éléments qui sont utilisés pour demander des informations aux utilisateurs ou créer des contrôles de zone de texte tels que des cases à cocher, des zones de texte, des boutons, des boutons radio et autres. L'utilisation de cette balise ne nécessite pas non plus de balise de fermeture. Ensuite, la balise <input> a les attributs communs suivants:
Attribut | Fonction |
nom | Définit le nom de l'élément d'entrée. Vous devez écrire cet attribut sur tous les éléments sauf le type clear et submit elements. |
maxlength | Spécifie le nombre maximal de caractères pouvant être saisis sur un élément d'entrée. |
valeur | Exprime la valeur par défaut d'un élément d'entrée. Pour les zones de texte, spécifiez le texte écrit. Pour les cases à cocher ou les radios, déterminez la valeur de l'élément sélectionné à envoyer au serveur. Pendant ce temps, pour les boutons de soumission et de réinitialisation, cet attribut est utilisé pour déterminer le texte écrit sur le bouton. |
taille | Spécifie la largeur de l'élément d'entrée en pixels où la taille par défaut est de 20 pixels. |
vérifié | Utilisé uniquement sur les types de case à cocher et de radio pour déclarer un élément sélectionné ou non (une explication des attributs vérifiés sera discutée dans le document suivant). |
type | Déterminez le type d'entrée qui sera utilisé, comme le texte, la radio et autres. |
Bien sûr, il existe d'autres attributs non encore mentionnés ci-dessus, car ceux ci-dessus ne sont que les attributs les plus courants. À l'avenir, je vais expliquer les attributs que je veux dire.
Type d'attribut = "texte"
En général, il existe plusieurs types deattribut de type mais dans ce document, ce qui sera discuté concerne l'attribut de type avec la valeur ou le type de texte tandis que pour les autres types sera expliqué dans le prochain tutoriel. Le type de texte est utilisé pour créer une zone de texte qui permet aux utilisateurs d'entrer des données sous forme de texte.
Voici un exemple de code pour écrire et utiliser la balise <input> en HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Form di HTML</title>
</head>
<body>
<h4>Isilah formulir dibawah ini dengan baik dan benar ! </h4>
<hr>
<form action ="proses_input.php" method="get">
NIM : <input type="text" name="nim" size="11px" maxlength="9"> <br><br>
Alamat Rumah : <input type="text" name="alamat_rumah" size="40px"> <br><br>
Email : <input type="text" name="email"> <br><br>
No.Telepon : <input type="text" name="nomor_telepon"> <br><br>
<input type="submit" value="SUBMIT">
<input type="reset" value="RESET">
</form>
</body>
</html>
Une fois le code ci-dessus exécuté dans le navigateur, il apparaîtra comme indiqué ci-dessous:
De l'image ci-dessus, vous pouvez voir la différenceutilisez l'attribut size pour chaque zone de texte, il existe des tailles de 11px, 40px et la taille n'est pas spécifiée de sorte qu'elle ait une largeur avec une valeur par défaut de 20px. Et également dans la zone de texte "NIM", l'attribut maxlength est défini sur 9, tandis que l'autre zone de texte n'est pas définie de sorte qu'il a une valeur infinie.
En outre, le questionnaire n'est pas seulementse compose d'une zone de texte (zone de texte) mais également de boutons d'envoi et de réinitialisation. Pour une discussion sur les boutons de soumission et de réinitialisation seront expliqués dans le matériel suivant. Quelques documents sur la façon de créer des formulaires simples en HTML, j'espère que vous pourrez bien comprendre ce matériel.