Pulsanti in html
I pulsanti HTML sono come qualsiasi altro pulsante sullo schermo e possono eseguire varie funzioni. I pulsanti HTML possono essere utilizzati per inviare o ripristinare i dati del modulo, per mostrare qualsiasi successo o segno di pericolo, per creare un pulsante di collegamento e così via.
In HTML, i pulsanti possono essere creati utilizzando gli elementi. Tuttavia, il pulsante creato con elemento tratta solo i dati testuali mentre il pulsante creato con elemento supporta il caricamento delle immagini, un ampio elenco di styling degli attributi e molto altro. Questo articolo fornisce una guida dettagliata ai pulsanti HTML con i seguenti risultati di apprendimento.
- Come creare pulsanti HTML
- Pulsanti HTML con framework bootstrap
- Pulsanti HTML con W3.framework CSS
Come creare un pulsante HTML
Come discusso in precedenza, è possibile creare un pulsante HTML utilizzando l'elemento. Il tag del pulsante supporta numerosi attributi che possono essere utilizzati per avvalersi di varie funzionalità del tag pulsante. Ad esempio, può passare una funzione o uno script nel suo evento on-click. Inoltre, l'attributo di tipo specifica la funzionalità del pulsante che sarebbe un pulsante di invio o un pulsante di ripristino. Diamo un'occhiata agli attributi supportati dall'elemento pulsante HTML.
La tabella seguente elenca gli attributi supportati dal tag del pulsante.
| Attributo | Valore | Descrizione |
|---|---|---|
| autofocus | vero falso | Il pulsante sarebbe focalizzato sul caricamento della pagina |
| Disabilitato | vero falso | Il pulsante specifico sarebbe disabilitato |
| modulo | Form_id | Questo attributo mostra che il pulsante è associato a una delle più forme |
| formazione | URL | Questo attributo specifica dove verranno inviati i dati del modulo. |
| formmethod | Ottieni, post | Specifica il metodo HTTP per quella forma specifica |
| formnovalidate | formnovalidate | I dati del modulo non saranno validati al momento della presentazione |
| Formtarget | _blank, _self, _parent, _top, framename | Specifica la posizione in cui la risposta verrebbe visualizzata |
| nome | nome | Questo attributo specifica il nome del pulsante |
| tipo | Ripristina, invio, pulsante | Viene specificato il tipo di pulsante |
| valore | testo | Il valore iniziale del pulsante è impostato |
| al clic | sceneggiatura | Esegue uno script facendo clic sul pulsante |
Pratichiamo questi attributi con l'aiuto dei seguenti esempi.
Esempio 1: Pulsanti inviare e ripristinare
Questo esempio mostra la creazione di pulsanti HTML con type = "Invia" E type = "reset" attributi di tag. I valori del tipo attributo mostra che i dati verranno inviati/riposare facendo clic sul pulsante.
Il codice fornito di seguito crea i pulsanti di invio e ripristino sul tag del modulo.
Html
Il codice sopra crea un modulo che contiene due pulsanti con type = ”invia” e type = ”reset”. L'evento OnClick di entrambi i pulsanti viene esercitato e una funzione JavaScript verrà eseguita su ciascun pulsante.
JavaScript
funzione sub ()avviso ("sottomissione di successo");
funzione res ()
avviso ("reset dati");
Vengono create due funzioni JS che dovrebbero essere chiamate facendo clic sui pulsanti.
Produzione
Dall'output, si osserva che ai pulsanti di invio e ripristino, viene avviato un avviso su ogni clic. Inoltre, i dati vengono inviati e ripristinati anche correttamente.
Esempio 2: pulsanti HTML con bootstrap
I pulsanti HTML possono essere associati alle proprietà CSS per modellarli per una migliore presentazione. Bootstrap è un framework CSS ampiamente usato che ha una classe integrata per i pulsanti. Il seguente codice HTML pratica il successo, il pericolo e la classe di collegamento di bootstrap per aggiungere alcuni effetti ai pulsanti.
Per aggiungere le classi bootstrap, è necessario aggiungere il seguente collegamento CDN nel documento HTML.
Produzione
L'output mostra che il "Btn-Success"La classe ha un colore verde mentre il"BTN-DANGER"La classe ha trasformato il colore del pulsante in rosso. D'altra parte, il "BTN-Link"La classe ha creato un pulsante di collegamento.
Esempio 3: pulsanti HTML con W3.framework CSS
Il W3.CSS Framework è stato ampiamente utilizzato a causa delle sue classi integrate. Il seguente codice crea pulsanti con W3.Classi CSS.
Il codice di cui sopra pratica le classi W3-Orange, W3-Round-Large, W3-Border e W3-Hover-Red del W3.framework CSS. Queste classi cambiano il colore, la forma, il bordo e aggiungono effetti a bandiera ai pulsanti.
Produzione
Dall'output, si osserva che il primo pulsante è arrotondato e in colore arancione. Mentre il secondo pulsante ha un effetto hover su di esso e spostando il cursore su di esso renderebbe il pulsante color rosso.
Conclusione
I pulsanti HTML possono essere creati utilizzando l'elemento e l'elemento usando il type = "Invia" attributo. Tuttavia, un pulsante creato con l'elemento offre più funzionalità e styling rispetto al pulsante creato da TAG. Questo articolo fornisce una guida descrittiva per i pulsanti HTML. Inoltre, questo post serve anche lo stile dei pulsanti HTML utilizzando due framework CSS ampiamente utilizzati, che includono W3.CSS e bootstrap.