Гайд HTML - формы и медиа-теги #3

Пользователь
Статус
Оффлайн
Регистрация
14 Авг 2021
Сообщения
138
Реакции[?]
84
Поинты[?]
1K
HTML-формы используются для сбора различных видов пользовательского ввода. Через эти формы пользователь вводит данные, которые либо обрабатываются самим браузером (с использованием Javascript), либо данные отправляются на серверы, где они обрабатываются.

Форма-это область, которая может содержать элементы формы. Форма определяется с помощью тега <form>. Элементы формы - это элементы, которые позволяют пользователю вводить информацию (например, текстовые поля, поля текстовой области, раскрывающиеся меню, переключатели, флажки и т.д.) В форму

HTML - форма может содержать множество элементов, таких как текстовые поля (однострочные или многострочные), поля выбора, кнопки, флажки или переключатели. Давайте начнем с простой базовой формы без каких-либо элементов

Пример:

HTML:
<form action ="/action_page.php" >
    <label for ="fname" >First name: </label><br/>
    <input type ="text" id="fname" name="firstname" >
    <br/>
    Last name:
    <br/>
    <input type ="text" name ="lastname" >
    <br/><br/>
    <input type ="submit" value ="Submit" >
</form>
Теперь мы обсудим теги и атрибуты, которые мы в основном используем в формах.

1.1. входной тег

Тег <input> указывает поле ввода, в которое пользователь может вводить данные.
Элементы <input> используются в элементе <form> для объявления элементов управления вводом, которые позволяют пользователям вводить данные.
Это встроенный тег.

1.1.1.атрибут типа

HTML предоставляет различные типы входных данных, которые можно использовать для различных типов записей. По умолчанию значение type равно "text", что указывает на то, что мы хотим ввести однострочный текст.
Еще несколько значений атрибута типа -

emailpassworddatenumber
rangeurlradiohidden
timerange

type="submit" представляет собой кнопку, которая при выборе отправит форму. Вы можете управлять текстом, который отображается на кнопке "Отправить", с помощью атрибута "значение".
Например:
HTML:
<input type ="submit" value ="Submit" >
ПРИМЕЧАНИЕ: атрибут типа является обязательным.

1.1.2.атрибут значения

Значение не является обязательным атрибутом для добавления в элемент ввода, но оно очень полезно. Атрибут value используется по - разному для разных типов ввода
Для "button", "reset" и "submit" - он определяет текст на кнопке
Для "text", "password" и "hidden" - он определяет начальное (по умолчанию) значение поля ввода
Для "checkbox", "radio", "image" - он определяет значение, связанное с вводом (это также значение, которое отправляется при отправке)

Например, чтобы отобразить страну в качестве начального значения по умолчанию в поле ввода, код будет выглядеть следующим образом
HTML:
<input type ="text" value ="India" />
1.1.3. атрибут имени

Атрибут name является обязательным атрибутом для входного тега в форме.
Без этого атрибута этот элемент формы не будет отправлен или, другими словами, не будет отправлен на сервер.
Атрибут name также однозначно идентифицирует этот фрагмент данных.
Доступ к значению входных данных осуществляется с помощью атрибута name.

1.2. Метка этикетки

Использование меток для описания вида ввода в форме не является обязательным. Вы можете сделать это без использования тега label, как также показано в приведенном выше примере.
Но лучше всего использовать тег <label> для описания вида ввода элемента формы. Это не только семантически правильно, но также может быть привязано к их элементам формы, таким как
<input>, <textarea> и т.д.

Это также встроенный тег.
Как и то, что мы сделали в приведенном выше примере, это:
HTML:
<label for ="fname" >First name: </label><br/>
<input type ="text" id="fname" name ="firstname" />
Метка привязывается к этому входному элементу, присваивая атрибуту "id" входного элемента то же значение, что и атрибуту "for" метки.

ПРИМЕЧАНИЕ: Возможно, что значение идентификатора и имени будет одинаковым, и в большинстве случаев это будет так.

1.3. обязательный атрибут


При наличии он указывает, что поле ввода должно быть заполнено перед отправкой формы. В противном случае появится всплывающее окно для заполнения необходимого поля. Обязательным атрибутом является логический атрибут.
Например, применение обязательного атрибута к полю ввода, например:
HTML:
<form>
     <input type ="text" required >
     <input type ="submit" value ="Submit" />
