diff options
Diffstat (limited to 'files/pt-pt/web/html/html5/forms_no_html5/index.html')
| -rw-r--r-- | files/pt-pt/web/html/html5/forms_no_html5/index.html | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/files/pt-pt/web/html/html5/forms_no_html5/index.html b/files/pt-pt/web/html/html5/forms_no_html5/index.html new file mode 100644 index 0000000000..93a5bfb4f8 --- /dev/null +++ b/files/pt-pt/web/html/html5/forms_no_html5/index.html @@ -0,0 +1,72 @@ +--- +title: Forms no HTML5 +slug: Web/HTML/HTML5/Forms_no_HTML5 +translation_of: Learn/HTML/Forms/HTML5_updates +--- +<p>{{ gecko_minversion_header("2") }}</p> +<p>Elementos e atributos de formulários no HTML5 fornecem um grau maior de marcação semântica do que o HTML4 e removem em grande parte a necessidade tediosa de estilos e scripts requerida no HTML4. Os recursos de formulários no HTML5 fornecem uma melhor experiência para os usuários, tornando os formulários mais consistentes através de diferentes web sites e dando retorno imediato ao usuário sobre a entrada de dados. Eles também fornecem esta experiência aos usuários que deixam os scripts desativados no navegador.</p> +<p>Este tópico descreve itens novos ou alterados que são suportados pelo Gecko/Firefox.</p> +<h3 id="O_elemento_<input>">O elemento <code><input></code></h3> +<p>O elemento <code>{{ HTMLElement("input") }}</code> tem novos valores para o atributo {{ htmlattrxref("type", "input") }}.</p> +<ul> + <li><span style="font-family: Courier New;">search</span>: O elemento representa um campo de entrada de busca. Quebras de linhas são automaticamente removidas do valor de entrada, mas nenhuma outra sintaxe é aplicada.</li> + <li><span style="font-family: Courier New;">tel</span>: O elemento representa um controle para a edição de um número de telefone. Quebras de linhas são automaticamente removidas do valor de entrada, mas nenhuma outra sintaxe é aplicada, pois números de telefone podem variar bastante internacionalmente. Você pode usar atributos como {{ htmlattrxref("pattern", "input") }} e {{ htmlattrxref("maxlength", "input") }} para restringir valores digitados no controle.</li> + <li><span style="font-family: Courier New;">url</span>: O elemento representa um controle para a edição de <a class="external" href="http://en.wikipedia.org/URL" title="http://en.wikipedia.org/URL">URL</a>. Quebras de linha e espaços, à direita e à esquerda, são automaticamente removidos do valor de entrada.</li> + <li> + <p><span style="font-family: Courier New;">email</span>: O elemento representa um endereço de e-mail. Quebras de linhas são automaticamente removidas do valor de entrada. Um endereço de e-mail inválido pode ser configurado, mas o campo de entrada somente será satisfeito se contiver um endereço de e-mail que satisfaça a produção ABNF <span style="font-family: Courier New;"><code><code title="">1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code></code></span> na qual <code title="">atext</code> está definido na RFC 5322 section 3.2.3, e <code title="">ldh-str</code> está definido na RFC 1034 section 3.5.</p> + <div class="note"> + Nota: se o atributo {{ htmlattrxref("multiple", "input") }} é configurado, podem ser digitados múltiplos endereços de e-mail neste campo {{ HTMLElement("input") }}, como uma lista separada por espaços, mas atualmente isto não está implementado no Firefox.</div> + </li> +</ul> +<p>O elemento {{ HTMLElement("input") }} também tem novos atributos:</p> +<ul> + <li>{{ htmlattrxref("list", "input") }}: O ID de um elemento {{ HTMLElement("datalist") }} cujos conteúdos, elementos {{ HTMLElement("option") }}, podem ser usados como dicas e são exibidos como propostas na área de sugestões do campo de entrada.</li> + <li>{{ htmlattrxref("pattern", "input") }}: Uma expressão regular contra a qual o valor do elemento é checado, a qual deve ser usada com os valores <code>text</code>, <code>tel</code>, <code>search</code>, <code>url</code>, e <code>email </code>de {{ htmlattrxref("type", "input") }}.</li> + <li>{{ htmlattrxref("formmethod", "input") }}: Uma string indicando qual método HTTP (GET ou POST) deve ser usado na submissão; isto substitui o {{ htmlattrxref("method", "form") }} do elemento {{ HTMLElement("form") }}, se definido. O {{ htmlattrxref("formmethod", "input") }} se aplica somente quando {{ htmlattrxref("type", "input") }} é <span style="font-family: Courier New;">image</span> ou <span style="font-family: Courier New;">submit</span>.</li> + <li>{{ htmlattrxref("x-moz-errormessage", "input") }}: Uma string que é exibida como uma mensagem de erro quando a validação do campo falha. Esta é uma extenção da Mozilla, e não é um padrão.</li> +</ul> +<h3 id="O_elemento_<form>">O elemento <code><form></code></h3> +<p>O elemento {{ HTMLElement("form") }} tem um novo atributo:</p> +<ul> + <li>{{ htmlattrxref("novalidate", "form") }}: Este atributo previne o formulário de ser validado antes de sua submissão.</li> +</ul> +<h3 id="O_elemento_<datalist>">O elemento <code><datalist></code></h3> +<p>O elemento {{ HTMLElement("datalist") }} representa a lista de elementos {{ HTMLElement("option") }} para sugerir quando preencher um campo {{ HTMLElement("input") }}.</p> +<p>Você pode usar o atributo {{ htmlattrxref("list", "input") }} em um elemento {{ HTMLElement("input") }} para ligar um campo de entrada com um elemento {{ HTMLElement("datalist") }} específico.</p> +<h3 id="O_elemento_<output>">O elemento <code><output></code></h3> +<p>O elemento <code>{{ HTMLElement("output") }}</code> representa o resultado de um cálculo.</p> +<p>Você pode usar o atributo {{ htmlattrxref("for", "output") }} para especificar uma relação entre o elemento de saída e outros elementos no documento, afetados pelo resultado (por exemplo, como entradas ou parâmetros). O valor do atributo {{ htmlattrxref("for", "output") }} é uma lista de ID de outros elementos separada por espaços.</p> +<h3 id="O_atributo_de_espaço_reservado">O atributo de espaço reservado</h3> +<p>O atributo {{ htmlattrxref("placeholder", "input") }} nos elementos <code>{{ HTMLElement("input") }}</code> e <code>{{ HTMLElement("textarea") }}</code> fornece uma dica ao usuário do que deve ser digitado no campo. O espaço reservado de texto não deve conter novas linhas ou alimentação de linhas.</p> +<h3 id="O_atributo_de_autofoco">O atributo de autofoco</h3> +<p>O atributo <strong>autofocus</strong> permite especificar que um controle de formulário deve ter foco nas entradas quando a página carrega, a menos que o usuário sobreponha-se a isto, por exemplo digitando em um controle diferente. Somente um item do formulário pode ter o atributo <strong>autofocus</strong>, que é um Booleano. Este atributo pode ser aplicado aos elementos<code> {{ HTMLElement("input") }}</code>, <code>{{ HTMLElement("button") }}</code>, <code>{{ HTMLElement("select") }}</code>, e <code>{{ HTMLElement("textarea") }}</code>. A exceção é que o <strong>autofocus</strong> não pode ser aplicado em um elemento <code><input></code> se o atributo {{ htmlattrxref("type", "input") }} é configurado como <code>hidden</code> (isto é, você não pode configurar automaticamente o foco em um controle escondido).</p> +<h3 id="A_propriedade_label.control_do_DOM">A propriedade label.control do DOM</h3> +<p>A interface DOM <a href="/en/DOM/HTMLLabelElement" title="en/DOM/HTMLLabelElement">HTMLLabelElement</a> fornece uma propriedade extra, adicionalmente às propriedades que correspondem aos atributos do elemento <code>{{ HTMLElement("label") }}</code> do HTML. A propriedade <strong>control</strong> retorna um controle rotulado, isto é, o controle para este rótulo, o qual é determinado pelo atributo {{ htmlattrxref("for", "label") }} (se estiver definido) ou pelo primeiro elemento de controle descendente.</p> +<h3 id="Validação_de_restrições">Validação de restrições</h3> +<p>O HTML5 fornece itens de API e sintaxe para suportar a validação de formulários do lado do cliente. Enquanto esta funcionalidade não substitui a validação do lado do servidor, a qual ainda é necessária para a segurança e integridade dos dados, a validação do lado do cliente pode suportar uma melhor experiência ao usuário, dando ao usuário um retorno imediato sobre os dados digitados.</p> +<h4 id="Sintaxe_HTML_para_validação_de_restrições">Sintaxe HTML para validação de restrições</h4> +<p>Os seguintes itens da sintaxe do HTML5 podem ser usados para especificar restrições em dados de formulários.</p> +<ul> + <li>O atributo {{ htmlattrxref("required", "input") }} no elementos {{ HTMLElement("input") }}, {{ HTMLElement("select") }} e {{ HTMLElement("textarea") }} indica que um valor deve ser fornecido. (No elemento {{ HTMLElement("input") }}, {{ htmlattrxref("required", "input") }} aplica-se somente em conjunto com certos valores do atributo {{ htmlattrxref("type", "input") }}.)</li> + <li>O atributo {{ htmlattrxref("pattern", "input") }} no elemento {{ HTMLElement("input") }} obriga o valor a combinar com uma expressão regular específica.</li> + <li>Os atributos {{ htmlattrxref("min", "input") }} e {{ htmlattrxref("max", "input") }} do elemento {{ HTMLElement("input") }} limitam os valores mínimo e máximo que podem ser digitados.</li> + <li>O atributo {{ htmlattrxref("step", "input") }} do elemento {{ HTMLElement("input") }} (quando usado combinadamente com os atributos {{ htmlattrxref("min", "input") }} e {{ htmlattrxref("max", "input") }}) define a granularidade de valores que podem ser entrados. Um valor que não corresponda a um valor permitido não será validado.</li> + <li>O atributo {{ htmlattrxref("maxlength", "input") }} dos elementos {{ HTMLElement("input") }} e {{ HTMLElement("textarea") }} limita o número máximo de caracteres (em pontos de código Unicode) que o usuário pode entrar.</li> + <li>Os valores <code>url</code> e <code>email</code> para {{ htmlattrxref("type", "input") }} obrigam o valor a ser uma URL ou um endereço de e-mail válido, respectivamente.</li> +</ul> +<p>Adicionalmente, pode-se evitar a validação obrigatória especificando-se o atributo {{ htmlattrxref("novalidate", "form") }} no elemento {{ HTMLElement("form") }}, ou o atributo {{ htmlattrxref("formnovalidate", "button") }} no elemento {{ HTMLElement("button") }} e no elemento {{ HTMLElement("input") }} (quando {{ htmlattrxref("type", "input") }} é <code>submit</code> ou <code>image</code>). Estes atributos indicam que o formulário não será validado quando submetido.</p> +<h4 id="API_de_validação_de_restrições">API de validação de restrições</h4> +<p>As seguintes propriedades e métodos do DOM relacionados à validação de restrições estão disponíveis nos scripts do lado do cliente:</p> +<ul> + <li>Em objetos <a href="/en/DOM/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a>, o método <code>checkValidity()</code> retorna verdadeiro se todos os elementos do formulário com elementos associados com validação obrigatória são satisfeitos, e falso, caso contrário.</li> + <li>Em <a href="/en/HTML/Content_categories#form-associated" title="en/HTML/Content Categories#form-associated">elementos associados a formulários</a> (en): + <ul> + <li>A propriedade <code>willValidate</code>, a qual é falsa se o elemento possuir obrigatoriedades não satisfeitas.</li> + <li>A propriedade <code>validity</code>, a qual é um objeto de <a href="/en/DOM/ValidityState_Interface" title="en/DOM/ValidityState Interface">ValidityState</a>, que representa o estado de validação em que o elemento se encontra (isto é, falha ou sucesso nas condições obrigatórias).</li> + <li>A propriedade <code>validationMessage</code>, a qual é uma mensagem descrevendo qualquer valha de obrigatoriedade pertinente ao elemento.</li> + <li>O método <code>checkValidity()</code>, o qual retorna falso se o elemento falha em satisfazer qualquer das suas obrigatoriedades, ou verdadeiro, caso contrário.</li> + <li>O método <code>setCustomValidity()</code>, o qual define uma mensagem customizada de validação, permitindo às obrigações serem impostas e validadas além das já pré-definidas.</li> + </ul> + </li> +</ul> +<p>{{ HTML5ArticleTOC() }}</p> |