Manipulação Programática de Elementos de Formulário HTML com JavaScript

Objetos de Botão

A interação com botões HTML é uma tarefa comum no desenvolvimento web. O JavaScript oferece métodos diretos para controlar suas propriedades e responder a eventos.

1. Desativando um Botão

É possível desativar um botão, tornando-o inacessível ao usuário, através da propriedade disabled.


<html>
<body>

<form>
  <input type="button" id="botaoPrincipal" value="Ação">
</form>

<p>Clique em "Desativar" para inabilitar o botão "Ação":</p>

<button onclick="inabilitarBotao()">Desativar</button>

<script>
function inabilitarBotao() {
  document.getElementById("botaoPrincipal").disabled = true;
}
</script>

</body>
</html>

2. Obtendo o Nome de um Botão

O atributo name de um botão é útil para identificá-lo em submissões de formulário.


<html>
<body>

<form id="formDados" action="/processar_dados.php">
  <button id="botaoSubmit" name="departamento" type="submit" value="TI">Departamento TI</button>
</form>

<p>Clique para exibir o atributo 'name' do botão:</p>

<button onclick="mostrarNomeBotao()">Exibir Nome</button>

<p id="resultadoNome"></p>

<script>
function mostrarNomeBotao() {
  const nomeAtributo = document.getElementById("botaoSubmit").name;
  document.getElementById("resultadoNome").textContent = nomeAtributo;
}
</script>

</body>
</html>

3. Verificando o Tipo de um Botão

O atributo type define o comportamento do botão (ex: submit, reset, button).


<html>
<body>

<button id="botaoAcao" type="button">Executar</button>

<p>Clique para retornar o tipo do botão "Executar":</p>

<button onclick="obterTipoBotao()">Verificar Tipo</button>

<p id="resultadoTipo"></p>

<script>
function obterTipoBotao() {
  const tipoElemento = document.getElementById("botaoAcao").type;
  document.getElementById("resultadoTipo").textContent = tipoElemento;
}
</script>

</body>
</html>

4. Acessando o Texto Visível de um Botão

Para botões do tipo <button>, o texto visível é o conteúdo entre as tags de abertura e fechamento.


<html>
<body>

<form id="formPreferencias" action="/salvar_preferencias.php">
  <button id="btnOpcaoA" name="preferencia" type="submit" value="valorA">Opção A</button>
  <button id="btnOpcaoB" name="preferencia" type="submit" value="valorB">Opção B</button>
</form>

<p>Clique para exibir o texto do botão "Opção A":</p>

<button onclick="mostrarTextoInterno()">Ver Texto</button>

<p id="resultadoTexto"></p>

<script>
function mostrarTextoInterno() {
  const textoBotao = document.getElementById("btnOpcaoA").textContent;
  document.getElementById("resultadoTexto").textContent = textoBotao;
}
</script>

</body>
</html>

5. Identificando o Formulário Associado a um Botão

Um botão pode ser associado a um formulário específico. A propriedade form de um botão permite acessar seu formulário pai.


<html>
<body>

<form id="formularioPrincipal">
  <button id="btnEnvio" type="button">Enviar Dados</button>
</form>

<p>Clique para exibir o ID do formulário ao qual o botão "Enviar Dados" pertence:</p>

<button onclick="obterIdFormulario()">ID do Formulário</button>

<p id="resultadoFormId"></p>

<script>
function obterIdFormulario() {
  const idDoFormularioAssociado = document.getElementById("btnEnvio").form.id;
  document.getElementById("resultadoFormId").textContent = idDoFormularioAssociado;
}
</script>

</body>
</html>

Objetos de Formulário

Os formulários são cruciais para coletar dados do usuário. O JavaScript oferece diversas maneiras de itneragir e controlar o comportamento dos objetos de formulário.

1. Submetendo um Formulário Programaticamente

Em vez de um botão de submit, um formulário pode ser enviado via JavaScript.


<html>
<body>

<p>Preencha os campos e clique em "Submeter" para enviar o formulário:</p>

<form id="formUsuario" action="/pagina_recebe_dados.php">
  Nome: <input type="text" name="primeiroNome"><br>
  Sobrenome: <input type="text" name="ultimoNome"><br><br>
  <input type="button" onclick="enviarFormulario()" value="Submeter">
</form>

<script>
function enviarFormulario() {
  document.getElementById("formUsuario").submit();
}
</script>

</body>
</html>

2. Redefinindo os Campos de um Formulário