</form>
1.4. атрибут-заполнитель

Атрибут-заполнитель используется с элементом ввода. В нем описывается примерное значение или краткое описание ожидаемого формата.
Значение атрибута-заполнителя задает короткую подсказку, описывающую ожидаемое значение поля ввода.
Например, добавление заполнителя во входные данные:
HTML:
<input type ="text" name ="fname" placeholder ="First name" ><br>
<input type ="text" name ="lname" placeholder ="Last name" >
1.5. отключенный атрибут

Атрибут disabled указывает, что элемент <input> должен быть отключен. Если ввод отключен, он становится недоступным для редактирования и кликабельным, хотя в нем уже может содержаться значение по умолчанию. Это также логический атрибут.
Например, добавление отключенного атрибута к входному элементу:
HTML:
<input type ="text" name ="country" value ="India" disabled ><br>
ПРИМЕЧАНИЕ: Отключенные элементы <input> в форме не будут отправлены.

1.6. Флажки

флажок-это значение атрибута типа входного элемента. Флажки используются, когда может потребоваться проверить несколько параметров, или вы также можете использовать их для включения или отключения чего-либо.

Флажок отображается в виде квадратного прямоугольника, который помечается (проверяется) при активации.
Существует также атрибут с именем checked, который при наличии устанавливает флажок по умолчанию при загрузке страницы.
Пример:
HTML:
<form>
     <input type ="checkbox" name ="vehicle1" value ="Bike" >I have a bike <br>
     <input type ="checkbox" name ="vehicle2" value ="Car" >I have a car <br>
     <input type ="checkbox" name ="vehicle3" value ="Boat"checked > I have aboat
</form>
1.7. Переключатель

Переключатель похож на флажок, но разница в том, что значения атрибута name все одинаковые. Для определения переключателя значением атрибута типа является "radio".
Все атрибуты name имеют одинаковое значение, что делает эти переключатели частью одного набора, и поэтому вы можете выбрать только один из них одновременно.
Пример:
HTML:
<form action ="/action_page.php" >
     <input type ="radio" name ="gender" value ="male" checked > Male <br>
     <input type ="radio" name ="gender" value ="female" > Female <br>
     <input type ="radio" name ="gender" value ="other" > Other
</form>
1.8. набор полей и элементы легенды

Элемент <fieldset> используется для обеспечения группировки части HTML-формы. Тег <fieldset> рисует рамку вокруг связанных элементов, что делает его более презентабельным.

Элемент <legend> используется для предоставления заголовка или пояснительного заголовка для остального содержимого родительского элемента элемента легенды. <legend> появляется сразу после тега <fieldset>.
Например, если используется набор полей и легенда:
HTML:
<form>
     <fieldset>
         <legend> SUBSCRIBE: </legend>
         Name: <input type ="text" ><br>
         Email: <input type ="text" ><br>
     </fieldset>
</form>
1.9. выберите элемент
HTML-тег <select> используется для создания выпадающего списка параметров. Выпадающий список содержит множество опций, и пользователь может выбрать одну из них.
Тег select также содержит атрибут name, как и другие элементы формы, которые представляют связанные данные, отправленные на сервер.

Есть некоторые уникальные атрибуты элемента select
multiple, что указывает, что можно выбрать несколько параметров.
size, который определяет, сколько параметров может быть показано одновременно.
Например:
HTML:
<select name ="select" >
     <option value ="value1" >Value 1 </option>
     <option value ="value2" selected >Value 2 </option>
     <option value ="value3" >Value 3 </option>
</select>
1.9.1.элемент опции

Тег, используемый для определения возможных опций, - это тег <option>. Этот тег помещается внутри тега <select>. Для каждого параметра в раскрывающемся списке используется отдельный элемент <option>.

Первый элемент <option> из списка опций выбран по умолчанию. Чтобы изменить эту предопределенную опцию, используйте выбранный атрибут с тегом <option>.

Каждый элемент параметра должен иметь атрибут value, содержащий значение данных, которое будет отправлено на сервер при выборе этого параметра.

1.9.2. Элемент optgroup

