Make form open within a link

Asked

Viewed 23 times

-1

Hi, I have a page ready, it’s a school paper I need to deliver. The criteria for evaluation is a form on the page, but it needs to be opened through a link. Is it possible to open this form with just one click on the link? I am using HTML only.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8"/>
    <style rel="stylesheet" type="text/css">
        body {background-image: url("gamer.jpg"); background-size: cover;
        background-repeat: no-repeat; background-attachment: fixed}
        h1{font-family: Arial; text-align: center; font-size: 50px}
        h2{font-family: Arial; color: Red; text-align: center}
        p {font-family: arial; text-align: center; font-size: 20px}
        div.a{width: 1490px; background-color: rgba(255, 255, 255, 0.9); margin: -20px auto 10px auto;
        padding: 10px 10px 5px 10px; width: 80%}
        div.b{width: 1490px; background-color: rgba(255, 255, 255, 0.9); margin: 15px auto 0px auto;
        padding: 1px 10px 300px 10px; width: 80%}
        div.std{width: 1490px; background-color: #c4c4c4; margin: -20px auto 10px auto; padding: 10px 10px 5px 10px;
        width: 80%}
        .azul {color: blue}
        .jusp{text-align: center;}
        form {background-color: #c4c4c4; margin: 0 auto; width: 400px; padding: 20px 1px 5px 1px; border: 1px solid #000000;
        border-radius: 10px}
        label {display: inline-block; width: 90px; text-align: right;}
        form div + div {margin-top: 10px}
        button {margin-left: 100px}
    </style>
</head>
<body>
    <div class="a"> <h1>GAMESONE</h1> </div>
    <div class="b">
        <h2>CORRA CORRA CORRA</h2>
        <p> Participe agora da nossa super promoção de ganhar um Playstation 4 Novinho. <br/>
            Com ele você leva junto dois controles, um headset especial e ainda 10 jogos exclusivos. <br/>
            ISSO MESMO, 10 JOGOS <span class="azul">GRATIS</span> PRA VOCÊ!!!</p>
        <h2> Como Participar: </h2>
        <p class="jusp"> 1 - Compre 2 jogos de qualquer console em nossas lojas. <br/>
            2 - Peça <span> nota fiscal </span> e utilize seu CPF nela. <br/>
            3 - Realize o cadastro em nosso formulário abaixo. <br/>
            4 - Na área "cupom", coloque o número da nota fiscal gerada para você.  <br/>
            5 - Pronto, você ja está participando do nosso sorteio! </p>

        <form method="post" id="formu">
            <div class="std">
                <div>
                    <label for="nome"> Nome: </label>
                    <input type="text" id="nome"/>
                </div>
                <div>
                    <label for="email"> Email: </label>
                    <input type="email" id="email"/>
                </div>
                <div>
                    <label for="telefone"> Telefone: </label>
                    <input type="number" id="telefone"/>
                </div>
                <div>
                    <label for="cupom"> Cupom: </label>
                    <input type="number" id="cupom"/>
                </div>
                <div>
                    <button type="submit"> Finalizar Cadastro </button>
                </div>
            </div>
        </form>
    </div>
<body>
</html>
html form

  • What would be "open the form"? Open in order to display it or submit it?

  • What a link???????

  • Your question was very confusing. You want the click on a link to load the form on the page or this page you have made to be opened by a link, the same websites on the internet?

1 answer

1

You can make use of the pseudo-selector :selected to make a toggle CSS-only:

#toggle-form {
  position: absolute;
  opacity: 0;
}

.toggle-form {
  width: auto;
  color: blue;
  cursor: pointer;
}

#formu {
  display: none;
}

#toggle-form:checked + #formu {
  display: block;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8"/>
    <style rel="stylesheet" type="text/css">
        body {background-image: url("gamer.jpg"); background-size: cover;
        background-repeat: no-repeat; background-attachment: fixed}
        h1{font-family: Arial; text-align: center; font-size: 50px}
        h2{font-family: Arial; color: Red; text-align: center}
        p {font-family: arial; text-align: center; font-size: 20px}
        div.a{width: 1490px; background-color: rgba(255, 255, 255, 0.9); margin: -20px auto 10px auto;
        padding: 10px 10px 5px 10px; width: 80%}
        div.b{width: 1490px; background-color: rgba(255, 255, 255, 0.9); margin: 15px auto 0px auto;
        padding: 1px 10px 300px 10px; width: 80%}
        div.std{width: 1490px; background-color: #c4c4c4; margin: -20px auto 10px auto; padding: 10px 10px 5px 10px;
        width: 80%}
        .azul {color: blue}
        .jusp{text-align: center;}
        form {background-color: #c4c4c4; margin: 0 auto; width: 400px; padding: 20px 1px 5px 1px; border: 1px solid #000000;
        border-radius: 10px}
        label {display: inline-block; width: 90px; text-align: right;}
        form div + div {margin-top: 10px}
        button {margin-left: 100px}
    </style>
</head>
<body>
    <div class="a"> <h1>GAMESONE</h1> </div>
    <div class="b">
        <h2>CORRA CORRA CORRA</h2>
        <p> Participe agora da nossa super promoção de ganhar um Playstation 4 Novinho. <br/>
            Com ele você leva junto dois controles, um headset especial e ainda 10 jogos exclusivos. <br/>
            ISSO MESMO, 10 JOGOS <span class="azul">GRATIS</span> PRA VOCÊ!!!</p>
        <h2> Como Participar: </h2>
        <p class="jusp"> 1 - Compre 2 jogos de qualquer console em nossas lojas. <br/>
            2 - Peça <span> nota fiscal </span> e utilize seu CPF nela. <br/>
            3 - Realize o cadastro em nosso formulário abaixo. <br/>
            4 - Na área "cupom", coloque o número da nota fiscal gerada para você.  <br/>
            5 - Pronto, você ja está participando do nosso sorteio! </p>

        <label class="toggle-form" for="toggle-form">Abrir/fechar formulário.</label>
        <input type="checkbox" id="toggle-form" />
        <form method="post" id="formu">
            <div class="std">
                <div>
                    <label for="nome"> Nome: </label>
                    <input type="text" id="nome"/>
                </div>
                <div>
                    <label for="email"> Email: </label>
                    <input type="email" id="email"/>
                </div>
                <div>
                    <label for="telefone"> Telefone: </label>
                    <input type="number" id="telefone"/>
                </div>
                <div>
                    <label for="cupom"> Cupom: </label>
                    <input type="number" id="cupom"/>
                </div>
                <div>
                    <button type="submit"> Finalizar Cadastro </button>
                </div>
            </div>
        </form>
    </div>
<body>
</html>

Basically, we create an effect of toggle using input and the pseudo-selector :checked:

#toggle-target {
  color: red;
  display: none;
}

#toggle-trigger:checked + #toggle-target {
  display: block;
}
<input id="toggle-trigger" type="checkbox" />
<div id="toggle-target">Hooray!</div>

To create the "link", I hid the input via CSS and used a label with the attribute for to click.

To learn more:

Important:

Welcome to Stackoverflow. In your next question, try to be a little more specific.

Browser other questions tagged html form

You are not signed in. Login or sign up in order to post.