Botões em html
Os botões HTML são como qualquer outro botão na tela e podem executar várias funções. Os botões HTML podem ser usados para enviar ou redefinir dados do formulário, para mostrar qualquer sinal de sucesso ou perigo, para criar um botão de link e assim por diante.
No HTML, os botões podem ser criados usando os elementos e os elementos. No entanto, o botão criado com elementos lida com apenas dados textuais, enquanto o botão criado com elemento suporta o upload de imagem, uma extensa lista de atributos de estilo e muito mais. Este artigo fornece um guia detalhado para os botões HTML com os seguintes resultados de aprendizado.
- Como criar botões HTML
- Botões HTML com estrutura de bootstrap
- Botões HTML com W3.estrutura CSS
Como criar um botão HTML
Como discutido anteriormente, um botão HTML pode ser criado usando o elemento. A tag de botão suporta vários atributos que podem ser usados para aproveitar várias funcionalidades da tag de botão. Como, ele pode passar uma função ou script em seu evento de cliques. Além disso, o atributo de tipo especifica a funcionalidade do botão de que seria um botão de envio ou um botão de redefinição. Vamos dar uma olhada nos atributos que são suportados pelo elemento de botão HTML.
A tabela a seguir lista os atributos suportados pela tag de botão.
| Atributo | Valor | Descrição |
|---|---|---|
| auto-foco | verdadeiro falso | O botão estaria focado em carregar a página |
| desabilitado | verdadeiro falso | O botão específico seria desativado |
| forma | form_id | Este atributo mostra que o botão está associado a uma das mais formas |
| formação | Url | Este atributo especifica para onde os dados do formulário serão enviados. |
| formmethod | Obtenha, poste | Especifica o método HTTP para esse formulário específico |
| formnovalidato | formnovalidato | Os dados do formulário não serão validados mediante envio |
| FormTarget | _blank, _self, _parent, _top, Framename | Especifica o local onde a resposta seria exibida |
| nome | nome | Este atributo especifica o nome do botão |
| tipo | Redefinir, enviar, botão | O tipo de botão é especificado |
| valor | texto | O valor inicial do botão está definido |
| ONCLICK | roteiro | Executa um script para clicar no botão |
Vamos praticar esses atributos com a ajuda dos seguintes exemplos.
Exemplo 1: Enviar e redefinir botões
Este exemplo mostra a criação de botões HTML com type = "submeter" e tipo = "Redefinir" Atributos da tag. Os valores do tipo atributo Mostrar que os dados serão enviados/repousante ao clicar no botão.
O código fornecido abaixo cria botões de envio e redefinir na tag de formulário.
Html
O código acima cria um formulário que contém dois botões com type = "submeter" e tipo = "redefinir". O evento OnClick de ambos os botões é exercido e uma função JavaScript será executada em cada botão.
JavaScript
função sub ()alerta ("submissão bem -sucedida");
function res ()
alerta ("redefinição de dados");
São criadas duas funções JS que devem ser chamadas ao clicar nos botões.
Saída
A partir da saída, observa -se que, nos botões de envio e redefinição, um alerta é iniciado em cada clique. Além disso, os dados são enviados e redefinidos também.
Exemplo 2: Botões HTML com Bootstrap
Os botões HTML podem ser associados às propriedades CSS para estilizá -los para uma melhor apresentação. Bootstrap é uma estrutura CSS amplamente usada que possui uma classe embutida para botões. O código HTML a seguir pratica o sucesso, o perigo e a classe de link de bootstrap para adicionar alguns efeitos aos botões.
Para adicionar aulas de bootstrap, você deve adicionar o seguinte link CDN ao seu documento HTML.
Saída
A saída mostra que o “Btn-success”A classe tem uma cor verde enquanto a“BTN Danger”A classe transformou a cor do botão em vermelho. Por outro lado, o “btn-link”A classe criou um botão de link.
Exemplo 3: Botões HTML com W3.estrutura CSS
O W3.A estrutura CSS tem sido amplamente utilizada devido às suas classes internas. O código a seguir cria botões com W3.Classes CSS.
O código acima pratica as classes W3-Orange, W3-Round-Large, W3-Border e W3-Hover-Red do W3.estrutura CSS. Essas classes mudam a cor, a forma, a borda e adicionam efeitos pairando aos botões.
Saída
Da saída, observa -se que o primeiro botão é arredondado e em cor laranja. Enquanto o segundo botão tem um efeito de pairar e mover o cursor para ele tornar o botão de cor vermelha.
Conclusão
Os botões HTML podem ser criados usando o elemento e o elemento usando o type = "submeter" atributo. No entanto, um botão criado com o elemento oferece mais funcionalidade e estilo em comparação com o botão criado por tag. Este artigo fornece um guia descritivo para botões HTML. Além disso, este post também serve o estilo de botões HTML usando duas estruturas CSS amplamente usadas, que incluem W3.CSS e Bootstrap.