Formulaire d'inscription en HTML-tutoriel HTML-php.cn

Les formulaires HTML sont aujourd'hui un composant essentiel présent sur de nombreux sites Web, servant à diverses fins telles que l'authentification des utilisateurs, les inscriptions, la collecte de commentaires, etc. Ces formulaires facilitent la collecte de données et d'informations précieuses auprès des visiteurs de votre site.

Les formulaires HTML sont construits à l'aide d'éléments spéciaux appelés « contrôles ». Ces contrôles englobent une gamme d'options telles que des zones de texte, des boutons radio, des cases à cocher et des boutons de soumission, permettant aux utilisateurs de saisir efficacement leurs informations. Les utilisateurs peuvent modifier les informations fournies en saisissant des textes, en sélectionnant des éléments spécifiques et en effectuant d'autres actions pertinentes en interagissant avec ces contrôles. Une fois le formulaire rempli, il peut être soumis, conduisant à différents résultats tels que l'ajout de données, la transmission, la redirection vers une autre page, ou encore le stockage des détails dans une base de données.

Les formulaires HTML sont un moyen interactif et convivial d'engager les visiteurs d'un site Web. Ils facilitent une communication et un échange de données transparents entre les utilisateurs et les propriétaires de sites Web, permettant aux entreprises de recueillir des informations cruciales et d'améliorer l'expérience utilisateur.

Comment créer un formulaire HTML ?

La création de formulaires HTML implique l'utilisation de l'outil

élément, qui sert de conteneur pour le contenu du formulaire. Avec d'autres éléments HTML, tels que

, et , vous pouvez concevoir un formulaire entièrement fonctionnel. De plus, CSS peut être utilisé pour améliorer l'apparence et l'expérience utilisateur.

Remarque : Si vous débutez dans le développement Web et que vous souhaitez apprendre à écrire du code HTML de base, nous avons un article sur la conception d'une page Web en HTML. Il fournit un guide étape par étape pour écrire du code HTML.

Les principaux points abordés dans cet article pour concevoir une page Web en HTML sont :

Comment monter son projet ?
Comment démarrer avec la structure HTML ?
Comment ajouter du contenu au corps ?
Comment structurer votre contenu ?
Comment enregistrer votre fichier HTML ?
Comment consulter votre page Web ?

Voici une syntaxe de base pour un formulaire HTML.

Syntaxe :

<form action = "URL" method = "GET or POST">
form elements like submit or reset buttons, input, text area etc.
</form>

Copier après la connexion

Exemple de formulaire d'inscription en HTML

Voyons quelques exemples de formulaires d'inscription utilisant HTML :

Exemple 1 : Formulaire d'inscription simple

Voici un exemple de création d'un simple formulaire d'inscription HTML.

