HTML viene utilizzato per creare la struttura della pagina web e i linguaggi di scripting come JavaScript sono utilizzati per rendere la pagina web più interattiva e dinamica. Inoltre, HTML offre attributi diversi ai suoi elementi che aiutano a codificare JavaScript. Ad esempio, abbiamo bisogno di moduli in quasi tutte le applicazioni per inserire informazioni. Per inviare i dati del modulo al server, è necessario disporre di un pulsante che recuperà le informazioni tipizzate e inviarle a JavaScript per ulteriori elaborazioni.

Questa guida insegnerà sull'HTML ""Avere valore attributo"invia". Quindi, immerciamoci!

Come aggiungere il pulsante HTML Tipo = "Invia"?

In HTML, prima, aggiungi un nome di classe "myform". Quindi, eseguire i seguenti passaggi:

• All'interno del div, aggiungi

  Tag per l'intestazione.

• Quindi, aggiungi due caselle di testo per il nome e il cognome con etichette. IL "per"Attributo del"etichettaTag e il "id"Attributo del"ingresso"Il tag deve essere lo stesso. Ciò assocerà la didascalia al controllo di input.
• Aggiungi un pulsante con "tipo"Valore impostato come"invia","valore" COME "invia", E "id" COME "invia".
• Dopodiché, associa il "addData ()"Funzione con il pulsante di invio, che si attiva quando si fa clic sul pulsante. Questo modulo prenderà i dati dall'utente e li visualizzerà nella stessa pagina.
• Infine, specificare

  Tag in cui devono essere visualizzati i dati inviati. Questi

  I tag hanno assegnato gli ID come "displayfname" E "displaylname"Verrà utilizzato nel file JavaScript per accedervi ed eseguire l'ulteriore operazione.

Html

Il tipo di pulsante "Invia" attributo

Nome di battesimo:



Cognome:



Invia

Hai inviato il nome:> __________.

Hai inviato cognome:> ___________.

Applichiamo alcuni stili CSS al Div sopra menzionato. Qui, il ".myform"Si riferisce al nome Div menzionato nel file HTML:

• Assegna il "colore di sfondo"Valore della proprietà come"#81b29a".
• "allineamento" COME "centro"Allinea il contenuto del Div al centro.
• IL "altezza"Il valore della proprietà è impostato come"300px".
• "dimensione del font"È impostato come"grande".

CSS

.myform
Background-color: #81b29a;
Testo-align: centro;
Altezza: 300px;
Font-size: grande;

Nota: Non abbiamo aggiunto il codice JavaScript. Di conseguenza, il pulsante di invio non risponderà:

Ora, spostiamo per codificare la funzione JavaScript che verrà attivata sul clic del pulsante. Per fare ciò, in primo luogo, creare un nuovo file con un'estensione come ".js". Quindi, definisci una funzione chiamata "addData ()". Questa funzione prenderà innanzitutto il valore di entrambi i campi di input accedendoli utilizzando i loro ID nel documento.metodo getElementById (). Quindi, visualizza il valore recuperato come testo interno delle etichette aggiunte.

JavaScript

funzione addData ()
var fname = documento.getElementById ("fname").valore;
var lname = documento.getElementById ("LNAME").valore;
documento.getElementById ("DisplayFName").InnerText = fname;
documento.getElementById ("DisplayLName").InnerText = lname;

Si può osservare che dopo aver inserito il nome e il cognome quando il "Invia"Il pulsante viene cliccato, i nomi vengono visualizzati nelle etichette:

Abbiamo imparato come funziona il pulsante di invio HTML con dimostrazione pratica.

Conclusione

In HTML, ci sono centinaia di elementi come paragrafi, campi di input, pulsanti e altro ancora. Più specificamente, l'elemento pulsante HTML con il valore dell'attributo "invia"Viene utilizzato per inviare i valori dei dati al gestore del modulo o per elaborare i valori di input. In questa guida, abbiamo utilizzato il pulsante di invio per invocare una funzione JavaScript con esempi pratici.