Finestra Di Prompt Javascript Con Textarea

Il tag HTML textarea viene utilizzato per creare un campo di immissione di testo su più righe in un unico modulo. È definito con il </code> e può contenere un numero illimitato di caratteri.</em></p><p>Quando crei un modulo HTML, potresti decidere di voler accettare una lunga stringa di testo. Ad esempio, se stai creando un modulo di contatto cliente per il sito web di un rivenditore, puoi creare un elemento del modulo che accetti una descrizione dettagliata di un problema che il cliente sta affrontando.</p><p>Qui è dove si trova il <code> HTML Viene visualizzato <textarea></code>. L`elemento <code><textarea></code> viene utilizzato per creare un elemento forma che fornisce funzionalità per modificare il testo su più righe. Questo elemento è utile se vuoi accettare risposte di testo da più utenti.</p><p>Questo tutorial discuterà, con alcuni esempi, come usare HTML <code><textarea></code> nel tuo Alla codice. Alla fine di questo tutorial, avrai tutte le conoscenze necessarie per utilizzare <code><textarea></code> come uno! pro</p><h2>Tag HTML Textarea</h2><p>Il <code><textarea></code> viene utilizzato per definire un campo di controllo di input di testo multilinea in un modulo. . <code><textarea></code> può contenere un numero illimitato di caratteri</p><p>La sintassi <code><textarea></code> è la seguente:</p> <p>pausa di Discende il nostro codice. Il tag <code><textarea></code> viene utilizzato per definire l`area dell`area di testo nel nostro modulo web. A differenza di <code><input></code>, <code><textarea></code> deve avere sia un tag di apertura (<code><textarea></code>) sia un tag di chiusura ( <code></ textarea > </codice>). Questo perché il testo predefinito che verrà visualizzato nella casella di testo è contenuto tra i due</p><p>tag. Abbiamo anche specificato due attributi nel nostro esempio:.</p> </div> </div> <ul><li><strong>linee </strong> indica al browser quante righe dovrebbe avere l`area di testo predefinita T. In altre parole, l`attributo righe indica l`altezza della casella di testo.</li><li><strong>Col. </strong> è il numero di colonne che la casella di testo dovrebbe avere per impostazione predefinita. In altre parole, l`attributo Col. indica la larghezza della casella di testo</li></ul> </a> </div> <p>Supponiamo di creare un web trainer per un negozio di abbigliamento locale. Questo modulo dovrebbe consentire ai clienti di commentare il loro acquisto. Poiché vogliamo dare agli utenti lo spazio per inviare commenti dettagliati, utilizzeremo un <code><textarea></code> HTML per raccogliere i commenti degli utenti.</p><p>Potremmo usare il seguente codice per creare il modulo commenti:</p> <p>Il nostro codice restituisce:</p><figure class = "wp-block image"> <img src = "h ttps: // LH6. googleusercontent.com / a0bBjFEzohKfpWUH6wMv2m0bBwWje2RZrGS4JQuBBDdrAGMvQdJpMP 91u3TiWx-XsTyB8YeQHJLJut19I-Ou5k4VLIGpXoWD5KbbgO7FaSFZC6pdzWKjejyaRVV5HbtNDI54Y_3N "alt =" A0bBjFEzohKfpWUH6wMv2m0bBwWje2RZrGS4JQuBBDdrAGMvQdJpMP91u3TiWx XsTyB8YeQHJLJut19I Ou5k4VLIGpXoWD5KbbgO7FaSFZC6pdzWKjejyaRVV5HbtNDI54Y 3N "> </ figure> <p> Let ". s rompere il nostro codice In primo luogo, ha dichiarato <code> <form> </code> che viene utilizzato per definire il nostro modulo online. Abbiamo quindi utilizzato un <code><label></code> per aggiungere un`etichetta alla nostra pagina chiedendo all`utente <code>Che feedback hai per noi?</code></p><p>Quindi, abbiamo utilizzato un <code><textarea></code> per creare il modulo di reso. Abbiamo specificato quattro attributi, che sono i seguenti:</p><ul><li>rows is 5 and memorizza il numero di righe che il campo deve avere</li><li>Col. è impostato su 30 e memorizza. il numero di colonne che il campo deve avere.</li><li>id è l`identificatore univoco assegnato al modulo , che verrebbe utilizzato quando inviamo il modulo.</li><li>il nome viene utilizzato anche per identificare il modulo ed è n necessario se vogliamo inviare il modulo a un server web.</li></ul> <p><code><textarea></code> è supportato da tutti i principali browser.</p><p>L`esempio sopra è un`implementazione di base di <code><textarea></code>, ma possiamo rendere il nostro modulo più avanzato.</p><p>Passiamo a due esempi più avanzati per illustrare come possiamo usare il <code><textarea></code> per creare caselle di testo.</p><h3>Lunghezze minime e massime </h3> <p>dos go Fai entrare ad esempio il nostro negozio di abbigliamento Supponiamo di voler limitare il numero di caratteri a ute nte invia a 1000, per incoraggiare gli utenti a essere concisi quando scrivono i loro commenti. Vogliamo anche impostare un limite minimo di caratteri su 10, per garantire che gli utenti scrivano qualcosa nel modulo</p> </a> </div> <p> è qui che entrano in gioco gli attributi MNLENGTH e mAXLENGTH.minlength viene utilizzato per specificare il numero minimo di caratteri che un utente deve scrivere e maxlength viene utilizzato per specificare il numero massimo di caratteri che un utente può scrivere in un modulo.</p><p>Ecco un esempio del nostro precedente modulo web con gli attributi minlength e maxlength definiti:</p> <p>Il nostro modulo di reso:</p><figure class = "wp-block image"> <img src = "https: //lh3.googleusercontent .com / ztmPnPdTmOQ1f7X3SWtWwd3iSXouyXSNof94000099SzkZHWo5Gy8TrbeKv0ZzD- JSR784uIegJeXzrWAvArwI_FpuE7Ul6cOZAwtBtKOSuKqw9 wd3iSXouyXSNof94000099SzkZHWo5Gy8TrbeKv0ZzD JSR784uIegJeXzrWAvArwI FpuE7Ul6cOZAwtfJyfEKVSuKqCwOILHdc9gj << se il modulo viene ritenuta non valida, non ci sono personaggi al nostro modulo. left "> E `importante notare che, anche se l`utente scrive meno di 10 caratteri nel nostro modulo, la textarea sarà comunque considerato valido. Se vogliamo imporre il limite minimo, dobbiamo specificare il <code></code> richiesto.</p><h3>Testo segnaposto </h3> <p>Nel nostro modulo web sopra, specifichiamo il testo predefinito all`interno il nostro modulo Questo testo significa <code>I tuoi commenti vanno qui. </code> Sebbene queste informazioni siano utili, l`utente deve eliminare manualmente il testo predefinito se non lo desidera nella risposta al modulo.</p><p>Se desideri specificare un valore segnaposto, puoi utilizzare il <code>segnaposto</code>. Questo attributo indica un valore segnaposto che viene visualizzato quando il modulo è vuoto. Non appena l`utente inizia a digitare nella casella, il segnaposto scompare.</p><p>Ecco un esempio di <code><textarea></code> che contiene il testo segnaposto <code>I tuoi commenti vanno qui . </code>:</p> <p>Il nostro codice restituisce:</p> <script> jQuery (documento ) .ready (function () {jQuery (`# testimonial-section-1`). click (function (e) {var text = "Trova la tua corrispondenza Bootcamp"; var type = "testimonial section"; var ahref = jQuery ( this) .attr (`href`); GaEvent (testo, tipo, `fasttrack`); fasTrackEvent (tipo, testo, ahref);}); funzione GaEvent (testo, nome, nomeevento) {var pathName = window.location. pathname.replace (/// g, ""); var referrer = document.referrer; referrer = referrer .replace ("https: / /", ""); referrer = referrer.replace ("http: //", ""); referrer = referrer.split (`/`) [0]; gtag (`event`, eventName, {cta_type: `fasttrack`, cta_name: name, cta_text: text, page_url: document.URL, page_path: pathName , referrer: referrer,});} funzione fasTrackEvent (tipo, testo, ahref, fC TA = null) {var articolo = jQuery (".thb-blockgrid"). Genitore (). Trova ("h2"). Testo ( ); if (articolo == "") {var articolo = jQuery ("h1"). testo (); } analytics.track ("Blog - CTA FastTrack cliccato", {time: Date.now()), ctaType: type, ctaText: text, url: document.URL, article: article, category: jQuery (`. entry-header. single_category_title `) .text (), fonte: "blog", referrer: document.referrer, referrerDomain: document.referrer.split (` / `) [2]}); if (fCTA == null) {var fCTA = `sezione-testimonial`; } const firstFtCTA = localStorage.getItem ("firstFtCTA"); if (! firstFtCTA) {localStorage.setItem (`firstFtCTA`, fCTA); localStorage.setItem (`firstFtCTAPath`, document.URL); } localStorage.setItem (`lastFtCTA`, fCTA); localStorage.setItem (`lastFtCTAPath`, document.URL); analytics.identify ({... (firstFtCTA? {}: {firstFtCTA: localStorage.getItem (`firstFtCTA`), firstFtCTAPath: localStorage.getItem (`firstFtCTAPath`)}), lastFtCTA: fCTA, lastFtCTAPath}: document.URL, ); }}); </ Script> </div> <class face = "wp-image-block"> <img src = "https://lh3.googleusercontent.com/7EP_nEAj8Pki73CeUAszIZ_eE_8ZJ4LuvxOu820CYCWR4hVxEd3kLM75CUCcuWNw2m-YPzdnfnC5McAGP1qAGBdyk7saA8hBDrHaSKUWFj9OFcDA0V5QYTdK1WY5eqzb-CNJ0n21" alt = "7EP NEAj8Pki73CeUAszIZ EE 8ZJ4LuvxOu820CYCWR4hVxEd3kLM75CUCcuWNw2m YPzdnfnC5McAGP1qAGBdyk7saA8hBDrHaSKUWFj9OFcDA0V5QYTdK1WY5eqzb CNJ0n21 "> </figure> <p>Come puoi vedere, il testo <code>I tuoi commenti va qui. </code> appare nella casella di testo. Tuttavia, quando l`utente inizia a digitare, questo testo scompare. Sappiamo che questo testo è un segnaposto perché è grigio chiaro, mentre il testo predefinito, come mostrato nel nostro primo esempio in questo articolo, appare come testo nero pieno (se non diversamente specificato).</p> </a> </div> <h2>HTML attributi della casella di testo</h2><p><code><textarea></code> accetta una serie di attributi specifici dell`etichetta. l`aggiunta di <code> <textarea> </code> supporta tutti gli <a href=" /html-textarea/"> attributi globali </a> in HTML.</p><p>Ecco gli attributi dei tag specifici supportati dalla <code><textarea></code>:</p><table classe = "wp-block to table-info table"> <tbody > <tr> <td> <strong>Attributi </strong> </ td> <td> <strong>Valore </strong> </ td> <td > <strong>descrizione </strong> </ td> </ tr> <tr> <td> autofocus </td> <td> autofocus </td> <td> Indica se l`area di testo deve essere a fuoco quando il documento è caricato. </ td> </ tr> <tr> <td> Col. </ td> <td> numero </ td> <td> Specifica il numero di righe di testo visualizzate per impostazione predefinita per la casella di testo. </ td> </ tr> <tr> <td> disabilitato </td> <td> booleano </td> <td> per abilitare la casella di testo per l`input dell`utente. </ td> </ tr> <tr> <td> modulo </td> <td> ID modulo </td> <td> casella di testo Collegamento a un modulo. </ td> </ tr> <tr> <td> maxlength </ td> <td> numero </td> <td> Indica il numero massimo di caratteri accettati dalla casella di testo.<br></ td> < / tr> <tr> <td> minlength </ td> <td> numero </td> <td> Indica il numero minimo di caratteri accettati dalla casella di testo. </ td> </ tr> <tr> <td> nome </td> <td> nome </td> <td> nome della casella di testo. </ td> </ tr> <tr> <td> segnaposto </td> <td> testo </td> <td> Fornisce un testo segnaposto che scompare quando l`utente inizia a digitare nella casella di testo. </ td> </ tr> <tr> <td> readonly </ td> <td> booleano </td> <td> Indica che l`utente non può modificare il contenuto della textarea. </td> </tr> <tr> <td> obbligatorio </td> <td> booleano </td> <td> Indica che l`utente deve compilare il modulo. </ td> </ tr> <tr> <td> righe </td> <td> numero </td> <td> Indica il numero di colonne di testo visualizzate per impostazione predefinita per la casella di testo. </ td> </ tr> </ tbody> </table> <h2></h2><h2>Conclusione</h2><p>L`HTML <code><textarea></code> è usato per creare dei membri di input del testo su più righe. Questi possono essere utili se vuoi raccogliere più di una stringa di dati utente.</p><p>Questo tutorial ha discusso, facendo riferimento ad esempi, come utilizzare il <code><textarea></code> per creare caselle di testo . Questo tutorial ha anche fornito una tabella di riferimento con attributi di tag specifici offerti da <code><textarea></code>. Ora sei pronto per iniziare a utilizzare <code><textarea></code> come un esperto di HTML!</p>