Tag de botão em HTML
Neste artigo, mostrarei como usar a tag de botão em HTML, esta é uma tag muito importante na estrutura do formulário html.
A tag de botão cria um botão, ela não cria uma ação de envio de formulário como a tag de entrada. Portanto, geralmente o usamos em combinação com Javascript para criar as ações necessárias do problema.
No par de tags <button></button> , o usuário pode definir o conteúdo como um pedaço de texto ou uma imagem. Esta é a diferença entre a tag de botão e a tag de entrada com type = button .
1. Como usar a tag de botão em HTML
Por exemplo , crie um botão para mostrar saudações quando clicado.
<!DOCTYPE html> <html> <head> <title>Học lập trình miễn phí tại web888.vn</title> <meta charset="utf-8"> </head> <body> <h1>Học lập trình miễn phí tại web888.vn</h1> <button type="button" onclick="alert('Hello web888.vn!')" > Click để in ra lời chào web888 </button> </body> </html>No exemplo acima, criei um evento onclick para a tag do botão para que quando o botão for clicado, ele alerte o texto ' Olá, mundo! '.
2. Atributo da tag do botão em html
Aqui estão alguns dos atributos mais usados.
- autofocus – foca automaticamente na tag quando a página é carregada.
- type – especificará o estilo do botão, incluindo: enviar, redefinir, botão.
- nome – o nome do botão.
- desativado – se o botão está desativado ou não.
Por exemplo , use o atributo type para criar um botão que redefine os dados inseridos.
<form> <input type="text" name="username"> <input type="text" name="email"> <button type="reset">Reset</button> </form>3. Defina o CSS para o botão .
Para adicionar CSS ao botão, você pode usar duas maneiras:
- A primeira maneira é adicionar um atributo de estilo e escrever o CSS dentro dele.
- A segunda maneira é fornecer uma classe ou id à tag de entrada e, em seguida, contar com essas informações para gerar CSS.
<button class="color-red" id="btn" type="reset">Reset</button> <style> button{ color:red } .color-red{ color:red } #btn{ color:red } </style>Dos três métodos acima, você pode usar qualquer um deles.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
