Как стилизовать поле для отправки файла

Стиль выделения ошибок

Стандартное уведомление об ошибках в словах, введенных в поле ввода, представляет собой волнистое подчеркивание. CSS4 позволит установить иной способ выделения орфографических и грамматических ошибок — посредством новых псевдоэлементов — и . На текущий момент изменить оформление ошибок невозможно, так как эти псевдоэлементы не поддерживаются браузерами, однако их появление — лишь вопрос времени.


::grammar-error {
  color: inherit;
  background-color: #c6fbcc;
}

::spelling-error {
  color: inherit;
  background-color: #ffe5e5;
}

Указанные селекторы будут ограничены следующим набор свойств: , , , , , , и .

Using file inputs

A basic example

<form method="post" enctype="multipart/form-data">
 <div>
   <label for="file">Choose file to upload</label>
   <input type="file" id="file" name="file" multiple>
 </div>
 <div>
   <button>Submit</button>
 </div>
</form>
div {
  margin-bottom: 10px;
}

This produces the following output:

Note: You can find this example on GitHub too — see the source code, and also see it running live.

Regardless of the user’s device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.

Including the attribute, as shown above, specifies that multiple files can be chosen at once. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down Shift or Control, and then clicking). If you only want the user to choose a single file per , omit the attribute.

When the form is submitted, each selected file’s name will be added to URL parameters in the following fashion:

Getting information on selected files

Each object contains the following information:

The file’s name.
A number specifying the date and time at which the file was last modified, in milliseconds since the UNIX epoch (January 1, 1970 at midnight).
A object representing the date and time at which the file was last modified. This is deprecated and should not be used. Use instead.
The size of the file in bytes.
The file’s MIME type.
webkitRelativePath
A string specifying the file’s path relative to the base directory selected in a directory picker (that is, a picker in which the attribute is set). This is non-standard and should be used with caution.

Note: You can set as well as get the value of in all modern browsers; this was most recently added to Firefox, in version 57 (see баг 1384030).

Limiting accepted file types


Often you won’t want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as JPEG or PNG.

Acceptable file types can be specified with the attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:

  • or — Accepts PNG files.
  • or — Accept PNG or JPEG files.
  • — Accept any file with an MIME type. (Many mobile devices also let the user take a picture with the camera when this is used.)
  • — accept anything that smells like an MS Word document.

Let’s look like a more complete example:

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">Choose file to upload</label>
    <input type="file" id="profile_pic" name="profile_pic"
          accept=".jpg, .jpeg, .png">
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>
div {
  margin-bottom: 10px;
}

This produces a similar-looking output to the previous example:

Note: You can find this example on GitHub too — see the source code, and also see it running live.

It may look similar, but if you try selecting a file with this input, you’ll see that the file picker only lets you select the file types specified in the value (the exact nature differs across browsers and operating systems).

The attribute doesn’t validate the types of the selected files; it simply provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.

Because of this, you should make sure that the attribute is backed up by appropriate server-side validation.

Другие поля

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

Скрытое поле


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

Чтобы создать скрытое поле используйте значение hidden атрибута type. Дополнительно включает в себя соответствующие значения атрибутов name и value.

Поле для файла

Чтобы позволить пользователям добавить файл в форму, вроде прикрепления файла к письму, используйте значение file атрибута type.

Демонстрация поля для файла

К сожалению, стилизация с помощью CSS элемента <input>, у которого значение атрибута type задано как file, является трудной задачей. Каждый браузер содержит свой собственный стиль поля по умолчанию и ни один не даёт много свободы, чтобы переопределить этот стиль. JavaScript и другие решения могут быть использованы для этого, но они несколько сложны для построения.

Предопределение формата вводимых в поле данных

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

