formulario de inscripción sencillo y de descenso

Abrir en el editor Publica tu código

Recomendado

23 July 2024

Formulario de inicio de sesión HTML animado

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

formulario de inscripción sencillo y de descenso

Recomendado

Iniciar sesión de vidrio

Generador de Imágenes

Formulario de inicio de sesión HTML animado

HTML

CSS

JS

Recomendado

Iniciar sesión de vidrio

Generador de Imágenes

Formulario de inicio de sesión HTML animado

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS