Para limitar um campo de entrada (input) a um máximo de 200 caracteres e mostrar em tempo real quantos caracteres ainda estão disponíveis para preencher, você pode usar JavaScript para atualizar dinamicamente o contador de caracteres enquanto o usuário digita. Aqui está um exemplo de como você pode fazer isso:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contador de Caracteres</title>
</head>
<body>
<textarea id="texto" maxlength="200" oninput="updateCounter()"></textarea>
<div id="contador"></div>
<script>
function updateCounter() {
var input = document.getElementById('texto');
var contador = document.getElementById('contador');
var caracteresRestantes = 200 - input.value.length;
contador.textContent = "Caracteres restantes: " + caracteresRestantes;
}
</script>
</body>
</html>
Neste código, temos um textarea com id="texto" que tem um atributo maxlength="200", que limita o número de caracteres digitados. Também temos um div com id="contador" que será usado para exibir o contador de caracteres restantes.
O evento oninput="updateCounter()" é acionado sempre que o usuário digita algo no campo de texto. A função updateCounter() é chamada sempre que ocorre uma entrada de texto e atualiza o texto do contador com o número de caracteres restantes.
Esse código JavaScript atualizará o contador de caracteres em tempo real enquanto o usuário digita no campo de texto, garantindo que o texto inserido não ultrapasse o limite de 200 caracteres.