Input

Объект Input представляет собой HTML элемент <input>.

Свойства и Методы объекта Input

accept

Свойство accept устанавливает или возвращает значение одноименного атрибута accept кнопки загрузки файла.

Свойство используется для элемента Input с type = "file"

Синтаксис

inputObject.accept [ = strAccept ]

В качестве strAccept могут указываться следующие типы файлов, допускающиеся до загрузки на сервер:

audio/*

Указывает, что для загрузки на сервер принимаются все аудио файлы.
Например: <input type="file" accept="audio/*,text/html,text/css">

image/*

Указывает, что для загрузки на сервер принимаются все файлы изображений.
Например: <input type="file" accept="image/*,text/html,text/css">

video/*

Указывает, что для загрузки на сервер принимаются все видео файлы.
Например: <input type="file" accept="video/*,text/html,text/css">

MIME-типы

Указываются MIME-типы файлов, допускающиеся до загрузки на сервер. (например, «text/html», «image/png», «image/gif», «video/mpeg», «text/css», «audio/mpeg»)
Например: <input type="file" accept="text/html,text/css,text/javascript">

Расширения

Указываются расширения файлов, допускающиеся до загрузки на сервер (например, «.html», «.png», «.gif», «.mpeg», «.css», «.mp3»).
Например: <input type="file" accept=".html,.css,.js">

Возвращаемое значение

Строка, содержащая разделенные запятыми списка принятых типов файлов

Совместимость с браузерами

Да	10,0	Да	Да	Да

Пример

<h4>Пример с атрибутом "accept"</h4>

<input type="file" size="50" accept="image/*,text/html,text/css,text/javascript,.doc,.docx">

autocomplete

Свойство autocomplete устанавливает или возвращает значение одноименного атрибута autocomplete.

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

Свойство используется для элемента Input с type = "email", "password", "search", "tel", "text", "url"

Синтаксис

inputObject.autocomplete [ = "on|off" ]

on

Включает автозаполнение текста.

off

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

Возвращаемое значение

Строка, представляющая состояние автозаполнения

Совместимость с браузерами

Да	10,0	Да	Да	Да

Пример

<script>
var x = document.form[0].elements;
for (var i=0; i < x.length-2; i++) 
 { x[i].autocomplete = "on";}
</script>
<form action="handler.php" method="get">
<p><label for="login">Логин:</label> <input type="text" name="login" required></p>
<p><label for="password">Пароль:</label> <input type="password" name="password" required></p>
<p><label for="e-mail">E-mail:</label> <input type="email" name="e-mail" required></p>
<p><input type="reset"> <input type="submit"></p>
</form>

autofocus

Свойство autofocus устанавливает или возвращает значение атрибута autofocus.

Свойство используется для элемента Input с type = "button", "checkbox", "color", "date", "datetime", "datetime-local", "email", "file", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week"

Синтаксис

inputObject.autofocus [ = true|false ]

• true - элемент автоматически получает фокус при загрузке страницы;
• false - элемент НЕ получает фокус при загрузке страницы.

Возвращаемое значение

Логический, возвращает true, если элемент автоматически получает фокус при загрузке страницы, в противном случае - false.

checked

Свойство checked устанавливает или возвращает значение одноименного атрибута checked.

Свойство используется для элемента Input с type = "checkbox", "radio"

Синтаксис

inputObject.checked [ = true|false ]

• true- флажок (checkbox) или переключатель (radio) УСТАНОВЛЕН
• false - флажок (checkbox) или переключатель (radio) НЕ установлен

Возвращаемое значение

Логическое, возвращает true, если флажок/переключатель установлен, и false, если не установлен

defaultChecked

Свойство defaultChecked возвращает значение по умолчанию атрибута checked

Свойство используется для элемента Input с type = "checkbox", "radio"

Синтаксис

inputObject.defaultChecked

Возвращаемое значение

Логическое, возвращает true, если флажок/переключатель установлен по умолчанию, в противном случае - false.

defaultValue

Свойство defaultValue устанавливает или возвращает значение по умолчанию.

Свойство используется для элемента Input с type = "color", "date", "datetime", "datetime-local", "email", "image", "month", "number", "password", "range", "search", "tel", "text", "time", "url", "week"

Синтаксис

inputObject.defaultValue  [ = str_defaultValue ]

str_defaultValue - значение по умолчанию.

Возвращаемое значение

Строка, представляющая значение по умолчанию.

disabled

Свойство disabled устанавливает или возвращает значение одноименного атрибута disabled.

Свойство используется для элемента Input с type = "button", "checkbox", "color", "date", "datetime", "datetime-local", "email", "file", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week"

Синтаксис

inputObject.disabled [ = true|false ]

• true - Поле элемента заблокировано;
• false - По умолчанию. Поле элемента НЕ заблокировано.

Возвращаемое значение

Логическое, возвращает true, если поле элемента заблокировано, в противном случае - false.

files

Свойство files возвращает объект FileList, который представляет собой файл или файлы, выбранный с помощью кнопки загрузки файла.

Свойство используется для элемента Input с type = "file"

Синтаксис

inputObject.files

Возвращаемое значение

Объект FileList, который представляет выбранный файл или файлы

Совместимость с браузерами

Да	9,0	Да	Да	Да

Пример

<p>Для просмотра результата необходимо выбрать один или несколько файлов</p>
<form action="javascript: myFunction()">
<input type="file" id="myFile" size="50" multiple><br />
<input type="submit">
</form>
<p id="demo"></p>
<script>
function myFunction(){ var txt = '';
 var x = document.getElementById("myFile");
 if (x.files.length == 0) 
   { txt = "Выбери один или несколько файлов"; } 
 else 
   { for (var i = 0; i < x.files.length; i++) 
      { txt += "<br><b>" + (i+1) + ". file</b><br>";
        var file = x.files[i];
        txt += "name: " + file.name + "<br>";
        txt += "size: " + file.size + " bytes <br>";
      }
    }
 document.getElementById("demo").innerHTML = txt; }
</script>

form

Свойство form возвращает ссылку на форму, которая содержит элемент.

Синтаксис

inputObject.form

Возвращаемое значение

Ссылка на элемент form, содержащий элемент, или null.

formAction

Свойство formAction устанавливает или возвращает значение одноименного атрибута formaction.

Свойство используется для элемента Input с type = "image", "submit"

Синтаксис

inputObject.formAction  [ = str_action ]

str_action - определяет URL, который указывает, куда отправлять данные формы. Возможные значения:

• Абсолютный URL - указывает на другой веб - сайт (нпример: .formAction="http://www.example.com/example.htm")
• Относительный URL - указывает на файл в пределах веб - сайта (нпример: .formAction="example.htm");
• Код JavaScript ( например: .formAction="javascript: alert('Работает!');"

Возвращаемое значение

Строка, представляющая URL, куда отправить формы-данные

Совместимость с браузерами

Да	10,0	Да	Да	Да

Пример

<form method="post"  action="javascript: void(0)">
  Имя: <input type="text" name="name" value="Василий"><br>
 Отчество: <input type="text" name="pname" value="Петрович"><br>
 Фамилие:  <input type="text" name="fname" value="Иванов"><br>
<input type="hidden" name="Action" id='hi1' value=''>
<input type="hidden" name="Method" id='hi2' value=''>
<input type="hidden" name="Target" id='hi3' value=''>
<input type="hidden" name="Enctype" id='hi4' value=''>
<input type="hidden" name="NoValidate" id='hi5' value=''>
<input type=submit  id="sub">
</form>

<script>
var x = document.getElementById('sub');
x.formAction = "handler.php";
x.formMethod = "get";
x.formTarget = "_self";
x.formEnctype = "multipart/form-data";
document.getElementById('hi1').value = x.formAction;
document.getElementById('hi2').value = x.formMethod
document.getElementById('hi3').value = x.formTarget
document.getElementById('hi4').value = x.formEnctype
document.getElementById('hi5').value = x.formNoValidate
</script>

formEnctype

Свойство formEnctype устанавливает или возвращает значение одноименного атрибута formenctype.

Свойство используется для элемента Input с type = "image", "submit"

Синтаксис

inputObject.formEnctype [ = str_encoding ]

str_encoding - application/x-www-form-urlencoded | multipart/form-data | text/plain

application/x-www-form-urlencoded

Это значение по умолчанию. Означает, что в данных, передаваемых на сервер, пробелы заменяются на "+", а специальные символы заменяются на их 16-ричное ASCII значение.

multipart/form-data

Пробелы заменяются на "+", но специальные символы не кодируются (передаются как есть).

multipart/form-data

Никакие символы не кодируются (они передаются как есть). Данное значение необходимо указывать, если в форме имеются элементы отправки файлов: <INPUT TYPE=file>.

Возвращаемое значение

Строка, представление того, как форма-данных должна быть закодирована перед отправкой его на сервер

Совместимость с браузерами

Да	10,0	Да	Да	Да

Пример

formMethod

Свойство formMethod устанавливает или возвращает значение одноименного атрибута formmethod.

Свойство используется для элемента Input с type = "image", "submit"

Синтаксис

inputObject.formMethod [ = str_method ]

str_method - get | post

get

Это значение по умолчанию. Означает, что к URL добавляются данные: имя = значение & имя = значение & ...

post

Данные посылаются в виде HTTP POST операции.

Возвращаемое значение

Строка, представляющий метод HTTP , используемый для отправки формы (либо "get" или "post").

Пример

Совместимость с браузерами

Да	10,0	Да	Да	Да

formNoValidate

Свойство formNoValidate устанавливает или возвращает значение одноименного атрибута formnovalidate.

Свойство используется для элемента Input с type = "image", "submit"

Синтаксис

inputObject.formNoValidate [ = true|false ]

• true - ОТМЕНЯЕТ встроенную проверку данных введенных пользователем в форме на корректность перед отправкой формы.
• false - По умолчанию. НЕ отменяет встроенную проверку данных введенных пользователем в форме на корректность перед отправкой формы.

Возвращаемое значение

Логическое, возвращает true, если проверка отменена, в противном случае - false.

Совместимость с браузерами

Да	10,0	Да	Да	Да

Пример

formTarget

Свойство formTarget устанавливает или возвращает значение одноименного атрибута formtarget.

Свойство используется для элемента Input с type = "image", "submit"

Синтаксис

inputObject.formTarget [ = str_target ]

str_name - _blank | _self | _parent | _top | framename

_blank

Загружает страницу в новое окно браузера.

_self

Загружает страницу в текущее окно.

_parent

Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.

_top

Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

framename

Загружает страницу в указанный фрейм.

Возвращаемое значение

Строка, представляющая значение атрибута target.

Совместимость с браузерами

Да	10,0	Да	Да	Да

Пример

max

Свойство max устанавливает или возвращает значение одноименного атрибута max.

Свойство используется для элемента Input с type = "date", "datetime", "datetime-local", "month", "number", "range", "time", "week"

Синтаксис

inputObject.max [ = strValue ]

strValue - максимальное значение для ввода числа или даты в поле элемента.

Возвращаемое значение

Строка, представляющая максимальное значение для числа или даты.

Совместимость с браузерами

Да	10,0	Да	Да	Да

Примеры

<form>
number: <input type="number" name="numbre" min ="-20" max="40" value='50'><br>
<input type='submit'></form>
<p id="demo"></p>
<script>
x = document.forms[0].elements[0]; 
var t = x.type + ':  min='+x.min + ', max=' + x.max +' , value=' +x.value;
document.getElementById('demo').innerHTML = t;
</script>

maxLength

Свойство maxLength устанавливает или возвращает значение одноименного атрибута maxlength.

Свойство используется для элемента Input с type = "email", "password", "search", "tel", "text", "url"

Синтаксис

inputObject.maxLength [ = numbre ]

numbre - максимальное число символов, которое может быть введено пользователем в поле элемента.

Возвращаемое значение

Число, представляющее максимальное допустимое количество символов в поле элемента.

min

Свойство min устанавливает или возвращает значение одноименного атрибута min.

Свойство используется для элемента Input с type = "date", "datetime", "datetime-local", "month", "number", "range", "time", "week"

Синтаксис

inputObject.min [ = strValue ]

strValue - минимвльное значение для ввода числа или даты в поле элемента.

Возвращаемое значение

Строка, представляющая минимвльное значение для числа или даты.

Совместимость с браузерами

Да	10,0	Да	Да	Да

Пример

multiple

Свойство multiple устанавливает или возвращает значение одноименного атрибута multiple.

Свойство используется для элемента Input с type = "email", "file"

Синтаксис

inputObject.multiple [ = true|false ]

По умолчанию - false

Возвращаемое значение

Совместимость с браузерами

Да	10,0	Да	Да	Да

Пример

<form action="javascript: f()">
  Выбрать файлы: <input type="file" id="myFile" name="files" multiple>
  <input type="submit">
</form>

<p id="demo"></p>
<script>
function f() 
{  var x = document.getElementById("myFile");
   document.getElementById("demo").innerHTML = 
      x.value.replace(/,\s*/g,'<br>');  }
