JavaScript III - zadanie 2 - update 07.11.2025
Stworzenie w HTML formularza z zaawansowaną walidacją i rozpoczęcie stylowania w CSS.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<div id="form" aria-label="Umów się na konsultację">
<h1> <strong>Umów się na konsultację</strong></h1>
<p>
Aby umówić się na indywidualną konsultację, wypełnij poniższy formularz rejestracyjny. Rzetelne wypełnienie wszystkich pól pozwoli nam na zaproponowanie najlepszego specjalisty dla Ciebie.
</p>
<form action="/advanced-form" method="POST">
<fieldset>
<legend> <strong>Dane osobowe </strong></legend>
<label for="full-name"> Imię i Nazwisko </label>
<input type="text" id="full-name" name="fullname" required placeholder="Jan Kowalski"> <br> <br>
<label for="age"> Wiek </label>
<input type="number" id="age" name="age" required> <br> <br>
<label for="contact-email"> Email: </label>
<input type="email" id="contact-email" name="email" required placeholder="[email protected]"> <br> <br>
<label for="phone numer"> Numer telefonu (+48) </label>
<input type="text" id="phone-number" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}" placeholder="123-456-789" required>
</fieldset>
<fieldset>
<legend> <strong>Cel konsultacji </strong></legend>
<label for="your-goal"> Jaki jest Twój główny cel? </label>
<select id="your-goal" name="goal" required>
<option value="">-- Zaznacz cel konsultacji --</option>
<option value="goal-1">Chcę się zdrowiej odżywiać</option>
<option value="goal-2">Chcę zredukować masę ciała</option>
<option value="goal-3">Chcę zwiększyć masę ciała</option>
<option value="goal-4">Chcę dostosować dietę do treningów</option>
<option value="goal-5">Potrzebuję dostosować dietę do swojego stanu zdrowia - podaj szczegóły poniżej</option>
</select>
</fieldset>
<fieldset>
<legend><strong>Twoje preferencje żywieniowe</strong></legend>
<input type="radio" id="diethabit"
name="diethabit" value="normal"checked>
<label for="diethabit"> Normalna dieta, bez ograniczeń </label> <br> <br>
<input type="radio" id="diethabit"
name="diethabit" value="pesco">
<label for="diethabit"> Wykluczenie mięsa poza rybami </label> <br> <br>
<input type="radio" id="diethabit"
name="diethabit" value="vege">
<label for="diethabit"> Dieta wegetariańska </label> <br> <br>
<input type="radio" id="diethabit"
name="diethabit" value="vegan">
<label for="diethabit"> Dieta wegańska </label> <br> <br>
<input type="radio" id="diethabit"
name="diethabit" value="glutenfee">
<label for="diethabit"> Wykluczenie glutenu </label> <br> <br>
<input type="radio" id="diethabit"
name="diethabit" value="lactosefree">
<label for="diethabit"> Wykluczenie laktozy </label>
</fieldset>
<fieldset>
<legend> <strong>Dodatkowe informacje</strong></legend>
<label for="additional">Tu możesz dokładniej opisać swój cel </label>
<textarea id="additional" name="additional" rows="5"
placeholder="Jeśli masz jakiekolwiek choroby metaboliczne, stwierdzone allergie czy nietolerancje, wymień je tutaj."></textarea>
</fieldset>
<fieldset>
<legend> <strong>Termin konsultacji</strong></legend>
<label for="od">Wybierz preferowany termin konsultacji </label>
<input type="datetime-local" id="od" name="od" min="2025-11-06" max="2026-12-31">
</fieldset>
<button type="submit"> Zatwierdź </button>
</form>
</div>
</body>
</html>*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: linear-gradient(to bottom,#62c463, #ffffff, #ffffff, #62c463);
background-repeat: no-repeat;
font-family: Arial;
Font: Arial;
width: 960px;
margin: 10px auto;
}
div{
border: 2px solid #006221;
border-radius: 15px;
background: #deffde;
padding: 10px;
}
h1 {
font: 30px Tahoma;
color:#01571d;
text-transform: uppercase;
}
fieldset{
margin: 20px;
padding: 15px;
width:860px;
line-height: 2px;
border: 1px solid #006221;
border-radius: 15px;
background: #e8fff2;
}
legend{
font: 20px Tahoma;
color:#01571d;
padding: 5px 10px;
}
button{
border:2px solid #006221;
border-radius: 15px;
background: #8dfa96;
padding: 10px 10px;
margin: 20px;
text-transform: uppercase;
font-weight: 700;
}
button:hover{
border:2px solid #ec6c04;
background: #f5f857;
}