Make form open within a link [closed]

Question

Make form open within a link [closed]

Navigation

#1 by (1 votes)

-1

Hello, I have a page ready, it's a school assignment that I need to deliver. The criterion for evaluation is a form on the page, but it must be opened through a link. Is it possible to have this form opened just by clicking on the link? I'm 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

asked by anonymous 17.05.2018 / 03:16

1 answer

Changes Webservice's "Web Reference URL" added by add web reference [closed] My site is not responsive, it's just text [closed]

score 1 · Answer 1

You can use the :selected pseudo-selector to do a toggle with 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 a toggle effect 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 input via CSS and used label with the for attribute to click.

To learn more:

link
link

Important:

Welcome to StackOverflow. In your next question, try to be a bit more specific.