пример формы со всеми основными элементами

different files.jsx

src / forms / Anketa.jsx:

import React from 'react';
// import './css/Anketa.css'; // раскомментировать для стилизации формы

const Anketa = () => {
    // обработчик отправки формы (заглушка)
    const handleSubmit = (e) => {
        e.preventDefault();
        console.log('Форма отправлена');
    };

    // обработчик сброса формы
    const handleReset = () => {
        console.log('Форма сброшена');
    };

    return (
        <div className="anketa-container">
            <form onSubmit={handleSubmit} encType="multipart/form-data">
                <fieldset className="anketa-fieldset">
                    <legend className="anketa-legend">Регистрация пользователя</legend>

                    {/* логин */}
                    <label htmlFor="login" className="anketa-label">Логин (обязательное поле):</label>
                    <input autoComplete="username" type="text" id="login" name="login" className="anketa-input" required /><br />

                    {/* пароль */}
                    <label htmlFor="password" className="anketa-label">Пароль (обязательное поле):</label>
                    <input autoComplete="new-password" type="password" id="password" name="password" className="anketa-input" required /><br />

                    {/* подтверждение пароля */}
                    <label htmlFor="confirmPassword" className="anketa-label">Подтверждение пароля:</label>
                    <input autoComplete="new-password" type="password" id="confirmPassword" name="confirmPassword" className="anketa-input" required /><br />

                    {/* электронная почта */}
                    <label htmlFor="email" className="anketa-label">Электронная почта:</label>
                    <input type="email" id="email" name="email" className="anketa-input" /><br />

                    {/* телефон */}
                    <label htmlFor="phone" className="anketa-label">Телефон:</label>
                    <input type="tel" id="phone" name="phone" className="anketa-input" /><br />

                    {/* веб-сайт */}
                    <label htmlFor="website" className="anketa-label">Веб-сайт:</label>
                    <input type="url" id="website" name="website" className="anketa-input" /><br />

                    {/* полное имя */}
                    <label htmlFor="fullname" className="anketa-label">Полное имя и фамилия:</label>
                    <input type="text" id="fullname" name="fullname" size="50" className="anketa-input" /><br />

                    {/* пол */}
                    <label className="anketa-label">Пол:</label><br />
                    <input type="radio" id="male" name="gender" value="Мужчина" className="anketa-radio" />
                    <label htmlFor="male" className="anketa-radio-label">Мужчина</label><br />
                    <input type="radio" id="female" name="gender" value="Женщина" className="anketa-radio" />
                    <label htmlFor="female" className="anketa-radio-label">Женщина</label><br />

                    {/* дата рождения */}
                    <label htmlFor="dob" className="anketa-label">Дата рождения:</label>
                    <input type="date" id="dob" name="dob" className="anketa-input" /><br />

                    {/* город */}
                    <label htmlFor="city" className="anketa-label">Город:</label>
                    <select name="city" id="city" className="anketa-select" defaultValue="od">
                        <optgroup label="Украина">
                            <option value="od">Одесса</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><br />

                    {/* любимый цвет */}
                    <label htmlFor="color" className="anketa-label">Любимый цвет:</label>
                    <input type="color" id="color" name="color" className="anketa-input" /><br />

                    {/* любимое число */}
                    <label htmlFor="number" className="anketa-label">Любимое число:</label>
                    <input type="number" id="number" name="number" className="anketa-input" /><br />

                    {/* месяц */}
                    <label htmlFor="month" className="anketa-label">Месяц:</label>
                    <input type="month" id="month" name="month" className="anketa-input" /><br />

                    {/* неделя */}
                    <label htmlFor="week" className="anketa-label">Неделя:</label>
                    <input type="week" id="week" name="week" className="anketa-input" /><br />

                    {/* время */}
                    <label htmlFor="time" className="anketa-label">Время:</label>
                    <input type="time" id="time" name="time" className="anketa-input" /><br />

                    {/* диапазон */}
                    <label htmlFor="range" className="anketa-label">Диапазон:</label>
                    <input type="range" id="range" name="range" min="0" max="100" className="anketa-input" /><br />

                    {/* поиск */}
                    <label htmlFor="search" className="anketa-label">Поиск:</label>
                    <input type="search" id="search" name="search" className="anketa-input" /><br />

                    {/* иностранные языки */}
                    <label className="anketa-label">Иностранные языки:</label><br />
                    <input type="checkbox" id="english" name="languages" value="english" className="anketa-checkbox" />
                    <label htmlFor="english" className="anketa-checkbox-label">Английский</label><br />
                    <input type="checkbox" id="french" name="languages" value="french" className="anketa-checkbox" />
                    <label htmlFor="french" className="anketa-checkbox-label">Французский</label><br />
                    <input type="checkbox" id="german" name="languages" value="german" className="anketa-checkbox" />
                    <label htmlFor="german" className="anketa-checkbox-label">Немецкий</label><br />
                    <input type="checkbox" id="spanish" name="languages" value="spanish" className="anketa-checkbox" />
                    <label htmlFor="spanish" className="anketa-checkbox-label">Испанский</label><br />
                    <input type="checkbox" id="italian" name="languages" value="italian" className="anketa-checkbox" />
                    <label htmlFor="italian" className="anketa-checkbox-label">Итальянский</label><br />

                    {/* профессия */}
                    <label htmlFor="profession" className="anketa-label">Сфера деятельности:</label>
                    <select name="profession" id="profession" className="anketa-select">
                        <option value="business">Бизнес</option>
                        <option value="education">Образование</option>
                        <option value="engineering">Инженерия</option>
                        <option value="healthcare">Здравоохранение</option>
                        <option value="it">ИТ</option>
                    </select><br />

                    {/* дополнительная информация */}
                    <label htmlFor="additionalInfo" className="anketa-label">Дополнительная информация:</label><br />
                    <textarea name="additionalInfo" id="additionalInfo" rows="4" cols="50" className="anketa-textarea"></textarea><br />

                    {/* загрузка фото */}
                    <label htmlFor="photo" className="anketa-label">Прикрепите фото:</label>
                    <input type="file" id="photo" name="photo" className="anketa-input" /><br />

                    {/* прогресс */}
                    <label htmlFor="progress" className="anketa-label">Прогресс:</label>
                    <progress id="progress" value="50" max="100" className="anketa-progress"></progress><br />

                    {/* значение */}
                    <label htmlFor="value" className="anketa-label">Значение:</label>
                    <meter id="value" value="70" min="0" max="100" className="anketa-meter">70%</meter><br />

                    {/* кнопки */}
                    <input type="submit" value="Отправить" className="anketa-button anketa-button-submit" />
                    <input type="reset" value="Сбросить" onClick={handleReset} className="anketa-button anketa-button-reset" />
                </fieldset>
            </form>
        </div>
    );
};

