<!–
main_leaderboard, all: [728,90][970,90][320,50][468,60]
–>
Elementos de Formulário HTML
Neste capítulo, você encontrará uma descrição detalhada de todos os elementos de formulário HTML .
Ele representa uma seção do documento que contém controles interativos para envio de informações.
- Elementos de formulário HTML:
- Os elementos HTML <form>:
- <entrada> Elemento:
- O elemento <selecionar>:
- Um elemento <button>:
- Elemento <datalist>:
- O elemento <label>:
- Elementos <fieldset> e <legend>:
- O elemento <textarea>:
- <saída> Elemento:
- O elemento <Checkbox>:
- Exemplo de formulário HTML:
- Elementos de formulário HTML:
- Importância dos elementos de formulário HTML:
Os elementos HTML <form>
Em HTML , um elemento <form> pode conter um ou mais dos seguintes elementos:
- <entrada>
- <selecione>
- <botão>
- <rótulo>
- <optgroup>
- <lista de dados>
- <legenda>
- <área de texto>
- <saída>
- <conjunto de campos>
- <opção>
<entrada> Elemento:
<Input> é um dos elementos de formulário mais usados.
Depende do atributo type se o elemento de entrada é exibido de uma maneira diferente.
Example:
Neste capítulo Tipos de entrada HTML , você encontrará uma descrição de todos os diferentes valores do atributo type.
O elemento <selecionar>
O elemento <select> possui uma lista suspensa gerada pelo elemento <select> :
Example:
Uma opção que pode ser escolhida é especificada pelo elemento <option> .
O primeiro item da lista suspensa é sempre selecionado por padrão.
Adicione o atributo selecionado à opção para criar uma opção pré-selecionada:
Example:
Valores Visíveis:
Para definir o número de valores visíveis, basta usar o atributo size :
Example:
Permitir seleções múltiplas:
Para fornecer ao usuário a opção de escolher mais de um valor, utilize a propriedade multiple . veja um exemplo de elementos de formulário HTML abaixo:
Example:
Um elemento <button>:
Um elemento com o atributo <button> especifica um botão que pode ser clicado quando se trata de elementos de formulário HTML :
Example:
Um navegador renderizará o código HTML acima da seguinte maneira:
Nota: É sempre importante mencionar o atributo type para o elemento de botão quando falamos de elementos de formulário HTML . O elemento de botão padrão pode diferir entre os navegadores.
Elemento <datalist>:
Os elementos <Input> podem ser associados a uma lista de opções predefinidas, incluindo o elemento <datalist> nos elementos de formulário HTML .
Quando os usuários inserem dados, eles recebem uma lista suspensa de opções predefinidas.
Os atributos de lista dos elementos <input> devem apontar para os atributos id dos elementos <datalist> .
Example:
O elemento <label>
Em HTML, o elemento <label> especifica rótulos para uma variedade de elementos de formulário.
É útil para leitores de tela, porque lê em voz alta o rótulo quando o usuário focaliza o elemento <input> .
Os usuários que têm problemas para clicar em áreas minúsculas (como botões de opção ou caixas de seleção) também podem se beneficiar do elemento <label> , pois ele alterna o botão de opção ou a caixa de seleção quando o usuário clica em seu conteúdo.
Para conectá-los, a propriedade for da tag <label> deve corresponder ao atributo id do elemento <input> .
O exemplo a seguir mostra o funcionamento do elemento <label> :
Example:
Elementos <fieldset> e <legend>:
Ao usar um <fieldset> , você pode agrupar dados relevantes em um formulário.
O elemento <legend> determina uma legenda <fieldset> .
Example:
Um navegador renderizará o código HTML acima da seguinte maneira:
O elemento <textarea>
<Textarea> pode ser utilizado para caracterizar campos de entrada de várias linhas (uma área de texto) em elementos de formulário HTML :
Example:
A propriedade rows indica o número de linhas que serão exibidas em uma área de texto.
A largura visível de uma seção de texto é determinada pelo atributo cols .
O seguinte é como um navegador verá o código HTML mencionado anteriormente:
CSS também pode ser usado para indicar o tamanho da área de texto:
Example:
<saída> Elemento:
Um elemento <output> exibe o resultado de um cálculo (como o resultado de um script).
Abaixo está um exemplo de elementos de formulário HTML:
Example:
O elemento <Checkbox>:
Várias opções podem ser marcadas usando o controle de caixa de seleção.
Veja a seguir um exemplo de como o elemento checkbox funciona:
Example:
Exemplo de formulário HTML
O seguinte é um exemplo de um formulário de registro padrão no que diz respeito aos elementos de formulário HTML :
Example:
CSS também pode ser aplicado ao formulário aqui é como podemos fazer isso:
Example:
Elementos de Formulário HTML
Marcação | Visão geral |
---|---|
<rótulo> | Fornece um rótulo para um elemento <input> em elementos de formulário HTML . |
<conjunto de campos> | Em um formulário, os elementos relacionados são agrupados. |
<forma> | Cria um formulário HTML para receber a entrada do usuário. |
<legenda> | Adiciona uma legenda a um <fieldset>. |
<selecione> | Cria uma lista suspensa. |
<optgroup> | Lista suspensa contendo opções relacionadas. |
<opção> | Fornece uma lista suspensa com uma opção. |
<lista de dados> | Fornece uma lista de opções de controle de entrada predefinidas. |
<saída> | Calcula o resultado. |
<botão> | Define um botão clicável. |
<entrada> | Estabelece um controle de entrada. |
<área de texto> | Um controle de entrada que oferece suporte a várias linhas. (área de texto) |
Confira nossa referência de tags HTML para obter uma lista mais abrangente de todas as tags HTML .
Importância dos elementos de formulário HTML
Os elementos de formulário HTML desempenham um papel crucial na facilitação da interação entre usuários e páginas da web. A seguir estão algumas razões pelas quais eles são importantes:
- Coleta de dados: os formulários HTML permitem a coleta de entrada do usuário de maneira estruturada, que pode ser usada para diversas finalidades, como pesquisas, feedback e registro do usuário.
- Interação do usuário: os formulários fornecem uma plataforma para os usuários inserirem dados e fazerem seleções, permitindo que eles interajam com as páginas da web.
- Validação: os elementos de formulário HTML podem ser usados para validar a entrada do usuário, garantindo que os dados inseridos sejam precisos e no formato correto, resultando em menos erros e melhor experiência do usuário.
- Acessibilidade: os elementos de formulário melhoram a acessibilidade da página da Web, fornecendo rótulos e descrições para campos de entrada que podem ser lidos por tecnologias assistivas, como leitores de tela.
- Segurança: formulários HTML podem ser usados para enviar informações confidenciais, como detalhes de cartão de crédito e senhas. Os elementos de formulário podem implementar medidas de segurança como criptografia e validação do lado do servidor para garantir que esses dados sejam tratados com segurança.