Форма входа с плавающим заполнителем и световой кнопкой

#html #css

Accept

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

Например, мы можем принять загрузку на наш сервер только jpg и png.

#HTML

Multiple

Атрибут multiple в HTML можно прикрепить к тегам input и select. Это в основном позволяет пользователю вводить несколько значений.

Например, мы также можем использовать атрибут multiple во входных данных для загрузки HTML, чтобы пользователь мог загружать несколько файлов. Вот пример кода:
<input type="file" multiple />

#html

Contenteditable

Атрибут contenteditable используется, чтобы сделать HTML-контент доступным для редактирования на веб-странице. Это в основном позволяет пользователю редактировать элементы страницы, которые имеют атрибут contenteditable. Пример по ссылке ниже 👇

#html

Download

Атрибут download в HTML указывает, что ссылки будут загружаться, когда пользователь нажимает на них. Этот атрибут позволяет пользователям скачивать файлы с вашего сайта. Вот пример:

<div>
<a href="index.html" download="fileName">Download this</a>
</div>

#html

Translate

Атрибут translate используется, чтобы указать, нужно ли переводить контент. Его можно прикрепить ко всем тегам HTML, потому что это глобальный атрибут.
Этот атрибут можно использовать, например, в текстовых логотипах, чтобы сохранить одно и то же название бренда при переводе страницы на другой язык.

<p translate="no">Mehdi</p>

#html

Poster

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

<video poster="picture.jpeg" controls>
   <source src="file.mp4" type="file/mp4">
   <source src="file.ogg" type="file/ogg">
</video>

#html

Pattern

Атрибут pattern позволяет легко добавлять регулярное выражение к элементу ввода внутри формы. Мы также можем использовать другой атрибут title с атрибутом pattern чтобы помочь пользователю написать правильную форму текста на входе.

<form >
  <label for="input">Country Code:</label>
  <input type="text" id="input" pattern="[A-Za-z]{3}" title="Three letters country code.">
  <input type="submit">
</form>

#html

<template> — это элемент HTML, который позволяет нам создать, шаблон — структуру HTML для веб-компонента. Шаблон не обязательно должен быть огромным фрагментом кода. Он может быть очень простой:
<template>
  <p>The Zombies are coming!</p>
</template>
Элемент <template> имеет важное значение, потому что он связывает все вместе. Это как фундамент здания; это база, на которой построено все остальное.

#html

Выделение текста с помощью HTML-тега mark

<p>
  <mark>Highlight</mark>
  text with HTML &lt;mark&gt; tag
</p>

Цвет фона mark по умолчанию — желтый.

#html

WebP — изображения

Преимущества
• Изображения без потерь WebP на 26% меньше по размеру по сравнению с PNG.
• Изображения WebP с потерями на 25–34% меньше сопоставимых изображений JPEG при эквивалентном индексе качества SSIM.
• WebP с потерями также поддерживает прозрачность изображений.

Недостатки
Единственная причина, по которой Интернет не был обновлен полностью WebP — это совместимость.

• Браузеры Safari на данный момент еще не поддерживают его. Но появились новости о том, что в ближайшем будущем в Safari появится поддержка WebP.
• Системы управления контентом (CMS) в настоящее время не поддерживают WebP по умолчанию. Но вы можете установить плагин или расширение.

#html