Как скрыть форму, пока кнопка не нажата в HTML или CSS? - PullRequest
Новая
       16

Как скрыть форму, пока кнопка не нажата в HTML или CSS?

0 голосов
/ 01 мая 2018

Я хочу скрыть HTML-форму внутри кнопки. Я попытался добавить кнопку вокруг формы, похожую на родительский div с дочерним div, но это не сработало. Я не понимаю, как добавить элемент «скрыть». Должен ли я использовать JavaScript или JQuery? Или есть простой способ сделать это только с помощью CSS или HTML?

Заранее спасибо !! 

/*LOGIN*/

html {
  background: #fff;
  font-size: 10pt;
}

.loginform ul {
  padding: 0;
  margin: 0;
}

.loginform il {
  display: inline;
  float: top right;
}

label {
  display: block;
  color: #ED4337;
}

label:hover {
  background-color: #fff;
  color: white;
  border-radius: 8px;
}

.cf:before .cf:after {
  content: "";
  display: table;
}

.cf:after {
  *zoom: 1;
}

 :focus {
  outline: 0;
}

.loginform input:not([type=submit]) {
  padding: 5px;
  margin-right: 10px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 0px 0px rgba(250, 250, 250, 0.5);
}

.loginform input[type=submit] {
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: #64c8ef;
  /*old browsers*/
  background: -moz-linear-gradient(top, #64c8ef 0%, #00a2e2 100%);
  /*FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(100%, #00a2e2));
  background: -webkit-linear-gradient(top, #64c8ef 0%, #00a2e2 100%);
  background: -o-linear-gradient(top, #64c8ef 0%, #00a2e2 100%);
  background: -ms-linear-gradient(top, #64c8ef 0%, #00a2e2 100%);
  background: linear-gradient(to bottom, #64c8ef 0%, #00a2e2);
  filter: progid:DXImageTransform.Microsoft.gradient ( startColors)='#64c8ef', endColorstr='#00a2e2', GradientType=0);
  color: #fff;
  padding: 5px 15px;
  margin-right: 0;
  margin-top: 15px;
  border-radius: 3px;
  text-shadow: 1px 1px 0px #fff;
}


/*END LOG IN */
<!--LOG IN INFO-->
<button class="log">Log In
         <section class="loginfrom cf">
          <form name="login" action="index_submit" method="get" accept-charset="utf-8">
            <ul>
              <li><label for="username">Email</label>
              <input type="email" name="usermail" placeholder="yourname@email.com"
              required></li>

              <li><label for="password">Password</label>
              <input type="email" name="password" placeholder="password" required></li>
              <li>
                <input type="submit" value="Login"></li>
            </ul>
          </form>
        </section>
      </button>
<!--END LOG IN INFO-->

1 Ответ

0 голосов
/ 01 мая 2018

Прежде всего, закройте тег кнопки <button class="log">Log in</button>. Затем скройте форму, используя css, например .loginform { display: none; }

Наконец, чтобы показать форму, когда пользователь нажимает кнопку, вы можете использовать jQuery. 

$('.log').click(function() {
    $('.loginform').css('display', 'block');
});

Чтобы лучше понять CSS и Javascript и как они работают вместе, я настоятельно советую вам прочитать некоторые учебные пособия и проверить некоторые примеры в W3Schools

https://www.w3schools.com/jquery/default.asp

https://www.w3schools.com/css/default.asp

...