Tag pulsante in HTML
In questo articolo, ti mostrerò come utilizzare il tag del pulsante in HTML, questo è un tag molto importante nella struttura del modulo html.
Il tag del pulsante crea un pulsante, non crea un'azione di invio del modulo come fa il tag di input. Pertanto, lo utilizziamo spesso in combinazione con Javascript per creare le azioni richieste dal problema.
Nella coppia di tag <button></button> , l'utente può impostare il contenuto in modo che sia un pezzo di testo o un'immagine. Questa è la differenza tra il tag del pulsante e il tag di input con type = button .
1. Come utilizzare il tag del pulsante in HTML
Ad esempio , crea un pulsante per mostrare i saluti quando viene cliccato.
<!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>Nell'esempio sopra, ho creato un evento onclick per il tag del pulsante in modo che quando si fa clic sul pulsante, avviserà il testo " Ciao mondo! '.
2. Attributo del tag del pulsante in html
Ecco alcuni degli attributi più comunemente usati.
- autofocus : metti a fuoco automaticamente il tag quando la pagina viene caricata.
- tipo – specificherà lo stile del pulsante, inclusi: invio, ripristino, pulsante.
- nome – il nome del pulsante.
- disabilitato – indipendentemente dal fatto che il pulsante sia disabilitato o meno.
Ad esempio , utilizzare l'attributo type per creare un pulsante che reimposta i dati inseriti.
<form> <input type="text" name="username"> <input type="text" name="email"> <button type="reset">Reset</button> </form>3. Imposta CSS per il pulsante .tag
Per aggiungere CSS al pulsante, puoi utilizzare due modi:
- Il primo modo è aggiungere un attributo di stile e scrivere il CSS direttamente all'interno.
- Il secondo modo è dare al tag di input una classe o un id, quindi fare affidamento su queste informazioni per generare CSS.
<button class="color-red" id="btn" type="reset">Reset</button> <style> button{ color:red } .color-red{ color:red } #btn{ color:red } </style>Dei tre metodi sopra, puoi usarne uno qualsiasi.