É possível limpar todos os campos de um formulário e retornar aos seus valores iniciais usando o método reset().


<html>
<body>

<p>Preencha os campos abaixo e clique em "Redefinir" para limpar o formulário.</p>

<form id="formCadastro">
  Nome: <input type="text" name="nomeCompleto" value="João"><br>
  Email: <input type="text" name="emailUsuario" value="joao@example.com"><br><br>
  <input type="button" onclick="resetarFormulario()" value="Redefinir">
</form>

<script>
function resetarFormulario() {
  document.getElementById("formCadastro").reset();
}
</script>

</body>
</html>

3. Obtendo os Valores de Todos os Elementos de um Formulário

A propriedade elements de um formulário fornece acesso a todos os seus controles de entrada.


<html>
<body>

<form id="formDadosPessoais" action="/coletar_dados.php">
  Primeiro Nome: <input type="text" name="pNome" value="Mickey"><br>
  Último Nome: <input type="text" name="uNome" value="Mouse"><br><br>
  <input type="submit" value="Enviar Dados">
</form> 

<p>Clique para exibir os valores de cada campo do formulário.</p>

<button onclick="listarValores()">Listar Valores</button>

<p id="saidaValores"></p>

<script>
function listarValores() {
  const formularioAlvo = document.getElementById("formDadosPessoais");
  let valoresColetados = "";
  for (let i = 0; i < formularioAlvo.elements.length ;i++) {
    valoresColetados += formularioAlvo.elements[i].value + "<br>";
  }
  document.getElementById("saidaValores").innerHTML = valoresColetados;
}
</script>

</body>
</html>

4. Verificando a Codificação de Caracteres Aceita pelo Formulário

O atributo accept-charset especifica a codificação de caracteres que o servidor deve esperar.


<html>
<body>

<form id="formCodificacao" accept-charset="UTF-8">
  Nome: <input type="text" name="nome" value="Carlos"><br>
  Cidade: <input type="text" name="cidade" value="Lisboa"><br>
</form>

<p>Clique para exibir o 'accept-charset' do formulário:</p>

<button onclick="mostrarAcceptCharset()">Ver Codificação</button>

<p id="resultadoCharset"></p>

<script>
function mostrarAcceptCharset() {
  const codificacaoAceita = document.getElementById("formCodificacao").acceptCharset;
  document.getElementById("resultadoCharset").textContent = codificacaoAceita;
}
</script>

</body>
</html>

5. Obtendo o Atributo `action` do Formulário

O atributo action define o URL para onde os dados do formulário serão enviados.


<html>
<body>

<form id="formDestino" action="/api/dados">
  Produto: <input type="text" name="produto" value="TV"><br>
  Quantidade: <input type="text" name="quantidade" value="1"><br><br>
  <input type="submit" value="Comprar">
</form>

<p>Clique para exibir o valor do atributo 'action' do formulário:</p>

<button onclick="mostrarActionUrl()">Ver Action</button>

<p id="resultadoAction"></p>

<script>
function mostrarActionUrl() {
  const enderecoAcao = document.getElementById("formDestino").action;
  document.getElementById("resultadoAction").textContent = enderecoAcao;
}
</script>

</body>
</html>

6. Encontrando o Valor do Atributo `enctype`

O enctype especifica como os dados do formulário devem ser codificados ao serem enviados, especialmente útil para upload de arquivos.


<html>
<body>

<form id="formUpload" action="/upload_file.php" method="post" enctype="multipart/form-data">
  Arquivo: <input type="file" name="arquivoParaUpload"><br><br>
  <input type="submit" value="Upload">
</form>

<p>Clique para exibir o valor do atributo 'enctype' do formulário:</p>

<button onclick="mostrarEnctype()">Ver Enctype</button>

<p id="resultadoEnctype"></p>

<script>
function mostrarEnctype() {
  const tipoCodificacao = document.getElementById("formUpload").enctype;
  document.getElementById("resultadoEnctype").textContent = tipoCodificacao;
}
</script>

</body>
</html>

7. Contando o Número de Elementos em um Formulário

A propriedade length de um objeto de formulário retorna o número total de elementos de entrada dentro dele.


<html>
<body>

<form id="formContador" action="/contar_inputs.php">
  Item 1: <input type="text" name="item1"><br>
  Item 2: <input type="text" name="item2"><br>
  <input type="checkbox" name="aceite"> Aceito os termos<br><br>
  <input type="submit" value="Enviar">
</form>

<p>Clique para exibir o número de elementos no formulário:</p>