Тег <optgroup> используется для группировки нескольких параметров в одну группу.
Это создаст отдельные группы опций внутри выпадающего списка.
Например:
HTML:
<select>
     <optgroup label ="Books" >
          <option value ="html" >HTML</option>
          <option value ="css" >CSS</option>
     </optgroup>
     <optgroup label ="Snippets" >
          <option value ="git" >Git</option>
          <option value ="java" >Java</option>
     </optgroup>
</select>

1.10. элемент текстовой области


Элемент <textarea>-это элемент ввода, в котором пользователь может вводить многострочный текст, в отличие от элемента <input>, в котором есть только одна строка.
Текстовая область может содержать неограниченное количество символов, и перенос текста разрешен при отправке формы.
Пример:
HTML:
<label> Write about yourself: </label>
<textarea rows ="10" cols ="50" ></textarea>
1.10.1.атрибут строк и столбцов

Эти 2 атрибута используются для задания размера <textarea>.
Атрибут rows определяет видимую высоту текстовой области.
Атрибут cols определяет видимую ширину текстовой области.

ПРИМЕЧАНИЕ: Размер текстовой области также может быть задан свойством CSS height и width.

1.11. Кнопка "Отправить"

Кнопка "Отправить" - это кнопка, которая при нажатии автоматически отправляет форму. Кнопка определена в конце формы. Существует 2 различных способа добавления кнопки "Отправить" в форму:
с помощью тега <input>
с помощью тега <button>
Оба эти способа будут работать одинаково.

1.11.1.через input тег

Тег <input> также можно использовать для создания кнопки. Чтобы использовать его в качестве кнопки, для атрибута type установлено значение отправить. Когда происходит событие щелчка, т. е. пользователь нажимает на кнопку, форма отправляется. Входной тег является самозакрывающимся тегом, поэтому значение кнопки задается атрибутом value.
Кнопка "button" может быть сформирована с помощью тега ввода как:
HTML:
<input type ="button" value ="Submit form" >
1.11.2. с помощью тега button

<button> также используется для создания кнопки отправки в форме. Хотя тег <input> также создает кнопку отправки, но у тега кнопки есть некоторые преимущества перед тегом ввода. Тег кнопки является тегом контейнера и, следовательно, может содержать другие теги. Это помогает добавлять изображения и другое содержимое в кнопку.
Кнопка должна установить для атрибута type значение "button", чтобы сделать его кнопкой "button".
Например, кнопка "button" с изображением может быть определена как:
HTML:
<button type ="submit" >
    <img src ="images/logo.png" alt ="Learn HTML" height="20"
    width ="40"/> Submit
</button>
1.11.3.атрибут автофокусировки

Атрибут автофокусировки является логическим атрибутом. При применении к кнопке указывает, что кнопка автоматически получает фокус при загрузке страницы.

1.11.4. события на button

Есть некоторые события HTML, которые мы рассмотрим здесь. События-это то, что происходит, когда что-то происходит с элементами HTML.
onclick-одно из таких событий, которое запускает некоторое действие при нажатии кнопки. Например:
HTML:
<button onclick ="alert('Learn HTML')" >Click ME </button>
предупреждение - это метод окна, в котором отображается окно предупреждения с указанным сообщением и кнопкой "ОК". Окно предупреждения занимает весь экран окна и делает этот браузер недоступным для использования.

Другим таким методом окна является location.href, который создает HTML-кнопку, которая действует как ссылка. Поэтому, когда на него нажимают, он перенаправляется на страницу. Значение местоположения.href содержит URL-адрес, на который вы хотите его перенаправить.
HTML:
<button onclick ="location.href='http://google.com';" >ClickME</button>
1.12. Отправка формы
Когда форма отправлена, страница перезагружается, и мы знаем, что форма отправлена. Но на самом деле входные данные формы не передаются на сервер. Чтобы заставить форму отправлять входные данные на сервер, нам нужно установить 2 атрибута в форме:
1. атрибут метода
2. атрибут действия
Например, форма имеет такие атрибуты, как:
HTML:
<form action ="/address_to_handle_form" method ="post"> </form>
1.12.1. атрибут метода

Атрибут method определяет способ отправки данных формы. Данные могут быть отправлены на сервер различными способами. Существует в основном 2 значения, которые мы используем для отправки данных:
get - это добавляет данные в URL-адрес с помощью"? " в качестве разделителя в парах имя-значение. Поскольку эти данные будут видны, поэтому конфиденциальные данные (например, пароль) не следует отправлять. Это можно использовать для отправки строк запроса, таких как: URL?name=value&name=value
post - это добавляет данные в тело HTTP-запроса. Почта используется для отправки конфиденциальных данных.