Code :

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
margin-top: 0;
}
p {
text-align: center;
color: #777;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 10px;
color: #333;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #ccc;
}
a {
color: #337ab7;
text-decoration: none;
}
button[type="submit"] {
display: block;
width: 100%;
padding: 10px;
margin-top: 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
button[type="submit"]:hover {
background-color: #45a049;
}
.container.signin {
text-align: center;
color: #777;
}
</style>
</head>
<body>
<form>
<div class="container">
<h1>Register Here</h1>
<p>Please fill in the details to create an account with us.</p>
<hr>
<label for="email"><b>Enter Email</b></label>
<input type="text" placeholder="Enter Email" name="email">
<label for="pwd"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pwd">
<label for="confirm"><b>Confirm Password</b></label>
<input type="password" placeholder="Confirm Password" name="confirm">
<hr>
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<button type="submit" class="registerbtn"><strong>Register</strong></button>
</div>
<div class="container signin">
<p>Already have an account? <a href="#">Sign in</a>.</p>
</div>
</form>
</body>
</html>

Copier après la connexion

Sortie :

Formulaire d'inscription en HTML

Formulaire d'inscription : Validations

Pour garantir que les utilisateurs saisissent leur adresse e-mail, nous inclurons un code de validation qui déclenche une fenêtre contextuelle s'ils tentent de soumettre le formulaire sans remplir le champ e-mail, quels que soient le mot de passe et la confirmation saisie.

Le mot-clé 'obligatoire' avec un élément indique que l'élément doit être rempli. Nous ajouterons ce mot-clé à notre champ de texte, « E-mail », et verrons le résultat ci-dessous ;

<input type="text" placeholder="Enter Email" name="email" required>

Copier après la connexion

De même, vous devrez procéder pour les champs Mot de passe et Confirmer le mot de passe.

<input type="password" placeholder="Enter Password" name="pwd" required>
<input type="password" placeholder="Confirm Password" name="confirm" required>

Copier après la connexion

Sortie :
Formulaire d'inscription en HTML

Exemple 2 : Formulaire d'inscription à une demande d'emploi

Voici un exemple de création d'un formulaire d'inscription de demande d'emploi en HTML.

Code :

<!DOCTYPE html>
<html>
<head>
<title>Job Application Registration Form</title>
<style>
body {
font-family: Calibri, sans-serif;
background-color: #72b7f4;
}
h2 {
color: #232729;
text-align: center; /* Center align the title */
}
form {
background-color: #bfddf7;
max-width: 500px;
margin: 0 auto;
padding: 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
color: #333333;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="file"] {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 15px;
background-color: #ffffff; /* Set background color to white */
}
select {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 15px;
}
input[type="submit"] {
background-color: #1a73e8;
color: #ffffff;
border: none;
padding: 12px 24px;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0059b3;
}
</style>
</head>
<body>
<h2>Job Application Registration</h2>
<form action="/apply" method="POST">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>
<label for="resume">Resume (PDF or Word):</label>
<input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" required>
<label for="position">Position Applied:</label>
<select id="position" name="position" required>
<option value="">Select Position</option>
<option value="frontend-developer">Frontend Developer</option>
<option value="backend-developer">Backend Developer</option>
<option value="graphic-designer">Graphic Designer</option>
</select>
<input type="submit" value="Submit Application">
</form>
</body>
</html>

Copier après la connexion

Sortie :
Formulaire d'inscription en HTML

Exemple 3 : Formulaire d'inscription à l'hôtel

Voici un exemple de création d'un formulaire d'inscription d'hôtel en HTML.

Code :

<!DOCTYPE html>
<html>
<head>
<title>Hotel Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0bd9d;
padding: 20px;
}
form {
max-width: 500px;
margin: 0 auto;
background: linear-gradient(to bottom right, #fff, #f1f1f1);
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
.form-row {
margin-bottom: 20px;
}
.form-row label {
display: block;
margin-bottom: 5px;
}
.form-row input,
.form-row select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
}
input[type="submit"] {
padding: 10px 20px;
background: linear-gradient(to bottom right, #db4340, #ff6f00);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<img src="image.jpg" alt="Hotel Image" style="display: block; margin: 0 auto 20px; width: 500px;">
<form>
<div class="form-row">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div>
<div class="form-row">
<label for="email">Email ID</label>
<input type="email" id="email" name="email">
</div>
<div class="form-row">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone">
</div>
<div class="form-row">
<label for="guests">Number of Guests</label>
<input type="number" id="guests" name="guests">
</div>
<div class="form-row">
<label for="check-in">Check-in Date</label>
<input type="date" id="check-in" name="check-in">
</div>
<div class="form-row">
<label for="check-out">Check-out Date</label>
<input type="date" id="check-out" name="check-out">
</div>
<div class="form-row">
<label for="room-type">Room Type</label>
<select id="room-type" name="room-type">
<option value="">Select Room Type</option>
<option value="single">Single</option>
<option value="double">Double</option>
<option value="suite">Suite</option>
</select>
</div>
<input type="submit" value="Submit">
</form>
</body>
</html>

Copier après la connexion

Sortie :

Formulaire d'inscription en HTML