Tvorba formulára pre kontakt

Úvod

Formuláre sú základom interakcie s používateľom. V tomto článku sa naučíš vytvoriť jednoduchý kontaktný formulár s HTML a štýlovaný pomocou CSS.

1. HTML štruktúra formulára

 <form class="kontakt-form"> <label for="meno">Meno:</label> <input type="text" id="meno" name="meno">
<label for="email">Email:</label>
<input type="email" id="email" name="email">

<label for="sprava">Správa:</label>
<textarea id="sprava" name="sprava"></textarea>

<button type="submit">Odoslať</button>

2. CSS štýly formulára

 .kontakt-form { display: flex; flex-direction: column; width: 300px; margin: 20px auto; }

.kontakt-form label {
margin-top: 10px;
}

.kontakt-form input,
.kontakt-form textarea {
padding: 8px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}

.kontakt-form button {
margin-top: 15px;
padding: 10px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

.kontakt-form button:hover {
background-color: #45a049;
}

Záver

Tento formulár je jednoduchý, ale plne funkčný a responzívny. Môžeš ho rozšíriť o ďalšie polia alebo validáciu.