1.12.2.атрибут действия

Атрибут действия определяет, куда отправляются данные формы при отправке формы. Он содержит адрес (т. е. URL) файла, в который отправляются данные. URL-адрес может быть указан в абсолютном и относительном пути.

Абсолютный URL-адрес указывает на другой веб-сайт (например, action="https://yougame.biz/forums/896/" ).
Относительный URL-адрес указывает на файл внутри веб-сайта (например, action="/forums/896/").


Мультимедиа-это контент, отличный от текста, который использует звук, музыку, видео, фильмы, анимацию и т.д. в Интернете. Мультимедиа представлены в нескольких формах(например, видео, аудио) и в нескольких форматах(например, mp3, .avi). Мы можем добавлять аудио, видео и рисунки с помощью мультимедийных элементов HTML.

2.1. Аудио-и Видеоэлемент

HTML может встраивать аудио и видео непосредственно на веб - страницу без какой-либо внешней поддержки. Вы можете добавлять аудио и видео стандартным способом.
Элемент <audio> используется для добавления звука на веб-страницу.
Элемент <video> используется для добавления видео на веб-страницу.

Этих элементов недостаточно для добавления носителя. Нам также нужно контролировать средства массовой информации. Итак, есть несколько тегов и атрибутов, которые необходимы для полного добавления носителя.

<audio> и <video> одинаковы в том, как к ним добавляется контент, и отличается только название тега.

Например, для добавления аудио на веб-страницу мы используем следующий код:
HTML:
<audio controls>
    <source src ="cn.avi" type ="audio/avi" >
    <source src ="cn.mp3" type ="audio/mpeg" >
    Your browser does not support the audio element.
</audio>
Здесь используются несколько тегов источника, чтобы звук воспроизводился, если какой-либо из форматов поддерживается браузером. В противном случае будет показано текстовое сообщение.

2.1.1. атрибут управления

Атрибут controls необходим для добавления таких элементов управления, как воспроизведение, пауза и громкость аудио/видео. Это дает вам возможность управлять видео-и аудиоконтентом.

2.1.2. тег источника

Элемент <source> используется для обслуживания одного и того же мультимедийного контента в нескольких форматах, чтобы разные браузеры могли запускать любой файл, который он поддерживает. Это пустой элемент.

2.1.3. Атрибут src

Атрибут src используется для указания URL-адреса медиафайла, который необходимо воспроизвести. Это может быть абсолютный или относительный путь.

2.1.4.атрибут типа

Атрибут type используется для указания типа носителя медиаресурса. То, как мы определяем тип для видео, похоже на: видео/mp4 и т. Д., А для аудио, например: audio/mpeg.

2.2. элемент рисунка

<figure> - это новый тег, введенный в HTML5. Этот элемент определяет автономный контент, такой как иллюстрации, диаграммы, фотографии, списки кодов и т.д.
HTML:
<figure>
     <img src ="images/logo.png" alt ="The Pulpit Rock" width="304"
     height ="228" >
     <figcaption> Text... </figcaption>
</figure>
2.2.1. элемент подписи к рисунку

Тег <figcaption> определяет заголовок для элемента <figure>. Это может быть размещено в любом месте внутри элемента фигуры.


Это небольшое знаковое изображение, представляющее веб-сайт. Чаще всего они находятся в адресной строке вашего веб-браузера, но их также можно использовать в списках закладок в веб-браузерах и агрегаторах каналов.
Вы можете увидеть значок рядом с заголовком страницы на самой вкладке. Это известно как фавикон.
Вы можете добавить значок со следующим синтаксисом:
HTML:
<link rel ="icon"href=" /favicon.ico" type= "image/x-icon" />
Rel определяет связь с фавиконом.
Href определяет расположение значка.
Type определяет тип носителя значка.


Метаданные определяют информацию о данных. Поэтому под метатегом хранится информация о веб-странице.
Метаданные не будут отображаться на странице, но будут доступны для машинного анализа. Мета - тег является самозакрывающимся тегом, и данные, хранящиеся в нем, называются метаданными.
Метаэлементы обычно используются для указания описания страницы, ключевых слов, автора документа, последнего изменения и других метаданных.