export default Anketa;

=================================================================================================================
  
src / forms / css / Anketa.css:

.anketa-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    background: linear-gradient(135deg, #e0f2fe, #f3e8ff);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.anketa-fieldset {
    border: 2px solid #93c5fd;
    padding: 25px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.8);
}

.anketa-legend {
    font-size: 28px;
    font-weight: bold;
    color: #1e40af;
    letter-spacing: 1px;
}

.anketa-label {
    display: inline-block;
    width: 220px;
    color: #1f2937;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 16px;
}

.anketa-input {
    width: 380px;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.anketa-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

.anketa-radio {
    margin-right: 8px;
}

.anketa-radio-label {
    color: #4b5563;
    margin-right: 16px;
    font-size: 15px;
}

.anketa-checkbox {
    margin-right: 8px;
}

.anketa-checkbox-label {
    color: #4b5563;
    margin-right: 16px;
    font-size: 15px;
}

.anketa-select {
    width: 404px;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.anketa-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

.anketa-textarea {
    width: 380px;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 16px;
    resize: vertical;
    transition: all 0.3s ease;
}

.anketa-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

.anketa-progress {
    width: 380px;
    height: 16px;
    border-radius: 10px;
    background: #e5e7eb;
}

.anketa-meter {
    width: 380px;
    height: 16px;
    border-radius: 10px;
    background: #e5e7eb;
}

.anketa-button {
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.anketa-button-submit {
    background: #2563eb;
    color: #ffffff;
    border: none;
}

.anketa-button-submit:hover {
    background: #1e40af;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.anketa-button-reset {
    background: #e5e7eb;
    color: #1f2937;
    border: none;
    margin-left: 16px;
}

.anketa-button-reset:hover {
    background: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

=================================================================================================================
  
src / App.jsx:

import React from 'react';
import './App.css';
import Anketa from "./forms/Anketa.jsx";

export function App() {
    return <Anketa />;
}

export default App;