formulaire d'inscription simple et descendant

2448 Anonymous

Ouvrir dans l'éditeur Publiez votre code

formulaire d'inscription simple et descendant

Recommandé

12 September 2025

Effet d'animation CSS Circle Glow

22 August 2025

Clinique de cardiologie : services de santé et de soins cardiaques

28 March 2023

Connexion formulaire à la base de données - PHP

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

Recommandé

Effet d'animation CSS Circle Glow

Clinique de cardiologie : services de santé et de soins cardiaques

Connexion formulaire à la base de données - PHP

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS