Ach te internety…

Środkowa sekcja mężczyzny używającego laptopa na biurku

Jak zrobić enter w HTML? Łamanie linii i wysłanie formularza

Wiktor Sadecki 12 min. czytania

W HTML naciśnięcie klawisza Enter w edytorze nie oznacza ani nowej linii na stronie, ani automatycznego „wysłania” formularza – oba te efekty trzeba świadomie zaplanować przy użyciu znaczników HTML, CSS oraz, gdy trzeba, JavaScript.

Poniżej znajdziesz praktyczny przewodnik, który wyjaśnia najważniejsze zagadnienia związane z Enterem w HTML:

  • „enter” (złamanie linii) – jak poprawnie wstawić nową linię z poszanowaniem semantyki i dostępności;
  • Enter w formularzach – jak działa domyślnie i jak go kontrolować;
  • Przechwytywanie Entera – kiedy i jak użyć JavaScriptu do zmiany działania klawisza;
  • Najczęstsze błędy – czego unikać, by nie psuć semantyki i dostępności.

„Enter” w HTML – dlaczego nie działa jak w Wordzie?

Przeglądarka ignoruje dodatkowe białe znaki (spacje, tabulatory, entery) i traktuje ich ciąg jak jedną spację.

Tekst łamie się automatycznie dopiero tam, gdzie kończy się dostępne miejsce w wierszu.

Przykład w kodzie (dwie linie):

To jest pierwszy wiersz.
To jest drugi wiersz.

Wyświetli się jako jedna linia:

To jest pierwszy wiersz. To jest drugi wiersz.

Aby wymusić nową linię, używaj odpowiednich znaczników lub stylów CSS.

Podstawowe sposoby na „enter” (nową linię) w HTML

Znacznik <br> – „miękki enter”

Najprostsza metoda na wstawienie nowej linii to <br> (line break). Jest to tag pusty (void) – nie ma treści w środku i nie wymaga pary zamykającej (</br> jest niepoprawne).

W HTML5 poprawna forma to po prostu:

<br>

Opcjonalnie (styl XHTML):

<br />

Działanie – ten kod:

To jest pierwsza linia.<br>
To jest druga linia.

Wyświetli się jako dwie linie:

To jest pierwsza linia.
To jest druga linia.

Łamanie linią <br> nie dodaje odstępu pionowego (to „miękki enter”) i świetnie sprawdza się wewnątrz jednego bloku tekstu, gdy nie chcesz nowego akapitu.

Typowe, sensowne użycia <br> to:

  • adresy pocztowe – formatowanie linii adresu w jednym bloku;
  • wiersze, poezja, cytaty – zachowanie oryginalnych wersów;
  • krótkie treści – kontrolowane podziały linii bez akapitów (np. podpisy, fragmenty formularza).

Czego nie robić z <br>: nie używaj wielu <br><br><br> do robienia odstępów (do tego służy CSS) ani do budowania układu strony (używaj elementów blokowych i flex/grid).

Akapity: znacznik <p> – semantyczny „twardy enter”

Jeśli chcesz utworzyć nowy akapit, użyj <p>:

<p>To jest pierwszy akapit.</p>
<p>To jest drugi akapit.</p>

Domyślnie przeglądarki zaczynają akapit od nowej linii i dodają odstęp (margin) nad i pod akapitem.

W praktyce <p> to odpowiednik „Enter + odstęp między akapitami” w edytorze tekstu.

Dlaczego <p> jest lepsze niż kilka <br>?

  • jest semantyczne – mówi: „to jest akapit tekstu”,
  • ułatwia pracę czytnikom ekranu (czytanie akapitami),
  • ułatwia stylowanie (np. p { margin-bottom: 1rem; }),
  • jest poprawne z punktu widzenia dostępności i SEO.

Nie zastępuj akapitów podwójnym <br>, jeśli to po prostu kolejny fragment tekstu.

white-space i zachowywanie białych znaków

Domyślnie HTML „zwija” sekwencje białych znaków (spacje, entery). Jeśli chcesz zachować wiele spacji lub entery z kodu jako nowe linie, użyj właściwości white-space w CSS.

Najczęstsze wartości i ich działanie:

  • white-space: pre; – zachowuje spacje i entery tak jak w <pre>;
  • white-space: pre-wrap; – zachowuje entery i pozwala zawijać długie wiersze;
  • white-space: pre-line; – zachowuje entery, ale redukuje wielokrotne spacje.

Przykład:

<style>
.z-enterami { white-space: pre-line; }
</style>

<div class="z-enterami">
To jest wiersz 1.
To jest wiersz 2 (enter w kodzie).
To jest wiersz 3.
</div>

Entery z kodu zostaną potraktowane jak nowe linie, bez konieczności wstawiania <br>.

Znacznik <pre> – tekst preformatowany

<pre> wyświetla tekst dokładnie tak, jak w kodzie: z zachowaniem spacji i enterów.

<pre>
Linia 1
Linia 2 z wcięciem
Linia 3
</pre>

Przydaje się do prezentacji kodu źródłowego, logów czy ASCII art; przeglądarka nie „czyści” odstępów. Do zwykłego tekstu lepsze są <p> + <br> + CSS.

Inne elementy blokowe jako „entery”

Każdy element blokowy (np. nagłówki <h1>–<h6>, listy <ul>/<ol>, <div>, <section>) domyślnie zaczyna się od nowej linii.

Przykład struktury:

<h2>Nagłówek</h2>
<p>Pierwszy akapit pod nagłówkiem.</p>
<p>Drugi akapit.</p>

To nie „Enter”, tylko struktura dokumentu – ważna dla dostępności i nawigacji (np. po nagłówkach).

Niedobór i nadmiar spacji: &nbsp;

Czasem trzeba zachować twardą spację w miejscu, gdzie zwykła zostałaby zredukowana. Użyj &nbsp; (non-breaking space). Przykład: Jan&nbsp;Kowalski. To ciekawostka przy „enterze”, pokazująca specjalne traktowanie spacji i enterów w HTML.

Najczęstsze błędy przy „enterze” w HTML

  1. Liczenie na Enter w edytorze. Programista wciska Enter w pliku HTML, oczekuje nowej linii na stronie – przeglądarka to ignoruje.

  2. Zastępowanie akapitów <p> podwójnym <br>. To psuje semantykę i utrudnia dostępność.

    Zamiast:

    Tekst akapitu 1.<br><br>
    Tekst akapitu 2.

    Użyj:

    <p>Tekst akapitu 1.</p>
    <p>Tekst akapitu 2.</p>

  3. Używanie <br> do robienia „przestrzeni”. Do odstępów służy CSS (margin, padding), a nie sztuczne „entery”.

  4. Stosowanie niepoprawnej składni </br>. W nowoczesnym HTML standardem jest <br> jako pusty element – bez znacznika zamykającego.

Enter, struktura dokumentu i dostępność

Z punktu widzenia dostępności (a11y) warto pamiętać o różnicach ról poszczególnych elementów:

  • <p> – reprezentuje pełny akapit tekstu; ułatwia nawigację i zrozumienie struktury;
  • <br> – krótka przerwa liniowa; czytniki ekranu robią zwykle krótszą pauzę niż między akapitami;
  • Nagłówki (<h1>–<h6>) – pozwalają przechodzić po strukturze dokumentu;
  • Listy (<ul>, <ol>, <li>) – czytane jako zbiory elementów (np. „lista z 5 elementów”).

Do logicznego podziału treści używaj semantycznych elementów (nagłówki, akapity, listy, sekcje), a <br> traktuj jako lokalne, drobne złamanie linii – np. w adresach czy wersach wiersza.

To znacząco ułatwia życie użytkownikom czytników ekranu i klawiatury, a także narzędziom wspierającym.

Enter a formularze – kiedy „wysyła” formularz?

Drugi sens słowa „enter” w HTML to naciśnięcie klawisza Enter przez użytkownika podczas wypełniania formularza.

Domyślne działanie przeglądarek

Przykładowy formularz:

<form action="/szukaj" method="get">
<label>
Szukaj:
<input type="text" name="q">
</label>
<input type="submit" value="Szukaj">
</form>

Jeśli fokus jest w polu tekstowym i użytkownik naciśnie Enter, przeglądarka domyślnie wysyła formularz tak, jak po kliknięciu przycisku typu submit. Do wysłania dochodzi, gdy formularz zawiera przycisk typu „submit” (<input type="submit"> lub <button type="submit">).

Dla dostępności ważne jest, że użytkownicy klawiatury i czytników ekranu oczekują takiego zachowania – nie trzeba do tego dopisywać JavaScriptu.

Formularze z wieloma polami i przyciskami

Jeśli jest jeden przycisk typu „submit”, Enter w polu tekstowym zwykle uruchamia właśnie ten przycisk. Gdy jest wiele przycisków typu „submit”, Enter zazwyczaj aktywuje przycisk domyślny (często pierwszy w drzewie DOM; szczegóły zależą od przeglądarki).

W złożonych formularzach jasno oznaczaj przyciski (type="submit" vs type="button") i nie walcz z natywną logiką bez dobrego powodu – inaczej utrudnisz obsługę klawiaturą.

Jak przechwycić Enter w formularzu za pomocą JavaScript

W niektórych przypadkach chcesz zmienić domyślne działanie Entera:

  • wysłać formularz Enterem nawet bez przycisku „submit” (uwaga na dostępność);
  • zablokować wysyłanie Enterem w wybranych polach;
  • zmienić działanie Entera (np. Enter wysyła wiadomość, Shift+Enter dodaje nową linię).

Podejście współczesne: keydown + event.key === 'Enter'

Zalecane jest zdarzenie keydown/keyup i właściwość event.key, zamiast przestarzałych keyCode czy which.

Przykład – wysłanie formularza po Enterze:

<form id="search-form" action="/szukaj" method="get">
<label>
Szukaj:
<input type="text" name="q">
</label>
</form>

<script>
const form = document.getElementById('search-form');
form.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
event.preventDefault();
form.submit();
}
});
</script>

Wzorzec ten przechwytuje Enter wewnątrz formularza, blokuje domyślne działanie i wywołuje form.submit() programowo.

Przykład z jQuery i keyCode (starsze podejście)

W starszych materiałach często spotkasz taki kod:

$(document).keypress(function (event) {
var keycode = event.which || event.keyCode;
if (keycode == 13) { // 13 = Enter
$('#myform').submit();
}
});

To działa, ale keypress i keyCode są przestarzałe. Lepiej używać keydown/keyup oraz event.key.

Ignorowanie Enter w niektórych polach

Przykład – w formularzu logowania chcesz zablokować wysłanie Enterem w polu „Nazwa użytkownika”:

<form id="login-form" action="/login" method="post">
<label>
Nazwa użytkownika:
<input type="text" name="username">
</label>
<label>
Hasło:
<input type="password" name="password">
</label>
<button type="submit">Zaloguj</button>
</form>

<script>
const form = document.getElementById('login-form');
form.addEventListener('keydown', function (event) {
if (event.key === 'Enter' && event.target.name === 'username') {
event.preventDefault();
}
});
</script>

Nie nadużywaj takiego podejścia – użytkownicy przyzwyczajeni do Entera mogą być zaskoczeni.

enterkeyhint – podpowiedź dla klawiatur ekranowych

Atrybut enterkeyhint określa, jaka etykieta/funkcja ma być pokazana na przycisku Enter na klawiaturze ekranowej (np. w smartfonach). Najczęstsze wartości:

  • enterkeyhint="enter" – standardowy Enter;
  • enterkeyhint="done" – „Gotowe”;
  • enterkeyhint="go" – „Idź”;
  • enterkeyhint="next" – „Dalej”;
  • enterkeyhint="search" – „Szukaj”;
  • enterkeyhint="send" – „Wyślij”.

