HTML FORM TESTBOX
Scopo di una casella di testo in forme HTML
Una casella di testo o un campo di testo in un modulo HTML viene utilizzata per raccogliere dati testuali a singolo liner dall'utente. In generale, ogni volta che si desidera dare al tuo utente la libertà di inserire il testo digitando piuttosto che selezionandolo da un elenco predefinito, si utilizza sempre una casella di testo HTML o un campo di testo. La sezione seguente descriverà la procedura di creazione di una casella di testo in un modulo HTML.
Creazione di caselle di testo in forme HTML
Per apprendere la creazione di caselle di testo nelle forme HTML, è possibile considerare i due esempi spiegati di seguito:
Esempio n. 1: creazione di semplici caselle di testo nei moduli HTML
In questo esempio, il nostro obiettivo è creare semplici caselle di testo in forme HTML per la raccolta di informazioni specifiche. Tuttavia, non vogliamo intraprendere ulteriori azioni dopo. Abbiamo progettato il seguente script HTML per la creazione di semplici caselle di testo all'interno di moduli HTML:
Puoi vedere che in questo script, abbiamo prima fornito un'intestazione per notificare all'utente lo scopo di questo script HTML. Quindi, all'interno dell'etichetta "forma" (poiché stiamo creando un modulo HTML), abbiamo definito tre diverse caselle di testo con etichette "nome", "età" e "sesso" per la raccolta del nome, dell'età e del genere dell'utente rispettivamente. Tutte queste etichette, così come le caselle di testo associate, appariranno in righe separate. L'utente sarà autorizzato a inserire qualsiasi informazione che desideri all'interno di queste caselle di testo. Tuttavia, non sarà in grado di intraprendere ulteriori azioni dopo aver inserito queste informazioni.
Quando abbiamo eseguito il nostro script HTML, la pagina Web che è apparsa sul nostro browser è mostrata nell'immagine seguente. Questa pagina web contiene tutte e tre le nostre caselle di testo.
Ora, sei libero di inserire qualsiasi informazione casuale all'interno di queste caselle di testo, come mostrato nella seguente immagine:
Esempio n. 2: creazione di caselle di testo con un pulsante di azione in moduli HTML
In questo esempio, modificheremo leggermente lo script HTML che abbiamo creato sopra. Vogliamo apportare questa modifica per introdurre un pulsante di azione all'interno del nostro modulo HTML. Dovrai guardare lo script HTML mostrato di seguito per cogliere questa modifica:
Questo script HTML è quasi lo stesso di cui abbiamo condiviso sopra; Tuttavia, prima di chiudere l'etichetta "Modulo", abbiamo creato un pulsante "Invia" anche in questo modulo in modo che l'utente possa premere questo pulsante dopo aver inserito le informazioni pertinenti nel modulo. Tuttavia, non abbiamo creato alcuna pagina di azione. Pertanto, fare clic su questo pulsante non ti navighi in nessuna nuova pagina.
La pagina Web modificata secondo questo script HTML è mostrata nella seguente immagine:
Ora inseriremo alcune informazioni in ciascuna di queste caselle di testo, come mostrato nell'immagine qui sotto:
Dopo aver inserito queste informazioni, quando abbiamo premuto il pulsante "Invia", solo l'URL della nostra pagina web è cambiato, mostrando il nome, l'età e il genere che avevamo appena inserito. Questo è mostrato nella seguente immagine. Tuttavia, dopo averlo fatto, siamo stati semplicemente reindirizzati a un modulo HTML vuoto poiché non abbiamo creato alcuna pagina di azione in primo luogo.
Conclusione
Questo articolo è stato scritto tenendo presente la necessità di utilizzare caselle di testo in forme HTML. Pertanto, ha spiegato per la prima volta lo scopo di questo elemento HTML, seguito dal metodo di creazione di caselle di testo nelle forme HTML. Una volta imparato questo metodo, sarà un gioco da ragazzi per creare altrettante caselle di testo nelle forme HTML.