</script>

name

Свойство name устанавливает или возвращает значение одноименного атрибута name.

Синтаксис

inputObject.name [ = str_name ]

str_name задает имя элемента.

Возвращаемое значение

Строка, представляющая имя элемента.

Пример

<input type="button" id="nm" name="myName" onclick="f()" value=" Попробуй " /><br>
<p id="demo"></p>
<script>
function f() {
  var x=document.getElementById('nm');
  x.name = 'myNewName';
  x.disabled = true;
  x.value = "Кнопка заблокирована";
  document.getElementById('demo').innerHTML =
   "type = '" + x.type + "'<br>name = '" + x.name + 
   "'<br>value = '" + x.value + 
   "'<br>disabled = " + x.disabled; }
</script>

pattern

Свойство pattern устанавливает или возвращает значение одноименного атрибута pattern.

Свойство используется для элемента Input с type = "email", "password", "search", "tel", "text", "url"

Синтаксис

inputObject.pattern [ = regexp ]

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

Возвращаемое значение

Строка, представляющая регулярное выражение.

Совместимость с браузерами

Да	10,0	Да	Нет	Да

Пример

<form action="javascript: f()">
<input id="x" type="tel" name="tel" pattern="\d-[0-9]{3}-[0-9]{3}" size=40;
     placeholder="Введите телефон в формате x-xxx-xxx" required><br>