<button onclick="contarElementos()">Contar</button>

<p id="resultadoContagem"></p>

<script>
function contarElementos() {
  const numeroDeElementos = document.getElementById("formContador").elements.length;
  document.getElementById("resultadoContagem").textContent = numeroDeElementos;
}
</script>

</body>
</html>

8. Descobrindo o Método de Envio de Dados do Formulário

O atributo method especifica o método HTTP a ser usado ao enviar os dados (GET ou POST).


<html>
<body>

<form id="formMethod" action="/processar" method="post">
  Nome de Usuário: <input type="text" name="username" value="admin"><br>
  Senha: <input type="password" name="password" value="12345"><br><br>
  <input type="submit" value="Login">
</form>

<p>Clique para exibir o valor do método de envio do formulário.</p>

<button onclick="mostrarMetodo()">Ver Método</button>

<p id="resultadoMetodo"></p>

<script>
function mostrarMetodo() {
  const metodoEnvio = document.getElementById("formMethod").method;
  document.getElementById("resultadoMetodo").textContent = metodoEnvio;
}
</script>

</body>
</html>

9. Acessando o Nome de um Formulário

O atributo name fornece um nome para o formulário, que pode ser usado para referência em scripts ou por submissão de dados.


<html>
<body>

<form id="formPerfil" name="perfilUsuario" action="/salvar_perfil.php">
  Nome: <input type="text" name="nome" value="Ana"><br>
  Email: <input type="text" name="email" value="ana@example.com"><br><br>
  <input type="submit" value="Salvar">
</form>

<p>Clique para exibir o nome do formulário:</p>

<button onclick="mostrarNomeFormulario()">Ver Nome</button>

<p id="resultadoNomeForm"></p>

<script>
function mostrarNomeFormulario() {
  const nomeDoFormulario = document.getElementById("formPerfil").name;
  document.getElementById("resultadoNomeForm").textContent = nomeDoFormulario;
}
</script>

</body>
</html>

10. Determinando o Alvo de um Formulário

O atributo target especifica onde a resposta de um formulário será exibida (ex: _self, _blank).


<html>
<body>

<form id="formAlvo" action="/pagina_resultado.php" target="_blank">
  Busca: <input type="text" name="query" value="javascript"><br><br>
  <input type="submit" value="Pesquisar">
</form>

<p>Clique para exibir o 'target' do formulário:</p>

<button onclick="mostrarTargetFormulario()">Ver Target</button>

<p id="resultadoTarget"></p>

<script>
function mostrarTargetFormulario() {
  const alvoDoFormulario = document.getElementById("formAlvo").target;
  document.getElementById("resultadoTarget").textContent = alvoDoFormulario;
}
</script>

</body>
</html>

Objetos de Seleção e Opção

Os menus suspensos (<select>) e suas opções (<option>) são elementos fundamentais para permitir escolhas em formulários. O JavaScript oferece controle preciso sobre esses elementos.

1. Habilitando e Desabilitando um Menu Suspenso

A propriedade disabled pode ser usada para controlar a interatividade de um menu <select>.


<html>
<head>
<script>
function desativarMenu() {
  document.getElementById("selecaoItens").disabled = true;
}
function ativarMenu() {
  document.getElementById("selecaoItens").disabled = false;
}
</script>
</head>
<body>

<form>
<select id="selecaoItens">
  <option>Caneta</option>
  <option>Lápis</option>
  <option>Borracha</option>
  <option>Caderno</option>
</select>
<br><br>
<input type="button" onclick="desativarMenu()" value="Desativar Lista">
<input type="button" onclick="ativarMenu()" value="Ativar Lista">
</form>

</body>
</html>

2. Obtendo o ID do Formulário que Contém um Menu Suspenso

Assim como os botões, os menus <select> também possuem uma referência ao formulário ao qual pertencem.


<html>
<body>

<form id="formCategorias">
<select id="menuCategorias">
  <option>Eletrônicos</option>
  <option>Roupas</option>
  <option>Alimentos</option>
  <option>Livros</option>
</select>
</form>

<p>O ID do formulário é:</p>
<p id="idFormDropdown"></p>

<script>
document.getElementById("idFormDropdown").textContent = document.getElementById("menuCategorias").form.id;
</script>

</body>
</html>

3. Contando o Número de Opções em um Menu Suspenso

A propriedade length de um objeto <select> retorna o número de elementos <option> dentro dele.


<html>
<head>
</head>
<body>

