worldwide open-source software

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
======Адаптивную форма регистрации======
{{:software:development:demo:adaptive_registration_form_1.png?550 |}}
=====Пример=====

Пример можно посмотреть [[https://book51.ru/demo/code/adaptive_registration_form/index.html|по этой ссылке.]]

<html>
<iframe height="650" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code/adaptive_registration_form/index.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>
</html>

=====Добавляем HTML:=====
Используйте элемент <form> для обработки входных данных. Вы можете узнать больше об этом в нашем учебнике PHP . Затем добавьте входные данные (соответствующие метке) для каждого поля:
<code html HTML>
<form action="action_page.php" style="border:1px solid #ccc">
  <div class="container">
    <h1>Sign Up</h1>
    <p>Please fill in this form to create an account.</p>
    <hr>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <label for="psw-repeat"><b>Repeat Password</b></label>
    <input type="password" placeholder="Repeat Password" name="psw-repeat" required>

    <label>
      <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
    </label>

    <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>

    <div class="clearfix">
      <button type="button" class="cancelbtn">Cancel</button>
      <button type="submit" class="signupbtn">Sign Up</button>
    </div>
  </div>
</form>
</code>

#: Пояснительная записка блока <head>:
  - **%%<!DOCTYPE html>%%** <fc #22b14c>- указания типа текущего документа (HTML5).</fc>
  - **%%<html>%%** <fc #22b14c>- открывающий тег, является началом блока (контейнера), который заключает в себе все содержимое веб-страницы.</fc>
  - **%%<head>%%** <fc #22b14c>- открывающий тег блока , содержащего машиночитаемую информацию (metadata).</fc>
  - **%%<meta charset="utf-8">%%** <fc #22b14c>- указывает кодировку документа.</fc>
  - **%%<meta name="viewport" content="width=device-width, initial-scale=1">%%** <fc #22b14c>- сообщение браузеру, что ширина страницы равна ширине устройства, с которого эта страница просматривается. (width(ширина сайта) = device-width(ширина устройства) и масштаб: 1).</fc>
  - **%%<title>Responsive site layout</title>%%** <fc #22b14c>- заголовок страницы на вкладке браузера.</fc>
  - **%%<link type="Image/x-icon" href="template/images/favicon.ico" rel="shortcut icon">%%** <fc #22b14c>- иконка страницы на вкладке браузера.</fc>
  - **%%<link rel="stylesheet" type="text/css" href="template/css/Font-Awesome-6.x/css/all.css" rel="stylesheet">%%** <fc #22b14c>- подключение библиотеки векторных иконок.</fc>  
  - **%%<link rel="stylesheet" type="text/css" href="template/css/Font-Awesome-6.x/css/v4-shims.css" rel="stylesheet">%%** <fc #22b14c>- подключение библиотеки векторных иконок.</fc> 
  - **%%<link rel="stylesheet" type="text/css" href="template/css/notebook.css">%%** <fc #22b14c>- подключение внешней **таблицы стилей CSS** описанный ниже.</fc>
  - **%%<script src="template/js/jquery/2.2.2/jquery.min.js"></script>%%** <fc #22b14c>- подключение библиотеки с набором функций **JavaScript**, фокусирующийся на взаимодействии JavaScript и HTML. (min - минимальный набор функций).</fc>  
  - **%%<script src="template/js/prefixfree/1.0.7/prefixfree.min.js"></script>%%** <fc #22b14c>- подключение плагина **prefixfree**, дающего возможность исключать префиксы, у свойств таблицы CSS, которые еще не до конца стандартизированы.</fc> 
  - **%%</head>%%** <fc #22b14c>- закрывающий тег блока.</fc> 
:#

=====Добавляем CSS=====


<code css SCC>
* {box-sizing: border-box}

/* Full-width input fields */
  input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

/* Set a style for all buttons */
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

button:hover {
  opacity:1;
}

/* Extra styles for the cancel button */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}

/* Add padding to container elements */
.container {
  padding: 16px;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
    width: 100%;
  }
}
</code>
#:Пояснительная записка блока main: 
  - **%%<body>%%** <fc #22b14c>- начало блока хранения содержания веб-страницы (контента).</fc>
  - **%%<div class="container">%%** <fc #22b14c>- начало контейнера контента веб страницы.</fc>
  - **%%<div class="posts-list">%%** <fc #22b14c>- начало контейнера с анонсом статей.</fc>
  - **%%<article id="post-1" class="post">%%** <fc #22b14c>- начало контейнера с анонсом 1й статьи.</fc> 
  - **%%<div class="post-image"><a href=""><img src="blender3d_demo/blender3d_demo_1.</fc>png" ></a></div>%%** <fc #22b14c>- блок вставки картинки с указанием месторасположения файла.</fc> 
  - **%%<div class="post-content">%%** <fc #22b14c>- начало блока текстовой информации 1й статьи.</fc>
  - **%%<div class="category"><a href="">Features</a></div>%%** <fc #22b14c>- блок указания категории 1й статьи.</fc>
  - **%%<h2 class="post-title">Blender 3.</fc>6 LTS</h2>%%** <fc #22b14c>-  блок заголовка 1й статьи.</fc>
  - **%%<p>%%**Blender 3D program Blender is one of the most popular 3D modeling software. This is a multifunctional software, acquaintance with which will be useful for those who are interested in 3d graphics and who want to understand the basic principles of this industry.</fc>  - **%%</p>%%** <fc #22b14c>- блок текста 1й статьи.</fc>
  - **%%<div class="post-footer">%%** <fc #22b14c>- начало блока "Читать далее" 1й статьи.</fc> 
  - **%%<a class="more-link" href="">Continue Reading</a>%%** <fc #22b14c>- блок надписи "Читать далее" 2й статьи.</fc>
  - **%%<div class="post-social">%%** <fc #22b14c>- начало блока иконок-ссылок социальных сетей.</fc>
  - **%%<a href="" target="_blank"><i class="fa fa-facebook"></i></a>%%** <fc #22b14c>- иконка-ссылка "facebook".</fc>
  - **%%<a href="" target="_blank"><i class="fa fa-twitter"></i></a>%%** <fc #22b14c>- иконка-ссылка "twitter".</fc> 
  - **%%<a href="" target="_blank"><i class="fa fa-pinterest"></i></a>%%** <fc #22b14c>- иконка-ссылка "pinterest".</fc> 
  - **%%</div>%%** <fc #22b14c>- конец блока иконок-ссылок социальных сетей.</fc> 
  - **%%</div>%%** <fc #22b14c>- конец блока "Читать далее" 1й статьи.</fc> 
  - **%%</div>%%** <fc #22b14c>- конец блока текстовой информации 1й статьи.</fc> 
  - **%%</article>%%** <fc #22b14c>-  конец контейнера с анонсом 1й статьи.</fc>
  - **%%<article id="post-2" class="post">%%** <fc #22b14c>- начало контейнера с анонсом 2й статьи.</fc> 
  - **%%<div class="post-image"><a href="">%%** <fc #22b14c>- начало блока вставки  видеофайла с указанием месторасположения.</fc> 
  - **%%<video width="100%"  controls="controls" poster="blender3d_demo/poster.</fc>jpg">%%** <fc #22b14c>- начало вставки видеофайла с указанием ширины, вставки панели управления, и файла-постера с указанием месторасположения.</fc> 
  - **%%<source src="video/duel.</fc>ogv" type='video/ogg; codecs="theora, vorbis"'>%%** <fc #22b14c>- 
  - **%%<source src="blender3d_demo/vesna(720p).</fc>mp4" type='video/mp4; codecs="avc1.</fc>42E01E, mp4a.</fc>40.</fc>2"'>%%** <fc #22b14c>- месторасположение встраиваемо видеофайла с указанием кодеков.</fc>
  - **%%</video>%%** <fc #22b14c>- закрывающий тег вставки видеофайла.</fc>
  - **%%</a></div>%%** <fc #22b14c>- конец блока вставки  видеофайла с указанием месторасположения.</fc>
  - **%%<div class="post-content">%%** <fc #22b14c>- начало блока текстовой информации 2й статьи.</fc> 
  - **%%<div class="category"><a href="">Download</a></div>%%** <fc #22b14c>- блок указания категории 2й статьи.</fc> 
  - **%%<h2 class="post-title">Spring</h2>%%** <fc #22b14c>- блок заголовка 2й статьи.</fc>
  - **%%<p>%%**Is the story of a shepherdess and her dog who encounter ancient spirits in order to continue the cycle of life.**%%</p>%%** <fc #22b14c>- блок текста 2й статьи.</fc> 
  - **%%<div class="post-footer">%%** <fc #22b14c>- начало блока "Читать далее" 2й статьи.</fc>
  - **%%<a class="more-link" href="">Continue Reading</a>%%** <fc #22b14c>- блок надписи "Читать далее" 2й статьи.</fc> 
  - **%%<div class="post-social">%%** <fc #22b14c>- начало блока иконок-ссылок социальных сетей.</fc>
  - **%%<a href="" target="_blank"><i class="fa fa-facebook"></i></a>%%** <fc #22b14c>- иконка-ссылка "facebook".</fc>
  - **%%<a href="" target="_blank"><i class="fa fa-twitter"></i></a>%%** <fc #22b14c>- иконка-ссылка "twitter".</fc> 
  - **%%<a href="" target="_blank"><i class="fa fa-pinterest"></i></a>%%** <fc #22b14c>- иконка-ссылка "pinterest".</fc> 
  - **%%</div>%%** <fc #22b14c>- конец блока иконок-ссылок социальных сетей.</fc> 
  - **%%</div>%%** <fc #22b14c>- конец блока "Читать далее" 2й статьи.</fc> 
  - **%%</div>%%** <fc #22b14c>- конец блока текстовой информации 2й статьи.</fc> 
  - **%%</article>%%** <fc #22b14c>- конец контейнера с анонсом 2й статьи.</fc>
  - **%%</div>%%** <fc #22b14c>- конец контейнера с анонсом статей.</fc>
:#