Vytvorenie kontaktného formulára s HTML a CSS

Úvod

V tomto článku sa naučíš vytvoriť **kontaktný formulár** na webstránke. Formuláre umožňujú návštevníkom stránky odosielať správy alebo požiadavky priamo na tvoj email.

1. HTML štruktúra formulára

 <form action="/odoslat" method="post"> <label for="meno">Meno:</label> <input type="text" id="meno" name="meno" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

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

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



2. CSS štýly formulára

 form { display: flex; flex-direction: column; max-width: 400px; margin: 0 auto; }

label {
margin-top: 10px;
}

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

button {
margin-top: 15px;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

@media (max-width: 768px) {
form {
width: 90%;
}
}

Záver

Takto pripravený kontaktný formulár je responzívny a použiteľný na rôznych zariadeniach. Môžeš ho ďalej rozšíriť o overovanie polí alebo integráciu s emailovým systémom.