Introdução
Neste laboratório, os participantes aprenderão a manipular eventos de entrada de formulário usando JavaScript, com foco na criação de um campo de entrada interativo e amigável. O laboratório orienta os alunos na configuração de uma estrutura HTML, na implementação de técnicas de manipulação de eventos dinâmicos, como onfocus e onblur, e na aplicação de estilos personalizados para aprimorar a interação do usuário.
O processo passo a passo abrange a criação de um campo de entrada com texto padrão, a escrita de código JavaScript para limpar e restaurar o texto com base nas interações do usuário e a aplicação de feedback visual por meio de CSS. Ao final do laboratório, os participantes entenderão como manipular entradas de formulário programaticamente, melhorar a experiência do usuário e adquirir habilidades práticas em desenvolvimento web orientado a eventos.
Configurar a estrutura HTML para entrada de formulário
Neste passo, criaremos a estrutura HTML básica para uma entrada de formulário que demonstrará a manipulação de eventos em JavaScript. Configuraremos um campo de entrada simples com um texto padrão que será manipulado dinamicamente usando eventos JavaScript.
Abra o WebIDE e crie um novo arquivo chamado index.html no diretório ~/project. Começaremos criando uma estrutura HTML5 básica com um campo de entrada:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Form Input Event Handling</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.input-container {
text-align: center;
}
</style>
</head>
<body>
<div class="input-container">
<input
type="text"
id="nameInput"
value="Enter your name"
class="form-input"
/>
</div>
</body>
</html>
Vamos analisar os elementos principais desta estrutura HTML:
- Criamos um campo de entrada simples com um
idchamadonameInput. - A entrada possui um valor padrão "Enter your name".
- Adicionamos uma classe CSS básica
form-inputpara estilização futura. - Incluímos um layout centralizado simples para a entrada.
Exemplo de saída ao abrir este arquivo HTML em um navegador:
O campo de entrada agora está pronto para adicionarmos a manipulação de eventos JavaScript nos próximos passos. Usaremos essa estrutura para demonstrar os eventos onfocus e onblur.
Implementar o evento onfocus para limpar o texto padrão
Neste passo, adicionaremos JavaScript para implementar o evento onfocus, que limpará o texto padrão quando o campo de entrada receber foco. Abra o arquivo index.html no WebIDE e modifique-o para incluir uma tag <script> com nossa lógica de manipulação de eventos:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Form Input Event Handling</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.input-container {
text-align: center;
}
</style>
</head>
<body>
<div class="input-container">
<input
type="text"
id="nameInput"
value="Enter your name"
class="form-input"
/>
</div>
<script>
function clearDefaultText(input) {
// Check if the current value is the default text
if (input.value === "Enter your name") {
// Clear the input field
input.value = "";
}
}
</script>
</body>
</html>
Vamos analisar as principais alterações:
- Adicionamos o atributo
onfocusao elemento de entrada, que chama a funçãoclearDefaultText()quando a entrada recebe foco. - A função
clearDefaultText()verifica se o valor atual é o texto padrão. - Se o texto padrão estiver presente, ela limpa o campo de entrada.
Exemplo de interação:
- Quando a página carrega, a entrada mostra "Enter your name".
- Quando você clica ou navega para o campo de entrada, o texto desaparece.
- Agora você pode digitar seu próprio texto livremente.
Essa abordagem proporciona uma experiência de usuário limpa, removendo o texto padrão quando o usuário está pronto para inserir suas próprias informações.
Adicionar o evento onblur para restaurar o texto padrão
Neste passo, aprimoraremos nosso campo de entrada adicionando um manipulador de eventos onblur que restaura o texto padrão se o usuário sair do campo de entrada sem inserir nenhum texto. Atualize o arquivo index.html no WebIDE com o seguinte código:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Form Input Event Handling</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.input-container {
text-align: center;
}
</style>
</head>
<body>
<div class="input-container">
<input
type="text"
id="nameInput"
value="Enter your name"
class="form-input"
/>
</div>
<script>
function clearDefaultText(input) {
if (input.value === "Enter your name") {
input.value = "";
}
}
function restoreDefaultText(input) {
// If the input is empty, restore the default text
if (input.value.trim() === "") {
input.value = "Enter your name";
}
}
</script>
</body>
</html>
Principais alterações neste passo:
- Adicionamos o atributo
onblurao elemento de entrada, que chama a funçãorestoreDefaultText()quando a entrada perde o foco. - Criamos uma nova função
restoreDefaultText()que:- Verifica se a entrada está vazia (usando
trim()para lidar com espaços em branco). - Restaura o texto padrão se nenhum conteúdo for inserido.
- Verifica se a entrada está vazia (usando
Exemplo de interação:
- Clique no campo de entrada.
- O texto padrão desaparece.
- Se você não digitar nada e clicar fora.
- O texto padrão "Enter your name" reaparece.
Essa abordagem proporciona uma experiência de usuário fluida ao:
- Limpar o texto padrão quando o usuário começa a digitar.
- Restaurar o texto padrão se o usuário não inserir nada.
Estilizar o campo de entrada ao receber foco
Neste passo, melhoraremos a experiência do usuário adicionando estilos dinâmicos ao campo de entrada quando ele receber foco. Atualize o arquivo index.html no WebIDE com o seguinte código:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Form Input Event Handling</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.input-container {
text-align: center;
}
.form-input {
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 5px;
transition: all 0.3s ease;
}
.form-input:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}
</style>
</head>
<body>
<div class="input-container">
<input
type="text"
id="nameInput"
value="Enter your name"
class="form-input"
/>
</div>
<script>
function clearDefaultText(input) {
if (input.value === "Enter your name") {
input.value = "";
}
}
function restoreDefaultText(input) {
if (input.value.trim() === "") {
input.value = "Enter your name";
}
}
</script>
</body>
</html>
Principais alterações de estilo:
- Adicionamos CSS para a classe
.form-input:- Estilização básica com preenchimento (padding), tamanho da fonte e borda.
- Efeito de transição suave.
- Adicionamos a estilização da pseudo-classe
:focus:- Remove o contorno padrão.
- Altera a cor da borda para verde.
- Adiciona uma sombra suave (box shadow) quando focado.
Exemplo de alterações visuais:
- Estado padrão: Borda cinza, aparência padrão.
- Ao receber foco:
- A borda fica verde.
- Um efeito de brilho suave aparece.
- Animação de transição suave.
Essa estilização fornece feedback visual aos usuários, melhorando a experiência interativa do campo de entrada.
Testar e validar a manipulação de eventos de entrada de formulário
Neste passo final, aprimoraremos nosso campo de entrada com validação adicional e manipulação de eventos para criar uma experiência de usuário mais robusta. Atualize o arquivo index.html no WebIDE com o seguinte código:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Form Input Event Handling</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.input-container {
text-align: center;
margin-bottom: 20px;
}
.form-input {
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 5px;
transition: all 0.3s ease;
width: 300px;
}
.form-input:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}
#validationMessage {
color: #4CAF50;
font-weight: bold;
}
</style>
</head>
<body>
<div class="input-container">
<input
type="text"
id="nameInput"
value="Enter your name"
class="form-input"
/>
</div>
<div id="validationMessage"></div>
<script>
function clearDefaultText(input) {
if (input.value === "Enter your name") {
input.value = "";
}
}
function restoreDefaultText(input) {
if (input.value.trim() === "") {
input.value = "Enter your name";
}
}
function validateInput(input) {
const validationMessage = document.getElementById("validationMessage");
if (input.value.length > 0 && input.value !== "Enter your name") {
// Basic validation: check name length
if (input.value.length < 2) {
validationMessage.textContent = "Name is too short!";
validationMessage.style.color = "red";
} else if (input.value.length > 20) {
validationMessage.textContent = "Name is too long!";
validationMessage.style.color = "red";
} else {
validationMessage.textContent = "Valid name entered!";
validationMessage.style.color = "#4CAF50";
}
} else {
validationMessage.textContent = "";
}
}
</script>
</body>
</html>
Principais aprimoramentos neste passo:
- Adicionamos um evento
oninputpara fornecer validação em tempo real. - Criamos uma função
validateInput()que:- Verifica o comprimento da entrada.
- Fornece mensagens de feedback dinâmicas.
- Altera a cor da mensagem com base no status da validação.
Exemplo de interação:
- Digite um nome muito curto (ex: "A") → "Name is too short!" (vermelho).
- Digite um nome muito longo → "Name is too long!" (vermelho).
- Digite um nome válido (2-20 caracteres) → "Valid name entered!" (verde).
Essa abordagem demonstra:
- Manipulação de eventos.
- Validação dinâmica.
- Mecanismos de feedback ao usuário.
Resumo
Neste laboratório, os participantes aprendem a manipular eventos de entrada de formulário usando JavaScript, criando um campo de entrada interativo com manipulação dinâmica de texto. O laboratório orienta os alunos na configuração de uma estrutura HTML com um valor de entrada padrão, na implementação de eventos onfocus e onblur para aprimorar a interação do usuário e na aplicação de estilos CSS para fornecer feedback visual quando o campo de entrada é selecionado.
A abordagem passo a passo abrange técnicas fundamentais de desenvolvimento web, incluindo a criação de um layout HTML responsivo, o uso de event listeners em JavaScript para modificar o comportamento da entrada e a aplicação de estilos CSS para melhorar a interface do usuário. Ao seguir estes passos práticos, os participantes ganham experiência prática na criação de interações de formulário mais intuitivas e amigáveis usando tecnologias web essenciais.
