Атрибут accept HTML тега <input>

Значение и применение

Атрибут accept (HTML тега <input>) задает типы файлов, которые сервер принимает (файлы, которые могут быть загружены для отправки на сервер). Атрибут используется только для <input type = "file">.

Атрибут используется только с элементами управления, которые позволяют пользователю выбрать файл (<input type = "file">). При нажатии на кнопку в перечне всех файлов будут отображаться только доступные для выбора (загрузки).

Обращаю Ваше внимание, что не рекомендуется использовать этот атрибут в качестве инструмента проверки. Загрузка файлов должны быть проверена на стороне сервере.

Допускается указывать несколько значений, перечисленных через запятую:

<input accept = ".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

Поддержка браузерами

Атрибут	Chrome	Firefox	Opera	Safari	IExplorer	Edge
accept	Да	Да	Да	Да	10.0	Да

Синтаксис:

<input accept = "file_extension | audio/* | video/* | image/* | media_type">

Значения атрибута

Значение	Описание
file_extension	Расширение имени файла (.doc, .xls, .gif, .jpg, .png и т.п.). Расширение должно начинаться с точки (U+002E)
audio/*	Принимаются все звуковые файлы.
video/*	Принимаются все видео файлы.
image/*	Принимаются все графические файлы.
media_type	Принимает файлы с определённым MIME-типом без параметров.

Отличия HTML 4.01 от HTML 5

Нет.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибута accept HTML тега <input></title>
	</head>
	<body>
		<form name = "myForm" action = "script.php"> <!-- определяем имя для нашей формы и адрес, куда отправляется форма -->	
			Ваше фото: <input type = "file" accept = "image/*"> <!-- определяем элемент управления для загрузки графического файла -->
			<input type = "submit" value = "Подписаться"> <!-- определяем кнопку отправки формы -->
		</form>
	</body>
</html>

В данном примере мы создали форму (HTML тег <form>), атрибутом name определили имя для нашей формы, атрибутом action указали адрес, куда отправляется форма.

Внутри формы мы поместили элемент управления <input>, который позволяет пользователю выбрать файл (Атрибут type со значением "file") и атрибутом accept указали, что принимаются к загрузке все графические файлы (пользователь при клике на кнопку увидит в папках на своем накопителе только графические файлы, остальные будут скрываться).

Результат нашего примера:

Пример использования атрибута accept HTML тега <input>.

HTML тег <input>