Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.06.2021, 21:22
Аспирант
Отправить личное сообщение для venom1996 Посмотреть профиль Найти все сообщения от venom1996
 
Регистрация: 10.11.2020
Сообщений: 69

Форма заказа по шагам
Добрый день, как можно реализовать такую форму заказа в нескольких шагах ? ну и что бы эти данные сохранились при отправке формы на последнем шаге. Может я не очень доходчиво объясняю, вот пример как тут https://relefnie-tablichki.ru/katalo...tablichki/202/
Ответить с цитированием
  #2 (permalink)  
Старый 29.06.2021, 14:46
Кандидат Javascript-наук
Отправить личное сообщение для od0201 Посмотреть профиль Найти все сообщения от od0201
 
Регистрация: 07.05.2020
Сообщений: 105

так
<html>
  <style type="text/css">
    #container {
      display: flex;
    }
    .hide{
      display: block;      
    }
    div{
      padding: 40px;
      display: flex;
      display: none;      
    }
  </style>
<body>
  <form action="">
    <div id=container>
      <div id=id1 style="background:yellow;"></div>
      <div id=id2 style="background:black;"></div>
      <div id=id3 style="background:red;"></div>
  </div>
  </form>
<script>
  document.querySelector('#id2').classList.add('hide')
</script>
</body>
</html>


или так с использованием materializecss

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <title>{{title}}</title>
</head>
<body>
  <form action="" method="GET" validate>
  <div class="row">
    <div class="col s10 offset-s1">
      <ul class="tabs">
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
    <div id="test1" class="col s8 offset-s2 center">
      <div class="input-field col s6">
        <input placeholder="Placeholder" id="first_name" type="text" class="validate">
        <label for="first_name">First Name</label>
      </div>
    </div>
    <div id="test2" class="col s8 offset-s2">
      <div class="input-field col s6">
        <input id="last_name" type="text" class="validate">
        <label for="last_name">Last Name</label>
      </div>
    </div>
    <div id="test3" class="col s8 offset-s2">Test 3</div>
    <div id="test4" class="col s8 offset-s2">
      <div class="row">
        <div class="input-field col s6">
          <i class="material-icons prefix">account_circle</i>
          <input id="icon_prefix" type="text" class="validate">
          <label for="icon_prefix">First Name</label>
        </div>
        <div class="input-field col s6">
          <i class="material-icons prefix">phone</i>
          <input id="icon_telephone" type="tel" class="validate">
          <label for="icon_telephone">Telephone</label>
        </div>
      </div>
      <button class="btn btn-primary" type="submit"><i class="material-icons left">cloud</i>Войти</button>
    </div>
  </div>
</form>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>    
  <script>
    M.Tabs.init(document.querySelector(".tabs"))
  </script>    
</body>

Последний раз редактировалось od0201, 29.06.2021 в 15:12.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
форма заказа webmanss Работа 1 12.03.2013 17:07
Форма заказа jQuery kotunov jQuery 1 21.02.2013 16:54
Пошаговая форма заказа Brettm Элементы интерфейса 4 31.01.2013 18:48
нужна форма оптового заказа с калькулятором Dariloff Работа 1 06.01.2013 15:31
Добавление исходного числа в расчет (форма заказа) seoguru Общие вопросы Javascript 2 27.02.2012 12:47