formulaire d'inscription simple et descendant

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

25 August 2025

Page d'erreur 404 animée avec cœur et particules

6 November 2024

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <center> <title>Registration Form</title></center>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <center> <h1>Registration Form</h1></center>
    <br>
<center><p>Use the Tab key to move from one input field to the next.</p></center>
    <form name="registration" onsubmit="return formValidation();">
      <fieldset>
        <legend>Personal Information :</legend>
        <label for="userid">User id:</label>
        <input type="text" name="userid" id="userid" required>
<br>
        <label for="passid">Password:</label>
        <input type="password" name="passid" id="passid" required>
<br>
        <label for="username">Name:</label>
        <input type="text" name="username" id="username" required>
<br>
        <label for="address">Address:</label>
        <input type="text" name="address" id="address" required>
      </fieldset>

<fieldset>
        <legend>Contact Information:</legend>
        <label for="country">Country:</label>
        <select name="country" id="country" required>
          <option value="" selected disabled>Select a country</option>
          <option value="AF">Australia</option>
          <option value="AL">Canada</option>
          <option value="DZ">Pakistan</option>
          <option value="AS">Russia</option>
          <option value="AD">USA</option>
        </select>
<br>
        <label for="zip">ZIP code:</label>
        <input type="text" name="zip" id="zip" required>
<br>
        <label for="email">Email:</label>
        <input type="email" name="email" id="email" required>
      </fieldset>

<fieldset>
        <legend>Additional Information :</legend>
        <label>Gender:</label>
        <br>
        <label for="male">Male</label>
        <input type="radio" name="gender" id="male" value="male" required>
        <label for="female">Female</label>
        <input type="radio" name="gender" id="female" value="female" required>
<br>
        <label>Language:</label>
        <br>
        <label for="english">English</label>
        <input type="radio" name="language" id="english" value="english" required>
        <label for="non-english">Non-English</label>
        <input type="radio" name="language" id="non-english" value="non-english" required>
<br>
       <center> <label for="about">About:</label></center>
        <center><input name="about" id="about" rows="4" cols="50"></center>
      </fieldset>

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f5f6f7;
  padding: 50px 0;
}
label {
  display: inline-block;
  padding: 5px 10px;
  color: #fff;
  background-color: #1b1b32;
  border-radius: 5px;
  margin-bottom: 10px;
}

input[type="text"],
input[type="password"],
input[type="email"] {
  background-color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
input[type="submit"] {
  background-color: #1b1b32;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
  background-color: #000;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f5f6f7;
  padding: 50px 0;
}

h1 {
  margin-left: 70px;
}

form {
  width: 500px;
  margin: 0 auto;
}

fieldset {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}

legend {
  font-size: 18px;
  font-weight: bold;
}

form ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

form ul li {
  margin-bottom: 10px;
}

form ul li label {
  display: inline-block;
  padding: 5px 10px;
  color: #fff;
  background-color: #1b1b32;
  border-radius: 5px;
  margin-bottom: 10px;
}

input[type="submit"] {
  background-color: #1b1b32;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

formulaire d'inscription simple et descendant

Recommandé

Page d'erreur 404 animée avec cœur et particules

Effet de texte 3D

Un code de Metehan

HTML

CSS

JS

Recommandé

Page d'erreur 404 animée avec cœur et particules

Effet de texte 3D

Un code de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS