Skip to content

Instantly share code, notes, and snippets.

@sunmeat

sunmeat/form.html

Created December 30, 2024 10:23
Show Gist options
  • Save sunmeat/74de97a75596901d98f3b01458520db1 to your computer and use it in GitHub Desktop.
Save sunmeat/74de97a75596901d98f3b01458520db1 to your computer and use it in GitHub Desktop.
Download ZIP
стилізація форм
Raw
form.html
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Форма реєстрації</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f7f6;
color: #333;
margin: 0;
padding: 40px 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
box-sizing: border-box;
}
form {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 600px;
margin: 0 auto;
}
legend {
font-size: 26px;
color: #007bff;
margin-bottom: 20px;
font-weight: bold;
}
label {
font-size: 16px;
margin-bottom: 8px;
display: block;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="color"],
select,
textarea {
width: 100%;
padding: 12px;
margin: 8px 0 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
background-color: #f9f9f9;
transition: border-color 0.3s ease;
}
input[type="color"] {
border: none;
padding: 0;
width: 60px;
height: 30px;
margin-right: 10px;
cursor: pointer;
}
input[type="submit"],
input[type="reset"] {
background-color: #007bff;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
width: 100%;
margin-top: 20px;
transition: background-color 0.3s ease;
}
input[type="submit"]:hover,
input[type="reset"]:hover {
background-color: #0056b3;
}
select:focus,
input:focus {
border-color: #007bff;
outline: none;
}
.radio-group {
display: flex;
gap: 20px;
margin: 10px 0 15px;
}
.file-upload {
border: 1px dashed #007bff;
padding: 12px;
background-color: #fafafa;
margin-top: 15px;
cursor: pointer;
border-radius: 5px;
text-align: center;
transition: background-color 0.3s ease;
}
.file-upload:hover {
background-color: #f1f1f1;
}
.languages-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.languages-container input {
margin: 0 5px 0 0;
}
.select-profession {
max-width: 100%;
}
.form-group {
display: flex;
align-items: center;
gap: 20px;
}
.form-group input[type="radio"] {
margin: 0;
}
.form-group label {
font-size: 16px;
}
</style>
</head>
<body>
<form action="/submit" method="POST" enctype="multipart/form-data">
<fieldset>
<legend>Реєстрація користувача</legend>
<label for="login">Логін:</label>
<input type="text" id="login" name="login" required>
<label for="email">Пошта:</label>
<input type="email" id="email" name="email" required>
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" required>
<label for="confirmPassword">Підтвердження паролю:</label>
<input type="password" id="confirmPassword" name="confirmPassword" required>
<hr>
<label for="fullname">Повне ім'я та прізвище:</label>
<input type="text" id="fullname" name="fullname" size="50">
<label for="phone">Телефон:</label>
<input type="tel" id="phone" name="phone">
<label>Пол:</label>
<div class="radio-group">
<div>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Чоловік</label>
</div>
<div>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Жінка</label>
</div>
</div>
<label for="dob">Дата народження:</label>
<input type="date" id="dob" name="dob">
<label for="city">Місто:</label>
<select name="city" id="city">
<optgroup label="Україна">
<option value="od" selected>Одеса</option>
<option value="kh">Харків</option>
<option value="ch">Черкаси</option>
<option value="uz">Ужгород</option>
<option value="dn">Дніпро</option>
<option value="my">Миколаїв</option>
<option value="ky">Київ</option>
<option value="lv">Львів</option>
<option value="oth1">інше місто України</option>
</optgroup>
<optgroup label="Світ">
<option value="pa">Париж</option>
<option value="am">Амстердам</option>
<option value="ba">Барселона</option>
<option value="be">Берлін</option>
<option value="va">Варшава</option>
<option value="pr">Прага</option>
<option value="oth2">інше місто світу</option>
</optgroup>
</select>
<label for="color">Ваш улюблений колір:</label>
<input type="color" id="color" name="color">
<label for="number">Ваше улюблене число:</label>
<input type="number" id="number" />
<label>Іноземні мови:</label>
<div class="languages-container">
<label><input type="checkbox" id="english" name="languages" value="english"> Англійська</label>
<label><input type="checkbox" id="french" name="languages" value="french"> Французька</label>
<label><input type="checkbox" id="german" name="languages" value="german"> Німецька</label>
<label><input type="checkbox" id="spanish" name="languages" value="spanish"> Іспанська</label>
<label><input type="checkbox" id="italian" name="languages" value="italian"> Італійська</label>
</div>
<label for="profession">Сфера діяльності:</label>
<select name="profession" id="profession" class="select-profession">
<option value="business">Бізнес</option>
<option value="education">Освіта</option>
<option value="engineering">Інженерія</option>
<option value="healthcare">Охорона здоров'я</option>
<option value="it">ІТ</option>
<option value="marketing">Маркетинг</option>
<option value="finance">Фінанси</option>
<option value="art">Мистецтво</option>
<option value="design">Дизайн</option>
<option value="science">Наука</option>
<option value="law">Право</option>
<option value="journalism">Журналістика</option>
<option value="construction">Будівництво</option>
<option value="agriculture">Сільське господарство</option>
<option value="logistics">Логістика</option>
</select>
<label for="additionalInfo">Додаткова інформація:</label><br>
<textarea name="additionalInfo" id="additionalInfo" rows="4" cols="50"></textarea>
<label for="photo">Прикріпіть своє фото:</label>
<div class="file-upload">
<input type="file" id="photo" name="photo">
</div>
<input type="submit" value="Зареєструватися">
<input type="reset" value="Очистити">
</fieldset>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment