Javascript-Eingabeaufforderung Mit Textbereich

Das HTML-Tag textarea wird verwendet, um ein mehrzeiliges Texteingabefeld in einem Formular zu erstellen. Es wird mit dem </code> definiert und kann eine unbegrenzte Anzahl von Zeichen enthalten.</em></p><p>Wenn Sie ein HTML-Formular erstellen, können Sie entscheiden, ob Sie es akzeptieren möchten eine lange Textfolge. Wenn Sie beispielsweise ein Kundenkontaktformular für die Website eines Einzelhändlers erstellen, können Sie ein Formularelement erstellen, das eine detaillierte Beschreibung eines Problems akzeptiert, mit dem der Kunde konfrontiert ist.</p><p>Hier ist der HTML-<code> <textarea></code> kommt herein. Das <code><textarea></code>-Element wird verwendet, um ein Shape-Element zu erstellen, das Funktionen zum mehrzeiligen Bearbeiten von Text bereitstellt. Dieses Element ist nützlich, wenn Sie Textantworten von mehr als einem Benutzer akzeptieren möchten.</p><p>In diesem Tutorial wird anhand einiger Beispiele erläutert, wie Sie HTML <code><textarea></code> in Ihrem Alla verwenden Code. Am Ende dieses Tutorials verfügen Sie über alle Kenntnisse, die Sie benötigen, um <code><textarea></code> als einen zu verwenden! pro</p><h2>HTML-Textarea-Tag</h2><p>Der <code><textarea></code> wird verwendet, um ein mehrzeiliges Texteingabefeld in einem Formular zu definieren. . <code><textarea></code> kann eine unbegrenzte Anzahl von Zeichen enthalten</p><p>Die Syntax <code><textarea></code> lautet wie folgt:</p> <p>Pause von Herabgestiegen unser Code. Das Tag <code><textarea></code> wird verwendet, um den Textbereichsbereich in unserem Webformular zu definieren. Im Gegensatz zu <code><input></code> muss <code><textarea></code> sowohl ein öffnendes Tag (<code><textarea></code>) als auch ein schließendes Tag ( <code></ textarea > </code>). Dies liegt daran, dass der Standardtext, der im Textfeld angezeigt wird, zwischen den beiden</p><p>Tags enthalten ist. Wir haben in unserem Beispiel auch zwei Attribute angegeben:.</p> </div> </div> <ul><li><strong>lines </strong> teilt dem Browser mit, wie viele Zeilen der Textbereich standardmäßig haben soll T. Mit anderen Worten, das rows-Attribut gibt die Höhe des Textfeldes an.</li><li><strong>Col. </strong> ist die Anzahl der Spalten, die das Textfeld standardmäßig haben sollte. Mit anderen Worten, das Col.-Attribut gibt die Breite des Textfelds an</li></ul> </a> </div> <p>Angenommen, wir erstellen einen Web-Trainer für a örtlichen Bekleidungsgeschäft. Dieses Formular sollte es Kunden ermöglichen, ihren Einkauf zu kommentieren. Da wir den Nutzern Raum geben möchten, detaillierte Kommentare einzureichen, verwenden wir einen HTML-<code><textarea></code>, um Nutzerkommentare zu sammeln.</p><p>Wir könnten den folgenden Code verwenden, um das Kommentarformular zu erstellen:</p> <p>Unser Code gibt zurück:</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. unseren Code zu brechen Erstens haben wir erklärt <code> <form> </code> die verwendet wird, um unser Online-Formular zu definieren. Wir haben dann einen <code><label></code> verwendet, um unserer Seite ein Label hinzuzufügen, in dem der Benutzer gefragt wird: <code>Welches Feedback haben Sie für uns?</code></p><p>Also haben wir einen <code><textarea></code> verwendet, um das Rücksendeformular zu erstellen. Wir haben vier Attribute angegeben, die wie folgt lauten:</p><ul><li>rows is 5 and speichert die Anzahl der Zeilen, die das Feld haben muss</li><li>Col. ist auf 30 gesetzt und speichert die Anzahl der Spalten, die das Feld haben soll.</li><li>id ist die eindeutige Kennung, die dem Formular zugewiesen wird , der beim Absenden des Formulars verwendet wird.</li><li>name wird auch zur Identifizierung des Formulars verwendet und ist n erforderlich, wenn wir das Formular an einen Webserver senden möchten.</li></ul> <p><code><textarea></code> wird von allen gängigen Browsern unterstützt.</p><p>Das Beispiel Oben ist eine grundlegende Implementierung von <code><textarea></code>, aber wir können unser Formular weiter entwickeln.</p><p>Lassen Sie uns zu zwei fortgeschritteneren Beispielen übergehen, um zu veranschaulichen, wie wir <code><textarea></code> zum Erstellen von Textfeldern.</p><h3>minimale und maximale Länge</h3> <p>dos go Let in unserem Bekleidungsgeschäft zum Beispiel Angenommen, wir möchten die Anzahl der Zeichen begrenzen a ute nte sendet an 1000, um Benutzer zu ermutigen, sich beim Schreiben ihrer Kommentare kurz zu fassen. Wir möchten auch eine Mindestzeichenbegrenzung auf 10 festlegen, um sicherzustellen, dass Benutzer etwas in der Form </p> </a> </div> <p> Hier kommen die Attribute MINLENGTH und mAXLENGTH ins Spiel. minlength wird verwendet, um die minimale Anzahl von Zeichen anzugeben, die ein Benutzer schreiben sollte, und maxlength wird verwendet, um die maximale Anzahl von Zeichen anzugeben, die ein Benutzer in ein Modul schreiben kann.</p><p>Hier ist ein Beispiel unseres vorherigen Webmoduls mit den definierten Attributen minlength und maxlength:</p> <p>Unser Rückgabeformular:</p><figure class = "wp-block image"> <img src = "https: //lh3.googleusercontent .com / ztmPnPdTmOQ1f7X3SWtWwd3iSXouyXSNof94000099SzkZHWo5Gy8TrbeKv0ZzD- JSR784uIegJeXzrWAvArwI_FpuE7Ul6cOZAwtBtKOSuKqw9 wd3iSXouyXSNof94000099SzkZHWo5Gy8TrbeKv0ZzD JSR784uIegJeXzrWAvArwI FpuE7Ul6cOZAwtfJyfEKVSuKqCwOILHdc9gj <<, wenn das Modul als ungültig erachtet wird, gibt es keine Zeichen zu unserem Modul. „left> Es ist wichtig zu beachten, dass selbst wenn der Benutzer schreibt weniger als 10 Zeichen in unserer Form, die Textarea gelten weiterhin als gültig. Wenn wir die Mindestgrenze festlegen wollen, müssen wir den erforderlichen <code></code> angeben.</p><h3>Platzhaltertext</h3> <p>In unserem obigen Webformular geben wir den Standardtext innen an unser Modul. Dieser Text bedeutet <code>Ihr Kommentar gehört hierher. </code> Obwohl diese Informationen nützlich sind, muss der Benutzer den Standardtext manuell löschen, wenn er die Antwort auf das Formular nicht haben möchte.</p><p>Wenn Sie einen Platzhalterwert angeben möchten, können Sie den verwenden <code>Platzhalter</code>. Dieses Attribut gibt einen Platzhalterwert an, der angezeigt wird, wenn das Formular leer ist. Sobald der Benutzer mit der Eingabe in das Feld beginnt, verschwindet der Platzhalter.</p><p>Hier ist ein Beispiel für einen <code><textarea></code>, der den Platzhaltertext <code>Your comments goes here enthält . </code>:</p> <p>Unser Code gibt zurück:</p> <script> jQuery (document ) .ready (function () {jQuery (`# testimonial-section-1`). click (function (e) {var text = "Find your Bootcamp match"; var type = "testimonial section"; var ahref = jQuery ( this) .attr (`href`); GaEvent (text, type, `fasttrack`); fasTrackEvent (type, text, ahref);}); function GaEvent (text, name, eventName) {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,});} function fasTrackEvent (type, text, ahref, fC TA = null) {var article = jQuery (".thb-blockgrid"). Elternteil (). Finden ("h2"). Text ( ); if (article == "") {var article = jQuery ("h1"). Text (); } analytics.track ("Blog - FastTrack CTA Clicked", {time: Date.now (), ctaType: type, ctaText: text, url: document.URL, article: article, category: jQuery (`. entry-header. single_category_title `) .text (), Quelle: "blog", Referrer: document.referrer, referrerDomain: document.referrer.split (` / `) [2]}); if (fCTA == null) {var fCTA = `testimonial-section`; } 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> <Klasse 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>Wie Sie sehen, steht hier der Text <code>Ihre Kommentare. </code> erscheint im Textfeld. Wenn der Benutzer jedoch mit der Eingabe beginnt, verschwindet dieser Text. Wir wissen, dass dieser Text ein Platzhalter ist, weil er hellgrau ist, während der Standardtext, wie in unserem ersten Beispiel in diesem Artikel gezeigt, als durchgehend schwarzer Text erscheint (sofern nicht anders angegeben).</p> </a> </div> <h2>HTML Textfeldattribute</h2><p><code><textarea></code> akzeptiert eine Reihe labelspezifischer Attribute. Hinzufügen von <code> <textarea> </code> unterstützt alle <a href=" /html-textarea/"> globale Attribute </a> in HTML.</p><p>Hier sind die spezifischen Tag-Attribute, die von der Klasse <code><textarea></code>:</p><table unterstützt werden = "wp-block to table-info table"> <tbody > <tr> <td> <strong>Attribute </strong> </ td> <td> <strong>Wert </strong> </ td> <td > <strong>Beschreibung</strong> </td> < / tr> <tr> <td> Autofokus </td> <td> Autofokus </td> <td> Gibt an, ob der Textbereich beim Dokument scharfgestellt werden soll wird geladen. </ td> </ tr> <tr> <td> Spalte </ td> <td> Zahl </ td> <td> Gibt die Anzahl der Textzeilen an, die standardmäßig für das Textfeld angezeigt werden. </ td> </ tr> <tr> <td> deaktiviert </td> <td> boolesch </td> <td> um das Textfeld für Benutzereingaben zu aktivieren . </ td> </ tr> <tr> <td> Formular </td> <td> Modul-ID </td> <td> Textfeld Link zu einem Modul. </ td> </ tr> <tr> <td> maxlength </ td> <td> Zahl </td> <td> Gibt die maximale Anzahl von Zeichen an, die vom Textfeld akzeptiert werden.<br></ td> < / tr> <tr> <td> minlength </ td> <td> Zahl </td> <td> Gibt die Mindestanzahl von Zeichen an, die vom Textfeld akzeptiert werden. </ td> </ tr> <tr> <td> Name </td> <td> Name </td> <td> Name des Textfeldes. </ td> </ tr> <tr> <td> Platzhalter </td> <td> Text </td> <td> Stellt Platzhaltertext bereit, der verschwindet, wenn der Benutzer mit der Eingabe in das Textfeld beginnt . </ td> </ tr> <tr> <td> readonly </ td> <td> boolesch </td> <td> Gibt an, dass der Benutzer den Inhalt des Textbereichs nicht ändern kann. </td> </tr> <tr> <td> erforderlich </td> <td> boolesch </td> <td> Gibt an, dass der Benutzer das Formular ausfüllen muss. </ td> </ tr> <tr> <td> Zeilen </td> <td> Anzahl </td> <td> Gibt die Anzahl der Textspalten an, die standardmäßig für das Textfeld angezeigt werden. </ td> </ tr> </ tbody> </table> <h2></h2><h2>Fazit</h2><p>Der HTML <code><textarea></code> wird zum Erstellen verwendet der Eingabemitglieder von mehrzeiligem Text. Diese können nützlich sein, wenn Sie mehr als einen Benutzerdatenstring sammeln möchten.</p><p>In diesem Tutorial wurde anhand von Beispielen erläutert, wie Sie mit <code><textarea></code> Textfelder erstellen . Dieses Tutorial stellt auch eine Referenztabelle mit spezifischen Tag-Attributen zur Verfügung, die von <code><textarea></code> angeboten werden. Jetzt können Sie damit beginnen, <code><textarea></code> wie ein HTML-Experte zu verwenden!</p>