9.1 Podstawowe zdarzenia formularzy
Aby zapewnić funkcjonalność formularzy, musisz zrozumieć i kontrolować zdarzenia, które zachodzą podczas interakcji użytkownika z elementami formularza. Poniżej przyjrzymy się bliżej podstawowym zdarzeniom formularzy w HTML, ich obsłudze za pomocą JavaScript i przykładom ich użycia.
W HTML formularze mogą generować różne zdarzenia, które zachodzą podczas interakcji użytkownika z elementami formularza, takimi jak pola wejściowe, przyciski, pola wyboru i przyciski radiowe. Podstawowe zdarzenia formularzy obejmują:
- submit — zdarzenie wysyłania formularza
- reset — zdarzenie resetowania formularza
- focus — zdarzenie, gdy element otrzymuje fokus
- blur — zdarzenie, gdy element traci fokus
- change — zdarzenie zmiany wartości elementu formularza
- input — zdarzenie wprowadzania danych do elementu formularza
- select — zdarzenie zaznaczenia tekstu w elemencie formularza
9.2 Zdarzenie submit
Zdarzenie submit występuje podczas wysyłania formularza. Zwykle dzieje się to, gdy użytkownik naciska przycisk "Submit" w formularzu. Obsługa tego zdarzenia umożliwia wykonywanie walidacji danych przed ich wysłaniem na serwer, zapobieganie wysyłaniu formularza w przypadku błędów wejściowych i wykonywanie innych czynności.
Przykład obsługi zdarzenia submit:
<form id="my-form" action="/submit" method="post">
<label for="username">Nazwa użytkownika:</label>
<input type="text" id="username" name="username">
<button type="submit">Wyślij</button>
</form>
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username === '') {
alert('Proszę wprowadź nazwę użytkownika.');
event.preventDefault(); // zapobiegamy wysyłaniu formularza
} else {
alert(`Otrzymano nazwę użytkownika: ${username}`);
event.preventDefault();
}
});
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username === '') {
alert('Proszę wprowadź nazwę użytkownika.');
event.preventDefault(); // zapobiegamy wysyłaniu formularza
}
});
9.3 Zdarzenie reset
Zdarzenie reset występuje, gdy formularz zostaje zresetowany do swojego początkowego stanu. Zwykle dzieje się to, gdy użytkownik naciska przycisk "Reset". Obsługa tego zdarzenia może być przydatna do wykonywania dodatkowych czynności podczas resetowania formularza, takich jak czyszczenie komunikatów o błędach.
Przykład obsługi zdarzenia reset:
<div style="min-height: 220px">
<form id="my-form">
<label for="name">Name:</label>
<br>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email:</label>
<br>
<input type="email" id="email" name="email">
<br><br>
<label for="password">Password:</label>
<br>
<input type="password" id="password" name="password">
<div style="margin-top: 10px">
<button id="btn" type="button">Zresetuj</button>
</div>
</form>
<p id="log"></p>
</div>
<form id="my-form">
<label for="name">Name:</label>
<br>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email:</label>
<br>
<input type="email" id="email" name="email">
<br><br>
<label for="password">Password:</label>
<br>
<input type="password" id="password" name="password">
<div style="margin-top: 10px">
<button type="reset">Zresetuj</button>
</div>
</form>
<p id="log"></p>
const form = document.getElementById('my-form');
const btn = document.getElementById('btn');
const n = document.getElementById('name');
const e = document.getElementById('email');
const p = document.getElementById('password');
const log = document.getElementById('log');
document.addEventListener('DOMContentLoaded', () => {
n.value = "John";
e.value = "john@mail.com";
p.value = "qwerty";
});
btn.addEventListener('click', () => {
n.value = "";
e.value = "";
p.value = "";
log.textContent = 'Formularz został zresetowany!';
});
const form = document.getElementById('my-form');
const log = document.getElementById('log');
form.addEventListener('reset', function () {
log.textContent = 'Formularz został zresetowany!';
});
9.4 Zdarzenia focus i blur
Zdarzenia focus i blur zachodzą, gdy element formularza otrzymuje i traci fokus odpowiednio. Te zdarzenia są często używane do poprawy interakcji użytkownika z formularzem, na przykład do wyświetlania podpowiedzi lub komunikatów o błędach.
Przykład obsługi zdarzenia focus:
<div style="min-height: 55px">
<form id="my-form">
<label for="username">Nazwa użytkownika:</label>
<input type="text" id="username" name="username">
<div id="username-hint" style="display: none;">
Zobaczysz tę podpowiedź, gdy ustawisz fokus na pole.
Będzie widoczna nawet po zmianie fokusu.
</div>
</form>
</div>
<form id="my-form">
<label for="username">Nazwa użytkownika:</label>
<input type="text" id="username" name="username">
<div id="username-hint" style="display: none;">
Zobaczysz tę podpowiedź, gdy ustawisz fokus na pole.
Będzie widoczna nawet po zmianie fokusu.
</div>
</form>
const form = document.getElementById('my-form');
const usernameInput = document.getElementById('username');
const hint = document.getElementById('username-hint');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
usernameInput.addEventListener('focus', function (event) {
hint.style.display = 'block';
});
const usernameInput = document.getElementById('username');
const hint = document.getElementById('username-hint');
usernameInput.addEventListener('focus', function () {
hint.style.display = 'block';
});
Przykład obsługi zdarzenia blur:
<div style="min-height: 55px">
<form id="my-form">
<label for="username">Nazwa użytkownika:</label>
<input type="text" id="username" name="username">
<div id="username-error" style="display: none; color: red;">
Błąd pojawi się tylko wtedy, gdy pole będzie puste po zmianie fokusu
</div>
</form>
</div>
<form id="my-form">
<label for="username">Nazwa użytkownika:</label>
<input type="text" id="username" name="username">
<div id="username-error" style="display: none; color: red;">
Błąd pojawi się tylko wtedy, gdy pole będzie puste po zmianie fokusu
</div>
</form>
const form = document.getElementById('my-form');
const usernameInput = document.getElementById('username');
const error = document.getElementById('username-error');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
usernameInput.addEventListener('blur', function (event) {
error.style.display = usernameInput.value === '' ? 'block' : 'none';
});
const usernameInput = document.getElementById('username');
const error = document.getElementById('username-error');
usernameInput.addEventListener('blur', function () {
error.style.display = usernameInput.value === '' ? 'block' : 'none';
});
9.5 Zdarzenie input
Zdarzenie input występuje za każdym razem, gdy wartość elementu formularza ulega zmianie, niezależnie od tego, czy element traci fokus. To zdarzenie jest często używane do natychmiastowej weryfikacji wprowadzanych danych przez użytkownika, na przykład przy walidacji pól wejściowych w czasie rzeczywistym.
Przykład obsługi zdarzenia input:
<html lang="pl">
<head>
<style>
input {
outline: none;
}
.valid {
border-color: green;
}
.invalid {
border-color: red;
}
.wrapper-valid::after {
content: "Email jest prawidłowy";
margin-left: 5px;
color: green;
}
.wrapper-invalid::after {
content: "Email jest nieprawidłowy";
margin-left: 5px;
color: red;
}
</style>
</head>
<body>
<form id="my-form">
<label for="email">Email:</label>
<div id="wrapper">
<input type="email" id="email" name="email">
</div>
</form>
</body>
</html>
const form = document.getElementById('my-form');
const inputWrapper = document.getElementById('wrapper');
const emailInput = document.getElementById('email');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
emailInput.addEventListener('input', function () {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailPattern.test(emailInput.value)) {
inputWrapper.classList.add('wrapper-valid');
inputWrapper.classList.remove('wrapper-invalid');
emailInput.classList.add('valid');
emailInput.classList.remove('invalid');
} else {
inputWrapper.classList.add('wrapper-invalid');
inputWrapper.classList.remove('wrapper-valid');
emailInput.classList.add('invalid');
emailInput.classList.remove('valid');
}
});
const emailInput = document.getElementById('email');
const inputWrapper = document.getElementById('wrapper');
emailInput.addEventListener('input', function () {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailPattern.test(emailInput.value)) {
emailInput.classList.add('valid');
emailInput.classList.remove('invalid');
} else {
emailInput.classList.add('invalid');
emailInput.classList.remove('valid');
}
});
9.6 Zdarzenie select
Zdarzenie select występuje, gdy użytkownik zaznacza tekst w elemencie formularza, takim jak pole wejściowe lub pole tekstowe. To zdarzenie może być przydatne do wykonywania działań przy zaznaczeniu tekstu, na przykład do wyświetlania przycisku kopiującego.
Przykład obsługi zdarzenia select:
<div style="min-height: 55px">
<form id="my-form">
<label for="text-input">Wprowadź tekst:</label>
<input type="text" id="text" name="text">
<div id="select-message"></div>
</form>
</div>
<form id="my-form">
<label for="text-input">Wprowadź tekst:</label>
<input type="text" id="text" name="text">
<div id="select-message"></div>
</form>
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('my-form');
const textInput = document.getElementById('text');
const selectMessage = document.getElementById('select-message');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
textInput.addEventListener('select', function () {
selectMessage.textContent = 'Zaznaczyłeś tekst!';
});
});
document.addEventListener('DOMContentLoaded', function () {
const textInput = document.getElementById('text');
const selectMessage = document.getElementById('select-message');
textInput.addEventListener('select', function () {
selectMessage.textContent = 'Zaznaczyłeś tekst!';
});
});
9.7 Zdarzenie change
Zdarzenie change występuje, gdy wartość elementu formularza ulega zmianie, a użytkownik opuszcza element (traci fokus). To zdarzenie jest często używane do weryfikacji zmian w polach formularza, takich jak listy rozwijane lub pola wyboru.
Przykład obsługi zdarzenia change:
<form id="my-form">
<label for="color-select">Wybierz kolor:</label>
<select id="color-select" name="color">
<option value="red">Czerwony</option>
<option value="green">Zielony</option>
<option value="blue">Niebieski</option>
</select>
</form>
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('my-form');
const selectElement = document.getElementById('color-select');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
selectElement.addEventListener('change', function () {
alert('Wybrałeś kolor: ' + selectElement.value);
});
});
document.addEventListener('DOMContentLoaded', function () {
const selectElement = document.getElementById('color-select');
selectElement.addEventListener('change', function () {
alert('Wybrałeś kolor: ' + selectElement.value);
});
});
GO TO FULL VERSION