<form>
<select id="listaCores">
  <option>Vermelho</option>
  <option>Azul</option>
  <option>Verde</option>
  <option>Amarelo</option>
  <option>Roxo</option>
</select>
</form>

<p>Existem <span id="numOpcoes">0</span> opções na lista.</p>

<script>
document.getElementById("numOpcoes").textContent =
document.getElementById("listaCores").options.length;
</script>

</body>
</html>

4. Convertendo um Menu Suspenso em uma Lista Multilinha

O atributo size de um <select> controla o número de opções visíveis, transformando-o em uma lista de rolagem.


<html>
<head>
<script>
function ajustarTamanho() {
  document.getElementById("selecaoTamanho").size = 3; /* Exibe 3 opções */
}
</script>
</head>
<body>

<form>
<select id="selecaoTamanho">
  <option>Café</option>
  <option>Chá</option>
  <option>Suco</option>
  <option>Leite</option>
  <option>Água</option>
</select>
<input type="button" onclick="ajustarTamanho()" value="Mudar Tamanho">
</form>

</body>
</html>

5. Habilitando Múltiplas Seleções em um Menu

O atributo multiple permite que o usuário selecione mais de uma opção, geralmente segurando a tecla Ctrl ou Shift.


<html>
<head>
<script>
function permitirMultiplaSelecao() {
  document.getElementById("selecaoMultipla").multiple = true;
}
</script>
</head>
<body>

<form>
<select id="selecaoMultipla" size="4">
  <option>JavaScript</option>
  <option>Python</option>
  <option>Java</option>
  <option>C#</option>
</select>
<input type="button" onclick="permitirMultiplaSelecao()" value="Permitir Multi-Seleção">
</form>

<p>Antes de clicar, você não pode selecionar mais de uma opção. Após clicar, você pode (segurando Shift ou Ctrl).</p>

</body>
</html>

6. Exibindo a Opção Atualmente Selecionada

A propriedade selectedIndex retorna o índice da opção selecionada, e options[index].textContent retorna seu texto.


<html>
<head>
<script>
function exibirOpcaoSelecionada() {
  const seletor = document.getElementById("escolhaSabor");
  const saborSelecionado = seletor.options[seletor.selectedIndex].textContent;
  document.getElementById("saborResultante").textContent = saborSelecionado;
}
</script>
</head>
<body>

<form>
Selecione seu sabor de sorvete favorito:
<select id="escolhaSabor">
  <option>Chocolate</option>
  <option>Baunilha</option>
  <option>Morango</option>
  <option>Pistache</option>
</select>
<br><br>
<input type="button" onclick="exibirOpcaoSelecionada()" value="Ver Sabor!">
</form>

<p id="saborResultante"></p>

</body>
</html>

7. Listando Todas as Opções Disponíveis em um Menu

É possível iterar sobre a coleção de opções para exibir o texto de cada uma.


<html>
<head>
<script>
function listarTodasOpcoes() {
  const seletor = document.getElementById("listaPaises");
  let textosOpcoes = [];
  for (let i = 0; i < seletor.options.length; i++) {
    textosOpcoes.push(seletor.options[i].textContent);
  }
  document.getElementById("outputOpcoes").textContent = textosOpcoes.join(", ");
}
</script>
</head>
<body>

<form>
Selecione um país:
<select id="listaPaises">
  <option>Brasil</option>
  <option>Portugal</option>
  <option>Angola</option>
  <option>Moçambique</option>
</select>
<br><br>
<input type="button" onclick="listarTodasOpcoes()" value="Exibir Todas as Opções">
</form>

<p id="outputOpcoes"></p>

</body>
</html>

8. Obtendo o Índice da Opção Selecionada

A propriedade selectedIndex retorna um número inteiro representando a posição da opção selecionada (baseado em zero).


<html>
<head>
<script>
function obterIndice() {
  document.getElementById("indiceResultado").textContent =
  document.getElementById("menuFrutas").selectedIndex;
}
</script>
</head>
<body>

<form>
Selecione sua fruta favorita:
<select id="menuFrutas">
  <option>Maçã</option>
  <option>Laranja</option>
  <option>Abacaxi</option>
  <option>Banana</option>
</select>
<br><br>
<input type="button" onclick="obterIndice()" 
value="Exibir o índice da opção selecionada">
</form>

<p id="indiceResultado"></p>

</body>
</html>

9. Alterando o Texto de uma Opção Selecionada

O texto de uma opção específica pode ser modificado dinamicamente.