Użycie w polu wyszukiwania:

<input type="search" name="q" enterkeyhint="search">

Użycie w polu wiadomości:

<textarea name="message" rows="3" enterkeyhint="send"></textarea>

Atrybut ten nie zmienia logiki Entera w przeglądarce, ale pomaga użytkownikom urządzeń mobilnych zrozumieć kontekst akcji.

Praktyczne scenariusze

Formatowanie adresu

Cel – wyświetlić adres pocztowy z podziałem na linie. Rekomendacja: użyj <br> wewnątrz jednego akapitu lub znacznika adresu.

<p>
Jan Kowalski<br>
ul. Przykładowa 1<br>
00-001 Warszawa<br>
Polska
</p>

Lub semantycznie jako dane kontaktowe:

<address>
Jan Kowalski<br>
ul. Przykładowa 1<br>
00-001 Warszawa<br>
Polska
</address>

Prosta wyszukiwarka z Enterem

Cel – użytkownik wpisuje hasło, naciska Enter – formularz się wysyła. Możesz polegać na zachowaniu domyślnym przeglądarki.

<form action="/szukaj" method="get">
<label for="q">Szukaj:</label>
<input id="q" type="search" name="q" enterkeyhint="search">
<button type="submit">Szukaj</button>
</form>

Wpisanie tekstu i naciśnięcie Enter w polu q wyśle formularz. Atrybut enterkeyhint="search" podpowie na mobilnej klawiaturze, że Enter oznacza „Szukaj”.

Formularz „chatowy” – Enter wysyła, Shift+Enter robi nową linię

W interfejsach czatu użytkownicy często oczekują, że Enter wyśle wiadomość, a Shift+Enter doda nową linię w polu tekstowym.

<form id="chat-form" action="/send" method="post">
<label for="message">Wiadomość:</label>
<textarea id="message" name="message" rows="3" enterkeyhint="send"></textarea>
<button type="submit">Wyślij</button>
</form>

<script>
const form = document.getElementById('chat-form');
const textarea = document.getElementById('message');
textarea.addEventListener('keydown', function (event) {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
form.submit();
}
// Shift+Enter – domyślnie: nowa linia w textarea
});
</script>

Zadbaj o widoczny przycisk „Wyślij” i rozważ krótką wskazówkę: „Enter – wyślij, Shift+Enter – nowa linia”.

Dobre praktyki – checklista

Przy łamaniu linii („enter” w tekście):

  • używaj <p> do akapitów tekstu,
  • używaj <br> tylko do lokalnych złamań (adresy, wiersze, krótkie fragmenty),
  • nie używaj <br> do tworzenia odstępów – stosuj margin/padding w CSS,
  • pamiętaj, że entery w kodzie są ignorowane, chyba że użyjesz <pre> albo white-space w CSS.

Przy formularzach i Enterze na klawiaturze:

  • polegaj na domyślnym działaniu przeglądarki – Enter w polu tekstowym + przycisk typu submit = wysłanie formularza,
  • zawsze zapewniaj przycisk typu submit (<button type="submit"> lub <input type="submit">),
  • jeśli zmieniasz zachowanie Entera JavaScriptem – używaj keydown/keyup i event.key === 'Enter',
  • nie blokuj bez potrzeby naturalnego wysyłania formularza,
  • uważaj na textarea – użytkownicy zwykle oczekują, że Enter doda nową linię,
  • stosuj enterkeyhint w polach na urządzeniach mobilnych.

Z perspektywy dostępności (a11y):

  • buduj strukturę dokumentu za pomocą semantycznych znaczników (<h1>–<h6>, <p>, <ul>/<ol>/<li>, <section>, <nav>, <main>),
  • nie używaj <br> do symulowania akapitów – utrudnia to pracę czytnikom ekranu,
  • pamiętaj o etykietach <label> i logicznej kolejności tabulacji w formularzach,
  • nie zakładaj, że wszyscy korzystają z myszy – Enter i klawiatura są kluczowym sposobem nawigacji.

Podobne artykuły