formulaire d'inscription simple et descendant

3,112 Anonymous

Ouvrir dans l'éditeur Publiez votre code

formulaire d'inscription simple et descendant

Recommandé

21 October 2024

Goku contre Végéta

13 January 2026

Chargeur de canevas de jeu HTML5 et de moteur JavaScript

14 March 2025

Interaction de tarification (HTML, CSS et JS)

HTML

<!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;
}