Caixa de Aviso Javascript com Textarea

A tag de área de texto HTML é usada para criar um campo de entrada de texto de várias linhas em um formulário. Ele é definido com o </code> e pode conter um número ilimitado de caracteres.</em></p><p>Ao criar um formulário HTML, você pode decidir que deseja aceitar uma longa sequência de texto. Por exemplo, se você estiver criando um formulário de contato do cliente para o site de um varejista, poderá criar um elemento de formulário que aceite uma descrição detalhada de um problema que o cliente está enfrentando.</p><p>Aqui é onde o HTML <code> <textarea></code> entra em cena. O elemento <code><textarea></code> é usado para criar um elemento de forma que fornece funcionalidade para editar texto em várias linhas. Este elemento é útil se você deseja aceitar respostas de texto de mais de um usuário.</p><p>Este tutorial discutirá, com alguns exemplos, como usar HTML <code><textarea></code> em seu Alla código. Ao final deste tutorial, você terá todo o conhecimento necessário para usar o <code><textarea></code> como um só! pro</p><h2>Tag HTML Textarea</h2><p>A <code><textarea></code> é usada para definir um campo de controle de entrada de texto de várias linhas em um formulário. . <code><textarea></code> pode conter um número ilimitado de caracteres</p><p>A sintaxe <code><textarea></code> é a seguinte:</p> <p>pausa de Desceu nosso código. A tag <code><textarea></code> é usada para definir a área da área de texto em nosso formulário web. Ao contrário de <code><input></code>, <code><textarea></code> deve ter uma tag de abertura (<code><textarea></code>) e uma de fechamento ( <code></ textarea > </code>). Isso ocorre porque o texto padrão que a caixa de texto exibirá está contido entre as duas tags</p><p>. Também especificamos dois atributos em nosso exemplo:.</p> </div> </div> <ul><li><strong>linhas </strong> informa ao navegador quantas linhas a área de texto deve ter por padrão t. Em outras palavras, o atributo rows indica a altura da caixa de texto.</li><li><strong>Col. </strong> é o número de colunas que a caixa de texto deve ter por padrão. Em outras palavras, o atributo Col. indica a largura da caixa de texto</li></ul> </a> </div> <p>Suponha que criamos um web trainer para um loja de roupas local. Este formulário deve permitir que os clientes comentem suas compras. Como queremos dar aos usuários espaço para enviar comentários detalhados, usaremos um <code><textarea></code> HTML para coletar comentários dos usuários.</p><p>Poderíamos usar o seguinte código para criar o formulário de comentários:</p> <p>Nosso código retorna:</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 quebrar o nosso código Primeiro, declarou <code> <form> </code> que é usado para definir nosso formulário on-line. Em seguida, usamos um <code><label></code> para adicionar um rótulo à nossa página perguntando ao usuário <code>Que feedback você tem para nós?</code></p><p>Então, usamos um <code><textarea></code> para criar o formulário de retorno. Especificamos quatro atributos, que são os seguintes:</p><ul><li>rows é 5 e armazena o número de linhas que o campo deve ter</li><li>Col. é definido como 30 e armazena. o número de colunas que o campo deve ter.</li><li>id é o identificador exclusivo atribuído ao formulário , que seria usado quando enviarmos o formulário.</li><li>nome também é usado para identificar o formulário e é n necessário se quisermos enviar o formulário para um servidor web.</li></ul> <p><code><textarea></code> é suportado por todos os principais navegadores.</p><p>O exemplo acima é uma implementação básica de <code><textarea></code>, mas podemos tornar nosso formulário mais avançado.</p><p>Vamos passar para dois exemplos mais avançados para ilustrar como podemos usar o <code><textarea></code> para criar caixas de texto.</p><h3>comprimentos mínimo e máximo </h3> <p>dos go Vamos em nossa loja de roupas, por exemplo Suponha que queremos limitar o número de caracteres a ute nte envia para 1000, para encorajar os usuários a serem concisos ao escrever seus comentários. Também queremos definir um limite mínimo de caracteres para 10, para garantir que os usuários escrevam algo no formulário</p> </a> </div> <p> é onde os atributos MINLENGTH e mAXLENGTH entram em jogo.minlength é usado para especificar o número mínimo de caracteres que um usuário deve escrever e maxlength é usado para especificar o número máximo de caracteres que um usuário pode escrever em um módulo.</p><p>Aqui está um exemplo de nosso módulo web anterior com os atributos minlength e maxlength definidos:</p> <p>Nosso formulário de retorno:</p><figure class = "wp-block image"> <img src = "https: //lh3.googleusercontent .com / ztmPnPdTmOQ1f7X3SWtWwd3iSXouyXSNof94000099SzkZHWo5Gy8TrbeKv0ZzD- JSR784uIegJeXzrWAvArwI_FpuE7Ul6cOZAwtBtKOSuKqw9 wd3iSXouyXSNof94000099SzkZHWo5Gy8TrbeKv0ZzD JSR784uIegJeXzrWAvArwI FpuE7Ul6cOZAwtfJyfEKVSuKqCwOILHdc9gj << se o módulo for considerado inválido, não há personagens para o nosso módulo. left "> é importante notar que, mesmo que o utilizador escreve menos de 10 caracteres em nosso formulário, o textarea ainda será considerado válido. Se quisermos impor o limite mínimo, devemos especificar o <code></code> necessário.</p><h3>Texto de espaço reservado </h3> <p>Em nosso formulário da web acima, especificamos o texto padrão dentro nosso módulo. Este texto significa <code>Seus comentários vão aqui. </code> Embora essas informações sejam úteis, o usuário deve excluir manualmente o texto padrão se não quiser na resposta ao formulário.</p><p>Se você deseja especificar um valor de espaço reservado, pode usar o <code>espaço reservado</code>. Este atributo indica um valor de espaço reservado que é exibido quando o formulário está vazio. Assim que o usuário começa a digitar na caixa, o espaço reservado desaparece.</p><p>Aqui está um exemplo de um <code><textarea></code> que contém o texto do espaço reservado <code>Seus comentários vão aqui . </code>:</p> <p>Nosso código retorna:</p> <script> jQuery (document ) .ready (função () {jQuery (`# depoimento-seção-1`). clique (função (e) {var text = "Encontre sua correspondência no Bootcamp"; var type = "seção de depoimento"; var ahref = jQuery ( this) .attr (`href`); GaEvent (texto, tipo, `fasttrack`); fasTrackEvent (tipo, texto, ahref);}); função GaEvent (texto, nome, eventName) {var pathName = window.location. pathname.replace (/// g, ""); var referenciador = document.referenciador; referenciador = referenciador .replace ("https: / /", ""); referenciador = referenciador.substituir ("http: //", ""); referenciador = referenciador.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 artigo = jQuery (".thb-blockgrid"). Pai (). Encontre ("h2"). Texto ( ); if (artigo == "") {var artigo = jQuery ("h1"). texto (); } analytics.track ("Blog - CTA FastTrack clicado", {time: Date.now (), ctaType: type, ctaText: text, url: document.URL, article: article, category: jQuery (`. entry-header. single_category_title `) .text(), fonte: "blog", referenciador: document.referrer, referrerDomain: document.referrer.split (` / `) [2]}); if (fCTA == null) {var fCTA = `seção de depoimento`; } 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> <rosto class = "wp-image-block"> <img src = "https://lh3.googleusercontent.com/7EP_nEAj8Pki73CeUAszIZ_eE_8ZJ4LuvxOu820CYCWR4hVxEd3kLM75CUCcuWNw2m-YPzdnfnC5McAGP1qAGBdyk7saA8hBDrHaSKUWFj9OFcDA0V5QYTdK1WY5eqzb-CNJ0n21" alt = "7EP NEAj8Pki73CeUAszIZ EE 8ZJ4LuvxOu820CYCWR4hVxEd3kLM75CUCcuWNw2m YPzdnfnC5McAGP1qAGBdyk7saA8hBDrHaSKUWFj9OFcDA0V5QYTdK1WY5eqzb CNJ0n21 "> </figure> <p>Como você pode ver, o texto <code>Seus comentários vão aqui. </code> aparece na caixa de texto. No entanto, quando o usuário começa a digitar, esse texto desaparece. Sabemos que este texto é um espaço reservado porque é cinza claro, enquanto o texto padrão, conforme mostrado em nosso primeiro exemplo deste artigo, aparece como texto em preto sólido (a menos que indicado de outra forma).</p> </a> </div> <h2>HTML atributos de caixa de texto</h2><p><code><textarea></code> aceita um conjunto de atributos específicos de rótulos. adicionar <code> <textarea> </code> suporta todos os <a href=" /html-textarea/"> atributos globais </a> em HTML.</p><p>Aqui estão os atributos de tag específicos suportados pela <code><textarea></code>:</p><table class = "wp-block to table-info table"> <tbody > <tr> <td> <strong>Atributos </strong> </ td> <td> <strong>Valor </strong> </ td> <td > <strong>descrição </strong> </ td> </ tr> <tr> <td> autofoco </td> <td> autofoco </td> <td> Indica se a área de texto deve estar em foco quando o documento está carregado. </ td> </ tr> <tr> <td> Col. </ td> <td> número </ td> <td> Especifica o número de linhas de texto exibidas por padrão para a caixa de texto. </ td> </ tr> <tr> <td> desabilitado </td> <td> boolean </td> <td> para habilitar a caixa de texto para entrada do usuário. </ td> </ tr> <tr> <td> formulário </td> <td> ID do módulo </td> <td> caixa de texto Link para um módulo. </ td> </ tr> <tr> <td> maxlength </ td> <td> número </td> <td> Indica o número máximo de caracteres aceitos pela caixa de texto.<br></ td> < / tr> <tr> <td> comprimento mínimo </ td> <td> número </td> <td> Indica o número mínimo de caracteres aceitos pela caixa de texto. </ td> </ tr> <tr> <td> nome </td> <td> nome </td> <td> nome da caixa de texto. </ td> </ tr> <tr> <td> espaço reservado </td> <td> texto </td> <td> Fornece um espaço reservado que desaparece quando o usuário começa a digitar na caixa de texto. </ td> </ tr> <tr> <td> readonly </ td> <td> boolean </td> <td> Indica que o usuário não pode modificar o conteúdo da área de texto. </td> </tr> <tr> <td> obrigatório </td> <td> boolean </td> <td> Indica que o usuário deve preencher o formulário. </ td> </ tr> <tr> <td> linhas </td> <td> número </td> <td> Indica o número de colunas de texto exibidas por padrão para a caixa de texto. </ td> </ tr> </ tbody> </table> <h2></h2><h2>Conclusão</h2><p>O HTML <code><textarea></code> é usado para criar dos membros de entrada do texto de várias linhas. Eles podem ser úteis se você quiser coletar mais de uma string de dados do usuário.</p><p>Este tutorial discutiu, referindo-se a exemplos, como usar o <code><textarea></code> para criar caixas de texto . Este tutorial também forneceu uma tabela de referência com atributos de tag específicos oferecidos pelo <code><textarea></code>. Agora você está pronto para começar a usar <code><textarea></code> como um especialista em HTML!</p>