<input type="submit"><br>
</form>
<p id="demo"></p>
<script>
function f() 
 { var x =  document.getElementById('x');
   document.getElementById('demo').innerHTML = 
   x.pattern + '<br>' + x.value; }
</script>

placeholder

Свойство placeholder устанавливает или возвращает значение одноименного атрибута placeholder.

Свойство используется для элемента Input с type = "email", "number", "password", "search", "tel", "text", "url"

Синтаксис

inputObject.placeholder [ = text ]

text задает краткую подсказку, которая описывает ожидаемое значение поля формы.

Возвращаемое значение

Строка, представляющая краткую подсказку, которая описывает ожидаемое значение поля формы.

Совместимость с браузерами

Да	10,0	Да	Да	Да

Пример

readOnly

Свойство readOnly устанавливает или возвращает значение одноименного атрибута readonly.

Свойство используется для элемента Input с type = "date", "datetime", "datetime-local", "email", "month", "number", "password", "radio", "search", "tel", "text", "time", "url"

Синтаксис

inputObject.readOnly [ = true|false ]

• true - Поле формы только для чтения;
• false - По умолчанию. Поле формы можно изменять.

Возвращаемое значение

Логическое, возвращает true, если поле формы только для чтения, в противном случае - false.

required

Свойство required устанавливает или возвращает значение одноименного атрибута required.

