Aprendendo HTML Parte 31: Usando elementos da área de texto em formulários HTML

Nesta discussão, estudaremos o uso de elementos da área de texto em formulários HTML. Esse elemento é o elemento mais usado em um site.

Vou tentar explicar com o máximo de detalhes possívelem relação ao uso dos seguintes elementos da área de texto com seus atributos, como linhas e colunas. Em geral, o elemento <textarea> ... </texraea> é usado para inserir dados em uma caixa de texto. Para mais detalhes sobre esses elementos e atributos, vejamos o tutorial abaixo

tag <textarea>

A tag <textarea> é usada para criar umcaixa de texto que possui uma área de texto. Seu uso é marcado pelo uso da tag <textarea> como prefixo e da tag </textarea> como fechamento. Aqui está um exemplo de código:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Elemen Textarea pada Form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>

Após a execução no navegador, os resultados são os seguintes:

Essa tag suporta vários atributos, como nome, linhas, colunas, comprimento máximo, necessário e assim por diante.

1. Atributo de linhas

O atributo de linhas é usado para determinar a quantidadelinha na área de texto. Valores nesse atributo são números como 40, 10 ou com porcentagem como 20%. Onde quanto maior o valor, maior o elemento de área de texto. A seguir, é apresentado um exemplo de gravação e uso do atributo de linhas na tag <textarea> em HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Rows pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" rows="15">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>

Após a execução do código acima no navegador, ele aparecerá como mostrado abaixo:

2. Atributo Cols

O atributo cols é usado para determinar a largura(número de colunas) no elemento da área de texto. Semelhante ao atributo de linhas, os valores nesse atributo podem ser números como 80, 20 ou 20%. Onde quanto maior o valor, maior o elemento da área de texto. A seguir, é apresentado um exemplo do código para escrever e usar o atributo cols na tag <textarea> em HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Cols pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" cols="50">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>

Após a execução do código acima no navegador, ele aparecerá como mostrado abaixo:

Ambos os exemplos usam os atributos de linhas e colunasacima mostrou diferenças no uso do atributo de linhas e colunas no elemento textarea. Para ser exato, o atributo de linhas é para definir a altura, enquanto o atributo cols é para definir a largura no elemento <textarea>. A seguir, é apresentado um exemplo de gravação e uso dos atributos de linhas e colunas juntos na tag <textarea> em HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Rows dan Cols pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" rows="15" cols="50">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>

Após a execução do código acima no navegador, ele aparecerá como mostrado abaixo:

uma combinação de linhas e colunas na área de texto

3. O atributo maxlength

Este atributo também se aplica à marca TextArea, que possui uma função para limitar o número de caracteres inseridos na TextArea. Exemplo do código como este:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Maxlength pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" rows="10" cols="30" maxlength="40">Masukkan teks disini....</textarea>
<br>
<input type="submit">
</form>
</body>
</html>

Quando executado em um navegador, o resultado é o seguinte:

No código acima, defino o comprimento máximo como 40, para que você possa inserir apenas caracteres com até 40 caracteres, e não mais.

4. Atributos necessários

Não apenas o atributo maxlength, o atributo necessáriotambém usado na área de texto. Esta função de atributo é usada para definir o elemento (neste caso, a área de texto) a ser necessária antes do envio. Exemplo do código HTML como este:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Maxlength pada Elemen Textarea</title>
</head>
<body>
<form action="proses_input.php" method="get">
<textarea name="memo" rows="10" cols="30" required></textarea>
<br>
<input type="submit">
</form>
</body>
</html>

Parece em um navegador como este:

Ao clicar diretamente no botão de envio, você receberá uma notificação como na figura acima, o que significa que você deve preencher a área de texto antes de clicar no botão de envio.

Esse é o material referente ao uso da área de texto emFormulário HTML, a área de texto também pode ser usada fora do formulário HTML, portanto, não é apenas para formulários HTML. Não se esqueça de continuar visitando este blog para obter os tutoriais mais recentes sobre HTML.

</p>