placer un lien cliquable à droite d'une checkbox par QuentaxCode - page 1

Voici la page d'inscription de mon site, je veux faire un bouton pour accepter les termes et conditions d'utilisations. Je n'arrive pas à placer mon lien vers ma page termOfUse.html à droite de ma checkbox. Je dépose ci-joint mon code css et html. Merci d'avance

HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../CSS/inscription.css">
    <meta charset="UTF-8">
    <meta name="viewport">
    <title>Inscription</title>
</head>
<body>
    <h1>Inscription</h1>
    <form method="POST" action="">
        <div class="informations">
            <input type="text" name="pseudo" autocomplete="off" placeholder="Type a nickname">
            <input type="text" name="mail" autocomplete="off" placeholder="Type an email address">
            <input type="password" name="mdp" autocomplete="off" placeholder="Type a password">
            <label class="containerCheck">
              <input type="checkbox">
              <span class="checkmark"></span>
            </label>
            <a href="termOfUse.html" target="_blank">Terms and Conditions</a>
        </div>
        <input type="submit" name="submit" value="Register">
    </form>
    <a href="connection.php">Already have an account</a>
</body>
</html>

CSS :

html{
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #FFC690;
    display: flex;
    justify-content: center;
}
h1{
    margin-top: 5vh;
    height: 10vh;
    color: white;
    text-align: center;
}
form{
    margin-left: 9vw;
    margin-right: 9vw;
}
input[type=text]{
    margin-top:7vh;;
    font-size: 2vh;
    border-radius: 1vh;
    height: 8vh;
    width: 82vw;
    border: none;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.185); 
}
input[type=password]{
    margin-top:7vh;;
    font-size: 2vh;
    border-radius: 1vh;
    height: 8vh;
    width: 82vw;
    border: none;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.185); 
}   
input[type=submit]{
    background-color: #F3A761;
    margin-top: 10vh;;
    font-size: 2vh;
    border-radius: 1vh;
    height: 8vh;
    width: 82vw;
    border: none;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.185); 
}
a{
    width: 100vw;
    display: flex;
    justify-content: center;
    text-decoration: none;
    font-size: 2vh;
    margin-top: 2vh;
    color: white;
}
.containerCheck {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.containerCheck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  margin-top: 5vh;
  border-radius: 0.8vh;
  position: absolute;
  top: 0;
  left: 0;
  height: 3.5vh;
  width: 3.5vh;
  background-color: #eee;
}

.containerCheck:hover input ~ .checkmark {
  background-color: #ccc;
}

.containerCheck input:checked ~ .checkmark {
  background-color: #2196F3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.containerCheck input:checked ~ .checkmark:after {
  display: block;
}

.containerCheck .checkmark:after {
  left: 1.1vh;
  top: 0.4vh;
  width: 0.9vh;
  height: 2vh;
  border: solid white;
  border-width: 0 0.35vh 0.35vh 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

-
Edité par QuentaxCode 24 décembre 2023 à 9:52:52

QuentaxCode

24 décembre 2023 à 9:49:26

Lamecarlate

24 décembre 2023 à 10:01:55

Bonjour,

tu peux mettre un <a> dans un <label>, c'est valide en HTML (voir les specs à ce sujet (en anglais)). De toute façon tu dois mettre quelque chose dans le label, en plus du lien, pour augmenter la zone d'accès à ta checkbox (personne n'aime cliquer sur de tous petits carrés) : par exemple "You have to accept the <a>terms of use</a> continue.".

D'ailleurs, tous tes autres inputs devraient avoir un label. Le placeholder c'est mignon mais c'est mal utilisé depuis sa création… C'est fait pour donner un exemple de remplissage, pas pour remplacer le label.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

placer un lien cliquable à droite d'une checkbox

placer un lien cliquable à droite d'une checkbox

Supprimer

Modérer

Signaler le message aux modérateurs