PIbd-22.-Stroev-V.M.-Internet-Programm/Lab5/src/pages/Page3.jsx

import { useState } from 'react';
import { Button, Form } from 'react-bootstrap';

const Page3 = () => {
    const someValue = 'Некоторое значение';
    const [validated, setValidated] = useState(false);
    const [formData, setFormData] = useState({
        lastname: '',
        firstname: '',
        email: '',
        password: '',
        date: '',
        disabled: someValue,
        readonly: someValue,
        color: '#ff0055',
        checkbox1: false,
        checkbox2: false,
        radio1: false,
        radio2: false,
        selected: '',
    });

    const handleSubmit = (event) => {
        const form = event.currentTarget;
        event.preventDefault();
        event.stopPropagation();
        if (form.checkValidity() !== false) {
            console.log(formData);
        }
        setValidated(true);
    };

    const handleChange = (event) => {
        const inputName = event.target.name;
        const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
        setFormData({
            ...formData,
            [inputName]: inputValue,
        });
    };

    return (
        <div className='row justify-content-center'>
            <Form className='col-md-6 m-0' noValidate validated={validated} onSubmit={handleSubmit}>
                <Form.Group className='mb-2' controlId='lastname'>
                    <Form.Label>Фамилия</Form.Label>
                    <Form.Control type='text' name='lastname' required
                        value={formData.lastname} onChange={handleChange} />
                    <Form.Control.Feedback>Фамилия заполнена</Form.Control.Feedback>
                    <Form.Control.Feedback type='invalid'>Фамилия не заполнена</Form.Control.Feedback>
                </Form.Group>
                <Form.Group className='mb-2' controlId='firstname'>
                    <Form.Label>Имя</Form.Label>
                    <Form.Control type='text' name='firstname' required
                        value={formData.firstname} onChange={handleChange} />
                </Form.Group>
                <Form.Group className='mb-2' controlId='email'>
                    <Form.Label>E-mail</Form.Label>
                    <Form.Control type='email' name='email' placeholder='name@example.ru' required
                        value={formData.email} onChange={handleChange} />
                </Form.Group>
                <Form.Group className='mb-2' controlId='password'>
                    <Form.Label>Пароль</Form.Label>
                    <Form.Control type='password' name='password' required
                        value={formData.password} onChange={handleChange} />
                </Form.Group>
                <Form.Group className='mb-2' controlId='date'>
                    <Form.Label>Дата</Form.Label>
                    <Form.Control type='date' name='date' required
                        value={formData.date} onChange={handleChange} />
                </Form.Group>
                <Form.Group className='mb-2' controlId='disabled'>
                    <Form.Label>Выключенный компонент</Form.Label>
                    <Form.Control type='text' name='disabled' disabled
                        value={formData.disabled} onChange={handleChange} />
                </Form.Group>
                <Form.Group className='mb-2' controlId='readonly'>
                    <Form.Label>Компонент только для чтения</Form.Label>
                    <Form.Control type='text' name='readonly' readOnly
                        value={formData.readonly} onChange={handleChange} />
                </Form.Group>
                <Form.Group className='mb-2' controlId='color'>
                    <Form.Label>Выбор цвета</Form.Label>
                    <Form.Control type='color' name='color'
                        value={formData.color} onChange={handleChange} />
                </Form.Group>
                <Form.Group className='mb-2 d-md-flex flex-md-row'>
                    <Form.Check className='me-md-3' type='checkbox' name='checkbox1' label='Флажок 1'
                        value={formData.checkbox1} onChange={handleChange} />
                    <Form.Check className='me-md-3' type='checkbox' name='checkbox2' label='Флажок 2'
                        value={formData.checkbox2} onChange={handleChange} />
                </Form.Group>
                <Form.Group className='mb-2 d-md-flex flex-md-row'>
                    <Form.Check className='me-md-3' type='radio' name='radio1' label='Переключатель 1'
                        value={formData.radio1} onChange={handleChange} />
                    <Form.Check className='me-md-3' type='switch' name='radio2' label='Переключатель 2'
                        value={formData.radio2} onChange={handleChange} />
                </Form.Group>
                <Form.Group className='mb-2'>
                    <Form.Select name='selected' required
                        value={formData.selected} onChange={handleChange}>
                        <option value=''>Выберите значение</option>
                        <option value='1'>Один</option>
                        <option value='2'>Два</option>
                        <option value='3'>Три</option>
                    </Form.Select>
                </Form.Group>
                <div className='text-center'>
                    <Button className='w-50' variant='primary' type='submit'>Отправить</Button>
                </div>
            </Form>
        </div>
    );
};

export default Page3;