software:development:demo:adaptive_registration_form
Это старая версия документа!
Адаптивную форма регистрации
Добавляем HTML:
Используйте элемент <form> для обработки входных данных. Вы можете узнать больше об этом в нашем учебнике PHP . Затем добавьте входные данные (соответствующие метке) для каждого поля:
- 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>
- <!DOCTYPE html> - указания типа текущего документа (HTML5).
- <html> - открывающий тег, является началом блока (контейнера), который заключает в себе все содержимое веб-страницы.
- <head> - открывающий тег блока , содержащего машиночитаемую информацию (metadata).
- <meta charset="utf-8"> - указывает кодировку документа.
- <meta name="viewport" content="width=device-width, initial-scale=1"> - сообщение браузеру, что ширина страницы равна ширине устройства, с которого эта страница просматривается. (width(ширина сайта) = device-width(ширина устройства) и масштаб: 1).
- <title>Responsive site layout</title> - заголовок страницы на вкладке браузера.
- <link type="Image/x-icon" href="template/images/favicon.ico" rel="shortcut icon"> - иконка страницы на вкладке браузера.
- <link rel="stylesheet" type="text/css" href="template/css/Font-Awesome-6.x/css/all.css" rel="stylesheet"> - подключение библиотеки векторных иконок.
- <link rel="stylesheet" type="text/css" href="template/css/Font-Awesome-6.x/css/v4-shims.css" rel="stylesheet"> - подключение библиотеки векторных иконок.
- <link rel="stylesheet" type="text/css" href="template/css/notebook.css"> - подключение внешней таблицы стилей CSS описанный ниже.
- <script src="template/js/jquery/2.2.2/jquery.min.js"></script> - подключение библиотеки с набором функций JavaScript, фокусирующийся на взаимодействии JavaScript и HTML. (min - минимальный набор функций).
- <script src="template/js/prefixfree/1.0.7/prefixfree.min.js"></script> - подключение плагина prefixfree, дающего возможность исключать префиксы, у свойств таблицы CSS, которые еще не до конца стандартизированы.
- </head> - закрывающий тег блока.
Добавляем 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%; } }
- <body> - начало блока хранения содержания веб-страницы (контента).
- <div class="container"> - начало контейнера контента веб страницы.
- <div class="posts-list"> - начало контейнера с анонсом статей.
- <article id="post-1" class="post"> - начало контейнера с анонсом 1й статьи.
- <div class="post-image"><a href=""><img src="blender3d_demo/blender3d_demo_1.</color>png" ></a></div> - блок вставки картинки с указанием месторасположения файла.
- <div class="post-content"> - начало блока текстовой информации 1й статьи.
- <div class="category"><a href="">Features</a></div> - блок указания категории 1й статьи.
- <h2 class="post-title">Blender 3.</color>6 LTS</h2> - блок заголовка 1й статьи.
- <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.</color> - </p> - блок текста 1й статьи.
- <div class="post-footer"> - начало блока «Читать далее» 1й статьи.
- <a class="more-link" href="">Continue Reading</a> - блок надписи «Читать далее» 2й статьи.
- <div class="post-social"> - начало блока иконок-ссылок социальных сетей.
- <a href="" target="_blank"><i class="fa fa-facebook"></i></a> - иконка-ссылка «facebook».
- <a href="" target="_blank"><i class="fa fa-twitter"></i></a> - иконка-ссылка «twitter».
- <a href="" target="_blank"><i class="fa fa-pinterest"></i></a> - иконка-ссылка «pinterest».
- </div> - конец блока иконок-ссылок социальных сетей.
- </div> - конец блока «Читать далее» 1й статьи.
- </div> - конец блока текстовой информации 1й статьи.
- </article> - конец контейнера с анонсом 1й статьи.
- <article id="post-2" class="post"> - начало контейнера с анонсом 2й статьи.
- <div class="post-image"><a href=""> - начало блока вставки видеофайла с указанием месторасположения.
- <video width="100%" controls="controls" poster="blender3d_demo/poster.</color>jpg"> - начало вставки видеофайла с указанием ширины, вставки панели управления, и файла-постера с указанием месторасположения.
- <source src="video/duel.</color>ogv" type='video/ogg; codecs="theora, vorbis"'> - - <source src="blender3d_demo/vesna(720p).</color>mp4" type='video/mp4; codecs="avc1.</color>42E01E, mp4a.</color>40.</color>2"'> <color #22b14c>- месторасположение встраиваемо видеофайла с указанием кодеков.
- </video> - закрывающий тег вставки видеофайла.
- </a></div> - конец блока вставки видеофайла с указанием месторасположения.
- <div class="post-content"> - начало блока текстовой информации 2й статьи.
- <div class="category"><a href="">Download</a></div> - блок указания категории 2й статьи.
- <h2 class="post-title">Spring</h2> - блок заголовка 2й статьи.
- <p>Is the story of a shepherdess and her dog who encounter ancient spirits in order to continue the cycle of life.</p> - блок текста 2й статьи.
- <div class="post-footer"> - начало блока «Читать далее» 2й статьи.
- <a class="more-link" href="">Continue Reading</a> - блок надписи «Читать далее» 2й статьи.
- <div class="post-social"> - начало блока иконок-ссылок социальных сетей.
- <a href="" target="_blank"><i class="fa fa-facebook"></i></a> - иконка-ссылка «facebook».
- <a href="" target="_blank"><i class="fa fa-twitter"></i></a> - иконка-ссылка «twitter».
- <a href="" target="_blank"><i class="fa fa-pinterest"></i></a> - иконка-ссылка «pinterest».
- </div> - конец блока иконок-ссылок социальных сетей.
- </div> - конец блока «Читать далее» 2й статьи.
- </div> - конец блока текстовой информации 2й статьи.
- </article> - конец контейнера с анонсом 2й статьи.
- </div> - конец контейнера с анонсом статей.
Только авторизованные участники могут оставлять комментарии.
software/development/demo/adaptive_registration_form.1709401019.txt.gz · Последнее изменение: 2024/03/02 20:36 — vladpolskiy