Результаты поиска по запросу: html
Руководство новичка по HTML5 & CSS3 – объёмные формы в HTML5
Автор: Редакция ITVDN
Введение
К сожалению, от бумажных форм не скрыться даже сегодня. Разумеется, когда появились web-формы, распространение бумажных сбавило свой былой темп. В наше время, когда нужно зарегистрироваться в системе, необходимо просто посетить соответствующий веб-сайт и заполнить веб-форму через браузер. У такой веб-формы будет кнопка в нижней части экрана, для сиюминутной передачи информации нужно всего лишь щелкнуть по ней. Веб-форма – это в первую очередь удобный и быстрый способ передать серверу информацию пользователя для обработки. Веб-формы прежде всего были придуманы, чтобы избавиться от неудобств предшественников – бумажных форм. А также для простоты обмена информациtq в социальных сетях и для удобств электронной коммерции: например, легко можно осуществлять электронную оплату.
Нет сомнений, на сегодняшний день веб-формы – необходимая часть любого веб-сайта. По существу, данная форма – это HTML-документ, состоящий из различных элементов и атрибутов. Теперь рассмотрим создание HTML5 форм.
Прочитав эту статью, Вы научитесь создавать объёмную форму с помощью HTML5.
Основы создания формы
index.html – HTML-файл (показанный ниже). В него Вы добавите HTML-код, чтобы создать форму. Читая эту статью, Вы будете добавлять код между закомментированными тегами start и end.
<!DOCTYPE html>
<html>
<head>
<title>Formidable Form with HTML5title>
head>
<body>
<div class="container">
<header>
<h1>Formidable Form with HTML5h1>
header>
<div class="form">
div>
div>
body>
html>
Приступайте к работе с HTML формой
HTML форма – основа многих веб-форм, известных на сегодняшний день. Она может содержать следующие элементы ввода данных:
1. Текстовые поля, поля пароля, checkbox, radio buttons и кнопки submit.
2. Текстовая область и выпадающие списки.
Они вместе предоставляют средства управления UI, чтобы ввести и отправить информацию на сервер. Кроме того, форма может содержать элементы fieldset, legend и label.
В любом текстовом редакторе откройте файл index.html и добавьте HTML-код, между тегами и . Как только это сделаете, сохраните файл и откройте его в браузере – и увидите результат.
Как продемонстрировано, код для формы мы включаем между тегами и .
имеет три атрибута:
Id. Содержит значения – к примеру, particularsform – используемые для ссылки на HTML-элемент в JavaScript и CSS.
Action. Содержит URL веб-страницы – данные формы будут отправлены на него после ввода.
Method. Присваивает значение «get» в данном примере. Метод get передаст данные формы на страницу получения, добавляя их в виде пар имя-значение в URL-страницы. В данном атрибуте иногда ещё используется метод post.
Тег – самый важный в элемент HTML-форме. Он определяет поле ввода в теге.
<input type="submit"> определяет кнопку отправки. Когда пользователь нажимает эту кнопку, она отправляет данные формы в файл, определенный в атрибуте «action». Добавьте выделенный код в index.html. Это выведет на экран кнопку отправки с заголовком «Sign up». Заголовок «Sign up» присвоен через значение атрибута.
Введите любые значения в текстовые поля имени и адреса электронной почты соответственно, щелкните по кнопке «Sign up» и наблюдайте.
Значения, введенные в соответствующие текстовые поля вместе с их соответствующими именами, были бы отправлены в acknowledge.html, значение атрибута action тега
. В данном примере acknowledge.html просто выведет в браузере на экран данные, полученные от index.html.
Обратите внимание на строку поиска. Вы видете, что имя, электронная почта, и кнопка отправки были добавлены к URL acknowledge.html как пары значение-имя таким образом:
Это то, как данные передаются к странице получения, когда в теге определяется значение get.
maxlength
Вы можете добавить атрибут maxlength к элементу , чтобы ограничить вводимое пользователем количество символов.
<input maxlength="10">
Тег <input type="password"> определяет поле пароля. Это текстовое поле, символы в котором замаскированы в форме звездочек или кругов.
Добавьте выделенный код в index.html. Это создаст два поля пароля. Когда Вы введете текст в эти поля, Вы увидите, что каждый символ был превращен или в звездочку, или в круг.
Тег <input type="radio"> – тег-переключатель. Переключателей обычно как минимум два и они находятся в группах, используют одинаковое значение для их атрибутов name, но различное значение для их атрибутов value. Пользователь может выбрать только один из них в группе.
Добавьте выделенный код в index.html. Это создаст два переключателя для выбора пола. Эти переключатели используют одинаковое название "Gender", который идентифицирует их как группу, и только один пол может быть выбран в этой группе. Если Вы измените одно из названий на другое значение, Вы нарушите это правило, и обе кнопки могут быть выбраны одновременно. Но, конечно, это не имеет никакого смысла для выбора пола.
and
Тег
используется, чтобы сгруппировать связанные элементы в форме, создавая рамки вокруг них. Тег используется, чтобы определить заголовок для этой рамки.
Давайте изменим код выделенной области. Это образует рамки вокруг этих 2 переключателей для выбора пола с заголовком "Gender".
Тег <input type="checkbox"> создает область с флажком, чтобы пользователь мог выбрать или отменять опцию. Как в случае с переключателями, флажки обычно находятся в группах. Но в отличие от переключателей, пользователь может выбрать больше, чем одну строку с флажком.
Добавьте выделенный код в index.html. Это создаст шесть переключателей для выбора хобби. Эти переключатели используют одинаковое название "hobbies", идентифицирующее их как группу.
Тег <input type="file"> определяет кнопку загрузки для пользователей, чтобы выбрать и загрузить файл.
Добавьте выделенный код в index.html. Это создаст кнопку загрузки, где пользователь может щелкнуть, чтобы выбрать файл и загрузить его.
Таким образом можно без проблем создать свою форму с помощью HTML5.
Источник: http://www.codeproject.com/Articles/761123/Beginners-Guide-to-HTML-CSS-Formidable-Forms-with
Создание анимации с помощью CSS
Автор: Константин Абрамов
<p>На этом вебинаре мы займемся созданием анимации молекулы ДНК с помощью HTML и CSS, а также дополнительных инструментов. Мы создадим ключевые кадры и посмотрим, как это возможно воспроизвести с помощью HTML и CSS. Сделаем рефакторинг CSS в SCSS и с помощью директивы @for уменьшим количество кода в 2 раза.</p>
<p><strong>План вебинара:</strong></p>
<p>1) Разбор ключевых кадров анимации с помощью видео редактора.</p>
<p>2) Создание каркаса молекулы и элементов, которые будут ее составлять. Применение таких свойств как position: relative и absolute, display: flex.</p>
<p>3) Создание ключевых кадров в CSS.</p>
<p>4) Рефакторинг кода из CSS в SCSS.</p>
<p>5) + Добавим небольшой микс к молекуле – связывающие линии атомов.</p>
<p>6) В заключение поговорим о возможных вариантах улучшения и использования дополнительных инструментов для создания разнообразных спецэффектов.</p>
<p><strong>Целевая аудитория: </strong></p>
<p>Данный вебинар будет интересен тем, кто изучает HTML, CSS и интересуется анимацией и оживлением веб страниц с помощью CSS анимации.</p>
Начало работы с Symfony 4
Автор: Редакция ITVDN
<p>Symfony — один из самых популярных PHP фреймворков, который использует паттерн Model-View-Controller и используется для веб-разработке.
Symfony дает возможность ускорить разработку и управление веб-приложениями, позволяет легко решать рутинные задачи веб-программиста.
Имеет поддержку множества баз данных (MySQL, PostgreSQL, SQLite или любая другая PDO-совместимая СУБД). Во время вебинара мы создадим модуль с менеджментом списка заметок.
У вас будет список заметок с возможностью просматривать, добавлять, удалять и изменять заметки. Мы напишем приложение, отвечающее за менеджмент заметок.
</p>
<p>Используемые технологии: HTML, PHP, MySQL. </p>
<p>Используемые компоненты Symfony: Flex, Profiler, Web Server, Symfony Form, Doctrine 2, Twig, Router. </p>
<p>Предварительные требования: Углубленные знания в PHP, ООП в PHP, знания MYSQL, знания HTML, знания основ HTTP протокола. </p>
План вебинара:
<ol>
<li>Установка Symfony 4. </li>
<li>Описание директорий и файлов Symfony 4. </li>
<li>Создание первого Контроллера и маршрута. </li>
<li>Создание HTML страницы с использованием Bootstrap. </li>
<li>Создание Базы Данных и Doctrine 2 сущности. </li>
<li>Создание CRUD для менеджмента заметок. </li>
<li>Тестирование нашего приложения. </li>
</ol>
<p>Целевая аудитория:программисты, IT-студенты, инженеры.
Создание Memory Game на JavaScript
Автор: Ярослав Вовченко
<p>Чтобы начать писать на JavaScript, не обязательно сразу углубляться в изучение документации. На примере написания простой Memory Game мы разберем, как выбирать элементы в DOM, проходиться по спискам и массивам, добавлять, убирать элементы и слушатели действий.</p>
<p>На вебинаре мы попробуем быстро погрузиться в практическую разработку на JavaScript. Вам для этого понадобятся базовые знания HTML, CSS и JavaScript.</p>
<p><strong>План вебинара:</strong></p>
<ol>
<li>Создание структуры проекта, написание первых файлов.</li>
<li>Разметка и стилизация игрового поля с помощью HTML и CSS.</li>
<li>Основы работы с перспективой в CSS.</li>
<li>Сохранение и сравнение выбранных карточек.</li>
<li>Написание дополнительного функционала.</li>
<li>Итоги, вопросы и ответы.</li>
</ol>
<p><strong>Целевая аудитория:</strong></p>
<p>Данный вебинар будет интересен для людей, которые хотят изучить основы JavaScript в легкой и доступной форме без многочасового чтения документации.</p>
Тест-драйв IT-специальностей: попробуй Frontend и Python бесплатно
Автор: Редакция ITVDN
Хочешь перейти в IT, но не знаешь, с чего начать?
Тест-драйв ITVDN — это твоя возможность без риска попробовать две востребованные специальности: Frontend и Python-разработку.
Это не рекламные ролики, а полноценные вводные курсы с видеоуроками, практикой, теорией и сертификацией.
🧠 Цель тест-драйва:
– помочь новичкам определиться с направлением
– познакомить с форматом обучения ITVDN
– показать, как выглядит реальный старт в IT
📌 Первая неделя — курс HTML & CSS Стартовый
🔹 Что такое HTML & CSS?
HTML — основа любого сайта. Это каркас, структура и контент.
CSS — отвечает за внешний вид и стиль страницы.
🔹 Чему ты научишься:
✔ Создавать собственные одностраничные сайты
✔ Работать с HTML-тегами, таблицами, списками
✔ Формировать структуру страницы и интерфейс
✔ Применять CSS-стили: цвета, шрифты, фон, размеры
✔ Делать адаптивную вёрстку с помощью Flexbox
✔ Использовать селекторы, блоки, семантику
ЭТА ЧАСТЬ ЗАВЕРШЕНА
📌 Вторая неделя — курс Python Стартовый
🔹 Что такое Python?
Один из самых популярных языков программирования в мире. Его используют для веб-разработки, автоматизации, Data Science, AI/ML и кибербезопасности.
🔹 Чему ты научишься:
✔ Понимать синтаксис Python и основы программирования
✔ Писать простые скрипты и обрабатывать данные
✔ Работать с циклами, условиями, функциями
✔ Использовать списки, словари, множества и кортежи
✔ Обрабатывать ошибки и писать стабильный код
✔ Создавать полезные мини-приложения на Python
ЭТА ЧАСТЬ ЗАВЕРШЕНА
🎯 После прохождения тест-драйва ты:
✔️ Определишь, какое направление тебе ближе
✔️ Получишь реальный опыт обучения в ITVDN
✔️ Поймешь, как на практике выглядит IT-образование
✔️ Сделаешь первый шаг к новой профессии — легко, без стресса и затрат
Тест-драйв ITVDN — это твоя возможность без риска попробовать две востребованные специальности с 1 по 14 мая включительно: Frontend и Python-разработку.
📞 Остались вопросы? — Мы поможем!
❓ Не знаешь, что выбрать? Получи бесплатную консультацию:
📩 Telegram: @itvdn_support
📧 Email: support@itvdn.com
📞 Телефон: +38 044 344 16 22 или +44 204 577 32 36
FrontEnd для новичков. Создаём лендинг с нуля
Автор: Зеньо Роман
<p>Приглашаем на вебинар по созданию лендинга! Он отлично подойдет начинающим, которые хотят стать FrontEnd разработчиками и готовы к первому шагу – изучению основ вёрстки.</p>
<p>Вы познакомитесь с языками вёрстки – HTML5 и CSS3 – и узнаете, как создать свой первый одностраничный веб-сайт – лендинг. Автор покажет на реальном примере, как создать структуру страницы с помощью HTML, а также оживить и придать привлекательный внешний вид с использованием CSS.</p>
Создание веб-приложения с Angular 1.5, Firebase и Gulp
Автор: Александр Пономаренко
Использование Angular + Firebase в приложениях
Трехсторонняя привязка данных
Сборка приложения с Gulp
Краткое описание:
На этом вебинаре мы рассмотрим создание приложения от верстки до сборки и деплоя. Сверстаем шаблон при помощи SASS, разберемся со сборщиком проектов Gulp и далее мы перейдем к самому интересному - Angular 1.5 + Firebase. Основной «фишкой» данного приложения является ТРЕХсторонняя привязка данных. Приложение не будет сложным для людей, которые хоть немного знакомы с Angular.
Предварительные требования:
Знание HTML, CSS, JavaScript, знакомство с Angular JS, понимание принципов работы с ним.
JavaScript Стартовый
Автор: Дмитрий Охрименко
JavaScript – это один из самых популярных языков программирования, без знания которого не обойтись в web-разработке и который можно использовать для решения иных задач. Сегодня JavaScript, кроме добавления динамического поведения HTML страницам, применяется в разработке серверных приложений, игровых и мобильных приложений, а также для создания сценариев для автоматизации тестирования и многого другого. Изучение JavaScript — это хорошее вложение в будущее, так как язык пригодится для решения различных задач и будет полезным как FrontEnd или BackEnd разработчику, так и тестировщику программного обеспечения.
HTML5 & CSS3 Стартовий
Автор: Виталий Мазяр
В основі роботи будь-якого веб-сайту є демонстрація тексту, зображень та іншого контенту у вікні спеціальної програми – веб-браузера. За допомогою мови HTML створюється початкова розмітка (каркас) кожної веб-сторінки. Потім використання CSS перетворює сайт, налаштовуючи спосіб відображення елементів і надаючи йому привабливий і ефектний зовнішній вигляд. Вивчення цих мов є основою для навчання будь-якого верстальника та веб-розробника.
Проверка данных формы
Автор: Дмитрий Охрименко
Проверка данных – основная роль JavaScript, когда речь идет о HTML формах. Данные, введенные пользователем, могут не соответствовать ожиданиям разработчика. Пользователь может не ввести какое-то обязательное значение или указать данные в неправильном формате, например, когда требуется ввести email адрес и номер телефона. В этом уроке вы узнаете о событиях, которые будут полезными при проверке данных, а также рассмотрите несколько подходов в организации процесса проверки введенных значений, в том числе изучите проверку данных без применения JavaScript, используя HTML5 атрибуты для валидации.