Javascript mededelingenvak met tekstgebied

De HTML-textarea-tag wordt gebruikt om een tekstinvoerveld met meerdere regels in één vorm te maken. Het wordt gedefinieerd met de </code> en kan een onbeperkt aantal tekens bevatten.</em></p><p>Wanneer u een HTML-formulier maakt, kunt u besluiten dat u het wilt accepteren een lange reeks tekst. Als u bijvoorbeeld een klantcontactformulier maakt voor de website van een detailhandelaar, kunt u een formulierelement maken dat een gedetailleerde beschrijving accepteert van een probleem waarmee de klant wordt geconfronteerd.</p><p>Hier is de HTML <code> <textarea></code> komt binnen. Het <code><textarea></code> element wordt gebruikt om een vormelement te maken dat functionaliteit biedt om tekst met meerdere regels te bewerken. Dit element is handig als u tekstreacties van meer dan één gebruiker wilt accepteren.</p><p>In deze zelfstudie wordt met enkele voorbeelden besproken hoe u HTML <code><textarea></code> in uw Alla kunt gebruiken. code. Aan het einde van deze tutorial heb je alle kennis die je nodig hebt om de <code><textarea></code> als één geheel te gebruiken! pro</p><h2>HTML Textarea-tag</h2><p>De <code><textarea></code> wordt gebruikt om een besturingsveld voor tekstinvoer met meerdere regels in een formulier te definiëren. . <code><textarea></code> kan een onbeperkt aantal tekens bevatten</p><p>De syntaxis <code><textarea></code> is als volgt:</p> <p>pauze van Onze code afgedaald. De tag <code><textarea></code> wordt gebruikt om het tekstgebied in ons webformulier te definiëren. In tegenstelling tot <code><input></code>, moet <code><textarea></code> zowel een openingstag (<code><textarea></code>) als een afsluiting ( <code></ textarea > </code>). Dit komt omdat de standaardtekst die in het tekstvak wordt weergegeven, tussen de twee</p><p>tags staat. We hebben in ons voorbeeld ook twee attributen gespecificeerd:.</p> </div> </div> <ul><li><strong>lines </strong> vertelt de browser hoeveel regels het tekstgebied standaard moet hebben t. Met andere woorden, het kenmerk rijen geeft de hoogte van het tekstvak aan.</li><li><strong>Kol. </strong> is het aantal kolommen dat het tekstvak standaard zou moeten hebben. Met andere woorden, het Col.-attribuut geeft de breedte van het tekstvak aan</li></ul> </a> </div> <p>Stel dat we een webtrainer maken voor een lokale kledingwinkel. Met dit formulier zouden klanten moeten reageren op hun aankoop. Omdat we gebruikers de ruimte willen geven om gedetailleerde opmerkingen in te dienen, gebruiken we een HTML <code><textarea></code> om opmerkingen van gebruikers te verzamelen.</p><p>We kunnen de volgende code gebruiken om het opmerkingenformulier te maken:</p> <p>Onze code geeft als resultaat:</p><figure class = "wp-block image"> <img src = "h ttps: // LH6. googleusercontent.com / a0bBjFEzohKfpWUH6wMv2m0bBwWje2RZrGS4JQuBBDdrAGMvQdJpMP 91u3TiWx-XsTyB8YeQHJLJut19I-Ou5k4VLIGpXoWD5KbbgO7FaSFZC6pdzWKjejyaRVV5HbtNDI54Y_3N "alt =" A0bBjFEzohKfpWUH6wMv2m0bBwWje2RZrGS4JQuBBDdrAGMvQdJpMP91u3TiWx XsTyB8YeQHJLJut19I Ou5k4VLIGpXoWD5KbbgO7FaSFZC6pdzWKjejyaRVV5HbtNDI54Y 3N "> </ figuur> <p> Let ". s te breken onze code Ten eerste hebben we verklaarde <code> <form> </code> die wordt gebruikt om ons online formulier te definiëren. We gebruikten vervolgens een <code><label></code> om een label aan onze pagina toe te voegen met de vraag aan gebruiker <code>Welke feedback heb je voor ons?</code></p><p>We hebben dus een <code><textarea></code> gebruikt om het retourformulier te maken. We hebben vier attributen gespecificeerd, die als volgt zijn:</p><ul><li>rijen is 5 en slaat het aantal rijen op dat het veld moet hebben</li><li>Kol. is ingesteld op 30 en slaat op. het aantal kolommen dat het veld zou moeten hebben.</li><li>id is de unieke identificatie die aan het formulier is toegewezen , die zou worden gebruikt wanneer we het formulier verzenden.</li><li>naam wordt ook gebruikt om het formulier te identificeren en is n nodig als we het formulier naar een webserver willen sturen.</li></ul> <p><code><textarea></code> wordt ondersteund door alle belangrijke browsers.</p><p>Het voorbeeld hierboven is een basisimplementatie van <code><textarea></code>, maar we kunnen ons formulier geavanceerder maken.</p><p>Laten we verder gaan met twee meer geavanceerde voorbeelden om te illustreren hoe we de <code><textarea></code> om tekstvakken aan te maken.</p><h3>minimale en maximale lengte </h3> <p>dos go Laten we bijvoorbeeld onze kledingwinkel binnen. Stel dat we het aantal karakters willen beperken a ute nte stuurt naar 1000, om gebruikers aan te moedigen beknopt te zijn bij het schrijven van hun opmerkingen. We willen ook een minimum tekenlimiet instellen op 10, om ervoor te zorgen dat gebruikers iets schrijven in de vorm</p> </a> </div> <p> is waar de MINLENGTH- en mAXLENGTH-attributen in het spel komen. minlength wordt gebruikt om het minimum aantal tekens aan te geven dat een gebruiker moet schrijven en maxlength wordt gebruikt om het maximum aantal tekens aan te geven dat een gebruiker in een module kan schrijven.</p><p>Hier is een voorbeeld van onze vorige webmodule met de kenmerken minlength en maxlength gedefinieerd:</p> <p>Ons retourformulier:</p><figure class = "wp-block image"> <img src = "https: //lh3.googleusercontent .com / ztmPnPdTmOQ1f7X3SWtWwd3iSXouyXSNof94000099SzkZHWo5Gy8TrbeKv0ZzD- JSR784uIegJeXzrWAvArwI_FpuE7Ul6cOZAwtBtKOSuKqw9 wd3iSXouyXSNof94000099SzkZHWo5Gy8TrbeKv0ZzD JSR784uIegJeXzrWAvArwI FpuE7Ul6cOZAwtfJyfEKVSuKqCwOILHdc9gj << als de module als ongeldig wordt aangemerkt, zijn er geen tekens om onze module. left "> het is belangrijk op te merken dat zelfs als de gebruiker schrijft minder dan 10 tekens in ons formulier, de textarea wordt nog steeds als geldig beschouwd. Als we de minimumlimiet willen opleggen, moeten we de vereiste <code></code> specificeren.</p><h3>Plaatsaanduidingstekst </h3> <p>In ons webformulier hierboven specificeren we de standaardtekst binnenin onze module. Deze tekst betekent <code>Uw opmerkingen komen hier. </code> Hoewel deze informatie nuttig is, moet de gebruiker de standaardtekst handmatig verwijderen als hij dat niet wil in het antwoord op het formulier.</p><p>Als u een tijdelijke aanduiding wilt opgeven, kunt u de <code>plaatsaanduiding</code>. Dit kenmerk geeft een tijdelijke aanduiding-waarde aan die wordt weergegeven wanneer het formulier leeg is. Zodra de gebruiker begint te typen in het vak, verdwijnt de tijdelijke aanduiding.</p><p>Hier is een voorbeeld van een <code><textarea></code> die de tijdelijke aanduiding-tekst bevat <code>Uw opmerkingen komen hier te staan . </code>:</p> <p>Onze code geeft als resultaat:</p> <script> jQuery (document ) .ready (function () {jQuery (`# testimonial-section-1`). click (function (e) {var text = "Vind uw Bootcamp-match"; var type = "testimonial section"; var ahref = jQuery ( this) .attr (`href`); GaEvent (tekst, type, `fasttrack`); fasTrackEvent (type, tekst, ahref);}); function GaEvent (tekst, naam, eventName) {var pathName = window.location. padnaam.replace (/// g, ""); var verwijzer = document.verwijzer; referrer = referrer .replace ("https: / /", ""); referrer = referrer.replace ("http: //", ""); verwijzer = verwijzer.split (`/`) [0]; gtag (`event`, eventName, {cta_type: `fasttrack`, cta_name: name, cta_text: text, page_url: document.URL, page_path: pathName , referrer: referrer,});} functie fasTrackEvent (type, text, ahref, fC TA = null) {var article = jQuery (".thb-blockgrid"). Ouder (). Zoek ("h2"). Tekst ( ); if (article == "") {var artikel = jQuery ("h1"). tekst (); } analytics.track ("Blog - FastTrack CTA geklikt", {time: Date.now (), ctaType: type, ctaText: tekst, url: document.URL, artikel: artikel, categorie: jQuery (`. entry-header. single_category_title `) .text (), bron: "blog", referrer: document.referrer, referrerDomain: document.referrer.split (` / `) [2]}); if (fCTA == null) {var fCTA = `getuigenis-sectie`; } 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>Zoals je kunt zien, komt de tekst <code>Je opmerkingen hier. </code> verschijnt in het tekstvak. Wanneer de gebruiker echter begint te typen, verdwijnt deze tekst. We weten dat deze tekst een tijdelijke aanduiding is omdat deze lichtgrijs is, terwijl de standaardtekst, zoals weergegeven in ons eerste voorbeeld in dit artikel, wordt weergegeven als effen zwarte tekst (tenzij anders vermeld).</p> </a> </div> <h2>HTML textbox attributen</h2><p><code><textarea></code> accepteert een set label-specifieke attributen. toevoegen in <code> <textarea> </code> ondersteunt alle <a href=" /html-textarea/"> globale attributen </a> in HTML.</p><p>Hier zijn de specifieke tagattributen die worden ondersteund door de <code><textarea></code>:</p><table klasse = "wp-block to table-info table"> <tbody > <tr> <td> <strong>Attributen </strong> </ td> <td> <strong>Waarde </strong> </ td> <td > <strong>beschrijving </strong> </ td> < / tr> <tr> <td> autofocus </td> <td> autofocus </td> <td> Geeft aan of het tekstgebied scherp moet zijn wanneer het document is geladen. </ td> </ tr> <tr> <td> Kolom </ td> <td> number </ td> <td> Specificeert het aantal regels tekst dat standaard wordt weergegeven voor het tekstvak. </ td> </ tr> <tr> <td> uitgeschakeld </td> <td> boolean </td> <td> om het tekstvak voor gebruikersinvoer in te schakelen. </ td> </ tr> <tr> <td> formulier </td> <td> Module-ID </td> <td> tekstvak Link naar een module. </ td> </ tr> <tr> <td> maxlength </ td> <td> nummer </td> <td> Geeft het maximum aantal tekens aan dat door het tekstvak wordt geaccepteerd.<br></ td> < / tr> <tr> <td> minlength </ td> <td> nummer </td> <td> Geeft het minimum aantal tekens aan dat door het tekstvak wordt geaccepteerd. </ td> </ tr> <tr> <td> naam </td> <td> naam </td> <td> naam van het tekstvak. </ td> </ tr> <tr> <td> tijdelijke aanduiding </td> <td> tekst </td> <td> Biedt tijdelijke aanduiding-tekst die verdwijnt wanneer de gebruiker begint te typen in het tekstvak . </ td> </ tr> <tr> <td> alleen-lezen </ td> <td> boolean </td> <td> Geeft aan dat de gebruiker de inhoud van het tekstgebied niet kan wijzigen. </td> </tr> <tr> <td> verplicht </td> <td> boolean </td> <td> Geeft aan dat de gebruiker het formulier moet invullen. </ td> </ tr> <tr> <td> rijen </td> <td> nummer </td> <td> Geeft het aantal tekstkolommen aan dat standaard wordt weergegeven voor het tekstvak. </ td> </ tr> </ tbody> </table> <h2></h2><h2>Conclusie</h2><p>De HTML <code><textarea></code> wordt gebruikt om van de invoerleden van tekst met meerdere regels. Deze kunnen handig zijn als u meer dan één reeks gebruikersgegevens wilt verzamelen.</p><p>In deze zelfstudie wordt aan de hand van voorbeelden besproken hoe u de <code><textarea></code> gebruikt om tekstvakken te maken . Deze tutorial bevatte ook een referentietabel met specifieke tag-attributen die worden aangeboden door de <code><textarea></code>. U bent nu klaar om <code><textarea></code> te gaan gebruiken als een HTML-expert!</p>