diff options
Diffstat (limited to 'files/pt-br/web/html/element/input')
| -rw-r--r-- | files/pt-br/web/html/element/input/button/index.html | 353 | ||||
| -rw-r--r-- | files/pt-br/web/html/element/input/checkbox/index.html | 299 | ||||
| -rw-r--r-- | files/pt-br/web/html/element/input/data/index.html | 430 | ||||
| -rw-r--r-- | files/pt-br/web/html/element/input/index.html | 1360 | ||||
| -rw-r--r-- | files/pt-br/web/html/element/input/password/index.html | 232 | ||||
| -rw-r--r-- | files/pt-br/web/html/element/input/range/index.html | 390 | ||||
| -rw-r--r-- | files/pt-br/web/html/element/input/time/index.html | 458 |
7 files changed, 3522 insertions, 0 deletions
diff --git a/files/pt-br/web/html/element/input/button/index.html b/files/pt-br/web/html/element/input/button/index.html new file mode 100644 index 0000000000..c7cf3a10d9 --- /dev/null +++ b/files/pt-br/web/html/element/input/button/index.html @@ -0,0 +1,353 @@ +--- +title: <input type="button"> +slug: Web/HTML/Element/Input/button +tags: + - Documentação + - Element + - Elementos Input + - Formulários HTML + - HTML + - Input + - Referencia + - Tipos de Input + - botões + - button + - formulários +translation_of: Web/HTML/Element/input/button +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Elementos {{HTMLElement("input")}} do tipo <strong><code>button</code> </strong>são renderizados como um simples botão, que podem ser programados para controlar funcionalidades customizadas em qualquer lugar de uma página web quando for atribuído um evento (tipicamente para um evento {{event("click")}}).</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}</div> + +<p class="hidden">A fonte para estes exemplos interativos é armazenado em um repositório GitHub. Se você gostaria de contribuir com projetos de exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos uma requisição pull.</p> + +<div class="note"> +<p><strong>Nota</strong>: Enquanto elementos <code><input></code> do tipo <code>button</code> ainda são perfeitamente válidos, os novos elementos {{HTMLElement("button")}} são agora os favoráveis meios para criar botões. Uma etiqueta de texto (label) para um {{HTMLElement("button")}} pode ser inserida entre uma tag de abertura e outra de fechamento, podendo ser incluídas até imagens.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Um {{domxref("DOMString")}} usado como uma etiqueta de botão.</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{event("click")}}</td> + </tr> + <tr> + <td><strong>Atributos comuns suportados</strong></td> + <td>{{htmlattrxref("type", "input")}}, e {{htmlattrxref("value", "input")}}</td> + </tr> + <tr> + <td><strong>atributos IDL</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>Nenhum</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>Seu atributo {{htmlattrxref("value", "input")}} de um elemento <code><input type="button"></code> contém uma {{domxref("DOMString")}} que é usado como uma etiqueta (label) de um botão</p> + +<div id="summary-example3"> +<pre class="brush: html"><input type="button" value="Click Me"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> + +<p>Se você não especificar um <code>value</code>, você obtém um botão vazio:</p> + +<div id="summary-example1"> +<pre class="brush: html"><input type="button"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> + +<h2 id="Usando_buttons">Usando buttons</h2> + +<p>Elementos <code><input type="button"></code> não possuem comportamento padrão (seu primos,<code> <a href="/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> e <code><a href="/en-US/docs/Web/HTML/Element/input/reset"><input type="reset"></a></code> são usados para submeter e resetar formulários). Para que botões possam fazer algo, você tem de escrever um código em JavaScript para fazê-lo trabalhar.</p> + +<h3 id="Um_simples_botão">Um simples botão</h3> + +<p>Nós iremos começar criando um simples botão com um evento {{event("click")}} que inicia nossa máquina (bem, ele altera o <code>value</code> do botão e o contéudo texto do seguinte parágrafo):</p> + +<pre class="brush: html"><form> + <input type="button" value="Start machine"> +</form> +<p>The machine is stopped.</p></pre> + +<pre class="brush: js">const button = document.querySelector('input'); +const paragraph = document.querySelector('p'); + +button.addEventListener('click', updateButton); + +function updateButton() { + if (button.value === 'Start machine') { + button.value = 'Stop machine'; + paragraph.textContent = 'The machine has started!'; + } else { + button.value = 'Start machine'; + paragraph.textContent = 'The machine is stopped.'; + } +}</pre> + +<p>O script recebe uma referência para o objeto {{domxref("HTMLInputElement")}} representando o <code><input></code> no DOM, salvando esta referência na variável <code>button</code>. {{domxref("EventTarget.addEventListener", "addEventListener()")}} é então usado para criar uma função que será chamada quando o evento {{event("click")}} for executado no botão.</p> + +<p>{{EmbedLiveSample("A_simple_button", 650, 100)}}</p> + +<h3 id="Adicionando_atalhos_de_teclados_aos_botões">Adicionando atalhos de teclados aos botões</h3> + +<p>Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any {{HTMLElement("input")}} for which it makes sense — you use the {{htmlattrxref("accesskey")}} global attribute.</p> + +<p>In this example, <kbd>s</kbd> is specified as the access key (you'll need to press <kbd>s</kbd> plus the particular modifier keys for your browser/OS combination; see <a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a> for a useful list of those).</p> + +<div id="accesskey-example1"> +<pre class="brush: html"><form> + <input type="button" value="Start machine" accesskey="s"> +</form> +<p>The machine is stopped.</p> +</pre> +</div> + +<div class="hidden"> +<pre class="brush: js">const button = document.querySelector('input'); +const paragraph = document.querySelector('p'); + +button.addEventListener('click', updateButton); + +function updateButton() { + if (button.value === 'Start machine') { + button.value = 'Stop machine'; + paragraph.textContent = 'The machine has started!'; + } else { + button.value = 'Start machine'; + paragraph.textContent = 'The machine is stopped.'; + } +}</pre> +</div> + +<p>{{EmbedLiveSample("Adding_keyboard_shortcuts_to_buttons", 650, 100)}}</p> + +<div class="note"> +<p><strong>Note</strong>: The problem with the above example of course is that the user will not know what the access key is! In a real site, you'd have to provide this information in a way that doesn't intefere with the site design (for example by providing an easily accessible link that points to information on what the site accesskeys are).</p> +</div> + +<h3 id="Desativando_e_ativando_um_botão">Desativando e ativando um botão</h3> + +<p>To disable a button, simply specify the {{htmlattrxref("disabled")}} global attribute on it, like so:</p> + +<div id="disable-example1"> +<pre class="brush: html"><input type="button" value="Disable me" disabled></pre> +</div> + +<p>You can enable and disable buttons at run time by simply setting <code>disabled</code> to <code>true</code> or <code>false</code>. In this example our button starts off enabled, but if you press it, it is disabled using <code>button.disabled = true</code>. A {{domxref("WindowTimers.setTimeout","setTimeout()")}} function is then used to reset the button back to its enabled state after two seconds.</p> + +<div class="hidden"> +<h6 id="Hidden_code_1">Hidden code 1</h6> + +<pre class="brush: html"><input type="button" value="Enabled"></pre> + +<pre class="brush: js">const button = document.querySelector('input'); + +button.addEventListener('click', disableButton); + +function disableButton() { + button.disabled = true; + button.value = 'Disabled'; + window.setTimeout(function() { + button.disabled = false; + button.value = 'Enabled'; + }, 2000); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p> + +<p>If the <code>disabled</code> attribute isn't specified, the button inherits its <code>disabled</code> state from its parent element. This makes it possible to enable and disable groups of elements all at once by enclosing them in a container such as a {{HTMLElement("fieldset")}} element, and then setting <code>disabled</code> on the container.</p> + +<p>The example below shows this in action. This is very similar to the previous example, except that the <code>disabled</code> attribute is set on the <code><fieldset></code> when the first button is pressed — this causes all three buttons to be disabled until the two second timeout has passed.</p> + +<div class="hidden"> +<h6 id="Hidden_code_2">Hidden code 2</h6> + +<pre class="brush: html"><fieldset> + <legend>Button group</legend> + <input type="button" value="Button 1"> + <input type="button" value="Button 2"> + <input type="button" value="Button 3"> +</fieldset></pre> + +<pre class="brush: js">const button = document.querySelector('input'); +const fieldset = document.querySelector('fieldset'); + +button.addEventListener('click', disableButton); + +function disableButton() { + fieldset.disabled = true; + window.setTimeout(function() { + fieldset.disabled = false; + }, 2000); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p> + +<div class="note"> +<p><strong>Note</strong>: Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p> +</div> + +<h2 id="Validação">Validação</h2> + +<p>Buttons não participam na validação; eles não tem um valor real para ser restringido.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>The below example shows a very simple drawing app created using a {{htmlelement("canvas")}} element and some simple CSS and JavaScript (we'll hide the CSS for brevity). The top two controls allow you to choose the color and size of the drawing pen. The button, when clicked, invokes a function that clears the canvas.</p> + +<pre class="brush: html"><div class="toolbar"> + <input type="color" aria-label="select pen color"> + <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span> + <input type="button" value="Clear canvas"> +</div> + +<canvas class="myCanvas"> + <p>Add suitable fallback here.</p> +</canvas></pre> + +<div class="hidden"> +<pre class="brush: css">body { + background: #ccc; + margin: 0; + overflow: hidden; +} + +.toolbar { + background: #ccc; + width: 150px; + height: 75px; + padding: 5px; +} + +input[type="color"], input[type="button"] { + width: 90%; + margin: 0 auto; + display: block; +} + +input[type="range"] { + width: 70%; +} + +span { + position: relative; + bottom: 5px; +}</pre> +</div> + +<pre class="brush: js">var canvas = document.querySelector('.myCanvas'); +var width = canvas.width = window.innerWidth; +var height = canvas.height = window.innerHeight-85; +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = 'rgb(0,0,0)'; +ctx.fillRect(0,0,width,height); + +var colorPicker = document.querySelector('input[type="color"]'); +var sizePicker = document.querySelector('input[type="range"]'); +var output = document.querySelector('.output'); +var clearBtn = document.querySelector('input[type="button"]'); + +// covert degrees to radians +function degToRad(degrees) { + return degrees * Math.PI / 180; +}; + +// update sizepicker output value + +sizePicker.oninput = function() { + output.textContent = sizePicker.value; +} + +// store mouse pointer coordinates, and whether the button is pressed +var curX; +var curY; +var pressed = false; + +// update mouse pointer coordinates +document.onmousemove = function(e) { + curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); + curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); +} + +canvas.onmousedown = function() { + pressed = true; +}; + +canvas.onmouseup = function() { + pressed = false; +} + +clearBtn.onclick = function() { + ctx.fillStyle = 'rgb(0,0,0)'; + ctx.fillRect(0,0,width,height); +} + +function draw() { + if(pressed) { + ctx.fillStyle = colorPicker.value; + ctx.beginPath(); + ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false); + ctx.fill(); + } + + requestAnimationFrame(draw); +} + +draw();</pre> + +<p>{{EmbedLiveSample("Examples", '100%', 600)}}</p> + +<h2 id="Específicações">Específicações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você gostaria de contribuir, por favor cheque <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma requisição pull.</div> + +<p>{{Compat("html.elements.input.input-button")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it.</li> + <li>The more modern {{HTMLElement("button")}} element.</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li> +</ul> diff --git a/files/pt-br/web/html/element/input/checkbox/index.html b/files/pt-br/web/html/element/input/checkbox/index.html new file mode 100644 index 0000000000..42c8c65072 --- /dev/null +++ b/files/pt-br/web/html/element/input/checkbox/index.html @@ -0,0 +1,299 @@ +--- +title: <input type="checkbox"> +slug: Web/HTML/Element/Input/checkbox +translation_of: Web/HTML/Element/input/checkbox +--- +<div>{{HTMLRef}}</div> + +<p>{{htmlelement ("input")}} elementos do tipo <strong><code>checkbox</code></strong>são renderizados por padrão como caixas quadradas que são marcadas (com uma marca de verificação) quando ativadas, como você pode ver em um formulário de papel oficial do governo. A aparência exata depende de da configuração de sistema operacional sobre o qual o navegador está sendo executado. Eles permitem que você selecione valores únicos para envio em um formulário (ou não).</p> + +<div>{{EmbedInteractiveExample ("pages/tabbed/input-checkbox.html", "tabbed-standard")}}</div> + +<p class="hidden">A fonte deste exemplo interativo é armazenada em um repositório GitHub. Se você quiser contribuir com o projeto de exemplos interativos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos uma solicitação pull.</p> + +<div class="note"> +<p><strong>Nota</strong> : <a href="/en-US/docs/Web/HTML/Element/input/radio">Os botões de opção</a> são semelhantes às caixas de seleção, mas com uma distinção importante: os botões de opção são agrupados em um conjunto no qual apenas um botão pode ser selecionado por vez, enquanto as caixas de seleção permitem ativar e desativar valores únicos. Quando existem vários controles, os botões de opção permitem que um seja selecionado de todos, enquanto as caixas de seleção permitem que vários valores sejam selecionados.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch ("Valor")}}</strong></td> + <td>Um {{domxref ("DOMString")}} representando o valor da caixa de seleção.</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{event ("change")}} e {{event ("input")}}</td> + </tr> + <tr> + <td><strong>Atributos comuns suportados</strong></td> + <td>{{htmlattrxref ("checked", "input")}}</td> + </tr> + <tr> + <td><strong>Atributos IDL</strong></td> + <td><code>checked</code> e <code>value</code></td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>{{domxref ("HTMLInputElement.select", "select ()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Valor">Valor</h2> + +<p>Um {{domxref ("DOMString")}} representando o valor da caixa de seleção. Isso nunca é visto no lado do cliente, mas no servidor esse é o <code>value</code> atribuído aos dados enviados com o <code>name</code> da caixa de seleção. Tome o seguinte exemplo:</p> + +<pre class="brush: html"><form> + <div> + <input type = "checkbox" id = "subscribeNews" nome = "subscribe" value = "<code>newsletter</code>"> + <label for = "subscribeNews"> Subscreva a newsletter? </ label> + </ div> + <div> + <button type = "submit"> Subscrever </ button> + </ div> +</ form></pre> + +<p>{{EmbedLiveSample ('Value', 600, 60)}}</p> + +<p>Neste exemplo, temos um nome <code>subscribe</code>e um valor de <code>newsletter</code>. Quando o formulário é enviado, o par de nome / valor de dados será <code>subscribe=newsletter</code>.</p> + +<p>Se o atributo <code>value</code> for omitido, o valor padrão da caixa de seleção é <code>on</code> , portanto, os dados enviados nesse caso seriam <code>subscribe=on</code>.</p> + +<div class="note"> +<p><strong>Nota</strong> : Se uma caixa de seleção estiver desmarcada quando seu formulário for enviado, não haverá nenhum valor enviado ao servidor para representar seu estado desmarcado (por exemplo <code>value=unchecked</code>); o valor não é submetido ao servidor.</p> +</div> + +<h2 id="Usando_entradas_da_caixa_de_seleção">Usando entradas da caixa de seleção</h2> + +<p>Já cobrimos o uso mais básico de caixas de seleção acima. Vamos agora olhar para os outros recursos e técnicas relacionados à caixa de seleção que você precisa.</p> + +<h3 id="Lidando_com_várias_caixas_de_seleção">Lidando com várias caixas de seleção</h3> + +<p>O exemplo que vimos acima continha apenas uma caixa de seleção; em situações do mundo real, você provavelmente encontrará várias caixas de seleção. Se eles não estiverem relacionados, você pode lidar com todos eles separadamente, como mostrado acima. No entanto, se todos estiverem relacionados, as coisas não são tão simples.</p> + +<p>Por exemplo, na demonstração a seguir, incluímos várias caixas de seleção para permitir que o usuário selecione seus interesses (veja a versão completa na seção {{anch ("Examples")}}).</p> + +<pre class="brush: html"><fieldset> + <legend> Escolha seus interesses </ legend> + <div> + <input type = "checkbox" id = "codificação" name = "interesse" valor = "codificação"> + <label for = "coding"> Codificação </ label> + </ div> + <div> + <input type = "checkbox" id = "música" name = "interesse" valor = "música"> + <label for = "music"> Música </ label> + </ div> +</ fieldset></pre> + +<p>{{EmbedLiveSample ('Handling_multiple_checkboxes', 600, 100)}}</p> + +<p>Neste exemplo, você verá que atribuímos a cada caixa de seleção o mesmo <code>name</code>. Se ambas as opções são verificados e, em seguida, o formulário é enviado, você terá uma série de pares nome / valor apresentado assim: <code>interest=coding&interest=music</code>. Quando esses dados atingirem o lado do servidor, você poderá capturá-los como uma matriz de valores relacionados e tratá-los adequadamente - consulte <a class="question-hyperlink" href="http://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable">Lidar com várias caixas de seleção com uma única variável de servidor</a> , por exemplo.</p> + +<h3 id="Caixas_de_verificação_por_padrão">Caixas de verificação por padrão</h3> + +<p>Para fazer uma caixa de seleção marcada por padrão, você simplesmente atribui o atributo <code>checked</code>. Veja o exemplo abaixo:</p> + +<pre class="brush: html"><fieldset> + <legend> Escolha seus interesses </ legend> + <div> + <input type = "checkbox" id = "codificação" nome = "interesse" valor = "codificação" checked> + <label for = "coding"> Codificação </ label> + </ div> + <div> + <input type = "checkbox" id = "música" name = "interesse" valor = "música"> + <label for = "music"> Música </ label> + </ div> +</ fieldset></pre> + +<p>{{EmbedLiveSample ('Checking_boxes_by_default', 600, 100)}}</p> + +<h3 id="Fornecendo_uma_área_de_acertos_maior_para_suas_caixas_de_seleção">Fornecendo uma área de acertos maior para suas caixas de seleção</h3> + +<p>Nos exemplos acima, você deve ter notado que pode alternar uma caixa de seleção clicando no elemento {{htmlelement ("label")}} associado e na própria caixa de seleção. Esse é um recurso realmente útil de rótulos de formulários HTML que facilitam o clique na opção desejada, especialmente em dispositivos de tela pequena, como smartphones.</p> + +<p>Além da acessibilidade, esse é outro bom motivo para configurar corretamente os <code><label></code>elementos em seus formulários.</p> + +<h3 id="Caixas_de_seleção_de_estado_indeterminado">Caixas de seleção de estado indeterminado</h3> + +<p>Além dos estados marcado e não marcado, há um terceiro estado em que uma caixa de seleção pode estar: <strong>indeterminada</strong>. Este é um estado em que é impossível dizer se o item está ativado ou desativado. Isso é definido usando a propriedade <code>indeterminate</code> do objeto {{domxref ("HTMLInputElement")}} via JavaScript (não pode ser definido usando um atributo HTML):</p> + +<pre class="brush: js">inputInstance.indeterminate = true;</pre> + +<p>Uma caixa de seleção no estado indeterminado tem uma linha horizontal na caixa (parece um hífen ou sinal de menos) em vez de uma marca de verificação na maioria dos navegadores.</p> + +<p>Não há muitos casos de uso para essa propriedade. O mais comum é quando uma caixa de seleção está disponível e "possui" um número de subopções (que também são caixas de seleção). Se todas as subopções estiverem marcadas, a caixa de seleção proprietária também será marcada e, se todas elas estiverem desmarcadas, a caixa de seleção proprietária será desmarcada. Se uma ou mais das subopções tiverem um estado diferente das outras, a caixa de seleção proprietária está no estado indeterminado.</p> + +<p>Isso pode ser visto no exemplo abaixo (graças aos <a href="https://css-tricks.com/indeterminate-checkboxes/">CSS Tricks</a> para a inspiração). Neste exemplo, acompanhamos os ingredientes que estamos coletando para uma receita. Quando você marca ou desmarca a caixa de seleção de um ingrediente, uma função JavaScript verifica o número total de ingredientes verificados:</p> + +<ul> + <li>Se nenhum deles estiver marcado, a caixa de seleção do nome da receita está definida como desmarcada.</li> + <li>Se um ou dois estiverem marcados, a caixa de seleção do nome da receita está definida como <code>indeterminate</code>.</li> + <li>Se todos os três forem marcados, a caixa de seleção do nome da receita estará definida como <code>checked</code>.</li> +</ul> + +<p>Portanto, neste caso, o <code>indeterminate</code>estado é usado para afirmar que a coleta dos ingredientes foi iniciada, mas a receita ainda não está completa.</p> + +<pre class="brush: js" id="line1"> var overall = document.querySelector ('input[id = "EnchTbl"]'); + var ingredients = document.querySelectorAll ('ul input'); + + overall.addEventListener ('clique', function (e) { + e.preventDefault (); + }); + + for(var i = 0; i <ingredientes.length; i ++) { + ingredientes [i] .addEventListener ('clique', updateDisplay); + } + + função updateDisplay () { + var checkedCount = 1; + for(var i = 0; i <ingredientes.length; i ++) { + if (ingredientes [i] .checked) { + checkedCount ++; + } + } + + if (checkedCount === ingredientes.length + 1) { + overall.checked = true; + overall.indeterminate = false; + } else if (checkedCount <= ingredients.length + 1 && checkedCount> 1) { + overall.checked = false; + <strong>overall.indeterminate = true;</strong> + } else { + overall.checked = false; + <strong>overall.indeterminate = false;</strong> + } + }</pre> + +<p>{{EmbedGHLiveSample ("área de aprendizado / html / forms / indeterminate-example / index.html", '100%', 200)}}</p> + +<div class="note"> +<p><strong>Nota</strong> : Se você enviar um formulário com uma caixa de seleção indeterminada, a mesma coisa acontece como se o formulário estivesse desmarcado - nenhum dado é enviado para representar a caixa de seleção.</p> +</div> + +<h2 id="Validação">Validação</h2> + +<p>As caixas de seleção suportam <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">validação</a> (oferecidas para todos os <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" title="O elemento HTML <input> é usado para criar controles interativos para formulários baseados na web, a fim de aceitar dados do usuário."><code><input></code></a>s). No entanto, a maioria dos {{domxref ("ValidityState")}} s sempre será <code>false</code>. Se a caixa de seleção tiver o <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-required">required</a></code> atributo, mas não estiver marcada, ela <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/valueMissing" title="The documentation about this has not yet been written; please consider contributing!">ValidityState.valueMissing</a></code> será <code>true</code>.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>O exemplo a seguir é uma versão estendida do exemplo "multiple checkboxes" que vimos acima - tem mais opções padrão, além de uma caixa de seleção "other" que quando marcada faz com que um campo de texto apareça para inserir um valor para a opção "other". Isto é conseguido com um simples bloco de JavaScript. O exemplo também inclui alguns CSS para melhorar o estilo.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form> + <fieldset> + <legend> Escolha seus interesses </ legend> + <div> + <input type = "checkbox" id = "codificação" name = "interesse" valor = "codificação"> + <label for = "coding"> Codificação </ label> + </ div> + <div> + <input type = "checkbox" id = "música" name = "interesse" valor = "música"> + <label for = "music"> Música </ label> + </ div> + <div> + <input type = "checkbox" id = "arte" name = "interesse" valor = "arte"> + <label for = "art"> Art </ label> + </ div> + <div> + <input type = "checkbox" id = "sports" nome = "interesse" valor = "esportes"> + <label for = "sports"> Esportes </ label> + </ div> + <div> + <input type = "checkbox" id = "cozinhar" nome = "interesse" valor = "cozinhar"> + <label for = "cooking"> Cozinhando </ label> + </ div> + <div> + <input type = "checkbox" id = "outro" nome = "interesse" valor = "outro"> + <label for = "other"> Outro </ label> + <input type = "text" id = "otherValue" nome = "outro"> + </ div> + <div> + <button type = "submit"> Enviar formulário </ button> + </ div> + </ fieldset> +</ form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">html { + font-family: sem serifa; +} + +Formato { + largura: 600px; + margem: 0 auto; +} + +div { + margem inferior: 10px; +} + +fieldset { + fundo: ciano; + borda: 5px azul sólido; +} + +lenda { + preenchimento: 10px; + fundo: azul; + cor: ciano; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + + + +<pre class="brush: js">var otherCheckbox = document.querySelector ('entrada [valor = "outro"]'); +var otherText = document.querySelector ('input [id = "otherValue"]'); +otherText.style.visibility = 'oculto'; + +otherCheckbox.onchange = function () { + if (otherCheckbox.checked) { + otherText.style.visibility = 'visível'; + otherText.value = ''; + } outro { + otherText.style.visibility = 'oculto'; + } +};</pre> + +<p>{{EmbedLiveSample ('Examples', '100%', 300)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Especificação</td> + <td>Status</td> + <td>Comente</td> + </tr> + <tr> + </tr> + <tr> + <td>{{SpecName ('HTML WHATWG', 'forms.html # checkbox-state- (tipo = caixa de seleção)', '<input type = "checkbox">')}}</td> + <td>{{Spec2 ('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName ('HTML5 W3C', 'forms.html # checkbox-state- (tipo = caixa de seleção)', '<input type = "checkbox">')}}</td> + <td>{{Spec2 ('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de recebimento.</div> + +<p>{{Compat ("html.elements.input.input-checkbox")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{HTMLElement ("input")}} e a interface {{domxref ("HTMLInputElement")}} que o implementa.</li> + <li>Os seletores CSS {{cssxref (": checked")}} e {{cssxref (": indeterminate")}} permitem que você marque as caixas de seleção com base em seu estado atual</li> +</ul> diff --git a/files/pt-br/web/html/element/input/data/index.html b/files/pt-br/web/html/element/input/data/index.html new file mode 100644 index 0000000000..0bb8fb07f8 --- /dev/null +++ b/files/pt-br/web/html/element/input/data/index.html @@ -0,0 +1,430 @@ +--- +title: <input type="date"> +slug: Web/HTML/Element/Input/data +tags: + - Date picker + - Elemento + - Elemento de entrada + - HTML + - Input + - NeedsCompatTable + - Referencia + - Selecionador de data + - Tipo de Input + - data +translation_of: Web/HTML/Element/input/date +--- +<p>Os elementos {{htmlelement("input")}} do tipo <strong><code>date</code></strong> cria campos de entrada que permite o usuário informar uma data, como também usar uma caixa de texto que valida automaticamente o conteúdo, ou usando uma interface de seleção de data especial. O valor resultante inclui ano, mês e dia, mas não o <code>horário</code>. Os tipos de entrada <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time">time</a> e <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> permitem informar horário e data/hora.</p> + +<p>A interface do usuário do controle varia geralmente de navegador para navegador; neste momento o suporte é irregular, veja {{anch("Browser compatibility")}} para maiores detalhes. Nos navegadores sem suporte, o controle é rebaixado graciosamente para um <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code> simples.</p> + +<pre class="brush: html"><input id="date" type="date"></pre> + +<p>{{ EmbedLiveSample('Basic_example', 600, 40) }}</p> + +<p>Entre os navegadores que suportam uma interface personalizada para selecionar datas é o controle de data do Chrome/Opera, que se parece com:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p> + +<p>O controle de data do Edge se parece assim:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p> + +<p>O controle de data do Firefox se parece assim:</p> + +<p><img alt="Datepicker UI in firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Um {{domxref("DOMString")}} que representa uma data no formato AAAA-MM-DD ou vazio</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{event("change")}} e {{event("input")}}</td> + </tr> + <tr> + <td><strong>Atributos Comuns Suportados</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} e {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>Atributos IDL</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Valores">Valores</h2> + +<p>Um {{domxref("DOMString")}} representa o valor data informada na entrada. Você pode definir o valor padrão para a entrada incluindo uma data dentro do atributo {{htmlattrxref("value", "input")}}, como:</p> + +<pre class="brush: html"><input id="date" type="date" value="2017-06-01"></pre> + +<p>{{ EmbedLiveSample('Value', 600, 40) }}</p> + +<p>Uma coisa para perceber é que o formato da data mostrada difere do <code>value</code> atual— o formato da data mostrada será escolhido baseado na localização definida no navegador do usuário, enquanto que a data em <code>value</code> sempre será formatado como <code>yyyy-mm-dd</code>.</p> + +<p>Você pode, além disso, obter e definir o valor da data em JavaScript usando a propriedade {{domxref("HTMLInputElement.value", "value")}} do elemento de entrada, por exemplo:</p> + +<pre class="brush: js ">var dateControl = document.querySelector('input[type="date"]'); +dateControl.value = '2017-06-01';</pre> + +<p>Este código localiza o primeiro elemento {{HTMLElement("input")}} que o <code>type</code> é <code>date</code> e define seu valor para a data 2017-06-01 (1 de junho de 2017).</p> + +<h2 id="Atributos_adicionais">Atributos adicionais</h2> + +<p>Além dos atributos disponíveis para todos os elementos {{HTMLElement("input")}}, as caixas de texto de data oferecem os seguintes atributos:</p> + +<table class="standard-table" dir="ltr"> + <thead> + <tr> + <th scope="col">Atributo</th> + <th scope="col">Descrição</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>A maior data aceitável</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>A menor data aceitável</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Se o conteúdo da caixa de texto é somente leitura</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>O intervalo a ser usado, quando clicar nos botões de seta para baixo e para cima, e também para validação</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="Usando_caixas_de_texto_de_data">Usando caixas de texto de data</h2> + +<p>Caixas de texto de data se mostra conveniente à primeira vista — eles fornecem uma interface simples para escolha de datas e normalizam o formato da data enviado para o servidor, independentemente da localização do usuário. Contudo, há problemas com o <code><input type="date"></code> por causa do suporte limitado do navegador.</p> + +<p>Iremos dar uma olhada em usos básicos e mais complexos de <code><input type="date"></code>, então aconselharemos sobre como atenuar os problemas de suporte dos navegadores (veja {{anch("Handling browser support")}}). Claro, esperamos que ao longo do tempo o supore dos navegadores sejam mais universal e este problema desapareça.</p> + +<h3 id="Uso_básico_da_data">Uso básico da data</h3> + +<p>O uso mais simples de <code><input type="date"></code> envolve a combinação de um <code><input></code> básico e o elemento {{htmlelement("label")}}, como pode ser visto abaixo:</p> + +<pre class="brush: html"><form> + <div> + <label for="diaa">Informe a data do seu aniversário:</label> + <input type="date" id="diaa" name="diaa"> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Basic_uses_of_date', 600, 40) }}</p> + +<h3 id="Definindo_data_mínima_e_máxima">Definindo data mínima e máxima</h3> + +<p>Você pode usar os atributos {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir as datas que podem ser escolhidas pelo usuário. No próximo exemplo nós definimos uma data mínima como <code>2017-04-01</code> e data máxima como <code>2017-04-30</code>:</p> + +<pre class="brush: html"><form> + <div> + <label for="festa">Escolha a sua data preferida da festa:</label> + <input type="date" id="festa" name="festa" min="2017-04-01" max="2017-04-30"> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}</p> + +<p>O resultado aqui será apenas que as dias de Abril de 2017 serão selecionados — apenas a parte "dias" do texto será editável e datas fora de Abril não serão rolados na ferramenta de seleção de data.</p> + +<div class="note"> +<p><strong>Observação</strong>: Você deve conhecer o uso do atributo {{htmlattrxref("step", "input")}} para variar o número de dias pulados cada vez que a data é incrementada (ex.: talvez você queira deixar que os Sábados sejam selecionáveis). Contudo, isto não parece funcionar eficiente de qualquer implementação em tempo de escrita.</p> +</div> + +<h3 id="Controlando_o_tamanho_da_entrada">Controlando o tamanho da entrada</h3> + +<p><code><input type="date"></code> não suporta atributos de tamanho de formulário como {{htmlattrxref("size", "input")}}. Você poderá recorrer ao <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> para modificar o tamanho.</p> + +<h2 id="Validação">Validação</h2> + +<p>Por padrão <code><input type="date"></code> não aplica nenhuma validação de entrada de valores. As implementações da interface geralmente não deixam você informar nada que não seja uma data — o que é útil — mas você pode continuar deixando o campo vazio ou (em navegadores onde a entrada converte para o tipo <code>text</code>) informar uma data inválida (ex.: o 32 de Abril).</p> + +<p>Se você usa {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir datas disponíveis (ver {{anch("Definindo data mínima e máxima")}}), os navegadores suportados mostrarão um erro se você tentar submeter uma data fora da faixa. Contudo, você terá que verificar os resultados para ter certeza que o valor está entre estas datas, uma vez que são aplicadas apenas se o selecionador de data for totalmente suportado pelo dispositivo do usuário.</p> + +<p>Adicionalmente, você pode usar o atributo {{htmlattrxref("required", "input")}} para tornar o preenchimento da data obrigatório — novamente, um erro será mostrado se você tentar submeter um campo de data vazia. Isto, finalmente, deve funcionar em muitos navegadores.</p> + +<p>Vamos dar uma olhada em um exemplo — aqui nós definimos datas mínima e máxima e deixamos o campo como obrigatório:</p> + +<pre class="brush: html"><form> + <div> + <label for="festa">Escolha sua data preferida da festa (obrigatório, de 1º a 20 de abril):</label> + <input type="date" id="festa" name="festa" min="2017-04-01" max="2017-04-20" required> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>Se você tentar submeter o formulário com uma data imcompleta (ou com uma data fora da faixa), o navegador mostrará um erro. Tente executar o exemplo agora:</p> + +<p>{{ EmbedLiveSample('Validation', 600, 100) }}</p> + +<p>Aqui tem uma captura de tela que mostra o resultado se seu navegador não suporta:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>Aqui tem o CSS utilizado no exemplo acima. Nós usamos as propriedades CSS {{cssxref(":valid")}} e {{cssxref(":invalid")}} para estilizar a caixa de texto dependendo se o valor atual é válido ou não. Colocamos ícones num {{htmlelement("span")}} próximo a caixa de entrada, não dentro da caixa, porque no Chrome o conteúdo gerado é colocado dentro do controle do formulário, e não seria estilzado ou mostrado eficientemente.</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + display: flex; + align-items: center; +} + +label { + display: inline-block; + width: 300px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<div class="warning"> +<p><strong>Importante</strong>: A validação do formulário HTML não subtitui scripts que validam se a entrada de dados está em um formato apropriado. É muito fácil para alguém fazer ajustes no HTML que permitam sobrepor a validação ou removê-lo inteiramente. Também é possível simplesmente sobrepor seu HTML inteiramente e submeter os dados diretamente ao seu servidor. Se seu código server-side falhar na validação do dado que recebe pode ocorreu um desaste quando os dados forem submetidos inapropriadamente formatado (ou dado pode ser muito grande, ou é do tipo errado e assim por diante).</p> +</div> + +<h2 id="Manipulação_do_suporte_do_navegador">Manipulação do suporte do navegador</h2> + +<p>Como mencionado acima, o maior problema em usar caixas de entrada de data em tempo de escrita é o {{anch("Browser compatibility", "suporte do navegador")}}. Por exemplo, o selecionador de data no Firefox para Android se parece com isso:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p> + +<p>Navegadores que não suportam graciosamente rebaixa para uma caixa de texto comum, mas criam problemas em termos de consistência da interface do usuário (o controle apresentado será diferente) e a manipulação do dado.</p> + +<p>O segundo problema é mais sério que os anterirores; como mencionamos antes, com um campo de texto de data o valor atual sempre é normalizado pelo formato <code>yyyy-mm-dd</code>. Com a caixa de texto comum, por outro lado, por padrão do navegador não há reconhecimento de qual formato a data deve ter e há muitos modos diferentes em que as pessoas escrevem datas. Por exemplo:</p> + +<ul> + <li><code>ddmmyyyy</code></li> + <li><code>dd/mm/yyyy</code></li> + <li><code>mm/dd/yyyy</code></li> + <li><code>dd-mm-yyyy</code></li> + <li><code>mm-dd-yyyy</code></li> + <li><code>Month dd yyyy</code></li> +</ul> + +<p>Um jeito de contornar isso é colocar um atributo {{htmlattrxref("pattern", "input")}} na caixa de texto de data. Sempre que a caixa de texto de data não usá-lo, a caixa de texto devolverá um erro. Por exemplo, tente ver o que o seguinte exemplo faz num navegador sem suporte:</p> + +<pre class="brush: html"><form> + <div> + <label for="diaa">Informe a data do seu aniversário:</label> + <input type="date" id="bday" name="diaa" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p> + +<p>Se você submetê-lo, verá que o navegador agora mostra uma mensagem de erro (e destaca a caixa de texto como inválido) se o que foi informado não combinam com o padrão <code>nnnn-nn-nn</code>, onde <code>n</code> é um número entre 0 e 9. Claro, isto não parará as pessoas de informar datas inválidas ou datas formatadas incorretamente, como <code>yyyy-dd-mm</code> (onde nós precisamos de <code>yyyy-mm-dd</code>). Então continua sendo um problema.</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +} + +input:invalid + span { + position: relative; +} + +input:invalid + span:after { + content: '✖'; + position: absolute; + right: -18px; +} + +input:valid + span { + position: relative; +} + +input:valid + span:after { + content: '✓'; + position: absolute; + right: -18px; +}</pre> +</div> + +<p>A melhor maneira de lidar com datas nos formulários de um modo entre navegadores no momento é obter do usuário o dia, mês e ano em controles separados (elementos {{htmlelement("select")}} são bem populares; veja abaixo uma implementação) ou use uma biblioteca JavaScript como o <a href="https://jqueryui.com/datepicker/">selecionador de data do jQuery</a>.</p> + +<h2 id="Atributos">Atributos</h2> + +<p>Beside the attributes listed below, this element can have any of the <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt> + <dd>Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, and <code>send</code>; these automatically get mapped to the appropriate string (and are case-insensitive).</dd> + <dt>{{htmlattrdef("autofocus")}}</dt> + <dd>This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the <strong>autofocus</strong> attribute, which is a Boolean. It cannot be applied if the <strong>type</strong> attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control).</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>This Boolean attribute indicates that the form control is not available for interaction. In particular, the <code>click</code> event <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">will not be dispatched</a> on disabled controls. Also, a disabled control's value isn't submitted with the form.</p> + </dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>The form element that the input element is associated with (its <em>form owner</em>). The value of the attribute must be an <strong>id</strong> of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this <code><input></code> element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <code><input></code> elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.</dd> + <dt>{{htmlattrdef("formaction")}}</dt> + <dd>The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formenctype")}}</dt> + <dd>If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are: + <ul> + <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> + <li><code>multipart/form-data</code>: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}}</dt> + <dd>If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: + <ul> + <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li> + <li><code>get</code>: The data from the form are appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li> + </ul> + + <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}}</dt> + <dd>If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formtarget")}}</dt> + <dd>If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings: + <ul> + <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("inputmode")}}</dt> + <dd>A hint to the browser for which keyboard to display. This attribute applies when the value of the <strong>type</strong> attribute is text, password, email, or url. Possible values are: + <ul> + <li><code>verbatim</code>: Alphanumeric, non-prose content such as usernames and passwords.</li> + <li><code>latin</code>: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.</li> + <li><code>latin-name</code>: As <em>latin</em>, but for human names.</li> + <li><code>latin-prose</code>: As <em>latin</em>, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.</li> + <li><code>full-width-latin</code>: As <em>latin-prose</em>, but for the user's secondary languages.</li> + <li><code>kana</code>: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li> + <li><code>katakana</code>: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li> + <li><code>numeric</code>: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. For actual numbers, prefer using <input type="number"></li> + <li><code>tel</code>: Telephone input, including asterisk and pound key. Use <input type="tel"> if possible instead.</li> + <li><code>email</code>: Email input. Use <input type="email"> if possible instead.</li> + <li><code>url</code>: URL input. Use <input type="url"> if possible instead.</li> + </ul> + </dd> + <dt>{{htmlattrdef("list")}}</dt> + <dd>Identifies a list of pre-defined options to suggest to the user. The value must be the <strong>id</strong> of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element.</dd> + <dt>{{htmlattrdef("max")}}</dt> + <dd>The maximum value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</dd> + <dt>{{htmlattrdef("min")}}</dt> + <dd>The minimum value for this item, which must not be greater than its maximum (<strong>max</strong> attribute) value.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>The name of the control, which is submitted with the form data.</dd> + <dt>{{htmlattrdef("readonly")}}</dt> + <dd>This Boolean attribute indicates that the user cannot modify the value of the control.</dd> + <dt>{{htmlattrdef("required")}}</dt> + <dd>This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the <strong>type</strong> attribute is <code>hidden</code>, <code>image</code>, or a button type (<code>submit</code>, <code>reset</code>, or <code>button</code>). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.</dd> + <dt>{{htmlattrdef("selectionDirection")}}</dt> + <dd>The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.</dd> + <dt>{{htmlattrdef("spellcheck")}}</dt> + <dd>Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd> + <dt>{{htmlattrdef("step")}}</dt> + <dd>Works with the <strong>min</strong> and <strong>max</strong> attributes to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this attribute is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>The initial value of the control. This attribute is optional.<br> + Note that when reloading the page, Gecko and IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">will ignore the value specified in the HTML source</a>, if the value was changed before the reload.</dd> + <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt> + <dd>This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>To create a widget to display a date, use:</p> + +<pre class="brush: html"><input type="date"></pre> + +<h2 id="Navegadores_compatíveis">Navegadores compatíveis</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>20</td> + <td>12</td> + <td>{{CompatGeckoDesktop(57)}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1283381">Bug 1283381 - Firefox bug to implement</a></li> +</ul> diff --git a/files/pt-br/web/html/element/input/index.html b/files/pt-br/web/html/element/input/index.html new file mode 100644 index 0000000000..6a96393bb3 --- /dev/null +++ b/files/pt-br/web/html/element/input/index.html @@ -0,0 +1,1360 @@ +--- +title: <input> +slug: Web/HTML/Element/Input +translation_of: Web/HTML/Element/input +--- +<div class="summary"> +<p>O <strong>elemento HTML <code><input></code></strong> é usado para criar controles interativos para formulários baseados na web para receber dados do usuário. A semântica de um <code><input></code> varia consideravelmente dependendo do valor de seu atributo <code>type</code>.</p> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/pt-BR/docs/HTML/Categorias_de_conteúdo">Categorias de conteúdo</a></dfn> <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Conteúdo_de_fluxo">Conteúdo de fluxo</a>, listado, enviável, resetável, elemento associado a formulário, <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Conteúdo_fraseado">conteúdo fraseado</a>.<br> + Se o atributo {{htmlattrxref("type", "input")}} não tiver o valor <code>hidden</code>, elemento rotulável, conteúdo palpável.</li> + <li><dfn>Conteúdo permitido</dfn> Nenhum, este é um {{Glossary("elemento vazio")}}.</li> + <li><dfn>Omissão de tags</dfn> Deve ter uma tag de abertura e não deve ter uma tag de fechamento.</li> + <li><dfn>Elementos pais permitidos</dfn> Qualquer elemento que aceite <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Conteúdo_fraseado">conteúdo fraseado</a>.</li> + <li><dfn>Interface do DOM</dfn> {{domxref("HTMLInputElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui os <a href="/pt-BR/docs/HTML/Atributos_globais">atributos globais</a>.</p> + +<dl> + <dt>{{htmlattrdef("type")}}</dt> + <dd>O tipo de controle a ser exibido. O tipo padrão é <strong>text</strong>, se este atributo não for especificado. Os valores possíveis são: + <ul> + <li><code>button</code>: Um botão sem comportamento padrão.</li> + <li><code>checkbox</code>: Uma caixa de marcação. Você deve usar o atributo <strong>value</strong> para definir o valor enviado por este item. Use o atributo <strong>checked</strong> para indicar se o item está selecionado por padrão. Você também pode usar o atributo <strong>indeterminate</strong> para indicar que a caixa de marcação está em um estado indeterminado (na maioria das plataformas, isso desenha uma linha horizontal cortando a caixa).</li> + <li><code>color</code>: {{HTMLVersionInline("5")}} Um controle para especificar cores. A interface de um seletor de cores não tem nenhuma funcionalidade obrigatória a não ser aceitar cores simples em texto (<a href="http://www.w3.org/TR/html5/forms.html#color-state-(type=color)">mais informações — em inglês</a>).</li> + <li><code>date</code>: {{HTMLVersionInline("5")}} Um controle para inserir uma data (ano, mês e dia, sem horário).</li> + <li><code>datetime</code>: {{HTMLVersionInline("5")}} Um controle para inserir data e horário (hora, minuto, segundo e fração de segundo) baseado no fuso horário UTC.</li> + <li><code>datetime-local</code>: {{HTMLVersionInline("5")}} Um controle para inserir data e horário, sem fuso horário.</li> + <li><code>email</code>: {{HTMLVersionInline("5")}} Um campo para editar um endereço de e-mail. O valor do campo é validado para estar vazio ou ter um único endereço de e-mail válido antes de ser enviado. As pseudoclasses CSS {{cssxref(":valid")}} e {{cssxref(":invalid")}} são aplicadas apropriadamente.</li> + <li><code>file</code>: Um controle que permite ao usuário selecionar um arquivo. Use o atributo<strong>accept</strong> para definir os tipos de arquivo que o controle pode selecionar.</li> + <li><code>hidden</code>: Um controle que não é exibido mas cujo valor é enviado ao servidor.</li> + <li><code>image</code>: Um botão gráfico para enviar o formulário. Você deve usar o atributo <strong>src</strong> para definir a fonte da imagem e o atributo <strong>alt</strong> para definir um texto alternativo. Você pode usar os atributos <strong>height</strong> e <strong>width</strong> para definir o tamanho da imagem em pixels.</li> + <li><code>month</code>: {{HTMLVersionInline("5")}} Um controle para inserir mês e ano, sem fuso horário.</li> + <li><code>number</code>: {{HTMLVersionInline("5")}} Um controle para inserir um número de ponto flutuante.</li> + <li><code>password</code>: Um campo de texto com uma só linha cujo valor é obscurecido. Use o atributo <strong>maxlength</strong> para especificar o comprimento máximo do valor que pode ser inserido.</li> + <li><code>radio</code>: Um botão de escolha. Você deve usar o atributo <strong>value</strong> para definir o valor a ser enviado por este item. Use o atributo <strong>checked</strong> para indicar se este item deve estar selecionado por padrão. Botões de escolha que têm o mesmo valor para o atributo <strong>name</strong> estão no mesmo "grupo de botões de escolha"; apenas um botão de escolha no grupo pode estar selecionado de cada vez..</li> + <li><code>range</code>: {{HTMLVersionInline("5")}} Um controle para inserir um número cujo valor exato não é importante. Este tipo de controle usa os seguintes valores padrão se os atributos correspondentes não forem especificados: + <ul> + <li><code>min</code>: 0</li> + <li><code>max</code>: 100</li> + <li><code>value</code>: <code>min</code> + (<code>max</code>-<code>min</code>)/2, ou <code>min</code> se <code>max</code> for menos que <code>min</code></li> + <li><code>step</code>: 1</li> + </ul> + </li> + <li><code>reset</code>: Um botão que faz o conteúdo do formulário voltar a ter seus valores padrão.</li> + <li><code>search</code>: {{HTMLVersionInline("5")}} Um campo de texto com uma só linha para digitar termos de busca; quebras de linha são automaticamente removidas do valor entrado.</li> + <li><code>submit</code>: Um botão que envia o formulário.</li> + <li><code>tel</code>: {{HTMLVersionInline("5")}} Um controle para inserir um número de telefone; quebras de linha são automaticamente removidas do valor entrado, mas nenhuma outra sintaxe é imposta. Você pode usar atributos como <strong>pattern</strong> e <strong>maxlength</strong> para restringir os valores inseridos no controle. As pseudoclasses CSS {{cssxref(":valid")}} e {{cssxref(":invalid")}} são aplicadas apropriadamente.</li> + <li><code>text</code>: Um campo de texto com uma só linha; quebras de linha são automaticamente removidas do valor entrado.</li> + <li><code>time</code>: {{HTMLVersionInline("5")}} Um controle para inserir um horário sem fuso horário.</li> + <li><code>url</code>: {{HTMLVersionInline("5")}} Um campo para editar uma URL. O valor inserido é validado para ser vazio ou uma URL absoluta válida antes de ser enviado. Quebras de linha e espaços em branco antes e após o valor inserido são automaticamente removidos. Você pode usar atributos como <strong>pattern</strong> e <strong>maxlength</strong> para restringir os valores inseridos no controle. As pseudoclasses CSS {{cssxref(":valid")}} e {{cssxref(":invalid")}} são aplicadas apropriadamente.</li> + <li><code>week</code>: {{HTMLVersionInline("5")}} Um controle para inserir uma data consistindo de ano da semana e número da semana sem fuso horário.</li> + </ul> + </dd> + <dt>{{htmlattrdef("accept")}}</dt> + <dd>Se o valor do atributo <strong>type</strong> for <code>file</code>, este atributo indica quais tipos de arquivo o servidor aceita; caso contrário, este atributo é ignorado. O valor deve ser uma lista de especificadores de tipo únicos separados por vírgula: + <ul> + <li>Uma extensão de arquivo começando com o caractere STOP (U+002E). (Exemplo: ".jpg,.png,.doc")</li> + <li>Um tipo MIME válido sem extensões</li> + <li><code>audio/*</code> representando arquivos de som {{HTMLVersionInline("5")}}</li> + <li><code>video/*</code> representando arquivos de vídeo {{HTMLVersionInline("5")}}</li> + <li><code>image/*</code> representando arquivos de imagem {{HTMLVersionInline("5")}}</li> + </ul> + </dd> + <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>Um único caractere que o usuário pode pressionar para mudar o foco de entrada de dados para este controle. Este atributo é global no HTML5.</dd> + <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt> + <dd>Especifica uma "dica de ação" usada para determinar como rotular a tecla Enter em dispositivos móveis com teclados virtuais. Os valores suportados são <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code> e <code>send</code>; estes valores são automaticamente mapeados para o texto apropriado (maiúsculas e minúsculas não são diferenciadas).</dd> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>Este é um atributo não padronizado usado pelo iOS Safari Mobile que controla se e como o texto deveria ser automaticamente capitalizado conforme o usuário insere/edita. Os valores não obsoletos estão disponíveis no iOS 5 e posteriores. Os valores possíveis são: + <ul> + <li><code>none</code>: Desabilitar completamente a capitalização automática.</li> + <li><code>sentences</code>: Capitalizar automaticamente a primeira letra das frases.</li> + <li><code>words</code>: Capitalizar automaticamente a primeira letra das palavras.</li> + <li><code>characters</code>: Capitalizar automaticamente todas as letras.</li> + <li><code>on</code>: {{deprecated_inline()}} Obsoleto desde o iOS 5.</li> + <li><code>off</code>: {{deprecated_inline()}} Obsoleto desde o iOS 5.</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo indica se o valor do controle pode ser completado automaticamente pelo navegador. Este atributo é ignorado se o valor do atributo <strong>type</strong> é <code>hidden</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code> ou um tipo de botão (<code>button</code>, <code>submit</code>, <code>reset</code>, <code>image</code>). Os valores possíveis são: + <ul> + <li><code>off</code>: O usuário deve inserir explicitamente um valor neste campo a cada uso, ou o documento implementa seu próprio método de autocompletar; o navegador não completa a entrada automaticamente.</li> + <li><code>on</code>: O navegador pode completar automaticamente o valor baseado em valores que o usuário inseriu no passado.</li> + </ul> + + <p>Se o atributo <strong>autocomplete</strong> não está especificado num elemento <code><input></code>, o navegador usa o valor do atributo <strong>autocomplete</strong> do formulário dono do <code><input></code>. O formulário dono deste <code><input></code> é o elemento <code><form></code> que contém este <code><input></code> ou o elemento <code><form></code> cujo <strong>id</strong> é referenciado pelo atributo <strong>form</strong> do elemento <code><input></code>. Para mais informações, veja o atributo {{htmlattrxref("autocomplete", "form")}} no elemento {{HTMLElement("form")}}.</p> + + <p>O atributo <strong>autocomplete</strong> também controla se o Firefox vai, ao contrário de outros navegadores, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persistir o estado dinâmico de desabilitado e marcado (se aplicável)</a> de um {{HTMLElement("input")}} entre carregamentos de página. A funcionalidade de persistir é habilitada por padrão. Definir o valor do atributo <strong>autocomplete</strong> para <code>off</code> desabilita esta funcionalidade; isto funciona mesmo quando o atributo <strong>autocomplete</strong> não se aplica ao {{HTMLElement("input")}} por causa de seu <strong>type</strong>. Veja {{bug(654072)}}.</p> + </dd> + <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt> + <dd>Este é um atributo não padronizado suportado pelo Safari que é usado para controle se a correção automática deveria ser habilitada quando o usuário entra/edita o texto do {{HTMLElement("input")}}. Os valores possíveis são: + <ul> + <li><code>on</code>: Habilita correção automática</li> + <li><code>off</code>: Desabilita correção automática</li> + </ul> + </dd> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo booleano permite que você especifique que um controle de formulário deve ter o foco de entrada de dados assim que a página carrega, a não ser que o usuário sobrescreva este comportamento digitando em um controle diferente, por exemplo. Apenas um elemento de formulário em um documento pode ter o atributo <strong>autofocus</strong>, que é booleano. Este atributo não pode ser aplicado se o atributo <strong>type</strong> estiver definido como <code>hidden</code> (isto é, você não pode colocar automaticamente o foco em um controle escondido).</dd> + <dt>{{htmlattrdef("autosave")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo deve ser definido com um valor único. Se o valor do atributo <strong>type</strong> for <code>search</code>, termos de busca anteriores serão persistidos no menu entre carregamentos de página.</dd> + <dt>{{htmlattrdef("checked")}}</dt> + <dd> + <p>Quando o valor do atributo <strong>type</strong> é <code>radio</code> ou <code>checkbox</code>, a presença deste atributo booleano indica que o controle é selecionado por padrão; caso contrário, este atributo é ignorado.</p> + + <p>O Firefox vai, por padrão, ao contrário de outros navegadores, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persistir o estado dinâmico de marcado</a> de um {{HTMLElement("input")}} entre carregamentos de página. Use o atributo {{htmlattrxref("autocomplete","input")}} para controlar esta funcionalidade.</p> + </dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>Este atributo booleano indica que o controle de formulário não está disponível para interação. Em particular o evento <code>click</code> <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">não será disparado</a> em controles desabilitados. Além disso, o valor de um controle desabilitado não é enviado com o formulário.</p> + + <p>O Firefox vai, por padrão, ao contrário de outros navegadores, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persistir o estado dinâmico de desabilitado</a> de um {{HTMLElement("input")}} entre carregamentos de página. Use o atributo {{htmlattrxref("autocomplete","input")}} para controlar esta funcionalidade.</p> + </dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt> + <dd>O elemento <code><form></code> ao qual o elemento <code><input></code> está associado (seu <em>formulário dono</em>). O valor do atributo deve ser um <strong>id</strong> de um elemento {{HTMLElement("form")}}. Este atributo permite que você coloque elementos <code><input></code> em qualquer lugar num documento, não apenas como descendentes de seus elementos <code><form></code>. Um <code><input></code> só pode estar associado a um único formulário.</dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt> + <dd>A URI de um programa que processa a informação enviada pelo elemento, se ele for um botão ou uma imagem de envio de formulário. Se especificado, ele sobrescreve o atributo {{htmlattrxref("action","form")}} do formulário dono do elemento.</dd> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt> + <dd>Se o elemento for um botão ou uma imagem de envio de formulário, este atributo especifica o tipo de conteúdo que deve ser usado para enviar o formulário para o servidor. Os valores possíveis são: + <ul> + <li><code>application/x-www-form-urlencoded</code>: O valor padrão se o atributo não for especificado.</li> + <li><code>multipart/form-data</code>: Use este valor se você estiver usando um elemento {{HTMLElement("input")}} com o atributo {{htmlattrxref("type","input")}} definido como <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>Se este atributo for especificado, ele sobrescreve o atributo {{htmlattrxref("enctype","form")}} do formulário dono do elemento.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt> + <dd>Se o elemento for um botão ou uma imagem de envio de formulário, este atributo especifica o método HTTP que o navegador deve usar para enviar o formulário. Os valores possíveis são: + <ul> + <li><code>post</code>: Os dados do formulário são incluídos no corpo do formulário e enviados para o servidor.</li> + <li><code>get</code>: Os dados do formulário são acrescentados ao URI do atributo <strong>form</strong>, com um '?' como separador, e o URI resultante é enviado ao servidor. Use este método quando o formulário não tem efeitos colaterais e contém somente caracteres ASCII.</li> + </ul> + + <p>Se especificado, este atributo sobrescreve o atributo {{htmlattrxref("method","form")}} do formulário dono do elemento.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt> + <dd>Se o elemento for um botão ou uma imagem de envio de formulário, este atributo booleano especifica que o formulário não deve ser validado quando enviado. Se especificado, este atributo sobrescreve o atributo {{htmlattrxref("novalidate","form")}} do formulário dono do elemento.</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt> + <dd>Se o elemento for um botão ou uma imagem de envio de formulário, este atributo é um nome ou palavra-chave indicando onde mostrar a resposta recebida após a submissão do formulário. Este é o nome de, ou palavra-chave para, um <em>contexto de navegação</em> (por exemplo aba, janela ou frame inline). Se especificado, este atributo sobrescreve o atributo {{htmlattrxref("target", "form")}} do formulário dono do elemento. As seguintes palavras-chave têm significado especial: + <ul> + <li>_<code>self</code>: Carrega a resposta nom mesmo contexto de navegação que o atual. Este é o valor padrão se o atributo não for especificado.</li> + <li><code>_blank</code>: Carrega a resposta num novo contexto de navegação anônimo.</li> + <li><code>_parent</code>: Carrega a resposta no contexto de navegação pai do atual. Se não houver pai, esta opção tem o mesmo comportamento de <code>_self</code>.</li> + <li><code>_top</code>: Carrega a resposta no contexto de navegação raiz (isto é, o contexto de navegação que é ancestral do atual e não tem pai). Se não houver pai, esta opção tem o mesmo comportamento de <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt> + <dd>Se o valor do atributo <strong>type</strong> for <code>image</code>, este atributo define a altura da imagem mostrada para o botão.</dd> + <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt> + <dd>Este é um atributo não padronizado suportado pelo Safari que é aplicado somente quando o <strong>type</strong> é <code>search</code>. Se o atributo estiver presente, independentemente do valor que ele tiver, o {{HTMLElement("input")}} dispara eventos <a href="/pt-BR/docs/Web/Events/search"><code>search</code></a> conforme o usuário edita o texto do campo. Este evento somente é disparado um tempo após a última tecla ter sido pressionada; este tempo é definido pela implementação e novas digitações zeram o contador de tempo. Em outras palavras, o disparo do evento é filtrado (<em>debounced</em>). Se o atributo não estiver presente, o evento <a href="/pt-BR/docs/Web/Events/search"><code>search</code></a> só é disparado quando o usuário iniciar explicitamente uma busca (por exemplo, pressionando a tecla Enter enquanto estiver no campo).</dd> + <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt> + <dd>Uma dica para o navegador de qual teclado deve ser mostrado. Este atributo se aplica quando o valor do atributo <strong>type</strong> é <code>text</code>, <code>password</code>, <code>email</code> ou <code>url</code>. Os valores possíveis são: + <ul> + <li><code>verbatim</code>: Conteúdo alfanumérico que não seja prosa, como nomes de usuário e senhas.</li> + <li><code>latin</code>: Conteúdo no alfabeto latino na língua preferida do usuário, com auxílios de entrada como predição de texto habilitados. Para interações humano-computador como caixas de busca.</li> + <li><code>latin-name</code>: Como <em>latin</em>, mas para nomes humanos.</li> + <li><code>latin-prose</code>: Como <em>latin</em>, mas com auxílios de entrada mais agressivos. Para comunicações entre humanos como mensagens instantâneas ou email.</li> + <li><code>full-width-latin</code>: Como <em>latin-prose</em>, mas para as línguas secundárias do usuário.</li> + <li><code>kana</code>: Entrada em kana ou romaji, tipicamente hiragana, usando caracteres de largura total, com suporte à conversão para kanji. Para entrada de texto em língua japonesa.</li> + <li><code>katakana</code>: Entrada em katakana, usando caracteres de largura total, com suporte à conversão para kanji. Para entrada de texto em língua japonesa.</li> + <li><code>numeric</code>: Entrada numérica, incluindo teclas para os dígitos de 0 a 9, o caractere separador de milhar preferido pelo usuário e o caractere para indicar números negativos. Para códigos numéricos como números de cartão de crédito. Para números de verdade, prefira usar <code><input type="number"></code></li> + <li><code>tel</code>: Entrada de números de telefone, incluindo as teclas asterisco e cerquilha. Use <code><input type="tel"></code> se possível em vez disso.</li> + <li><code>email</code>: Entrada de email. Use <code><input type="email"></code> se possível em vez disso.</li> + <li><code>url</code>: Entrada de URLs. Use <code><input type="url"></code> se possível em vez disso.</li> + </ul> + </dd> + <dt>{{htmlattrdef("list")}} {{HTMLVersionInline("5")}}</dt> + <dd>Identifica uma lista de opções pré-definidas de sugestões para o usuário. O valor deve ser o <strong>id</strong> de um elemento {{HTMLElement("datalist")}} no mesmo documento. O navegador mostrará apenas opções que são valores válidos para este elemento. Este atributo é ignorado quando o valor do atributo <strong>type</strong> é <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code> ou um tipo de botão.</dd> + <dt>{{htmlattrdef("max")}} {{HTMLVersionInline("5")}}</dt> + <dd>O valor máximo (numérico ou data) para este item, que não deve ser menor que seu valor mínimo (atributo <strong>min</strong>).</dd> + <dt>{{htmlattrdef("maxlength")}}</dt> + <dd>Se o valor do atributo <strong>type</strong> for <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code> ou <code>url</code>, este atributo especifica o número máximo de caracteres (em pontos de código Unicode) que o usuário pode inserir; para outros tipos de controle, este atributo é ignorado. Seu valor pode exceder o do atributo <strong>size</strong>. Se não for especificado, o usuário pode inserir uma quantidade ilimitada de caracteres. Especificar um valor negativo resulta no comportamento padrão, isto é, o usuário vai poder inserir um número ilimitado de caracteres. Esta regra só é validada quando o valor do atributo é modificado.</dd> + <dt>{{htmlattrdef("min")}} {{HTMLVersionInline("5")}}</dt> + <dd>O valor mínimo (númerico ou data) para este item, que não deve ser maior do que seu máximo (atributo <strong>max</strong>).</dd> + <dt>{{htmlattrdef("minlength")}} {{HTMLVersionInline("5")}}</dt> + <dd>Se o valor do atributo <strong>type</strong> for <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code> ou <code>url</code>, este atributo especifica o número mínimo de caracteres (em pontos de código Unicode) que o usuário pode inserir; para outros tipos de controle, este atributo é ignorado.</dd> + <dt>{{htmlattrdef("multiple")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo booleano indica se o usuário pode inserir mais de um valor. Ele é aplicado quando o atributo <strong>type</strong> está definido como <code>email</code> ou <code>file</code>; em outros casos, é ignorado.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>O nome do controle, que é enviado junto com os dados do formulário.</dd> + <dt>{{htmlattrdef("pattern")}} {{HTMLVersionInline("5")}}</dt> + <dd>Uma expressão regular usada para validar o valor do controle. O padrão deve casar com o valor completo da entrada, não apenas uma parte. Use o atributo <strong>title</strong> para descrever o padrão para ajudar o usuário. Este atributo é aplicado quando o valor do atributo <strong>type</strong> é <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> ou <code>email</code>; caso contrário ele é ignorado. A linguagem da expressão regular é a mesma do JavaScript. O padrão não deve estar entre barras.</dd> + <dt>{{htmlattrdef("placeholder")}} {{HTMLVersionInline("5")}}</dt> + <dd>Uma dica para o usuário do que ele pode inserir no controle. O texto do atributo não deve conter quebras de linha. Este atributo é aplicado quando o valor do atributo <strong>type</strong> é <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> ou <code>email</code>; caso contrário, ele é ignorado. + <div class="note"><strong>Nota:</strong> Não use o atributo <code>placeholder</code> no lugar de um elemento {{HTMLElement("label")}}. Os propósitos de cada um são diferentes: o atributo {{HTMLElement("label")}} descreve o papel o elemento do formulário, isto é, ele indica que tipo de informação é esperada. Já o atributo <code>placeholder</code> é uma dica sobre o formato que o conteúdo deveria ter. Há casos em que o atributo <code>placeholder</code> nunca é exibido para o usuário, portanto o formulário deve ser inteligível sem ele.</div> + </dd> + <dt>{{htmlattrdef("readonly")}}</dt> + <dd>Este atributo booleano indica que o usuário não pode modificar o valor do controle. + <p>{{HTMLVersionInline("5")}} Este atributo é ignorado se o valor do atributo <strong>type</strong> for <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code> ou um tipo de botão.</p> + </dd> + <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo especifica que o usuário deve preencher o campo com um valor antes de enviar o formulário. Ele não pode ser usado quando o atributo <strong>type</strong> está definido como <code>hidden</code>, <code>image</code> ou um tipo de botão (<code>submit</code>, <code>reset</code> ou <code>button</code>). As pseudoclasses CSS {{cssxref(":optional")}} e {{cssxref(":required")}} serão aplicadas ao campo como for apropriado.</dd> + <dt>{{htmlattrdef("selectionDirection")}} {{HTMLVersionInline("5")}}</dt> + <dd>A direção na qual a seleção ocorreu. Vale <code>forward</code> se a seleção foi feita no mesmo sentido da escrita do idioma usado ou <code>backward</code> se a seleção foi feita na direção oposta. Pode ainda ser <code>none</code> se a direção da seleção não for conhecida.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>O tamanho inicial do controle. Este valor é em pixels a não ser que o valor do atributo <strong>type</strong> seja <code>text</code> ou <code>password</code>. Neste caso, este valor é um número inteiro de caracteres. A partir do HTML5, este atributo é aplicado apenas quando o atributo <strong>type</strong> está definido como <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code> ou <code>password</code>; caso contrário, ele é ignorado. Além disso, o tamanho deve ser maior que zero. Se você não especificar um tamanho, o valor padrão 20 é usado.</dd> + <dt>{{htmlattrdef("spellcheck")}} {{HTMLVersionInline("5")}}</dt> + <dd>Definir o valor deste atributo como <code>true</code> indica que o elemento deve passar por um corretor ortográfico e gramatical. O valor <code>default</code> indica que o elemento deve agir de acordo com seu comportamento padrão, possivelmente baseado no valor do atributo <code>spellcheck</code> de seu elemento pai. O valor <code>false</code> indica que o elemento não deve ser verificado.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Se o valor do atributo <strong>type</strong> for <code>image</code>, este atributo especifica uma URI para a localização de uma imagem a ser exibida no botão gráfico; caso contrário, este atributo é ignorado.</dd> + <dt>{{htmlattrdef("step")}} {{HTMLVersionInline("5")}}</dt> + <dd>Trabalha junto com os atributos <strong>min</strong> e <strong>max</strong> para limitar os incrementos em que valores numéricos ou datas podem ser alterados. Seu valor pode ser <code>any</code> ou um número de ponto flutuante positivo. Se o valor não for <code>any</code>, o controle aceita somente valores múltiplos valor do incremento maiores que o mínimo.</dd> + <dt>{{htmlattrdef("tabindex")}} element-specific in {{HTMLVersionInline(4)}}, global in {{HTMLVersionInline("5")}}</dt> + <dd>A posição do elemento na ordem de navegação pela tecla Tab no documento atual.</dd> + <dt>{{htmlattrdef("usemap")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>O nome de um elemento {{HTMLElement("map")}} para ser usado como um mapa de imagem.</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>O valor inicial do controle. Este atributo é opcional exceto quando o valor do atributo <strong>type</strong> for <code>radio</code> ou <code>checkbox</code>.<br> + Note que, quando a página é recarregada, Gecko and IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">ignorarão o valor especificado no código HTML</a> se o valor tiver sido alterado antes do recarregamento.</dd> + <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt> + <dd>Se o valor do atributo <strong>type</strong> for <code>image</code>, este atributo define a largura da imagem exibida para o botão.</dd> + <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt> + <dd>Essa extensão da Mozilla permite que você especifique a mensagem de erro a ser exibida quando um campo não valida com sucesso.</dd> +</dl> + +<h2 id="Notas">Notas</h2> + +<h3 id="Entradas_de_arquivo">Entradas de arquivo</h3> + +<div class="note"> +<p><strong>Nota:</strong> a partir do {{Gecko("2.0")}}, chamar o método <code>click()</code> num elemento {{HTMLElement("input")}} do tipo <code>file</code> abre o seletor de arquivos e permite que o usuário selecione arquivos. Veja <a href="/pt-BR/docs/Usando_arquivos_a_partir_de_aplicações_web">Usando arquivos a partir de aplicações web</a> para um exemplo e mais detalhes.</p> +</div> + +<p>Você não pode definir o valor de um seletor de arquivos a partir de um script; fazer algo como o seguinte não tem efeito:</p> + +<pre class="brush: js">var e = getElementById("algumaEntradaDeArquivo"); +e.value = "foo"; +</pre> + +<h3 id="Mensagens_de_erro">Mensagens de erro</h3> + +<p>Se você quiser que o Firefox mostre uma mensagem de erro personalizada quando a validação de um campo falha, você pode usar o atributo <code>x-moz-errormessage</code> para isso:</p> + +<pre class="brush: html"><input type="email" x-moz-errormessage="Por favor, especifique um endereço de e-mail."> +</pre> + +<p>Note, no entanto, que isso não é padronizado e não terá efeito em outros navegadores.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Uma_caixa_de_entrada_simples">Uma caixa de entrada simples</h3> + +<pre class="brush: html"><!-- Um campo básico --> +<input type="text" name="input" value="Digite aqui"> +</pre> + +<p><input><img alt="" class="ife_marker" id="input_ife_marker_0" style="border: 0pt none; cursor: pointer; display: inline; height: 19px; width: 14px;" title="O tamanho máximo do campo é desconhecido"></p> + +<h3 id="Um_caso_de_uso_comum">Um caso de uso comum</h3> + +<pre class="brush: html"><!-- Um formulário comum que inclui tags input --> +<form action="getform.php" method="get"> + Nome: <input type="text" name="nome" /><br /> + Sobrenome: <input type="text" name="sobrenome" /><br /> + E-mail: <input type="email" name="email_usuario" /><br /> +<input type="submit" value="Enviar" /> +</form> +</pre> + +<h3 id="Usando_o_mozactionhint_no_Firefox_mobile">Usando o mozactionhint no Firefox mobile</h3> + +<p>Você pode usar o atributo {{htmlattrxref("mozactionhint", "input")}} para especificar o texto para o rótulo da tecla Enter no teclado virtual quando seu formulário é exibido no Firefox mobile. Por exemplo, para ter um rótulo "Próximo", você pode fazer o seguinte:</p> + +<pre class="brush: html"><input type="text" mozactionhint="next" name="sometext" /> +</pre> + +<p>O resultado é:</p> + +<p><a href="/@api/deki/files/4970/=mozactionhint.png"><img alt="mozactionhint.png" class="default internal" src="/@api/deki/files/4970/=mozactionhint.png?size=webview" style="border: 1px solid black; height: 350px; width: 210px;"></a></p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentários</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2 ou anterior</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=button</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>3</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}<br> + {{CompatGeckoDesktop("1.9.2")}} para o valor <code>indeterminate</code></td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=color</td> + <td>21.0</td> + <td> + <p>{{CompatGeckoDesktop("29.0")}} (ainda não suportado no Windows Touch)</p> + </td> + <td>{{CompatNo}}</td> + <td>11.01</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>type=date</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (reconhecido mas sem interface)</td> + </tr> + <tr> + <td>type=datetime</td> + <td> + <p>{{CompatNo}}<br> + (reconhecido mas sem interface)</p> + </td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (reconhecido mas sem interface)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=datetime-local</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (reconhecido mas sem interface)</td> + </tr> + <tr> + <td>type=email</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=file</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>3.02</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=hidden</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=image</td> + <td>1.0</td> + <td>Gecko 2.0 envia apenas as coordenadas x e y quando clicado, não mais o nome/valor do elemento</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=month</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("446510")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (reconhecido mas sem interface)</td> + </tr> + <tr> + <td>type=number</td> + <td>6.0 (Localização no Chrome 11)</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>10<br> + (reconhecido mas sem interface)</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=password</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=radio</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}<br> + {{CompatGeckoDesktop("1.9.2")}} para o valor <code>indeterminate</code></td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=range</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("23.0")}}</td> + <td>10</td> + <td>10.62 (11.01 adicionou suporte a um valor padrão)</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=reset</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=search</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=submit</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=tel</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=text</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=time</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (reconhecido mas sem interface)</td> + </tr> + <tr> + <td>type=url</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=week</td> + <td>5.0</td> + <td>{{CompatNo}}<br> + {{unimplemented_inline("825294")}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}} (reconhecido mas sem interface)</td> + </tr> + <tr> + <td> + <p>accept=[extensão de arquivo]</p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td> + <p>accept=[tipo MIME]</p> + </td> + <td>8.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>10</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=audio/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + Filtros para as seguintes extensões de arquivos de áudio: .aac, .aif, .flac, .iff, .m4a, .m4b, .mid, .midi, .mp3, .mpa, .mpc, .oga, .ogg, .ra, .ram, .snd, .wav, .wma</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=video/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + Filtros para as seguintes extensões de arquivos de vídeo: .avi, .divx, .flv, .m4v, .mkv, .mov, .mp4, .mpeg, .mpg, .ogm, .ogv, .ogx, .rm, .rmvb, .smil, .webm, .wmv, .xvid</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=image/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<br> + Filtros para as seguintes extensões de arquivos de imagem: .jpe, .jpg, .jpeg, .gif, .png, .bmp, .ico, .svg, .svgz, .tif, .tiff, .ai, .drw, .pct, .psp, .xcf, .psd, .raw</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accesskey</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>6</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>mozactionhint</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>autocomplete</td> + <td>17.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>5</td> + <td>9.6</td> + <td>5.2</td> + </tr> + <tr> + <td>autofocus</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>5.0</td> + </tr> + <tr> + <td>checked</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>disabled</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>6</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>form</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formaction</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>formenctype</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formmethod</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>formnovalidate</td> + <td>5.0 (na versão 6.0 só funcionava com o DOCTYPE HTML5, suporte a validação foi desabilitado na versão 7.0 e reabilitado na versão 10.0)</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formtarget</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>height</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>incremental</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>inputmode</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>list</td> + <td>20.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>max</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>maxlength</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>min</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>minlength</td> + <td>40.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>multiple</td> + <td>1.0 (suportado para os tipos file e email a partir de 5.0)</td> + <td>{{CompatGeckoDesktop("1.9.2")}} para <strong>type</strong>=file<br> + {{CompatVersionUnknown}} para <strong>type</strong>=email</td> + <td>10</td> + <td>1.0 (10.62 com suporte para type=file e a partir de 11.01 type=email)</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>name</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>pattern</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>placeholder</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.00</td> + <td>5.0</td> + </tr> + <tr> + <td>readonly</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>6 (ausente para <strong>type</strong> <code>checkbox</code>, <code>radio</code>)</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>required</td> + <td>5.0 (suporte ao elemento select a partir da versão 10)</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>size</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>spellcheck</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>10</td> + <td>11.0</td> + <td>4.0</td> + </tr> + <tr> + <td>src</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>step</td> + <td>6.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>tabindex</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>6 (elementos com tabindex > 0 não são navegados)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>width</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=button</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=color</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=date</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>type=datetime</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=datetime-local</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=email</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.1 (sem validação mas com teclado específico)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=file</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=hidden</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=image</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=month</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=number</td> + <td>2.3 (sem validação mas com teclado específico)</td> + <td>{{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0 (sem validação mas com teclado específico)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=password</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=radio</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=range</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.0</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=reset</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=search</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>4.0</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=submit</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=tel</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>3.1</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=text</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=time</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=url</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>3.1 (sem validação mas com teclado específico)</td> + </tr> + <tr> + <td style="white-space: nowrap;">type=week</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>accept=[tipo MIME]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=audio/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=image/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=video/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accesskey</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>autocomplete</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>autofocus</td> + <td>3.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>checked</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>disabled</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>form</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formaction</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>formenctype</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formmethod</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>formnovalidate</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formtarget</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>height</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>list</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>max</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}} (interface pode ficar não implementada)</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>maxlength</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>min</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}} (interface pode ficar não implementada)</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>minlength</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>multiple</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>name</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + <tr> + <td>pattern</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>placeholder</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.10</td> + <td>4</td> + </tr> + <tr> + <td>readonly</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>required</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>size</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>spellcheck</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>src</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>step</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}} (interface pode ficar não implementada)</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>tabindex</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>width</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1]: <a href="http://blog.uploadcare.com/post/97884147203/you-cannot-upload-files-to-a-server-using-mobile-safari">Envio de arquivos não funcionava</a> no Safari Mobile para iOS 8.0 e 8.0.1. O bug foi corrigido no iOs 8.0.2.</p> + +<p>Safari Mobile para iOS aplica um estilo padrão de <code>{{cssxref("opacity")}}: 0.4</code> para elementos textuais desabilitados. Outros navegadores principais não usam esse estilo padrão específico atualmente.</p> + +<p>No Safari Mobile para iOS, definir <code>{{cssxref("display")}}: block</code> num {{HTMLElement("input")}} com <code>type="date"</code>, <code>type="time"</code>, <code>type="datetime-local"</code> ou <code>type="month"</code> faz com que o texto dentro do {{HTMLElement("input")}} fique verticalmente desalinhado.</p> + +<p>A partir do Chrome v39, um <code><input type="date"></code> estilizado com <code>{{cssxref("display")}}: table-cell; {{cssxref("width")}}: 100%;</code> terá um {{cssxref("min-width")}} imposto pelo Chrome e não poderá ficar mais estreito do que essa largura mínima. <a href="https://code.google.com/p/chromium/issues/detail?id=346051">Veja o bug do Chromium #346051.</a></p> + +<h3 id="Notas_do_Gecko">Notas do Gecko</h3> + +<p>O Firefox vai, por padrão, ao contrário de outros navegadores, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persistir o estado dinâmico de desabilitado e (se aplicável) checado</a> de um {{HTMLElement("input")}} entre carregamentos de página. Definir o valor do atributo {{htmlattrxref("autocomplete","input")}} como <code>off</code> desabilita essa funcionalidade; isso funciona mesmo quando o atributo {{htmlattrxref("autocomplete","input")}} não seria aplicado normalmente ao {{HTMLElement("input")}} por causa de seu {{htmlattrxref("type","input")}}. Veja {{bug(654072)}}.</p> + +<p>A partir do Gecko 9.0 {{geckoRelease("9.0")}}, o Firefox para Android permite aos usuários capturar imagens usando suas câmeras e enviá-las, sem a necessidade de sair do navegador. Desenvolvedores web podem implementar essa funcionalidade simplesmente especificando o valor do atributo <code>accept</code> para "image/*" nos seus campos <code>file</code> desta forma:</p> + +<p><code><input type="file" accept="image/*"></code></p> + +<p>Firefox para Android define uma {{ cssxref("background-image") }} padrão gradiente em todos os campos com <code>type="text"</code>, <code>type="file"</code>, <code>type="button"</code> e <code>type="submit"</code>. Isso pode ser desabilitado usando <code>background-image: none</code>.</p> + +<p>Firefox para Android também define uma {{ cssxref("border") }} padrão em todos os elementos <code><input type="file"></code>.</p> + +<h4 id="Localização">Localização</h4> + +<p>Os valores permitidos para certos tipos de <code><input></code> dependem do locale. Em alguns locales, 1,000.00 é um número válido, enquanto que em outros a maneira correta de inserir este número é 1.000,00.</p> + +<p>Firefox usa as seguintes heurísticas para determinar o locale para validar a entrada do usuário (pelo menos para type="number"):</p> + +<ul> + <li>Tentar a língua especificada por um atributo 'lang'/'xml:lang' no elemento ou qualquer um de seus ancestrais;</li> + <li>Tentar a língua especificada por qualquer cabeçalho HTTP Content-Language ou</li> + <li>Se nenhum for especificado, usar o locale do navegador.</li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Outros elementos relacionados a formulários: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} e {{HTMLElement("meter")}}.</li> + <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/pt-br/web/html/element/input/password/index.html b/files/pt-br/web/html/element/input/password/index.html new file mode 100644 index 0000000000..7c19c04c22 --- /dev/null +++ b/files/pt-br/web/html/element/input/password/index.html @@ -0,0 +1,232 @@ +--- +title: <input type="password"> +slug: Web/HTML/Element/Input/password +tags: + - Formulário + - campo + - senha +translation_of: Web/HTML/Element/input/password +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Elementos <code><input></code> do tipo <strong><code>"password"</code></strong> são uma maneira do usuário digitar senhas com segurança.</span> O elemento é mostrado como um controle de edição de texto de uma linha, no qual o texto é omitido para que não possa ser lido, geralmente substituindo cada caractere por um símbolo como o astesrisco ("*") ou um ponto ("•"). Esse caracter varia dependendo do {{Glossary("agente de usuário")}} e do {{Glossary("OS")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-password.html", "tabbed-standard")}}</div> + +<p class="hidden">O código fonte desse exemplo interativo está armazenado em um repositóriodo GitHub. Se deseja contribuir com o projeto de exemplos interativos, faça um clone de <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos mande uma pull request.</p> + +<p>Os detalhes de como o processo de inserção do texto funciona podem variar dependendo do navegador. Dispositivos móveis, por exemplo, frequentemente mostram o caractere digitado por um breve momento antes de ser ocultado, de forma que o usuário possa verificar se realmente digitou o caractere pretendido. Isso é útil devido ao tamanho reduzido das teclas e a facilidade de se pressionar a tecla errada, principalmente em teclados virtuais.</p> + +<div class="note"> +<p>Todo formulário que envolve informações sensíveis tais como senhas (ex.: formulários de login) deve ser servido usando HTTPS. Vários navegadores implementam mecanismos que avisam sobre formulários não protegidos - veja <a href="/pt-BR/docs/Security/SenhasNãoProtegidas">Senhas não Protegidas</a>.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Uma {{domxref("DOMString")}} representando uma senha, ou vazia</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{event("change")}} e {{event("input")}}</td> + </tr> + <tr> + <td><strong>Atributos comuns suportados</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("inputmode", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}}, e {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>Atributos IDL </strong></td> + <td><code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code>, e <code>value</code></td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, e {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Valor">Valor</h2> + +<p>O atributo {{htmlattrxref("value", "input")}} contém uma {{domxref("DOMString")}} cujo valor é o conteúdo atual do controle de edição de texto usado para a inserção da senha. Se o usuário ainda não digitou nada, esse valor é uma string vazia (<code>""</code>). Se a propriedade {{htmlattrxref("required")}} for especificada, então a caixa de edição de senha precisa conter um valor que não seja uma string vazia para ser válida.</p> + +<p>Se o atributo {{htmlattrxref("pattern", "input")}} for especificado, o conteúdo de um controle <code>"password"</code> só é considerado válido se o valor passar na validação; veja {{anch("Validação")}} para mais informações.</p> + +<div class="note"> +<p>Os caracteres de quebra de linha <em>line feed</em> (U+000A) e <em>carriage return</em> (U+000D) não são permitidos em valores de <code>"password"</code>. Quando o valor de um campo de senha é definido, os caracteres acima são removidos do valor. </p> +</div> + +<h2 id="Usando_campos_de_senha">Usando campos de senha</h2> + +<p>Caixas de inserção de senha funcionam assim como outras caixas de inserção de texto; a principal diferença é que o conteúdo é ocultado para impedir que pessoas que estejam próximas ao usuário leiam a senha.</p> + +<h3 id="Um_campo_de_senha_simples">Um campo de senha simples</h3> + +<p>Aqui vemos o mais básico dos campos de senha, juntamente com um rótulo para ele usando o elemento {{HTMLElement("label")}}.</p> + +<pre class="brush: html"><label for="senhaUsuario">Senha: </label> +<input id="senhaUsuario" type="password"></pre> + +<p>{{EmbedLiveSample("A_simple_password_input", 600, 40)}}</p> + +<h3 id="Permitindo_preenchimento_automático">Permitindo preenchimento automático</h3> + +<p>Para permitir que o gerenciador de senhas do usuário digite a senha automaticamente, especifique o atributo {{htmlattrxref("autocomplete", "input")}}. Para senhas, o valor dele deve ser geralmente um dos seguintes:</p> + +<dl> + <dt><code>"on"</code></dt> + <dd>Permite que o navegador ou um gerenciador de senhas preencha automaticamente o campo de senha. Esse valor não é tão informativo quanto <code>"current-password"</code> ou <code>"new-password"</code>.</dd> + <dt><code>"off"</code></dt> + <dd>Não permite que o navegador ou gerenciador de senhas preencha automaticamente o campo de senha. Vale observar que alguns softwares ignoram esse valor, já que ele costuma ser prejudicial para a capacidade dos usuários de manter senhas seguras.</dd> + <dt><code>"current-password"</code></dt> + <dd>Permite que o navegador ou gerenciador de senhas preencha automaticamente o campo de senha. Esse valor fornece mais informações do que <code>"on"</code>, já que ele permite que o navegador ou gerenciador de senhas digite automaticamente a senha atualmente conhecida do site no campo, mas não que sugira uma nova.</dd> + <dt><code>"new-password"</code></dt> + <dd>Permite que o navegador ou gerenciador de senhas digite automaticamente uma nova senha para o site. Esse valor é usado em formulários de "mudar senha" e de "novo usuário", no campo que pede por uma nova senha. A nova senha pode ser gerada de várias maneiras, dependendo do gerenciador de senhas usado. Ele pode simplificar o preenchimento de uma sugestão de nova senha, ou mesmo pode mostrar ao usuário uma interface para criar uma.</dd> +</dl> + +<div id="Autocomplete_sample1"> +<pre class="brush: html"><label for="senhaUsuario">Senha:</label> +<input id="senhaUsuario" type="password" autocomplete="current-password"></pre> +</div> + +<p>{{EmbedLiveSample("Autocomplete_sample1", 600, 40)}}</p> + +<h3 id="Tornando_a_senha_obrigatória">Tornando a senha obrigatória</h3> + +<p>Para dizer ao navegador do usuário que o campo de senha precisa ter um valor válido antes do formulário ser enviado, basta adicionar o atributo booleano {{htmlattrxref("required", "input")}}.</p> + +<pre class="brush: html"><label for="senhaUsuario">Senha: </label> +<input id="senhaUsuario" type="password" required> +<input type="submit" value="Enviar"></pre> + +<p>{{EmbedLiveSample("Making_the_password_mandatory", 600, 40)}}</p> + +<h3 id="Especificando_um_modo_de_inserção">Especificando um modo de inserção</h3> + +<p>Se as suas regras de sintaxe recomendadas (ou obrigatórias) para a senha poderiam obter vantagem de uma interface de digitação diferente da de um teclado padrão, você pode usar o atributo {{htmlattrxref("inputmode", "input")}} para pedir por uma interface específica. O caso de uso mais óbvio para isso é o de a senha precisar ser numérica (como um PIN). Dispositivos móveis com teclados virtuais, por exemplo, podem optar por mostrar um teclado numérico ao invés de um teclado completo, facilitando a digitação da senha.</p> + +<pre class="brush: html"><label for="pin">PIN: </label> +<input id="pin" type="password" inputmode="numeric"></pre> + +<p>{{EmbedLiveSample("Specifying_an_input_mode", 600, 40)}}</p> + +<h3 id="Definindo_restrições_de_tamanho">Definindo restrições de tamanho</h3> + +<p>Como de praxe, você pode usar os atributos {{htmlattrxref("minlength", "input")}} e {{htmlattrxref("maxlength", "input")}} para estabelecer os tamanhos mínimo e máximo aceitáveis para a senha. Este exemplo continua o anterior, agora especificando que o PIN do usuário deva ter pelo menos quatro dígitos e não passe de oito dígitos. O atributo {{htmlattrxref("size", "input")}} é usado para garantir que o campo de senha aceite no máximo oito caracteres.</p> + +<pre class="brush: html"><label for="pin">PIN:</label> +<input id="pin" type="password" inputmode="numeric" minlength="4" + maxlength="8" size="8"></pre> + +<p>{{EmbedLiveSample("Setting_length_requirements", 600, 40)}}</p> + +<h3 id="Selecionando_o_texto">Selecionando o texto</h3> + +<p>Assim como em outros tipos de campos de texto, você pode usar o método {{domxref("HTMLInputElement.select", "select()")}} para selecionar todo o texto no campo de senha.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><label for="senhaUsuario">Senha: </label> +<input id="senhaUsuario" type="password" size="12"> +<button id="selecionarTudo">Selecionar tudo</button> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">document.getElementById("selecionarTudo").onclick = function() { + document.getElementById("senhaUsuario").select(); +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Selecting_text", 600, 40)}}</p> + +<p>Você também pode usar {{domxref("HTMLInputElement.selectionStart", "selectionStart")}} e {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}} para obter (ou definir) o intervalo dos caracteres no campo que estão selecionados no momento, e {{domxref("HTMLInputElement.selectionDirection", "selectionDirection")}} para saber em qual direção a seleção ocorreu (ou será estendida, dependendo da sua plataforma; veja a documentação dela para saber mais). Porém, como o texto está oculto, a utilidade desses métodos fica reduzida.</p> + +<h2 id="Validação">Validação</h2> + +<p>Se seu aplicativo tiver restrições de conjuntos de caracteres ou qualquer outro requisito para o conteúdo da senha digitada, você pode usar o atributo {{htmlattrxref("pattern", "input")}} para estabelecer que uma expressão regular seja usada para garantir automaticamente que as senhas cumpram com esses requisitos.</p> + +<p>Neste exemplo, são válidos apenas valores consistindo de no mínimo quatro e no máximo oito dígitos hexadecimais.</p> + +<div id="Validation_sample1"> +<pre class="brush: html"><label for="hexId">Hex ID: </label> +<input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}" + title="Digite um ID consistindo de 4-8 dígitos hexadecimais"></pre> +</div> + +<p>{{EmbedLiveSample("Validation_sample1", 600, 40)}}</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>Esse atributo booleano indica que o campo de senha não está disponível para interação. Além disso, os valores dos campos marcados com ele não são enviados com o formulário.</p> + </dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Pedindo_por_um_CPF">Pedindo por um CPF</h3> + +<p>Este exemplo aceita apenas valores que correspondam ao formato de um <a href="https://pt.wikipedia.org/wiki/Cadastro_de_pessoas_f%C3%ADsicas#N%C3%BAmero_de_inscri%C3%A7%C3%A3o_no_CPF">Cadastro de Pessoa Física</a>. Este número, usado para fins de cobrança e identificação, segue o formato "123.456.789-09". </p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><label for="cpf">CPF:</label> +<input type="password" id="cpf" inputmode="number" minlength="11" maxlength="11" + pattern="^[0-9]{3}.?[0-9]{3}.?[0-9]{3}-?[0-9]{2}" + required autocomplete="off"> +<br> +<label for="cpf">Valor:</label> +<span id="atual"></span></pre> + +<p>Ele usa um padrão {{htmlattrxref("pattern", "input")}} que limita o valor digitado a strings que representem números de CPF no formato válido. O padrão aceita tanto valores separados por pontos (".") e hífen ("-") como apenas os números. </p> + +<p>O modo de inserção em {{htmlattrxref("inputmode", "input")}} está definido como <code>"number"</code> para indicar a dispositivos com teclados virtuais que eles devem mostrar um teclado numérico para uma digitação mais fácil. Os atributos {{htmlattrxref("minlength", "input")}} e {{htmlattrxref("maxlength", "input")}} foram definidos como 11 e 14, respectivamente, de forma a aceitar valores com no mínimo 11 e no máximo 14 caracteres (o primeiro para valores sem os caracteres separadores e o último para valores com esses caracteres). O atributo {{htmlattrxref("required", "input")}} é usado para indicar que este campo precisa ter um valor válido. Por fim, {{htmlattrxref("autocomplete", "input")}} foi definido como <code>"off"</code> para evitar que gerenciadores de senhas tentem usar ou definir o valor dele, já que ele não é nem mesmo uma senha.</p> + +<p>Obviamente, apenas essa expressão regular não garante um CPF realmente válido, já que a validação deste tipo de número exige cálculos adicionais. <a href="https://www.devmedia.com.br/validar-cpf-com-javascript/23916">Confira este artigo</a> para ver exatamente como garantir um número de CPF válido.</p> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p>A seguir temos um código simples para mostrar o CPF digitado na tela para que você possa vê-lo. É claro que isso vai contra o propósito de um campo de senha, mas ajuda na hora de experimentar o padrão <code>pattern</code>. </p> + +<pre class="brush: js">var cpf = document.getElementById("cpf"); +var atual = document.getElementById("atual"); + +cpf.oninput = function(event) { + atual.innerHTML = cpf.value; +}</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample("Requesting_a_Social_Security_number", 600, 60)}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#password-state-(type=password)', '<input type="password">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definição inicial</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'forms.html#password-state-(type=password)', '<input type="password">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + + + +<p>{{Compat("html.elements.input.input-password")}}</p> diff --git a/files/pt-br/web/html/element/input/range/index.html b/files/pt-br/web/html/element/input/range/index.html new file mode 100644 index 0000000000..659550ba6f --- /dev/null +++ b/files/pt-br/web/html/element/input/range/index.html @@ -0,0 +1,390 @@ +--- +title: <input type="range"> +slug: Web/HTML/Element/Input/range +translation_of: Web/HTML/Element/input/range +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} elementos do tipo <code><strong>"range"</strong></code> deixam o usuário especificar um valor numérico que não deve ser inferior a um determinado valor, e não mais do que um valor máximo especificado. O valor preciso, no entanto, não é considerado importante. Este geralmente é representado por um controle deslizante ou o mesmo tipo de controle de "number" input. </span>Como este tipo de elemento é impreciso, não deve ser usado a menos que o valor exato do controle não seja importante.</p> + +<div id="summary_sample1"> +<pre class="brush: html"><input type="range"></pre> +</div> + +<p>{{EmbedLiveSample("summary_sample1", 600, 40)}}</p> + +<p>Se o navegador do usuário não suportar o tipo <code>"range"</code>, este será tratado como um input do tipo <code><a href="/en-US/docs/Web/HTML/Element/input/text">"text"</a></code>.</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Uma {{domxref("DOMString")}} contendo a a string que representa o valor numérico escolhido; use {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} para pegar o valor como um {{jsxref("Number")}}.</td> + </tr> + <tr> + <td><strong>Events</strong></td> + <td>{{event("change")}} e {{event("input")}}</td> + </tr> + <tr> + <td><strong>Supported Common Attributes</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}}, e {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>list</code>, <code>value</code>, e <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>{{domxref("HTMLInputElement.stepDown", "stepDown()")}} e {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>O atributo {{htmlattrxref("value", "input")}} contém uma {{domxref("DOMString")}} que conte uma representação dos números selecionados em string. O valor nunca é uma string vazia (<code>""</code>). O valor padrão está entre o mínimo e o máximo especificados, a menos que o valor máximo seja menor que o mínimo, caso em que o padrão é definido como o atributo de valor mínimo. O algoritmo que determina o valor padrão é:</p> + +<pre class="brush: js">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min + : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre> + +<p>Se for feito uma tentativa para definir como máximo um valor inferior ao mínimo, então este é definido como mínimo. Da mesma forma, <span id="result_box" lang="pt"><span>uma tentativa de definir um valor maior do que o máximo sendo configurado então para o máximo.</span></span></p> + +<h2 id="Usando_range_inputs">Usando range inputs</h2> + +<p>Equanto o tipo <code>"number"</code> permite aos usuários inserir um número com restrições opcionais forçando-o a digitar um valor entre o valor mínimo e máximo, ele requer que digitem um valor específico. A input de tipo permite ao usuário que coloque um valor sem que preocupe ou precise saber o valor numério específico.</p> + +<p>Alguns exemplos de situações que este tipo são comumente usados são:</p> + +<ul> + <li>Controle de audio como volume, equilíbrio e ou controle de filtros.</li> + <li>Controle de configuração de cores como canais de cores, transparência, brilho, etc.</li> + <li>Controle de configuração de jogos, como dificuldade, distância de visibilidade, tamanho do mundo, entre outros.</li> + <li>Comprimento de senha gerada por gerenciadores de senha.</li> +</ul> + +<p>Como regra geral, se o usuário tiver maior probabilidade de se interessar por porcentagens entre distâncias mínimas e máximas do que por um número real, este tipo de input é um forte candidato. Por exemplo, no caso de um controle de volume estéreo, "colocar o controlador no meio" em vez de "definir o volume como 0.5".</p> + +<h3 id="Especificando_o_mínimo_e_o_máximo">Especificando o mínimo e o máximo</h3> + +<p>Por padrão, o mínimo é 0 e o máximo é 100. Se não é o que você precisa, voce pode facilmente especificar limites diferentes alterando os valores dos atributos {{htmlattrxref("min", "input")}} e/ou {{htmlattrxref("max", "input")}}. Este pode ser um valor inteiro.</p> + +<p>Por exemplo, para pedir ao usuário um valor entre -10 e 10, você pode usar:</p> + +<pre class="brush: html"><input type="range" min="-10" max="10"></pre> + +<p>{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}</p> + +<h3 id="Definindo_a_escala_entre_valores">Definindo a escala entre valores</h3> + +<p>Por padrão, a escala entre o mínimo e o máximo é 1, significando que este sempre é um valor inteiro. você pode alterar o atributo {{htmlattrxref("step")}} para controlar esta escala. Por exemplo, se você precisa de um valor de duas casas decimais entre os valores 5 e 10, voce deve definir o valor de <code>step</code> para 0.01:</p> + +<div id="Granularity_sample1"> +<pre class="brush: html"><input type="range" min="5" max="10" step="0.01"></pre> + +<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p> +</div> + +<p>Se você deseja aceitar um valor independente das casas decimais, voce pode especificar o valor <code>"any"</code> para o atributo {{htmlattrxref("step", "input")}}:</p> + +<div id="Granularity_sample2"> +<pre class="brush: html"><input type="range" min="0" max="3.14" step="any"></pre> + +<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> + +<p><span id="result_box" lang="pt"><span>Este exemplo permite ao usuário selecionar qualquer valor entre 0 e π sem qualquer restrição na parte fracionada do valor selecionado.</span></span></p> +</div> + +<h3 id="Adicionando_marcas_de_mapeamento_e_etiquetas">Adicionando marcas de mapeamento e etiquetas</h3> + +<p>As especificações do HTML oferece aos navegadores uma certa flexibilidade sobre como apresentar o controle deslizante. Em parte alguma esta flexibilidade é mais aparente do que no mapeamento de marcas e, menos ainda, na etiqueta. <span id="result_box" lang="pt"><span>A especificação descreve como adicionar pontos personalizados ao controle</span></span> usando o atributo {{htmlattrxref("list", "input")}} e o elemento {{HTMLElement("datalist")}} , mas não tem requisitos nem padronizações para marcações ou mesmo pontos ao longo do controle deslizante.</p> + +<h4 id="Modelo_de_controle_do_range">Modelo<span class="short_text" id="result_box" lang="pt"><span> de controle</span></span> do range</h4> + +<p><span id="result_box" lang="pt"><span>Uma vez que os navegadores têm essa flexibilidade e, até à data, nenhum suporte a todos os recursos que o HTML define para controles de alcance, aqui estão alguns modelos para mostrar o que você pode obter no MacOS em um navegador que os suporta.</span></span></p> + +<h5 id="Um_controle_sem_o_atributo">Um controle sem o atributo</h5> + +<p>Isto é o que você obtem se não especificar o atributo {{htmlattrxref("list", "input")}} , ou se o navegador não oferece suporte.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Screenshot</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range"></pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<h5 id="Um_controle_com_o_Atributo">Um controle com o Atributo</h5> + +<p>Este controle está usando um atributo <code>list</code> <span class="short_text" id="result_box" lang="pt"><span>especificando o ID de um</span></span>a {{HTMLElement("datalist")}} que define uma serie de marcações no controle. Há 11 deles, de modo que há um 0% bem como a adição de 10% em cada próximo. Cada ponto representa usando um elemento {{HTMLElement("option")}} com propriedade {{htmlattrxref("value", "option")}} <span id="result_box" lang="pt"><span> definido para o valor do intervalo no qual uma marca deve ser desenhada.</span></span></p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Screenshot</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> + <option value="0"> + <option value="10"> + <option value="20"> + <option value="30"> + <option value="40"> + <option value="50"> + <option value="60"> + <option value="70"> + <option value="80"> + <option value="90"> + <option value="100"> +</datalist> +</pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<h5 id="Um_controle_deslizante_com_marcas_e_rótulos">Um controle deslizante com marcas e rótulos</h5> + +<p>Você pode adicionar rótulos para seu controle usando o atributo {{htmlattrxref("label", "option")}} para o elemento {{HTMLElement("option")}} <span id="result_box" lang="pt"><span>correspondente às marcas de marcação para as quais você deseja ter rótulos.</span></span></p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Screenshot</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> + <option value="0" label="0%"> + <option value="10"> + <option value="20"> + <option value="30"> + <option value="40"> + <option value="50" label="50%"> + <option value="60"> + <option value="70"> + <option value="80"> + <option value="90"> + <option value="100" label="100%"> +</datalist> +</pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota</strong>: Atualmente nenhum navegador suporta estes recursos totalmente. Firefox não suporta pontos e rótulos, por exemplo, enquanto o Chrome suporta as marcações de pontos, porém não suporta as etiquetas.</p> +</div> + +<h3 id="Change_the_orientation">Change the orientation</h3> + +<div class="hidden"> +<p>Por padrão se um navegador renderiza um controle deslizante de intervalos, este renderizará para que o controlador seja movimento da esquerda pra direita e o contrário também. No entanto isto pode ser facilmente mudado de cima para baixo e vice-versa utilizando CSS.</p> + +<div class="note"> +<p><strong>Nota</strong>: <span id="result_box" lang="pt"><span>Isso ainda não foi implementado por nenhum dos principais navegadores.</span> <span>Veja o Firefox</span></span> {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>.</p> +</div> + +<p>Considerando este controle:</p> + +<div id="Orientation_sample1"> +<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> +</div> + +<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p> + +<p><span id="result_box" lang="pt"><span>Esse controle é horizontal (pelo menos na maioria, senão em todos os principais navegadores, outros podem variar).</span> <span>Fazê-lo vertical é tão simples como adicionar CSS para alterar as dimensões do controle para que ele seja mais alto que o largo, como este:</span></span> </p> + +<div id="Orientation_sample2"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">#volume { + height: 150px; + width: 50px; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p> + +<p><strong><span id="result_box" lang="pt"><span>Atualmente, nenhum dos principais navegadores suporta a criação de entradas de alcance vertical usando o CSS desta maneira, mesmo que seja a maneira como a especificação recomenda que eles o façam.</span></span> </strong></p> +</div> +</div> + +<p>As especificações HTML recomenda que os navegadores mudem automaticamente para um controle vertical quando a largura for menor que à altura. Infortuniamente nenhum dos principais navegadores atualmente oferece tal suporte. No entanto você pode cria-lo pelo seu lado. A maneira mais fácil para isto é usar o CSS: aplicando um: {{cssxref("transform")}} para rotacionar o elemento tornando-o vertical. Vamos dar uma olhada:</p> + +<div id="Orientation_sample3"> +<h4 id="HTML_2">HTML</h4> + +<p>No HTML o elemento {{HTMLElement("input")}} precisa ser envolto em uma {{HTMLElement("div")}} para nos permitir corrigir o layout após a transformação ser executada, <span id="result_box" lang="pt"><span>(uma vez que as transformações não afetam automaticamente o layout da página):</span></span></p> + +<pre class="brush: html"><div class="slider-wrapper"> + <input type="range" min="0" max="11" value="7" step="1"> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<p><span id="result_box" lang="pt"><span>Agora precisamos de algum CSS.</span> <span>Primeiro é o CSS para o próprio wrapper;</span> <span>isso especifica o modo de exibição e o tamanho que queremos para que a página seja definida corretamente;</span> <span>em essência, está reservando uma área da página para que o controle deslizante gire e se encaixe no espaço reservado sem bagunçar outros elementos.</span></span></p> + +<pre class="brush: css">.slider-wrapper { + display: inline-block; + width: 20px; + height: 150px; + padding: 0; +} +</pre> +<span id="result_box" lang="pt"><span>Em seguida, vem a informação de estilo para o elemento </span></span><code><input></code> <span id="result_box" lang="pt"><span>dentro do espaço reservado:</span></span> + +<pre class="brush: css">.slider-wrapper input { + width: 150px; + height: 20px; + margin: 0; + transform-origin: 75px 75px; + transform: rotate(-90deg); +}</pre> + +<p><span id="result_box" lang="pt"><span>O tamanho do controle está configurado para ter 150 pixels de comprimento por 20 pixels de altura</span></span> . As margins estão configuradas como 0 e a {{cssxref("transform-origin")}} é deslocada para o centro do espaço de giro do controle deslizante;<span id="result_box" lang="pt"><span> uma vez que o controle deslizante está configurado para ter 150 pixels de largura, gira através de uma caixa que é de 150 pixels em cada lado.</span> <span>Compensando a origem por 75px em cada eixo significa que vamos girar em torno do centro desse espaço.</span> <span>Finalmente, giramos no sentido anti-horário em 90 °.</span> <span>O resultado: uma entrada de intervalo que é girada para que o valor máximo esteja na parte superior e o valor mínimo esteja na parte inferior.</span></span></p> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p> +</div> + +<h2 id="Validação">Validação</h2> + +<p>Não há padrões de validação disponível, no entanto, as seguintes formas de validações são realizadas automaticamente:</p> + +<ul> + <li>Se {{htmlattrxref("value", "input")}} estiver definido para algo que não possa ser convertido em um número flutuante válido, <span id="result_box" lang="pt"><span>a validação falhará porque a entrada está sofrendo de uma entrada incorreta.</span></span></li> + <li>O valor não será inferior há {{htmlattrxref("min", "input")}}. O valor padrão é 0.</li> + <li>O valor não pode ser maior que {{htmlattrxref("max", "input")}}. O valor padrão é 100.</li> + <li>O valor será um multiplo de {{htmlattrxref("step", "input")}}. O valor padrão é 1.</li> +</ul> + +<h2 id="Exemplos">Exemplos</h2> + +<p><span id="result_box" lang="pt"><span>Além dos exemplos variados acima, você encontrará as entradas de alcance demonstradas nestes artigos:</span></span></p> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Controlling multiple parameters with ConstantSourceNode</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '<input type="range">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0<sup>[2]</sup></td> + <td>12</td> + <td>{{CompatGeckoDesktop(23)}}<sup>[1][4]</sup></td> + <td>10</td> + <td>10.1</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1<sup>[3]</sup></td> + <td>57<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(52)}}<sup>[1]</sup></td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] While the specification says that the range input should be drawn vertically if the height is greater than the width, this behavior is not currently implemented. See these Firefox bugs for more information: {{bug(840820)}} and {{bug(981916)}}.</p> + +<p>[2] Chrome implements the <code>slider-vertical</code> value for the non-standard {{cssxref("-webkit-appearance")}} property. <em>You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers</em>.</p> + +<p>[3] The Android browser recognizes the <code>"range"</code> type starting with version 2.1, but doesn't fully implement it until version 4.3.</p> + +<p>[4] Drawing of hash/tick marks is not yet implemented. See {{bug(841942)}} for more information.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></li> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface it's based upon</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/number"><input type="number"></a></code></li> +</ul> diff --git a/files/pt-br/web/html/element/input/time/index.html b/files/pt-br/web/html/element/input/time/index.html new file mode 100644 index 0000000000..917eea9d39 --- /dev/null +++ b/files/pt-br/web/html/element/input/time/index.html @@ -0,0 +1,458 @@ +--- +title: <input type="time"> +slug: Web/HTML/Element/Input/time +tags: + - Formulário + - Hora + - tipo +translation_of: Web/HTML/Element/input/time +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">Elementos <code><input></code> do tipo <strong><code>time</code></strong> (hora) criam campos de inserção que permitem que o usuário digite horários facilmente (horas e minutos e, opcionalmente, segundos).</span></p> + +<p>A interface de usuário deste tipo de campo varia de navegador para navegador. A maioria dos navegadores modernos é compatível com ele exceto pelo Safari, o único grande navegador que ainda não o implementou; no Safari (e em qualquer outro navegador que ainda não suporte <code><time></code>), ele regride para <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}}</div> + + + +<h2 id="Aparência">Aparência</h2> + +<h3 id="Chrome_e_Opera">Chrome e Opera</h3> + +<p>No Chrome/Opera, o campo de <code>time</code> é simples, com espaços onde o usuário pode inserir horas e minutos (no formato 24 horas), além de setas para cima e para baixo que servem para, respectivamente, incrementar e decrementar o componente atualmente selecionado. Um botão "X" também é apresentado para limpar o conteúdo do campo.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15399/chrome-time.png" style="display: block; height: 31px; margin: 0px auto; width: 82px;"></p> + +<h3 id="Firefox">Firefox</h3> + +<p>O campo de <code>time</code> do Firefox é bem parecido com o do Chrome, exceto pela ausência das setas para cima e para baixo e por estar no formato 12 horas (com um espaço adicional para inserir AM ou PM).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15403/firefox-time.png" style="display: block; height: 29px; margin: 0px auto; width: 106px;"></p> + +<h3 id="Edge">Edge</h3> + +<p>O campo de <code>time</code> do Edge é melhor elaborado, abrindo um seletor de hora e minuto com rolagem infinita. Assim como o Chrome, ele também adota o formato 24 horas:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15401/edge-time.png" style="display: block; margin: 0 auto;"></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Uma {{domxref("DOMString")}} representando um horário, ou vazia.</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{event("change")}} e {{event("input")}}.</td> + </tr> + <tr> + <td><strong>Atributos comuns suportados</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} e {{htmlattrxref("step", "input")}}.</td> + </tr> + <tr> + <td><strong>Atributos IDL</strong></td> + <td><code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code> e <code>list</code>.</td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}} e {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Valor">Valor</h2> + +<div id="value-sample1"> +<p>Uma {{domxref("DOMString")}} contendo o valor do horário inserido no campo. Você pode definir um valor padrão para o campo incluindo um horário válido no atributo {{htmlattrxref("value", "input")}} ao criar o elemento <code><input></code>, tipo assim:</p> + +<pre class="brush: html"><label for="hora-cons">Escolha o horário da consulta: </label> +<input id="hora-cons" type="time" name="hora-cons" value="13:30"></pre> +</div> + +<p>{{ EmbedLiveSample('value-sample1', 600, 60) }}</p> + +<p>Você também pode obter e definir o valor do campo via JavaScript usando a propriedade {{domxref("HTMLInputElement.value")}}, por exemplo:</p> + +<pre class="brush: js">var campoHora = document.querySelector('input[type="time"]'); +campoHora.value = '15:30';</pre> + +<h3 id="Formato_do_valor_do_horário">Formato do valor do horário</h3> + +<p>O <code>value</code> do campo de <code>time</code> está sempre no formato 24 horas: <code>"hh:mm"</code>, não importa o formato usado na inserção. Esse formato muitas vezes é escolhido baseado no idioma/local do usuário (ou mesmo pelo agente de usuário). Se o horário incluir segundos (veja {{anch("Usando o atributo step")}}), o formato sempre é <code>"hh:mm:ss"</code>.</p> + +<p>No próximo exemplo, você pode ver o modo como o valor do campo de horário varia entre o que foi digitado e o que ele retorna.</p> + +<p>Mas antes, vamos dar uma conferida no HTML. Ele é bem simpless, contando com label (rótulo) e input (campo) do jeito que já vimos antes, com a adição de um elemento {{HTMLElement("p")}} com um {{HTMLElement("span")}} que mostra o valor do campo de <code>time</code>:</p> + +<pre class="brush: html"><form> + <label for="horaInicio">Hora de início: </label> + <input type="time" id="horaInicio"> + <p> + Valor do campo <code>time</code>: <code> + "<span id="value">n/a</span>"</code>. + </p> +</form></pre> + +<p>No código JavaScript, chamamos um método que monitora o evento {{event("input")}}, que é disparado sempre que o conteúdo de um elemento <code><input></code> muda. Toda vez que ele dispara, o conteúdo do <code><span></code> é substituído pelo novo valor do campo de horário.</p> + +<pre class="brush: js">var horaInicio = document.getElementById("horaInicio"); +var valueSpan = document.getElementById("value"); + +startTime.addEventListener("input", function() { + valueSpan.innerText = startTime.value; +}, false);</pre> + +<p>{{EmbedLiveSample("Time_value_format", 600, 80)}}</p> + +<p>Quando um formulário que inclui um campo de <code>time</code> é enviado, o valor é codificado antes de ser incluído nos dados do formulário. Nesse caso, o valor correspondente ao campo de horário sempre estará no formato <code>"name=hh%3Amm"</code>, ou <code>"name=hh%3Amm%3ass"</code> caso ele conte com segundos (veja {{anch("Usando o atributo step")}}).</p> + +<h2 id="Usando_campos_de_horário">Usando campos de horário</h2> + +<p>Apesar de que, entre os campos dos tipos data e horário, o de horário tenha a maior presença entre os navegadores, ele ainda não tem presença universal. Logo, é provável que você vá precisar fornecer uma maneira alternativa de se inserir data e hora, para que os usuários do Safari (e de outros navegadores sem suporte) ainda consigam inserir horários facilmente.</p> + +<p>A seguir, vamos conferir casos de uso básicos e complexos do <code><input type="time"></code>, além de dar conselhos sobre como contornar a questão dos navegadores na seção (see {{anch("Lidando com navegadores sem suporte")}}).</p> + +<h3 id="Usos_básicos_de_horário">Usos básicos de horário</h3> + +<p>O caso de uso mais simples do <code><input type="time"></code> envolve uma combinação básica dos elementos <code><input></code> e {{htmlelement("label")}} como vemos abaixo:</p> + +<pre class="brush: html"><form> + <label for="hora-cons">Escolha o horário da consulta: </label> + <input id="hora-cons" type="time" name="hora-cons"> +</form></pre> + +<p>{{ EmbedLiveSample('Basic_uses_of_time', 600, 40) }}</p> + +<h3 id="Controlando_o_tamanho_do_campo">Controlando o tamanho do campo</h3> + +<p>O elemento <code><input type="time"></code> não é compatível com atributos de dimensionamento de formulários tais como {{htmlattrxref("size", "input")}}, já que horários quase sempre tem o mesmo número de caracteres. Você terá que recorrer ao <a href="/en-US/docs/Web/CSS">CSS</a> para ajustar tamanhos.</p> + +<h3 id="Usando_o_atributo_step">Usando o atributo step</h3> + +<p>Você pode usar o atributo {{htmlattrxref("step", "input")}} para variar a quantidade de tempo pulada sempre que o horário for incrementado/decrementado (por exemplo, para fazer com que o horário avançe ou volte em 10 minutos ao clicar nas setinhas ao lado do campo).</p> + +<div class="note"> +<p>Esta propriedade pode se comportar de maneira inesperada em alguns navegadores. Por isso, ela não é 100% confiável.</p> +</div> + +<p>O atributo recebe um valor igual ao número de segundos que você quer que o valor seja incrementado - o valor padrão é 60 segundos, ou 1 minuto. Se você especificar um valor menor que 60 segundos (1 minuto), o campo <code>time</code> vai mostrar uma área de inserção de segundos junto com as de hora e minuto:</p> + +<pre class="brush: html"><form> + <label for="hora-cons">Escolha o horário da consulta: </label> + <input id="hora-cons" type="time" name="hora-cons" step="2"> +</form></pre> + +<p>{{ EmbedLiveSample('Using_the_step_attribute', 600, 40) }}</p> + +<p>No Chrome e no Opera, que são os únicos navegadores que mostram botões de setas para aumentar/diminuir o valor, clicar nas setinhas muda o valor em dois segundos, mas não afeta as horas e minutos. Para poder usar essa funcionalidade com minutos e horas, você precisa especificar o número de minutos (ou horas) em segundos (por exemplo, 120 para 2 minutos, ou 7200 para 2 horas).</p> + +<p>No Firefox, não são mostrados botões de setas; logo, o valor de <code>step</code> não é usado. No entanto, adicionar esse atributo <em>por si só</em> já adiciona a área de inserção de segundos ao lado da de minutos.</p> + +<p>O valor de <code>step</code> parece não ter efeito no Edge.</p> + +<div class="note"> +<p>Ao que parece, usar o atributo <code>step</code> faz com que a validação não funcione adequadamente (como podemos ver na seção seguinte).</p> +</div> + +<h2 id="Validação">Validação</h2> + +<p>Por padrão, <code><input type="time"></code> não aplica nenhum tipo de validação nos valores inseridos (fora o próprio agente de usuário impedir que sejam inseridos valores diferentes de horários). Isso é útil (considerando que o agente de usuário seja completamente compatível com campos do tipo <code>time</code>), mas nem sempre devemos esperar que o valor desse campo seja realmente um horário, já que ele pode ser uma string vazia (<code>""</code>), o que é permitido. Também é possível que o valor se pareça com um horário válido, mas que esteja incorreto, como <code>"25:05"</code>.</p> + +<h3 id="Definindo_horários_mínimo_e_máximo">Definindo horários mínimo e máximo</h3> + +<p>Você pode usar os atributos {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir a faixa de horário válida que o usuário pode escolher. No seguinte exemplo, definimos <code>12:00</code> como o horário mínimo e <code>18:00</code> como o horário máximo:</p> + +<pre class="brush: html"><form> + <label for="hora-cons">Escolha o horário da consulta (aberto das 12:00 às 18:00): </label> + <input id="hora-cons" type="time" name="hora-cons" + min="12:00" max="18:00"> + <span class="validacao"></span> +</form></pre> + +<p>{{ EmbedLiveSample('Setting_maximum_and_minimum_times', 600, 40) }}</p> + +<p>Aqui está o CSS usado no exemplo acima. Nele, fazemos uso das propriedades CSS {{cssxref(":valid")}} e {{cssxref(":invalid")}} para estilizar o campo com base na validade ou não do conteúdo atual dele. Tivemos que colocar os ícones em um {{htmlelement("span")}} ao lado do campo, e não no campo em si, porque no Chrome o conteúdo gerado é colocado denteo do campo do formulário e não pode ser efetivamente mostrado ou estilizado.</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>O resultado disso é que:</p> + +<ul> + <li>Apenas horários entre 12:00 e 18:00 serão vistos como válidos; horários fora dessa faixa serão tratados como inválidos.</li> + <li>Dependendo do navegador usado, você pode perceber que os horários fora da faixa especificada não podem nem mesmo ser selecionados pelo seletor de hora (ex.: Edge).</li> +</ul> + +<h3 id="Tornando_campos_de_horário_obrigatórios">Tornando campos de horário obrigatórios</h3> + +<p>Além do mais, você pode usar o atributo {{htmlattrxref("required", "input")}} para tornar obrigatória a inserção de um horário. Como resultado, os navegadores compatíves irão mostrar um erro se você tentar enviar um horário fora da proporção adequada ou que esteja em branco.</p> + +<p>Vamos ver um exemplo. Nele, colocamos um horário mínimo e um máximo, além de tornarmos o campo obrigatório.</p> + +<pre class="brush: html"><form> + <div> + <label for="hora-cons">Escolha o horário da consulta (aberto das 12:00 às 18:00): </label> + <input id="hora-cons" type="time" name="hora-cons" + min="12:00" max="18:00" required> + <span class="validacao"></span> + </div> + <div> + <input type="submit" value="Enviar formulário"> + </div> +</form></pre> + +<p>Se você tentar enviar o formulário com um horário incompleto (ou com um horário fora da faixa válida), o navegador vai mostrar um erro. Experimente brincar com esse exemplo agora:</p> + +<p>{{ EmbedLiveSample('Making_times_required', 600, 120) }}</p> + +<p>Here's a screenshot for those of you who aren't using a browser that supports <code>time</code> inputs:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15405/firefox-validation-message.png" style="display: block; margin: 0 auto;"></p> + +<div class="warning"> +<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth).</p> +</div> + +<h2 id="Handling_browser_support">Handling browser support</h2> + +<p>As mentioned above, Safari and a few other, less common, browsers don't yet support time inputs natively. In general, otherwise, support is good — especially on mobile platforms, which tend to have very nice user interfaces for specifying a time value. For example, the <code>time</code> picker on Chrome for Android looks like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15407/chrome-android-time.png" style="display: block; margin: 0 auto;"></p> + +<p>Browsers that don't support time inputs gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.</p> + +<p>The second problem is the more serious; as mentioned previously, <code>time</code> inputs' values are always normalized to the format <code>hh:mm</code> or <code>hh:mm:ss</code>. With a text input, on the other hand, by default the browser has no idea of what format the time should be in, and there multiple ways in which people write times, such as:</p> + +<ul> + <li><code>3.00 pm</code></li> + <li><code>3:00pm</code></li> + <li><code>15:00</code></li> + <li><code>3 o'clock in the afternoon</code></li> + <li>etc.</li> +</ul> + +<p>One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your <code>time</code> input. Even though the <code>time</code> input doesn't use it, the <code>text</code> input fallback will. For example, try viewing the following demo in a browser that doesn't support time inputs:</p> + +<pre class="brush: html"><form> + <div> + <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label> + <input id="appt-time" type="time" name="appt-time" + min="12:00" max="18:00" required + pattern="[0-9]{2}:[0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Submit form"> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p> + +<p>If you try submitting it, you'll see that non-supporting browsers now display an error message (and highlight the input as invalid) if your entry doesn't match the pattern <code>nn:nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates that follow the pattern.</p> + +<p>Then there's the problem of the user having no idea exactly what format the time is expected to be in.</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>The best way to deal with times in forms in a cross-browser way, for the time being, is to get the user to enter the hours and minutes (and seconds if required) in separate controls ({{htmlelement("select")}} elements are popular; see below for an example), or use JavaScript libraries such as the <a href="http://timepicker.co/">jQuery timepicker plugin</a>.</p> + +<h2 id="Examples">Examples</h2> + +<p>In this example, we create two sets of interface elements for choosing times: a native picker created with <code><input type="time"></code>, and a set of two {{htmlelement("select")}} elements for choosing hours/minutes in older browsers that don't support the native input.</p> + +<p>{{ EmbedLiveSample('Examples', 600, 140) }}</p> + +<p>The HTML looks like so:</p> + +<pre class="brush: html"><form> + <div class="nativeTimePicker"> + <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label> + <input id="appt-time" type="time" name="appt-time" + min="12:00" max="18:00" required> + <span class="validity"></span> + </div> + <p class="fallbackLabel">Choose an appointment time (opening hours 12:00 to 18:00):</p> + <div class="fallbackTimePicker"> + <div> + <span> + <label for="hour">Hour:</label> + <select id="hour" name="hour"> + </select> + </span> + <span> + <label for="minute">Minute:</label> + <select id="minute" name="minute"> + </select> + </span> + </div> + </div> +</form></pre> + +<p>The hour and minutes values for their <code><select></code> elements are dynamically generated.</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <code><input type="time"></code>, we create a new {{htmlelement("input")}} element, set its <code>type</code> to <code>time</code>, then immediately check what its type is set to — non-supporting browsers will return <code>text</code>, because the <code>time</code> type falls back to type <code>text</code>. If <code><input type="time"></code> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}s) instead.</p> + +<pre class="brush: js">// define variables +var nativePicker = document.querySelector('.nativeTimePicker'); +var fallbackPicker = document.querySelector('.fallbackTimePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var hourSelect = document.querySelector('#hour'); +var minuteSelect = document.querySelector('#minute'); + +// hide fallback initially +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// test whether a new date input falls back to a text input or not +var test = document.createElement('input'); +test.type = 'time'; +// if it does, run the code inside the if() {} block +if(test.type === 'text') { + // hide the native picker and show the fallback + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // populate the hours and minutes dynamically + populateHours(); + populateMinutes(); +} + +function populateHours() { + // populate the hours <select> with the 6 open hours of the day + for(var i = 12; i <= 18; i++) { + var option = document.createElement('option'); + option.textContent = i; + hourSelect.appendChild(option); + } +} + +function populateMinutes() { + // populate the minutes <select> with the 60 hours of each minute + for(var i = 0; i <= 59; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + minuteSelect.appendChild(option); + } +} + +// make it so that if the hour is 18, the minutes value is set to 00 +// — you can't select times past 18:00 + function setMinutesToZero() { + if(hourSelect.value === '18') { + minuteSelect.value = '00'; + } + } + + hourSelect.onchange = setMinutesToZero; + minuteSelect.onchange = setMinutesToZero;</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#time-state-(type=time)', '<input type="time">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.input.input-time")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/date"><input type="date"></a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/week"><input type="week"></a></code>, and <code><a href="/en-US/docs/Web/HTML/Element/input/month"><input type="month"></a></code></li> +</ul> |