diff options
Diffstat (limited to 'files/pt-br/web/html/element/input/index.html')
| -rw-r--r-- | files/pt-br/web/html/element/input/index.html | 1360 |
1 files changed, 1360 insertions, 0 deletions
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> |