Html <form> Attributi tag | Spiegato

Quando visitiamo un sito una delle cose più frequentemente osservate su ogni sito Web sono "moduli" come moduli di accesso, moduli di iscrizione, moduli di immissione dei dati, ecc. E a tale scopo, HTML fornisce un Tag per raccogliere i dati/informazioni dell'utente. IL Tag stesso non può inviare i dati da nessuna parte in modo da elaborare i dati del modulo possiamo utilizzare attributi diversi come azione, metodo, eccetera.

Questo articolo fornirà una linea guida completa per la creazione di un modulo e, a questo proposito, dobbiamo comprendere il concetto dei seguenti attributi della forma:

Come usare azione attributo in html
Come usare metodo attributo in html
Come usare bersaglio attributo in html
Come usare completamento automatico attributo in html

Come utilizzare l'attributo di azione nei moduli HTML

Determina quale azione verrà eseguita sulla presentazione del modulo i.e. Specifica un URL a cui verranno inviati i dati del modulo. L'esempio di seguito ti permetterà di capire come il azione opere di attributo

Esempio

Nel codice di seguito, abbiamo creato un file HTML denominato formSattribute.html

All'interno del tag specifichiamo il azione attributo.
L'attributo di azione contiene l'indirizzo di un altro file HTML chiamato "FormsResult.HTML "
Creiamo due campi per nome e password.
Successivamente, creiamo un pulsante chiamato "Invia" in "FormSAttribute.file html ".
Facendo clic sul pulsante di invio, ci devia al "Formst.file html "

Formsattribute.html

das.html

I dati dei moduli inviati dal modulottributo.Il file HTML verrà visualizzato sui moduli.file html:

Torna a FormatTributes.file html

L'esecuzione riuscita del codice mostra il seguente risultato:

Osservare l'URL del file, facendo clic sul pulsante di invio invierà i dati scritti nei campi di testo ai moduli.file html e mostra il seguente risultato:

Osserva la differenza tra i due URL:

Quando facciamo clic sul pulsante "Invia", ci porta ai "moduli.file html ".
Visualizzazione del contenuto di "FormSattribute.Il file HTML ”verifica che l'attributo di azione funzioni correttamente.

Come utilizzare l'attributo metodo nelle forme HTML

Determina come verranno inviati i dati del modulo e, a tale scopo, utilizza il metodo GET o il metodo post.

Ottieni metodo

Aggiunge i dati del modulo all'interno dell'URL e utilizza il punto interrogativo per separare i diversi parametri. Se non abbiamo menzionato l'attributo del metodo nel tag del modulo, per impostazione predefinita imposterà il Ottenere metodo.

Esempio

Come mostrato nell'esempio precedente, non abbiamo menzionato alcun metodo, quindi per impostazione predefinita invia i dati utilizzando il Ottenere metodo. Lo snippet di seguito spiegherà come usare il Ottenere metodo:

Formsattribute.Html

Sopra lo snippet visualizza il seguente output:

Specifichiamo "Nome studente" e "Password" come "Joe" e "Joe@123" rispettivamente e, di conseguenza, otteniamo il seguente output:

L'URL elabora i seguenti punti:

Sei nelle forme.file html
Il nome e la password sono aggiunti nell'URL che verifica che viene utilizzato il metodo.

Metodo post

Invia i dati al server separatamente i.e. Aggiunge i dati nel corpo della richiesta di HTTP invece dell'URL. È utile quando dobbiamo archiviare dati riservati sul server.

Esempio

Il seguente pezzo di codice ti aiuterà a capire come usare il inviare metodo:

Le "forme.Il file html "rimarrà lo stesso, l'unica differenza sarà nell'attributo dei moduli i.e. Useremo il inviare metodo:

Formsattributes.html

In questo modo, i dati verranno pubblicati e non appariranno nell'URL.

Come utilizzare l'attributo target nelle forme HTML

Specifica la finestra/scheda mirata per visualizzare il risultato i.e. determina che il risultato verrà visualizzato nella scheda corrente o nella nuova scheda. Può prendere _self, _parent, _top e _blank valore. IL _vuoto Mostrerà il risultato nella nuova scheda.

Esempio In questo esempio useremo il _vuoto valore per il bersaglio attributo per visualizzare il risultato nella nuova scheda:

Il seguente sarà l'output per il codice sopra:

Facendo clic sul pulsante di invio mostrerà il risultato in una nuova scheda:

Come utilizzare l'attributo di completamento automatico nei moduli HTML

Come suggerisce il nome stesso, l'attributo di completamento automatico determina se i valori devono essere completati automaticamente o meno. Ad esempio, il "complesso automatico = on"Determina che tutto ciò che un utente inserisce sarà ricordato per un uso futuro.

Esempio Consideriamo il pezzo di codice seguente per capire come utilizzare l'attributo di completamento automatico:

Il codice sopra imposta il valore del completamento automatico come ON e produce il seguente output:

Dopo aver riempito i rispettivi campi e inviato i dati, quindi aggiorna la pagina, è possibile verificare che il completamento automatico mostri in precedenza i dati inseriti come suggerimento.

L'output verifica che l'attributo di completamento automatico funzioni in modo appropriato.

Conclusione

Gli attributi di HTML determinano come elaborare i dati del modulo i.e. IL azione L'attributo determina l'azione da eseguire sulla presentazione del modulo, il metodo L'attributo determina come inviare i dati del modulo i.e. Il metodo GET verrà aggiunto nell'URL o il metodo post verrà aggiunto nel corpo della richiesta di HTTP. Inoltre, l'attributo target specifica la scheda/finestra mirata e l'attributo di completamento automatico determina se i dati già immessi devono essere ricordati per un uso successivo o meno.

AWS

Quali strumenti AWS e DevOps sono necessari per sviluppare un'app Web?

AWS Elastic Beanstalk, CodePipeline, Codice Summit, Code Build, Code Disking, CloudFormation e Cloud...

Artemide Ricci

AWS

Qual è la differenza tra AWS Batch e Lambda?

AWS Batch esegue Big Data Analytics utilizzando modelli di formazione per l'apprendimento automatico...

Nunzia Martini

JavaScript

Come eseguire TypeScript nel codice VS

Per eseguire il codice TypeScript in Codice VS, prima, è necessario installare un nodo e TypeScript,...

Domiziano Conte