What code and language does the input tag do what it does?

Question

The input tag is an html tag, i.e., markup language, however this tag performs instructions such as from a programming language.

After all as the tag "input file", does to access the operating system and bring the selected file?

How to change message:"No selected file" without javascript ?

Answer 1

Input is not part of a specific programming language, it is part of something we call interface (https://www.w3.org/TR/html-markup/input.file.html#input.file-interface), each browser has its own rendering engine that will implement this interface each of which is done in its own programming language, most engines are written in c++, but there are engines that are written in c or java.

List of most popular engines

• Chrome and Opera use engine Blink (Fork from the Webkit)
• Safari uses the engine Webkit
• Internetexplorer uses engine Trident (Discontinued in favor of Edgehtml and MS Edge)
• Microsoft Edge uses the engine Edgehtml
• Firefox uses the engine Gecko

When you put such an element within html:

<input type="file">

The browser will initially read as text, but then it will process the whole document and starts generating what we call "widgets" (the generated widgets based on the operating system or not), this can occur on how much the page is loading or only when it finishes loading (it will depend on the type of buffer).

There is no way you can manipulate, the HTML and XML structure is rendered by the browser and not by an external script, the engines are already compiled, the only way to really change would be to create your own engine, or take an existing one and modify (just like google did with Webkit)

However with CSS and HTML it is possible to simulate a custom input like this:

var fakeInput   = document.querySelector(".file-customizado");
var realInput   = document.querySelector(".file-customizado input[type=file]");
var selectLabel = document.querySelector(".file-customizado .label");
var pathFile    = document.querySelector(".file-customizado .path");

//Remove o path do arquivo, assim é exibido apenas o nome do arquivo
function basename(path) {
   path = String(path);
   var d = path.split(/\\|\//);
   return d[d.length - 1];
}

//O input customizado dispara o evento no input real
fakeInput.onclick = function() {
     realInput.click();
};

//O input detecta a troca de arquivo para mostrar que o input não esta vazio no label
realInput.onchange = function() {
    if (realInput.value) {
       selectLabel.className = "label hide";
       pathFile.innerHTML = basename(realInput.value);
       pathFile.className = "path";
    } else {
       pathFile.className = "path hide";
       selectLabel.className = "label";
    }
};

.file-customizado {
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    width: 200px;
    background-color: #f00;
    color: #fff;
    display: inline-block;
    cursor: pointer;
}
.file-customizado input[type=file] {
    position: absolute;
    visibility: hidden;
    top: -9990px;
    left: -9999px;
}
.file-customizado .label, .file-customizado .path {
    display: block;
    padding: 10px 0;
    text-align: center;
}
.file-customizado .hide {
    display: none !important;
}

<div class="file-customizado">
    <input type="file" name="campo">
    <span class="label">Selecionar...</span>
    <span class="path hide"></span>
</div>

Answer 2

The element input is unique to the HTML markup language, and is part of a template for a data set, the form, associated with a URI method and action. HTML Elements

works for accessing files on the operating system occurs briefly as follows:

When the user clicks on the button relative to the "input file" element, the browser makes a request to the server (in this case the operating system itself), and establishes a connection to the server through a network socket.

Each platform has a web library with an example internal script(or interface) .Net Framework in order to make the connection possible, where the nickname occurs Handshake-handshake.

In this way a call is made in the Operating System (server side) that opens its own dialog box (on Windows Openfiledialog) containing a list of files for selection.

After file selection, the transfer is performed through the protocol appropriate, HTTP or other depending on the file type.

Some meta data (not all) of the (s) file(s) selected are available for manipulation in the browser.

The Htmlinputelement interface provides special properties and methods (in addition to the normal Htmlelement interface it also has to its arrangement by inheritance) to manipulate the layout and presentation of the input elements.

The message "No files selected" is part of the internal code of the browser and I do not know a way to change it without javascript.