Изучаем тег input в html
Содержание:
- Введение
- Input Type Submit — Тип ввода Отправить
- Значение атрибута
- IE10-, событие propertychange
- Входные ограничения
- HTML Tutorial
- Событие change
- Пример: поле с контролем СМС
- Ограничения на ввод
- Input
- Textarea
- HTML Теги
- HTML Теги
- HTML Справочник
- HTML Теги
- Тип ввода «checkbox»
- Тип ввода «reset»
- Input type=submit
- HTML тег
- HTML Reference
- HTML Tags
- Input Restrictions
- Numeric
- Атрибуты
- HTML Tags
- Input type=file
- Input type=reset
- HTML Reference
- HTML Tags
Введение
- Тег input предназначен для создания текстовых полей, кнопок (submit, button, file, text), переключателей (radio) и флажков (checkbox).
- Тег texarea — используется для создания текстового поля для ввода нескольких строк текста.
- Тег select применяется для создания выпадающего списка в котором можно сделать один или множественный выбор.
- Тег label — для подписи к элементам форм.
Примечание*: каждый тег формы имеет атрибут value — в него вносится значение, которое пользователь ввел или выбрал, и именно это значение передается на сервер.
В этом практикуме я продемонстрирую как с помощью CSS и jQuery стилизовать эти элементы. Начнем с самых простых, а как окажется позже вся стилизация очень простая. Приступим.
Для начала создадим обычную форму, самую простую:
<form action="#" method="post"> ... Сюда вводятся теги формы </form>
Первым рассмотри тег Input.
Input Type Submit — Тип ввода Отправить
определяет кнопку для отправки данных формы в обработчик форм.
Обработчик форм обычно представляет собой серверную страницу со скриптом для обработки входных данных.
Обработчик формы указывается в атрибуте :
Пример
<form action=»/action_page.html»> First name:<br> <input type=»text»
name=»firstname» value=»Mickey»><br> Last name:<br> <input
type=»text» name=»lastname» value=»Mouse»><br><br> <input type=»submit»
value=»Submit»></form>
Вот как HTML-код выше будет отображаться в браузере:
Если вы опустите атрибут значения кнопки отправки, кнопка получит текст по умолчанию:
Пример
<form action=»/action_page.html»> First name:<br> <input type=»text»
name=»firstname» value=»Mickey»><br> Last name:<br> <input
type=»text» name=»lastname»
value=»Mouse»><br><br> <input type=»submit»></form>
Значение атрибута
| Значение | Описание |
|---|---|
| button | Определяет кликабельную кнопку (в основном используется с JavaScript для активации скрипта) |
| checkbox | Определяет флажок |
| color | Определяет выбор цвета |
| date | Определяет элемент управления датой (год, месяц, день (без времени)) |
| datetime-local | Определяет контроль даты и времени (год, месяц, день, время (без часового пояса) |
| Определяет поле для адреса электронной почты | |
| file | Определяет поле выбора файла и кнопку «Обзора» (для загрузки файлов) |
| hidden | Определяет скрытое поле ввода |
| image | Определяет изображение как кнопку отправки |
| month | Определяет контроль месяца и года (без часового пояса) |
| number | Определяет поле для ввода номера |
| password | Определяет поле пароля |
| radio | Определяет переключатель |
| range | Определяет элемент управления диапазоном (например, ползунок) |
| reset | Определяет кнопку сброса |
| search | Определяет текстовое поле для ввода строки поиска |
| submit | Определяет кнопку отправки |
| tel | Определяет поле для ввода телефонного номера |
| text | По умолчанию. Определяет однострочное текстовое поле |
| time | Определяет элемент управления для ввода времени (без часового пояса) |
| url | Определяет поле для ввода URL |
| week | Определяет контроль недели и года (без часового пояса) |
IE10-, событие propertychange
Это событие происходит только в IE10-, при любом изменении свойства. Оно позволяет отлавливать изменение тут же. Оно нестандартное, и его основная область использования – исправление недочётов обработки событий в старых IE.
Если поставить его на в IE8-, то получится «правильное» событие :
Это событие также срабатывает при изменении значения текстового элемента. Поэтому его можно использовать в старых IE вместо .
К сожалению, в IE9 у него недочёт: оно не срабатывает при удалении символов. Поэтому сочетания + недостаточно, чтобы поймать любое изменение поля в старых IE. Далее мы рассмотрим пример, как это можно сделать иначе.
Входные ограничения
Вот список некоторых распространенных ограничений ввода:
| Атрибут | Описание |
|---|---|
| checked | Указывает, что поле ввода должно быть предварительно выбрано при загрузке страницы (для type=»checkbox» или type=»radio») |
| disabled | Указывает, что поле ввода должно быть отключено |
| max | Задает максимальное значение для поля ввода |
| maxlength | Задает максимальное количество символов для поля ввода |
| min | Задает минимальное значение для поля ввода |
| pattern | Задает регулярное выражение для проверки входного значения |
| readonly | Указывает, что поле ввода доступно только для чтения (не может быть изменено) |
| required | Указывает, что поле ввода является обязательным (должно быть заполнено) |
| size | Задает ширину (в символах) поля ввода |
| step | Задает допустимые интервалы чисел для поля ввода |
| value | Задает значение по умолчанию для поля ввода |
Подробнее об ограничениях на ввод данных вы узнаете в следующей главе.
В следующем примере показано числовое поле ввода, в которое можно ввести значение от 0 до 100 с шагом 10. Значение по умолчанию равно 30:
Пример
<form> <label for=»quantity»>Количество:</label> <input
type=»number» id=»quantity» name=»quantity» min=»0″ max=»100″ step=»10″
value=»30″></form>
HTML Tutorial
HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors
Colors
RGB
HEX
HSL
HTML CSSHTML Links
Links
Link Colors
Link Bookmarks
HTML Images
Images
Image Map
Background Images
The Picture Element
HTML TablesHTML Lists
Lists
Unordered Lists
Ordered Lists
Other Lists
HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML
Событие change
Событие происходит по окончании изменения значения элемента формы, когда это изменение зафиксировано.
Для текстовых элементов это означает, что событие произойдёт не при каждом вводе, а при потере фокуса.
Например, пока вы набираете что-то в текстовом поле ниже – события нет. Но как только вы уведёте фокус на другой элемент, например, нажмёте кнопку – произойдёт событие .
Для остальных же элементов: , оно срабатывает сразу при выборе значения.
Поздний в IE8-
В IE8- при изменении мышью не инициируют событие сразу, а ждут потери фокуса.
Для того, чтобы видеть изменения тут же – в IE8- нужно повесить обработчик на событие (оно произойдёт и при изменении значения с клавиатуры) или воспользоваться событием , описанным далее.
Пример: поле с контролем СМС
Как видим, событий несколько и они взаимно дополняют друг друга.
Посмотрим, как их использовать, на примере.
Сделаем поле для СМС, рядом с которым должно показываться число символов, обновляющееся при каждом изменении поля.
Как такое реализовать?
Событие идеально решит задачу во всех браузерах, кроме IE9-. Собственно, если IE9- нам не нужен, то на этом можно и остановиться.
В IE8- событие не поддерживается, но, как мы видели ранее, есть , которое может заменить его.
Что же касается IE9 – там поддерживаются и и , но они оба не работают при удалении символов. Поэтому мы будем отслеживать удаление при помощи на Delete и BackSpace . А вот удаление командой «вырезать» из меню – сможет отловить лишь .
Получается вот такая комбинация:
Здесь мы добавили вызов на все события, которые могут приводить к изменению значения. Да, иногда изменение будет обрабатываться несколько раз, но зато с гарантией. А лишние вызовы легко убрать, например, при помощи -декоратора, описанного в задаче Тормозящий (throttling) декоратор.
Есть и совсем другой простой, но действенный вариант: через регулярно проверять значение и, если оно слишком длинное, обрезать его.
Чтобы сэкономить ресурсы браузера, мы можем начинать отслеживание по , а прекращать – по , вот так:
Обратим внимание – весь этот «танец с бубном» нужен только для поддержки IE8-, в которых не поддерживается и IE9, где не работает при удалении
Ограничения на ввод
Список некоторых общих ограничений ввода:
| Атрибут | Описание |
|---|---|
| checked | Указывает, что поле ввода должно быть предварительно выбрано при загрузке страницы (для type=»checkbox» или type=»radio») |
| disabled | Указывает, что поле ввода должно быть отключено |
| max | Определяет максимальное значение для поля ввода |
| maxlength | Определяет максимальное количество символов для поля ввода |
| min | Определяет минимальное значение для поля ввода |
| pattern | Определяет регулярное выражение для проверки входного значения |
| readonly | Указывает, что поле ввода доступно только для чтения (не может быть изменено) |
| required | Указывает, что поле ввода является обязательным (должно быть заполнено) |
| size | Определяет ширину (в символах) поля ввода |
| step | Определяет допустимые интервалы номеров для поля ввода |
| value | Определяет значение по умолчанию для поля ввода |
Вы узнаете больше об ограничениях ввода в следующей главе.
В следующем примере показано числовое поле ввода, в котором вы можете ввести значение от 0 до 100 с шагом 10. Значение по умолчанию — 30:
Input
В HTML его выводят вот таким способом:
<input type="text" id="text" name="text" value="some text" />
Обязательным параметром тега input является атрибут type (тип, это может быть текст , кнопка отправки , скрытое поле , переключатель , чекбокс , загрузка файла).
Для стилизации этого тега jQuery не требуется, главное помнить, что браузеры неоднозначно работают с его высотой, поэтому высоту этого элемента стоит подбирать исходя из размера шрифта, который Вы будете использовать и чтобы слова не чёркали по рамке нужно добавлять отступ (padding)
input {
width: 300px;
font-size: 13px;
padding: 6px 0 4px 10px;
border: 1px solid #cecece;
background: #F6F6f6;
border-radius: 8px;
}
Иногда для Internet Explorer 8 нужно увеличить высоту на 1px, чтобы тег соответствовал дизайну, тогда в стилях нужно добавить хак для IE:
input {
padding-bottom: 5px\0;
}
Вот и все тайны связанные с этим тегом. Дальше рассмотри тег для ввода нескольких строк текста textarea.
Textarea
Данный тег на HTML страницу выводится так:
<textarea></textarea>
по умолчанию у этого тега присутствуют некоторые параметры:
- за правый нижний угол текстовой области можно потянуть мышкой и текстовая область будет увеличиваться
- справа присутствует постоянная прокрутка в браузерах IE
уберем эти мелочи, открываем наш файл стилей и пишем следующие свойства:
textarea {
/* = Убираем скролл */
overflow: auto;
/* = Убираем увеличение */
resize: none;
width: 300px;
height: 50px;
/* = Добавим фон, рамку, отступ*/
background: #f6f6f6;
border: 1px solid #cecece;
border-radius: 8px 0 0 0;
padding: 8px 0 8px 10px;
}
Теперь наше поле для ввода текста имеет привлекательный вид. Следующим этапом стилизируем переключатели radio.
HTML Теги
<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>
HTML Теги
<!—…—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>
HTML Справочник
HTML Теги по алфавитуHTML Теги по категорииHTML ПоддержкаHTML АтрибутыHTML ГлобальныеHTML СобытияHTML Названия цветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор кодировокHTML URL кодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP методыКовертер PX в EMКлавишные комбинации
HTML Теги
<!—…—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>
Тип ввода «checkbox»
определяет флажок.
Флажки позволяют пользователю выбрать ноль или более вариантов из ограниченного числа вариантов.
Пример
<form> <input type=»checkbox» id=»vehicle1″ name=»vehicle1″ value=»Bike»>
<label for=»vehicle1″> У меня есть велосипед</label><br> <input
type=»checkbox» id=»vehicle2″ name=»vehicle2″ value=»Car»> <label for=»vehicle2″>
У меня есть машина</label><br> <input type=»checkbox»
id=»vehicle3″ name=»vehicle3″
value=»Boat»> <label for=»vehicle3″> У меня есть лодка</label>
</form>
Именно так приведенный выше HTML код будет отображаться в браузере:
У меня есть велосипед У меня есть машина У меня есть лодка
Тип ввода «reset»
определяет кнопку сброса это приведет к сбросу всех значений формы к их значениям по умолчанию:
Пример
<form action=»/action_page.php»> <label for=»fname»>Имя:</label><br>
<input type=»text» id=»fname» name=»fname»
value=»Андрей»><br> <label for=»lname»>Фамилия:</label><br>
<input type=»text» id=»lname» name=»lname» value=»Щипунов»><br><br>
<input type=»submit» value=»Отправить»> <input type=»reset»></form>
Именно так приведенный выше HTML код будет отображаться в браузере:
Если вы измените входные значения и затем нажмете кнопку «Сброс», то данные формы будут сброшены до значений по умолчанию.
Input type=submit
Как я уже писал выше, тег инпут предназначен не только для полей ввода, переключателей и чекбоксов, с его помощью так же делаются кнопки. Делают их корректным объявлением атрибута type: button или submit, атрибут submit говорит о том что при клике на этот инпут данные из формы будут переданы на сервер. На страничку его добавляют так:
<input type="submit" class="submit" value="Отправить" />
а теперь немножко стилей:
.submit {
cursor: pointer;
border: 1px solid #cecece;
background: #f6f6f6;
box-shadow: inset 0px 20px 20px #ffffff;
border-radius: 8px;
padding: 8px 14px;
width: 120px;
}
.submit:hover {
box-shadow: inset 0px -20px 20px #ffffff;
}
.submit:active {
margin-top: 1px;
margin-bottom: -1px;
zoom: 1;
}
HTML тег
Все элементы тега форм создаются с помощью тега <input>.
Синтаксис <input>
Первое на что стоит обратить внимание, что тег не нужен закрывающий тег. У поля есть два самых важных параметра, которые я вынес в обязательные, это name и type
- name=»name_field» — параметр для задания имени конкретному input. Это нужно, чтобы при дальнейшей обработке данных формы можно было получить значение этого поля.
-
type=»значение» — отвечает за тип элемента, т.е. что именно будет представлять из себя поле. И здесь есть множество возможных значений:
- text — текстовое поле. Одно из самых часто используемых значений
- password — текстовое поле, но с той особенностью, что при вводе символы скрыты
- radio — радиокнопки
- checkbox — переключатели
- submit — кнопка для отправки значений формы (управление передается на адрес указанный в адрес, указанный в action атрибута формы)
- reset — кнопка для очистки всей формы
- hidden — скрытое поле
- button — кнопки для обработки каких-то действий (не путать с submit!)
- file — для загрузки файлов на сервер
- image — поле с изображением (используется крайне редко)
- value=»значение» — указывается значение по умолчанию
Теперь разберем более подробно каждый элемент
HTML Reference
HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts
HTML Tags
<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>
Input Restrictions
Here is a list of some common input restrictions:
| Attribute | Description |
|---|---|
| checked | Specifies that an input field should be pre-selected when the page loads (for type=»checkbox» or type=»radio») |
| disabled | Specifies that an input field should be disabled |
| max | Specifies the maximum value for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| min | Specifies the minimum value for an input field |
| pattern | Specifies a regular expression to check the input value against |
| readonly | Specifies that an input field is read only (cannot be changed) |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| step | Specifies the legal number intervals for an input field |
| value | Specifies the default value for an input field |
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a
value from 0 to 100, in steps of 10. The default value is 30:
Example
<form> <label for=»quantity»>Quantity:</label> <input
type=»number» id=»quantity» name=»quantity» min=»0″ max=»100″ step=»10″
value=»30″></form>
Numeric
Вероятно, это одно из наиболее распространенных значений режима ввода, поскольку оно идеально подходит для , которые ожидают цифры, а не буквы — ввод PIN-кода, почтовые индексы, номера кредитных карт и т. д. Использование для на самом деле может иметь больше смысла, чем установка только , потому что в этом случае он может использоваться с атрибутами , и , а это делает его более универсальным для различных вариантов использования.
Значение numeric в Chrome Android (слева) и iOS 12.2 (справа)
Часто можно увидеть сайты, использующие для отображения цифровой клавиатуры. Это выглядит как обходной путь, но не будет семантически правильным. Если это вас раздражает, помните, что вместе с можно использовать шаблоны, т.о. для того же эффекта можно добавить . Тем не менее, использовать это следует только в том случае, если вы уверены, что должен разрешать только ввод чисел, поскольку Android (в отличие от iOS) не позволяет пользователю переключаться на клавиатуру для использования букв и это может непреднамеренно помешать пользователям отправлять действительные данные.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| accept |
file_extension audio/* video/* image/*media_type |
Задает фильтр для типов файлов, которые пользователь может выбрать в диалоговом окне ввода файла (только для type=»file») |
| alt | text | Задает альтернативный текст для изображений (только для type=»image») |
| autocomplete | on off |
Указывает, должен ли элемент <input> иметь функцию автозаполнения |
| autofocus | autofocus | Указывает, что элемент <input> должен автоматически получать Фокус при загрузке страницы |
| checked | checked | Указывает, что элемент <input> должен быть предварительно выбран при загрузке страницы (для type=»checkbox» или type=»radio») |
| dirname | inputname.dir | Указывает, что текстовое направление будет отправлено |
| disabled | disabled | Указывает, что элемент <input> должен быть отключен |
| form | form_id | Указывает форму, к которой принадлежит элемент <input> |
| formaction | URL | Указывает URL файла, который будет обрабатывать входной элемент управления при отправке формы (для type=»submit» и type=»image») |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Указывает, как данные формы должны быть закодированы при отправке их на сервер (для type=»submit» и type=»image») |
| formmethod | getpost | Определяет метод HTTP для отправки данных на URL действия (для type=»submit» и type=»image») |
| formnovalidate | formnovalidate | Определяет, что элементы формы не должны проверяться при отправке |
| formtarget | _blank _self _parent _topframename |
Указывает, где будет отображаться ответ, полученный после отправки формы (для type=»submit» и type=»image») |
| height | pixels | Задает высоту элемента <input> (только для type=»image») |
| list | datalist_id | Относится к элементу <datalist>, содержащий предварительно определенные параметры для элемента <input> |
| max | number date |
Задает максимальное значение для элемента <input> |
| maxlength | number | Задает максимальное количество символов, разрешенных в элементе <input> |
| min | number date |
Задает минимальное значение для элемента <input> |
| minlength | number | Задает минимальное количество символов, требуемых в элементе <input> |
| multiple | multiple | Указывает, что пользователь может ввести более одного значения в элемент <input> |
| name | text | Задает имя элемента <input> |
| pattern | regexp | Указывает регулярное выражение, по которому проверяется значение элемента <input> |
| placeholder | text | Задает короткую подсказку, описывающую ожидаемое значение элемента <input> |
| readonly | readonly | Указывает, что поле ввода доступно только для чтения |
| required | required | Указывает, что перед отправкой формы необходимо заполнить поле ввода |
| size | number | Задает ширину элемента <input> в символах |
| src | URL | Указывает URL изображения, которое будет использоваться в качестве кнопки отправки (только для type=»image») |
| step | numberany | Задает интервал между юридическими числами в поле ввода |
| type | button checkbox color date datetime-local file hidden image month number password radio range reset search submit tel text time url week |
Указывает тип элемента <input> для отображения |
| value | text | Задает значение элемента <input> |
| width | pixels | Задает ширину элемента <input> (только для type=»image») |
HTML Tags
<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>
Input type=file
По умолчанию инпут с таким атрибутом добавляет на страницу кнопку обзора для выбора файла и текстовое поле в котором отображается имя загруженного файла. Моя задача сейчас показать Вам как можно стилизовать эту конструкцию.
Итак для стилизации кнопки нужно создать следующую разметку:
<div class="fileload"> <h2>Загрузка файла:</h2> <div class="file-load-block"> <input type="file" value="" id="file" /> <div class="fileLoad"> <input type="text" value="Select file" /> <button>Select file</button> </div> </div> </div>
Которой добавим таких стилей:
/* = File Load */
/* Стили для контейнера */
.file-load-block {
width: 310px;
height: 35px;
overflow: hidden;
position: relative;
}
/* работаем с инпутом который конкретно file */
.file-load-block input {
/* делаем кроссбраузерную прозрачность */
opacity: 0;
filter: alpha(opacity=0);
/* Позиционируем абсолютно отсносительно контейнера по правому краю */
position: absolute;
top: 0;
right: 0;
/*
Задаем высоту и делаем шрифт огромным
для того чтобы кнопка "обзор" занимала все пространство контейнера
*/
height: 35px;
font-size: 600px;
/* Ставим наш инпут поверх всего содержимого */
z-index: 2;
cursor: pointer;
width: auto;
}
/* Стилизируем инпут и кнопку которые под загрузчиком */
.file-load-block input {
z-index: 1;
width: 190px;
padding-right: 10px;
white-space:nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.file-load-block button {
position: absolute;
right: 0;
top: 2px;
width: 90px;
height: 28px;
border: 1px solid #ccc;
background: #fff;
color: #666;
border-radius: 5px;
box-shadow: inset 0 2px 2px #ccc;
}
.file-load-block .button-hover {
box-shadow: 0 0 2px #ccc;
}
Тут я сделал такой финт: стандартный инпут делаем прозрачным и задаем огромный шрифт, чтобы кнопка обзора была достаточно большой и закрывала весь контейнер, позиционируем его абсолютно по правому краю контейнера (потому что курсор-рука появялется тока на кнопке «обзор»).
Под инпутом который вызывает окно загрузки располагаем еще один инпут, который будет отображать имя файла который мы загрузили и кнопку обзор все стили я написал)
Теперь добавим script который будет показывать имя прикрепленного файла и еще напишем хувер для кнопки если загрузчик получил фокус:
// = Load
// отслеживаем изменение инпута file
$('#file').change(function(){
// Если файл прикрепили то заносим значение value в переменную
var fileResult = $(this).val();
// И дальше передаем значение в инпут который под загрузчиком
$(this).parent().find('.fileLoad').find('input').val(fileResult);
});
/* Добавляем новый класс кнопке если инпут файл получил фокус */
$('#file').hover(function(){
$(this).parent().find('button').addClass('button-hover');
}, function(){
$(this).parent().find('button').removeClass('button-hover');
});
Как оказалось ничего сложного.
Дальше займемся кнопкой сброса формы (reset form).
Input type=reset
Сброс формы иногда очень-очень нужен, а там как мы добавили стилизацию почти всех элементов форм то двайте разберемся как их сбросить, потому что стандартный reset не сработает (верней сработает но не на всех элементах)
Делаем разметку:
<div class="reset-form"> <h2>Сбрасываем поля формы</h2> <button>Сброс</button> </div>
Пишем скрипт:
//Reset form
// Вешаем событие клика по кнопке сброса
$('.reset-form').click(function() {
// Устанавливаем пустое значение в атрибут value для всех инпутов
$('.customForm').find('input').val('');
// Убираем атрибут checked и класс активности у чекбоксов
$('.customForm').find('input:checked').removeAttr('checked');
$('.customForm').find('.check').removeClass('active');
// Убираем класс активности у радио переключателей
$('.customForm').find('.radio').removeClass('active');
// Устанавливаем пустое значение в атрибут value для всех textarea
$('.customForm').find('textarea').val('');
// И для открывалки селекта возвращаем начальное значение
$('.customForm').find('.slct').html('Выберите Ваше лучшее качество:');
return false
});
И добавим стилей кнопочке сброса:
/* = Reset Form */
.reset-form button {
width: 90px;
height: 28px;
border: 1px solid #ccc;
background: #fff;
color: #666;
border-radius: 5px;
box-shadow: inset 0 2px 2px #ccc;
cursor: pointer;
}
.reset-form button:hover {
box-shadow: 0 0 2px #ccc;
}
.reset-form button:active {
margin-top: 1px;
margin-bottom: -1px;
zoom: 1;
}
Вот опять все просто)
И заключительным этапом будет кнопка отправки формы.
HTML Reference
HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts
HTML Tags
<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>