Для этих целей существует атрибут , сигнализирующий браузеру о том, клавиатуру какого именно формата использовать при вводе данных. Несмотря на большую полезность, из всех браузеров его полноценно поддерживает (включая элементы с ) только Google Chrome самых свежих версий, а Opera и Firefox — через флаги.

  • — запрет на отображение клавиатуры;
  • — текст, соответствующий языку пользователя;
  • — телефонный формат, содержащий цифры 0−9, знак решётки и астериска, — аналог ;
  • — формат URL, где присутствуют слеш, точка и элементы автозаполнения вроде «www.» или «.com», — аналог ;
  • — формат для электронной почты с наличием символа «собака» и точки — аналог ;
  • — только цифровая клавиатура — аналог ;
  • — цифровая клавиатура, адаптированная для ввода дробных значений с точкой или запятой;
  • — клавиатура, оптимизированная для поиска и, как правило, содержащая соответствующую иконку ввода.

Кроме вышеперечисленных значений браузеры так же принимают:

  • — дословный ввод букв и цифр, при котором, как правило, не применяется автокоррекция введённых данных, что полезно для имён пользователей или паролей;
  • — латинский алфавит, как правило, с предикативным вводом, служащий для взаимодействия между пользователем и компьютером (например, поиск данных);
  • — latin, но для ввода имён;
  • — latin, предназначенный для взаимодействия пользователя с другими пользователями и поэтому содержащий более широкий набор возможностей ввода (например, встроенные смайлы);
  • — latin-prose с добавлением дополнительных пользовательских языков;
  • и — служат для ввода текста на японском языке;

Для большей «пуленепробиваемости» атрибут рекомендуется применять вместе с соответствующим , который должен отражать семантически верный тип данных, и, если необходимо, , являющийся дополнительной подсказкой браузеру о том, какие данные следует считать верными:

<!-- цифровая клавиатура -->
<input type="number" inputmode="numeric" />

<!-- цифровая клавиатура (ввод десятичных дробей с разделителем-точкой и шагом в 0.1) -->
<input type="number" inputmode="decimal" min="0" value="0" step=".1" />

<!-- поиск по сайту -->
<input type="search" inputmode="search" />

<!-- имя пользователя -->
<input type="text" inputmode="latin-name" />

<!-- никнейм пользователя (латиница, цифры, до 15 символов) -->
<input type="text" inputmode="verbatim" pattern="^{1,15}$" />

<!-- чат между пользователями -->
<textarea inputmode="full-width-latin"></textarea>

<!-- пароль, содержащий разные регистры и цифру -->
<input type="password" inputmode="verbatim" pattern="^(?=.*d)(?=.*)(?=.*)(?!.*s).*$" />

Перевод вводимых данных в верхний регистр букв

Атрибут позволяет выполнять для виртуальной клавиатуры автоматический перевод данных поля в верхний регистр. Он применяется для , а также для полей с типами text или search и может иметь следующие значения:

  • off или none — перевод в верхний регистр не осуществляется (по умолчанию);
  • characters — для символов (артикулы, различные коды);
  • words — для слов (имена, адреса, названия организаций);
  • sentences — для предложений (полезно для , где контент должен представляться как абзац текста);

Например, подобным образом может выглядеть область ввода для контента, который разработчик хочет видеть оформленным как абзац:

<textarea autocapitalize="sentences" inputmode="full-width-latin"></textarea>

Стоит отметить, что как и , этот атрибут не будет оказывать на данные никакого эффекта в desktop-версиях. Информации о поддержке мобильными браузерами autocapitalize крайне мало, однако по публикациям на официальных сайтах следует, что атрибут работает как минимум в Safari и Google Chrome.

Стилизация «input type file» при помощи плагина

Теперь давайте рассмотрим вариант стилизация поля для отправки файла при помощи jQuery плагина. Называется он jQuery Fileinput. Как я уже говорил, делает он практически тоже самое, просто автоматически.

Для настройки сначала подключаем сам плагин и jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./js/fileinput.js"></script>

Затем создаем input:

<input name="upl" type="file" class="input-file" multiple>

И инициализируете плагин:

<script>
   $(function() {
     $(".input-file").fileinput();
   });
</script>

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

Чтобы задать ей свой класс и поместить в нее свой текст, нужно передать в fileinput html. Например так:

<script>
   $(function() {
     $(".input-file").fileinput('<button class="input-file__button">Выбрать файл</button>');
   });
</script>

Для наглядности, смотрите пример на jsfiddle, а на сегодня все. Надеюсь, что у вас больше не осталось вопросов по поводу того, как стилизовать input с type fifle.

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()


С этим читают