Formularis

by xxjcaxx

HTML

<form action="agregar_pokemon.php" method="POST">
      <label for="name_english">Nombre (en inglés):</label>
      <input type="text" id="name_english" name="name_english" required><br>

      <label for="name_japanese">Nombre (en japonés):</label>
      <input type="text" id="name_japanese" name="name_japanese" required><br>

      <label for="name_chinese">Nombre (en chino):</label>
      <input type="text" id="name_chinese" name="name_chinese" required><br>

      <label for="name_french">Nombre (en francés):</label>
      <input type="text" id="name_french" name="name_french" required><br>

      <label for="type">Tipo:</label>
      <select id="type" name="type[]" multiple required>
        <option value="Grass">Grass</option>
        <option value="Poison">Poison</option>
        <option value="Fire">Fire</option>
        <!-- Puedes agregar más opciones aquí -->
      </select><br>

      <label for="hp">HP:</label>
      <input type="number" id="hp" name="hp" required><br>

      <label for="attack">Ataque:</label>
      <input type="number" id="attack" name="attack" required><br>

      <label for="defense">Defensa:</label>
      <input type="number" id="defense" name="defense" required><br>

      <label for="sp_attack">Ataque Especial:</label>
      <input type="number" id="sp_attack" name="sp_attack" required><br>

      <label for="sp_defense">Defensa Especial:</label>
      <input type="number" id="sp_defense" name="sp_defense" required><br>

      <label for="speed">Velocidad:</label>
      <input type="number" id="speed" name="speed" required><br>

      <input type="submit" value="Agregar">
    </form>

CSS

form {
        display: flex;
        flex-direction: column;
        max-width: 400px;
        margin: auto;
      }

      label {
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;
      }

      label span {
        font-size: 0.8rem;
        margin-bottom: 0.3rem;
      }

      input {
        padding: 0.5rem;
        font-size: 1rem;
        border: none;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        outline: none;
      }

      input[type="submit"] {
        background-color: #4caf50;
        color: white;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;
      }

      input[type="submit"]:hover {
        background-color: #3e8e41;
      }
      
      input:valid {
  border: 2px solid green;
}

input:invalid {
  border: 2px solid red;
}

JavaScript

// Fes que el formulari no envie per defecte i que no valide per ell mateix. 

// Fes la validació del formulari aprofitant les etiquetes que ja té l'HTML i validant també per expressions regulars

// En cas de no validar, canvia la classe i el css per a que es mostre en roig el input. Un input no tocat no té que mostrar el color roig

// Si tot el formulari valida, afegeix la info a un array de pokemons i mostra tot l'array a continuació del formulari. 

// Deshabilita el botó si el formulari no és valid.