Skip to content

Criação de botões HTML em formulários

23 de maio de 2021

Os formulários HTML são uma das maneiras mais básicas de adicionar interatividade ao seu site. Você pode fazer perguntas e solicitar respostas de seus leitores, fornecer informações adicionais de bancos de dados, configurar jogos e muito mais. Existem vários elementos HTML que você pode usar para construir seus formulários. E uma vez que você construiu seu formulário, existem muitas maneiras diferentes de enviar esses dados para o servidor ou apenas iniciar a execução da ação do formulário. Existem várias maneiras de enviar seus formulários:

  • Este é o método mais comum de obter dados para o servidor, mas pode ter uma aparência bem simples.
  • Usar uma imagem torna muito fácil ajustar o botão de envio ao estilo do seu site. Mas algumas pessoas podem não reconhecê-lo como um botão de envio.
  • O botão INPUT tag oferece muitas das mesmas opções que a tag INPUT da imagem, mas se parece mais com o tipo de envio padrão. Requer JavaScript para ativar.
  • A tag BUTTON é um tipo de botão mais versátil do que a tag INPUT. Esta tag requer Javascript para ser ativada.
  • O elemento COMMAND é novo no HTML5 e fornece uma maneira de ativar scripts e formulários com ações associadas. Ele é ativado com JavaScript.

O Elemento INPUT

O elemento INPUT é a forma mais comum de enviar um formulário, tudo o que você faz é escolher um tipo (botão, imagem ou enviar) e, se necessário, adicionar algum script para enviar à ação do formulário.
O elemento pode ser escrito assim. Mas se você fizer isso, terá resultados diferentes em navegadores diferentes. A maioria dos navegadores cria um botão que diz “Enviar”, mas o Firefox cria um botão que diz “Enviar consulta”. Para alterar o que o botão diz, você deve adicionar um atributo: value = “Submit Form”>

type = “code”> O elemento é escrito assim, mas se você omitir todos os outros atributos, tudo o que será exibido nos navegadores será um botão cinza vazio. Para adicionar texto ao botão, use o atributo value. Mas este botão não enviará o formulário a menos que você use JavaScript. onclick = “enviar ();”>

type = “code”> O é semelhante ao tipo de botão, que precisa de um script para enviar o formulário. Exceto que, em vez de um valor de texto, você precisa adicionar um URL de origem da imagem. src = “https://www.lifewire.com/submit.gif”>

type = “código”>

O Elemento de Botão

O elemento BUTTON requer uma tag de abertura e uma tag de fechamento. Ao usá-lo, qualquer conteúdo que você colocar dentro da tag será colocado em um botão. Então você ativa o botão com um script. Enviar formulário

type = “code”> Você pode incluir imagens em seu botão ou combinar imagens e texto para criar um botão mais interessante. Enviar formulário

type = “código”>

O Elemento de Comando

O elemento COMMAND é novo no HTML5. Ele não requer o uso de um FORMULÁRIO, mas pode funcionar como um botão de envio de um formulário. Este elemento permite criar páginas mais interativas sem requerer formulários, a menos que você realmente precise de formulários. Se você quiser que o comando diga algo, você escreve a informação em um atributo label. label = “Enviar formulário”>

type = “code”> Se quiser que seu comando seja representado por uma imagem, use o atributo icon. icon = “https://www.lifewire.com/submit.gif”>

type = “code”> Formulários HTML têm várias maneiras diferentes de enviar, como você aprendeu na página anterior. Dois desses métodos são a tag INPUT e a tag BUTTON. Existem boas razões para usar esses dois elementos.

O Elemento de Entrada

A tag é a maneira mais fácil de enviar um formulário. Não requer nada além da própria tag, nem mesmo um valor. Quando um cliente clica no botão, ele é enviado automaticamente. Você não precisa adicionar nenhum script, os navegadores sabem enviar o formulário quando uma tag INPUT de envio é clicada.
O problema é que esse botão é muito feio e simples. Você não pode adicionar imagens a ele. Você pode estilizá-lo como qualquer outro elemento, mas ainda pode parecer um botão feio. Use o método INPUT quando seu formulário precisar estar acessível mesmo em navegadores que têm o JavaScript desativado.

O Elemento BUTTON

O elemento BUTTON oferece mais opções para o envio de formulários. Você pode colocar qualquer coisa dentro de um elemento BUTTON e transformá-lo em um botão de envio. Mais comumente, as pessoas usam imagens e texto. Mas você poderia criar um DIV e transformar tudo isso em um botão de envio, se quisesse.

A maior desvantagem do elemento BUTTON é que ele não envia o formulário automaticamente. Isso significa que deve haver algum tipo de script para ativá-lo. E por isso é menos acessível do que o método INPUT. Qualquer usuário que não tenha o JavaScript ativado não poderá enviar um formulário com apenas um elemento BUTTON para enviá-lo.

Use o método BUTTON em formulários que não sejam tão críticos. Além disso, essa é uma ótima maneira de adicionar opções de envio adicionais em um formulário.

Formato mla apa chicago Sua Citação

Kyrnin, Jennifer. “Fazendo botões HTML em formulários.” ThoughtCo, maio. 14 de 2021, thinkingco.com/buttons-on-forms-3464313.
Kyrnin, Jennifer. (2021, 14 de maio). Criação de botões HTML em formulários. Obtido em https://www.thoughtco.com/buttons-on-forms-3464313
Kyrnin, Jennifer. “Fazendo botões HTML em formulários.” ThoughtCo. https://www.thoughtco.com/buttons-on-forms-3464313 (acessado em 23 de maio de 2021).