Pole powiadomień JavaScript z obszarem tekstowym

Znacznik HTML textarea służy do tworzenia wielowierszowego pola wprowadzania tekstu w jednym formularzu. Jest zdefiniowany za pomocą </code> i może zawierać nieograniczoną liczbę znaków.</em></p><p>Podczas tworzenia formularza HTML możesz zdecydować, że chcesz zaakceptować długi ciąg tekstu. Na przykład, jeśli tworzysz formularz kontaktowy klienta dla witryny internetowej sprzedawcy, możesz utworzyć element formularza, który akceptuje szczegółowy opis problemu, z którym boryka się klient.</p><p>Tutaj znajduje się <code> HTML. Wchodzi <textarea></code>. Element <code><textarea></code> służy do tworzenia elementu kształtu, który zapewnia funkcjonalność edycji tekstu wielowierszowego. Ten element jest przydatny, jeśli chcesz akceptować odpowiedzi tekstowe od więcej niż jednego użytkownika.</p><p>Ten samouczek omówi z kilkoma przykładami, jak używać HTML <code><textarea></code> w Alla kod. Na końcu tego samouczka będziesz miał całą wiedzę potrzebną do używania <code><textarea></code> jako jednego! pro</p><h2>Znacznik HTML Textarea</h2><p><code><textarea></code> służy do definiowania wielowierszowego pola kontrolnego wprowadzania tekstu w formularzu. . <code><textarea></code> może zawierać nieograniczoną liczbę znaków</p><p>Składnia <code><textarea></code> jest następująca:</p> <p>wstrzymaj Zstąpił nasz kod. Znacznik <code><textarea></code> służy do definiowania obszaru tekstu w naszym formularzu internetowym. W przeciwieństwie do <code><input></code>, <code><textarea></code> musi zawierać zarówno tag otwierający (<code><textarea></code>) jak i zamykający ( <code></ textarea > </kod>). Dzieje się tak, ponieważ domyślny tekst wyświetlany w polu tekstowym jest zawarty między dwoma znacznikami</p><p>. W naszym przykładzie określiliśmy również dwa atrybuty:.</p> </div> </div> <ul><li><strong>wiersze </strong> informuje przeglądarkę, ile linii powinien mieć domyślnie obszar tekstu T. Innymi słowy, atrybut rows wskazuje wysokość pola tekstowego.</li><li><strong>Kol. </strong> to liczba kolumn, które pole tekstowe powinno mieć domyślnie. Innymi słowy, atrybut Col. wskazuje szerokość pola tekstowego</li></ul> </a> </div> <p>Załóżmy, że tworzymy trenera sieci dla lokalny sklep odzieżowy. Ten formularz powinien umożliwiać klientom komentowanie zakupu. Ponieważ chcemy dać użytkownikom miejsce na przesyłanie szczegółowych komentarzy, będziemy używać HTML <code><textarea></code> do zbierania komentarzy użytkowników.</p><p>Możemy użyć następującego kodu do utworzenia formularza komentarzy:</p> <p>Nasz kod zwraca:</p><figure class = "wp-block image"> <img src = "h ttps: // LH6. googleusercontent.com / a0bBjFEzohKfpWUH6wMv2m0bBwWje2RZrGS4JQuBBDdrAGMvQdJpMP 91u3TiWx-XsTyB8YeQHJLJut19I-Ou5k4VLIGpXoWD5KbbgO7FaSFZC6pdzWKjejyaRVV5HbtNDI54Y_3N "alt =" A0bBjFEzohKfpWUH6wMv2m0bBwWje2RZrGS4JQuBBDdrAGMvQdJpMP91u3TiWx XsTyB8YeQHJLJut19I Ou5k4VLIGpXoWD5KbbgO7FaSFZC6pdzWKjejyaRVV5HbtNDI54Y 3N „> </postać> <s> " Let. łamie kodu Najpierw uznane <kod> <form> </ kod> który jest używany do zdefiniowania naszego formularza online. Następnie użyliśmy <code><label></code>, aby dodać etykietę do naszej strony z pytaniem użytkownika <code>Jaką opinię masz dla nas?</code></p><p>Więc użyliśmy <code><textarea></code> do utworzenia formularza zwrotu. Określiliśmy cztery atrybuty, które są następujące:</p><ul><li>rows is 5 i przechowuje liczbę wierszy, które musi mieć pole</li><li>Kolumna jest ustawiona na 30 i przechowuje liczbę kolumn, które powinno mieć pole.</li><li>id to unikalny identyfikator przypisany do formularza , który zostanie użyty, gdy prześlemy formularz.</li><li>nazwa służy również do identyfikacji formularza i jest n jest to konieczne, jeśli chcemy przesłać formularz na serwer WWW.</li></ul> <p><code><textarea></code> jest obsługiwany przez wszystkie główne przeglądarki.</p><p>Przykład powyżej jest podstawową implementacją <code><textarea></code>, ale możemy uczynić nasz formularz bardziej zaawansowanym.</p><p>Przejdźmy do dwóch bardziej zaawansowanych przykładów, aby zilustrować, jak możemy użyć <code><textarea></code> do tworzenia pól tekstowych.</p><h3>minimalna i maksymalna długość </h3> <p>dos go Wpuść na przykład nasz sklep odzieżowy Załóżmy, że chcemy ograniczyć liczbę znaków ute nte wysyła do 1000, aby zachęcić użytkowników do zwięzłości podczas pisania komentarzy. Chcemy również ustawić minimalny limit znaków na 10, aby upewnić się, że użytkownicy napiszą coś w formie</p> </a> </div> <p> to miejsce, w którym atrybuty MINLENGTH i mAXLENGTH pojawiają się w play.minlength służy do określenia minimalnej liczby znaków, które użytkownik powinien napisać, a maxlength służy do określenia maksymalnej liczby znaków, które użytkownik może wpisać w module.</p><p>Oto przykład naszego poprzedniego modułu internetowego ze zdefiniowanymi atrybutami minlength i maxlength:</p> <p>Nasz formularz zwrotów:</p><figure class = "wp-block image"> <img src = "https: //lh3.googleusercontent com / ztmPnPdTmOQ1f7X3SWtWwd3iSXouyXSNof94000099SzkZHWo5Gy8TrbeKv0ZzD- JSR784uIegJeXzrWAvArwI_FpuE7Ul6cOZAwtBtKOSuKqw9 wd3iSXouyXSNof94000099SzkZHWo5Gy8TrbeKv0ZzD JSR784uIegJeXzrWAvArwI FpuE7Ul6cOZAwtfJyfEKVSuKqCwOILHdc9gj << jeśli moduł jest uznany za nieważny, nie ma żadnych znaków do naszego modułu. left „> ważne jest, aby pamiętać, że nawet jeśli użytkownik pisze mniej niż 10 znaków w naszej formie, textarea nadal będą uważane za ważne. Jeśli chcemy narzucić minimalny limit, musimy określić wymagany <code></code>.</p><h3>Tekst zastępczy </h3> <p>W powyższym formularzu internetowym określamy domyślny tekst wewnątrz nasz moduł. Ten tekst oznacza, że <code>Twoje komentarze trafiają tutaj. </code> Chociaż te informacje są przydatne, użytkownik musi ręcznie usunąć domyślny tekst, jeśli nie chce tego w odpowiedzi na formularz.</p><p>Jeśli chcesz określić wartość symbolu zastępczego, możesz użyć <code>symbol zastępczy</code>. Ten atrybut wskazuje wartość zastępczą, która jest wyświetlana, gdy formularz jest pusty. Gdy tylko użytkownik zacznie pisać w polu, symbol zastępczy znika.</p><p>Oto przykład <code><textarea></code>, który zawiera tekst zastępczy <code>Twoje komentarze są tutaj . </code>:</p> <p>Nasz kod zwraca:</p> <script> jQuery (dokument ) .ready (function () {jQuery (`# testimonial-section-1`). click (function (e) {var text = "Znajdź dopasowanie Bootcamp"; var type = "sekcja referencji"; var ahref = jQuery ( this) .attr (`href`); GaEvent (tekst, typ, `fasttrack`); fasTrackEvent (typ, tekst, ahref);}); function GaEvent (tekst, nazwa, eventName) {var pathName = window.location. ścieżka.replace (/// g, ""); var referrer = dokument.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 artykuł = jQuery (".thb-blockgrid"). Rodzic (). Znajdź („h2”). Tekst ( ); if (article == "") {var article = jQuery ("h1"). tekst (); } analytics.track („Blog — Kliknięte wezwanie do szybkiego śledzenia”, {time: Date.now (), ctaType: type, ctaText: text, url: document.URL, article: article, category: jQuery (`. entry-header. single_category_title `) .text (), źródło: "blog", referrer: document.referrer, referrerDomain: document.referrer.split (` / `) [2]}); if (fCTA == null) {var fCTA = `sekcja referencji`; } 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, ); }}); </ Pismo> </ dz> <Klasa twarz = "WP OBRAZU blok"> <img src = "https://lh3.googleusercontent.com/7EP_nEAj8Pki73CeUAszIZ_eE_8ZJ4LuvxOu820CYCWR4hVxEd3kLM75CUCcuWNw2m-YPzdnfnC5McAGP1qAGBdyk7saA8hBDrHaSKUWFj9OFcDA0V5QYTdK1WY5eqzb-CNJ0n21" alt = „7EP NEAj8Pki73CeUAszIZ EE 8ZJ4LuvxOu820CYCWR4hVxEd3kLM75CUCcuWNw2m YPzdnfnC5McAGP1qAGBdyk7saA8hBDrHaSKUWFj9OFcDA0V5QYTdK1WY5eqzb CNJ0n21 "> </figure> <p>Jak widać, tekst <code>Twoje komentarze trafia tutaj. </code> pojawia się w polu tekstowym. Jednak, gdy użytkownik zacznie pisać, ten tekst znika. Wiemy, że ten tekst jest symbolem zastępczym, ponieważ jest jasnoszary, podczas gdy domyślny tekst, jak pokazano w naszym pierwszym przykładzie w tym artykule, jest wyświetlany jako czarny tekst (chyba że zaznaczono inaczej).</p> </a> </div> <h2>HTML atrybuty textbox</h2><p><code><textarea></code> akceptuje zestaw atrybutów specyficznych dla etykiety. Dodanie w <code> <textarea> </code> obsługuje wszystkie <a href=" /html-textarea/"> atrybuty globalne </a> w HTML.</p><p>Oto konkretne atrybuty tagów obsługiwane przez klasę <code><textarea></code>:</p><table = "wp-block to table-info table"> <tbody > <tr> <td> <strong>Atrybuty </strong> </td> <td> <strong>Wartość </strong> </td> <td > <strong>opis </strong> </td> </tr> <tr> <td> autofokus </td> <td> autofokus </td> <td> Wskazuje, czy obszar tekstowy powinien być ostry, gdy dokument jest załadowany. </ td> </ tr> <tr> <td> Kol. </ td> <td> liczba </ td> <td> Określa liczbę wierszy tekstu wyświetlanego domyślnie w polu tekstowym. </ td> </ tr> <tr> <td> wyłączone </td> <td> wartość logiczna </td> <td> aby włączyć pole tekstowe do wprowadzania danych przez użytkownika . </ td> </ tr> <tr> <td> formularz </td> <td> Identyfikator modułu </td> <td> pole tekstowe Link do modułu. </ td> </ tr> <tr> <td> maxlength </ td> <td> liczba </td> <td> Wskazuje maksymalną liczbę znaków akceptowaną przez pole tekstowe.<br></ td> < / tr> <tr> <td> mindługość </ td> <td> liczba </td> <td> Wskazuje minimalną liczbę znaków akceptowaną przez pole tekstowe. </ td> </ tr> <tr> <td> nazwa </td> <td> nazwa </td> <td> nazwa pola tekstowego. </ td> </ tr> <tr> <td> symbol zastępczy </td> <td> tekst </td> <td> Zapewnia tekst zastępczy, który znika, gdy użytkownik zaczyna pisać w polu tekstowym . </ td> </ tr> <tr> <td> readonly </ td> <td> boolean </td> <td> Wskazuje, że użytkownik nie może modyfikować zawartości obszaru tekstowego. </td> </tr> <tr> <td> wymagane </td> <td> wartość logiczna </td> <td> Wskazuje, że użytkownik musi wypełnić formularz. </ td> </ tr> <tr> <td> wiersze </td> <td> liczba </td> <td> Wskazuje liczbę kolumn tekstu wyświetlanych domyślnie w polu tekstowym. </ td> </ tr> </ tbody> </table> <h2></h2><h2>Wniosek</h2><p>Kod HTML <code><textarea></code> służy do tworzenia elementów wejściowych tekstu wielowierszowego. Mogą być przydatne, jeśli chcesz zebrać więcej niż jeden ciąg danych użytkownika.</p><p>W tym samouczku omówiono, odnosząc się do przykładów, jak używać <code><textarea></code> do tworzenia pól tekstowych . Ten samouczek zawiera również tabelę referencyjną z określonymi atrybutami znaczników oferowanymi przez <code><textarea></code>. Możesz teraz zacząć używać <code><textarea></code> jak ekspert HTML!</p>