В метатеге используются 4 атрибута:
name
content
charset
http-equiv

Мета-теги были одним из самых основных элементов SEO. Они используются для предоставления сведений о вашем сайте поисковым системам. Поисковая оптимизация (SEO) определяется как процесс, влияющий на онлайн-видимость веб-сайта или веб-страницы в результатах веб-поисковой системы.

Поисковые системы, такие как Google, часто отображают мета-описание в результатах поиска, где они могут сильно повлиять на посещение веб-сайта пользователями. Поэтому очень важно добавлять мета-теги на свои веб-страницы.

ПРИМЕЧАНИЕ: На странице внутри заголовка может быть определено любое количество метатегов.

4.1. атрибут имени
Атрибут name используется для указания имени метаданных. Атрибут name используется вместе с атрибутом содержимого. Этот атрибут задает имя для информации/значения атрибута содержимого.

Атрибут name может иметь одно из 6 значений:
author - указывает имя автора документа
keywords - определяет список слов, разделенных запятыми, для целей SEO.
viewport - определяет управление видовым экраном на разных устройствах
application-name - указывает имя приложения, которое представляет страница.
description - задает описание страницы
generator - определяет пакеты программного обеспечения, используемые для создания документа.

ПРИМЕЧАНИЕ: Если установлен атрибут http-equiv, атрибут name устанавливать не следует. SEO используется поисковыми системами, такими как Google и bing, для поиска контента веб-сайта, соответствующего запросу пользователя. Это увеличивает качество и количество трафика на своем веб-сайте.

4.2. атрибут содержимого


Атрибут содержимого задает значение, связанное с атрибутом http-equiv или именем.

4.3. атрибут кодировки

Атрибут charset используется для объявления кодировки символов для страницы. Рекомендуется использовать кодировку UTF-8. Однако необходимо позаботиться о том, чтобы объявленный набор символов соответствовал набору символов на странице и был определен для каждой страницы веб-сайта.

4.4. Атрибут http-equiv

Атрибут http-equiv предоставляет заголовок HTTP для информации/значения атрибута содержимого. Значение этого атрибута можно использовать для изменения поведения серверов и агентов пользователей.

 
Участник
Статус
Оффлайн
Регистрация
31 Дек 2018
Сообщения
862
Реакции[?]
225
Поинты[?]
0
Товары в продаже
1
Какой смысл от гайда, который гуглится по первому запросу...
 
Пользователь
Статус
Оффлайн
Регистрация
14 Авг 2021
Сообщения
138
Реакции[?]
84
Поинты[?]
1K
Пользователь
Статус
Оффлайн
Регистрация
19 Авг 2020
Сообщения
223
Реакции[?]
138
Поинты[?]
6K
Ля ну прям для людей которые даже не знают что такое html может и пригодится, но те кто хоть что-то писал на html css уже чекали это в Гугле.
 
Участник
Статус
Оффлайн
Регистрация
31 Дек 2018
Сообщения
862
Реакции[?]
225
Поинты[?]
0
Товары в продаже
1
Я уже писал.
Это платная презентация с Индонезии.
А в чем "эксклюзивность" это презентации? Если эту информацию, как я и сказал, можно найти по первому запросу в поисковике.
 
Extension cheats
Забаненный
Статус
Оффлайн
Регистрация
22 Дек 2018
Сообщения
134
Реакции[?]
45
Поинты[?]
0
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки.
Все презентации переведены на русский язык мной.
Не нужно клевитать и ухудшать мою репутацию, вы совершенно неправы.
Просто забей. Этот форум состоит по большей части из школоты, которая не ценит труд других людей.
А так хорошая работа, хотелось бы увидеть что-то по vue.js / react
 
Пользователь
Статус
Оффлайн
Регистрация
14 Авг 2021
Сообщения
138
Реакции[?]
84
Поинты[?]
1K
Просто забей. Этот форум состоит по большей части из школоты, которая не ценит труд других людей.
А так хорошая работа, хотелось бы увидеть что-то по vue.js / react
Я действительно бы мог загружать оригиналы, но они все написаны на английском языке, я не думаю, что стоит такое загружать а потом самостоятельно переводить.
 
Сверху Снизу