Свойство используется для элемента Input с type = "checkbox", "date", "datetime", "datetime-local", "email", "file", "month", "number", "password", "radio", "search", "tel", "text", "time", "url"

Синтаксис

inputObject.required [ = true|false ]

• true - устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер.
• false - По умолчанию. Поле формы может быть пустым.

Возвращаемое значение

Логический, возвращает true, если поле формы должно быть обязательно для заполнено перед отправкой формы на сервер, в противном случае - false.

Совместимость с браузерами

Да	10,0	Да	Нет	Да

Пример

<form>
user: <input type="text" name="user" id="user" value="" placeholder="Укажите свой логин">
<input type="submit"><br />
<button onclick="f()"> Попробуй </button> <br /><br />
</form>

<script>
function f(t) { document.getElementById('user').required = true; }
</script>

select()

Метод select используется для выбора содержимого поля.

Метод используется для элемента Input с type = "password", "text"

Синтаксис

inputObject.select()

Пример

<p>Логин: <input type="text" id="login" value="Pensioner">     
 
<button type="button" onclick="myFunction('login')">Попробуй</button></p>

<p>Пароль: <input type="password" id="passw" value="Wf345ygd">    
<button  onclick="myFunction('passw')"> Попробуй </button></p>

<script>
function myFunction(t) { document.getElementById(t).select(); }
</script>

size

Свойство size устанавливает или возвращает значение одноименного атрибута size.

Свойство используется для элемента Input с type = "email", "password", "search", "tel", "text", "url"

Синтаксис

inputObject.size [ = strSize ]