<html>
<head>
<script>
function mudarTextoOpcao() {
  const seletor = document.getElementById("menuVegetais");
  seletor.options[seletor.selectedIndex].textContent = "Cenoura (alterado)";
}
</script>
</head>
<body>

<form>
Selecione um vegetal:
<select id="menuVegetais">
  <option>Brócolis</option>
  <option>Espinafre</option>
  <option>Batata</option>
  <option>Tomate</option>
</select>
<br><br>
<input type="button" onclick="mudarTextoOpcao()" value="Alterar texto da opção selecionada">
</form>

</body>
</html>

10. Removendo uma Opção de um Menu Suspenso

O método remove() pode ser utilizado para excluir uma opção do menu <select> pelo seu índice.


<html>
<head>
<script>
function removerOpcaoSelecionada() {
  const seletor = document.getElementById("menuBebidas");
  seletor.remove(seletor.selectedIndex);
}
</script>
</head>
<body>

<form>
<select id="menuBebidas">
  <option>Refrigerante</option>
  <option>Cerveja</option>
  <option>Vinho</option>
  <option>Água Mineral</option>
</select>
<input type="button" onclick="removerOpcaoSelecionada()" value="Remover opção selecionada">
</form>

</body>
</html>

Tags: javascript HTML DOM forms Buttons

Publicado em 7-29 13:44

Doido Dev

Manipulação Programática de Elementos de Formulário HTML com JavaScript

Objetos de Botão

1. Desativando um Botão

2. Obtendo o Nome de um Botão

3. Verificando o Tipo de um Botão

4. Acessando o Texto Visível de um Botão

5. Identificando o Formulário Associado a um Botão

Objetos de Formulário

1. Submetendo um Formulário Programaticamente

2. Redefinindo os Campos de um Formulário

3. Obtendo os Valores de Todos os Elementos de um Formulário

4. Verificando a Codificação de Caracteres Aceita pelo Formulário

5. Obtendo o Atributo `action` do Formulário

6. Encontrando o Valor do Atributo `enctype`

7. Contando o Número de Elementos em um Formulário

8. Descobrindo o Método de Envio de Dados do Formulário

9. Acessando o Nome de um Formulário

10. Determinando o Alvo de um Formulário

Objetos de Seleção e Opção

1. Habilitando e Desabilitando um Menu Suspenso

2. Obtendo o ID do Formulário que Contém um Menu Suspenso

3. Contando o Número de Opções em um Menu Suspenso

4. Convertendo um Menu Suspenso em uma Lista Multilinha

5. Habilitando Múltiplas Seleções em um Menu

6. Exibindo a Opção Atualmente Selecionada

7. Listando Todas as Opções Disponíveis em um Menu

8. Obtendo o Índice da Opção Selecionada

9. Alterando o Texto de uma Opção Selecionada

10. Removendo uma Opção de um Menu Suspenso

Tags em Destaque

Doido Dev

Manipulação Programática de Elementos de Formulário HTML com JavaScript

Objetos de Botão

1. Desativando um Botão

2. Obtendo o Nome de um Botão

3. Verificando o Tipo de um Botão

4. Acessando o Texto Visível de um Botão

5. Identificando o Formulário Associado a um Botão

Objetos de Formulário

1. Submetendo um Formulário Programaticamente

2. Redefinindo os Campos de um Formulário

3. Obtendo os Valores de Todos os Elementos de um Formulário

4. Verificando a Codificação de Caracteres Aceita pelo Formulário

5. Obtendo o Atributo action do Formulário

6. Encontrando o Valor do Atributo enctype

7. Contando o Número de Elementos em um Formulário

8. Descobrindo o Método de Envio de Dados do Formulário

9. Acessando o Nome de um Formulário

10. Determinando o Alvo de um Formulário

Objetos de Seleção e Opção

1. Habilitando e Desabilitando um Menu Suspenso

2. Obtendo o ID do Formulário que Contém um Menu Suspenso

3. Contando o Número de Opções em um Menu Suspenso

4. Convertendo um Menu Suspenso em uma Lista Multilinha

5. Habilitando Múltiplas Seleções em um Menu

6. Exibindo a Opção Atualmente Selecionada

7. Listando Todas as Opções Disponíveis em um Menu

8. Obtendo o Índice da Opção Selecionada

9. Alterando o Texto de uma Opção Selecionada

10. Removendo uma Opção de um Menu Suspenso

Tags em Destaque

5. Obtendo o Atributo `action` do Formulário

6. Encontrando o Valor do Atributo `enctype`