HTMLInputElement : HTMLElement

HTMLInputElement allows the web page to recieve many types of input from the user. Use the type property to configure what type of input you want to get.

Spec

Instance Properties

accept : String

A comma separated string containing the types of files to accept. Applies when type = 'file'. Each item in the list must be one of 'audio/*', 'image/*', 'video/*', a MIME-type, or a file extension like '.png' or '.txt'.

Example:

Run

Results:

Spec

alt : String

Spec

autocomplete : String

Spec

autofocus : Boolean

Spec

checked : Boolean

Applies when type = 'checkbox'.

defaultChecked : Boolean

Applies when type = 'checkbox'.

Spec

defaultValue : String

dirName : String

disabled : Boolean

files : FileList readonly

The Files the user selected. Applies when type = 'file'. If multiple is set to true, files may contain more than one item.

Example:

<input type='file' onchange='onFilesSelected(event)' multiple>
<script>
  var onFilesSelected = function(event) {
    var input = event.target;

    for (var i = 0; i < input.files.length; i++) {
      console.log(input.files[i].name);
    }
  };
</script>

Run

Results:

form : HTMLFormElement readonly

formAction : String

formEnctype : String

formMethod : String

formNoValidate : Boolean

formTarget : String

height : Number

indeterminate : Boolean

labels : NodeList readonly

list : HTMLElement readonly

max : String

maxLength : Number

min : String

multiple : Boolean

Set to true to allow the user to select multiple files. Applies when type = 'file'.

Example:

<label><input id='checkbox-input' type='checkbox'>Multiple</label><br>
<input id='file-input' type='file'>
<script>
  var checkBoxInput = document.getElementById('checkbox-input');
  var fileInput = document.getElementById('file-input');

  checkBoxInput.addEventListener('change', function(event) {
    fileInput.multiple = event.target.checked;
  });

  fileInput.addEventListener('change', function(event) {
    var input = event.target;

    for (var i = 0; i < input.files.length; i++) {
      console.log(input.files[i].name);
    }
  });
</script>

Run

Results:

name : String

pattern : String

placeholder : String

readOnly : Boolean

required : Boolean

selectionDirection : String

Spec

selectionEnd : Number

Spec

selectionStart : Number

Spec

size : Number

src : String

step : String

type : String

Determines the type of input to receive. Must be one of 'button', 'checkbox', 'color', 'date', 'datetime', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'sumbit', 'tel', 'text', 'time', 'url', or 'week'. The default value is 'text'.

Example:

<table id='table'></table>
<script>
  var types = ['button', 'checkbox', 'color', 'date', 'datetime',
               'datetime-local', 'email', 'file', 'hidden',
               'image', 'month', 'number', 'password', 'radio',
               'range', 'reset', 'search', 'submit', 'tel', 'text',
               'time', 'url', 'week'];

  var table = document.getElementById('table');

  types.forEach(function(type) {
    var row = document.createElement('tr');
    var typeTableData = document.createElement('td');
    typeTableData.textContent = type;
    row.appendChild(typeTableData);

    var input = document.createElement('input');
    input.type = type;

    var inputTableData = document.createElement('td');
    inputTableData.appendChild(input);
    row.appendChild(inputTableData);

    table.appendChild(row);
  });
</script>

Run