strSize - ширина поля элемента (в символах). По умолчанию - 20;

Возвращаемое значение

Количество (в символах), представляющее ширину поля элемента.

Пример

<style> input {background: #ddddee}</style>
<input value='' id='x' placeholder="Поле для ввода" size=25/><br>
<button onclick="f()"> Попробуй </button>
<p id="demo"></p>
<script>
var x = document.getElementById('x');
var y = document.getElementById('demo');
y.innerHTML = 'size=' + x.size; var h=15;
function f() 
 { if (x.size-0 >= 100) h=-15; else if (x.size-0 < 25) h=15;
   x.size += h; y.innerHTML = 'size=' + x.size; }
</script>

step

Свойство step задает или возвращает значение одноименного атрибута step.

Свойство используется для элемента Input с type = "date", "datetime", "datetime-local", "month", "number", "range", "time", "week"

Синтаксис

inputObject.step  [ = number ]

Возвращаемое значение

Число, шаг изменения.

Совместимость с браузерами

Да	10,0	Да	Да	Да

Пример

<style>
#z {width:20px; height: 20px; background: green; }
#y {width: 40px; margin-left: 50px; }
</style>
<input type="range" id="x" onchange="f()" min='50' max='350' step=5>
<input type="text" id="y">
<div id="z"></div>
<p id="demo"></p>
<script>
var x = document.getElementById('x');
var y = document.getElementById('y');
var z = document.getElementById('z');
x.value = 200;
document.getElementById('demo').innerHTML =
 'min=' + x.min + ', max=' + x.max + ', step=' + x.step;
f();
function f()
 { z.style.width=(x.value/2-24)+'px';
   y.value = x.value; }
</script>

stepDown()

Метод stepDown уменьшает значение элемента на заданное число.

Метод используется для элемента Input с type = "date", "datetime", "datetime-local", "month", "number", "range", "time", "week"

Синтаксис

inputObject.stepDown  (number)

Совместимость с браузерами

type
date	Да	12,0	Нет	Да	Ла
datetime	Ла	12,0	Нет	Да	Да
datetime-local	Да	12,0	Нет	Да	Да
month	Да	12,0	Нет	Да	Да
number	Да	Нет	Да	Да	Да
range	Да	12,0	Да	Да	Да
time	Да	12,0	Нет	Да	Да
week	Да	12,0	Нет	Да	Да

Пример

<form>
<p><label for="range">Ползунок:</label> <input type="range" name="range" value='300'></p>
<p><label for="number">Число:</label> <input type="number" name="number" value='1024'></p>
<p><label for="date">Дата:</label> <input type="date" name="date" value='2017-09-10'></p>
</form>
<button onclick="f()">  Попробуй  </button>
<script>

function f() 
  { var x = document.forms[0].elements;
    x[0].stepDown(5);
    try { x[1].stepUp(512)} catch(e) {x[1].style.backgroundColor="red"};
    try {x[2].stepDown(10)} catch(e) {x[2].style.backgroundColor="red"};
  }
</script>

stepUp()

Метод stepUp увеличивает значение элемента на заданное число.

Метод используется для элемента Input с type = "date", "datetime", "datetime-local", "month", "number", "range", "time", "week"

Синтаксис

inputObject.stepUp (number)

Совместимость с браузерами

Пример

type

Свойство type возвращает тип элемента.

Синтаксис

inputObject.type

Возвращаемое значение

Строка, определящая тип элемента Input

Совместимость с браузерами

type
button, checkbox, file, hidden, image, password, radio, reset, submit, text	Да	Да	Да	Да	Да
color	20	14	29	Нет	11.5
date	20	13	Нет	Нет	10.1
datetime	20	11	Нет	Нет	10.1
datetime-local	20	11	Нет	Нет	10.1
email	5	10	4	5	10.1
month	20	13	Нет	Нет	10.1
number	6	10	29	5	10.1
range	4	10	23	3.1	10.1
search	5	10	4	5	10.1
tel	5	10	4	5	10.1
time	20	13	Нет	Нет	10.1
url	8	10	4	6	15
week	20	13	Нет	Нет	10.1

value

Свойство value задает или возвращает значение одноименного атрибута value.

Синтаксис

inputObject.value [ = strValue ]

В зависимости от типа элемента strValue выступает в следующей роли:

Возвращаемое значение

Возращаемое значение зависит от типа элемента. Например, для типа file - Строка, представляющая путь или имя выбранного файла