HTML forms guide

Esta tradução está incompleta. Ajude atraduzir este artigo.

Este guia tem uma série de artigos que vão ajudar você a ficar craque em HTML forms.HTML forms são ferramentas poderosas para interagir com usuários; contudo, por razões técnicas e históricas,  nem sempre é óbvio como usá-los em seu pleno potencial. Neste guia, vamos cobrir todos os aspectos dos HTML forms, da estrutura ao estilo, do manuseio de dados à widgets personalizados. Você vai aprender a desfrutar do grande poder que elas lhes oferecem!

Artigos

  1. Meu primeiro HTML form
  2. Como estruturar um HTML form
  3. Os form widgets nativos
  4. CSS with HTML forms
    1. Estilizando HTML forms
    2. Estilos avançados para HTML forms
    3. Tabela de compatibilidade das Propriedades dos widgets
  5. Enviando e recuperando dados
  6. Validação de dados nos HTML forms
  7. Como criar widgets HTML form personalizados
  8. Enviando HTML forms através do JavaScript
    1. Usando o objeto FormData
  9. HTML forms em browsers antigos

Documentação HTML

Elementos HTML

Elemento Related DOM interface Descrição
<button> HTMLButtonElement O elemento button indica um botão clicável.
<datalist> HTMLDataListElement O elemento datalist contém uma série de elementos <option> que representa as opções possíveis de valor para outros elementos form.
<fieldset> HTMLFieldSetElement O fieldset é utilizado para agrupar diversos elementos form dentro de um unico form.
<form> HTMLFormElement O elemento form representa uma seção do documento que contém oelemento interativo que permite que um usuário para enviar informações para umservidor web.
<input> HTMLInputElement O elemento input é usado para criar controles interativos para formulários.
<keygen> HTMLKeygenElement O elemento de keygen existe para facilitar a geração do material de chave e o envioda chave pública como parte de um formulário HTML.
<label> HTMLLabelElement O elemento label representa uma legenda para um item em uma interface de usuário.
<legend> HTMLLegendElement The legend element represents a caption for the content of its parent <fieldset>.
<meter> HTMLMeterElement The meter element  represents either a scalar value within a known range or a fractional value.
<optgroup> HTMLOptGroupElement the optgroup element creates a group of options within a <select> element.
<option> HTMLOptionElement the HTML option element is used to create a control representing an item within a <select>, an <optgroup> or a <datalist> element.
<output> HTMLOutputElement The output element represents the result of a calculation.
<progress> HTMLProgressElement The progress element is used to view the completion progress of a task.
<select> HTMLSelectElement The select element represents a control that presents a menu of options.
<textarea> HTMLTextAreaElement O elemento textarea representa um editor de texto simples com suporte a quebra de linhas.

Note: All form elements, as all HTML elements, support the HTMLElement DOM interface.

HTML Attributes

Nome do
Atributo

Elemento Descrição
accept <form>, <input> List of types the server accepts, typically a file type.
accept-charset <form> List of supported charsets.
action <form> The URI of a program that processes the information submitted via the form.
autocomplete <form>, <input> Indicates whether controls in this form can by default have their values automatically completed by the browser.
autofocus <button>, <input>, <keygen>, <select>, <textarea> The element should be automatically focused after the page loaded.
challenge <keygen> A challenge string that is submitted along with the public key.
checked <input> Indicates whether the element should be checked on page load.
cols <textarea> Defines the number of columns in a textarea.
data <object> Specifies the URL of the resource.
dirname <input>, <textarea>  
disabled <button>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> Indicates whether the user can interact with the element.
enctype <form> Defines the content type of the form data when the method is POST.
for <label>, <output> Describes elements which belong to this one.
form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> Indicates the form that is the owner of the element.
high <meter> Indicates the lower bound of the upper range.
keytype <keygen> Specifies the type of key generated.
list <input> Identifies a list of pre-defined options to suggest to the user.
low <meter> Indicates the upper bound of the lower range.
max <input>, <meter>, <progress> Indicates the maximum value allowed.
maxlength <input>, <textarea> Defines the maximum number of characters allowed in the element.
method <form> Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min <input>, <meter> Indicates the minimum value allowed.
multiple <input>, <select> Indicates whether multiple values can be entered in an input of the type email or file.
name <button>, <form>, <fieldset>, <input>, <keygen>, <output>, <select>, <textarea> Name of the element. For example used by the server to identify the fields in form submits.
novalidate <form> This attribute indicates that the form shouldn't be validated when submitted.
optimum <meter> Indicates the optimal numeric value.
pattern <input> Defines a regular expression which the element's value will be validated against.
placeholder <input>, <textarea> Provides a hint to the user of what can be entered in the field.
readonly <input>, <textarea> Indicates whether the element can be edited or not.
required <input>, <select>, <textarea> Indicates whether this element is required to fill out or not.
rows <textarea> Defines the number of rows in a textarea.
selected <option> Defines a value which will be selected on page load.
size <input>, <select> Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
src <input> The URL of the embeddable content.
step <input>  
target <form>  
type <button>, <input> Defines the type of the element.
usemap <input>  
value <button>, <option>, <input>, <meter>, <progress> Defines a default value which will be displayed in the element on page load.
wrap <textarea> Indicates whether the text should be wrapped or not.

Normative reference

Etiquetas do documento e colaboradores

 Colaboradores desta página: eduardobona, frankfarias, jgborges, SilvEiRax, sjmiles
 Última atualização por: eduardobona,