Форма

by oleksandr_s

HTML

<body>
    <h1>Анкета відвідувача ресторану</h1>
    <div id="container">
    <form name="contacts" id="contacts">
        <fieldset>
            <legend>Контактна інформація</legend>
            <div><label for="name">Ім'я: </label><input type="text" id="name"></div>
            <div><label for="tel">Телефон: </label><input type="text" pattern="[0-9]{3}-[0-9]{3}-[0-9]{2}-[0-9]{2}" id="tel" placeholder="у форматі 000-000-00-00"></div>
            <div><label for="mail">Email: </label><input type="email" id="mail"></div>
            <div><label for="day">Дата відвідування: </label><input type="date" id="day"></div>
        </fieldset>
    </form>
    <form name="person" id="person">
        <fieldset>
            <legend>Персональна інформація</legend>
            <div><label for="age">Вік: </label><input type="number" min="1" max="100" step="1" id="age"></div>
            <div><label for="food">Улюблена кухня: </label>
                <select id="food">
                    <option></option>
                    <option>Українська</option>
                    <option>Італійська</option>
                    <option>Японська</option>
                </select>
            </div>
            <div>
                <label>Які іще страви ви б хотіли бачити в меню?</label>
                <textarea id="new_food" rows="4"></textarea>
            </div>
        </fieldset>
    </form>
    <form name="marks" id="marks">
        <fieldset>
            <legend>Оцінка нашого закладу</legend>
            <p>Чому ви обрали наш заклад?</p>
            <input type="checkbox" id="near">Поряд з місцем роботи<br>
            <input type="checkbox" id="rekl">Побачив рекламу<br>
            <input type="checkbox" id="friends">Порадили друзі<br>
            <input type="checkbox" id="quality">Найкраще співвідношення ціни і якості
            <p>Чи будете ви рекомендувати наш заклад своїм знайомим?</p>
            <input type="radio" id="yes">Так<br>
            <input type="radio"...

CSS

body {
    font-family: Calibri;
    background-color: #FFCC66;
}

form div {
    font-weight: bold;
    text-align: right;
    margin-top: 5px;
}

p {
    font-weight: bold;
}

label {
    float: left;
    padding-right: 30px;
}
fieldset {
    float: left;
    width: 50%;
}

legend {
    font-style: italic;
}

button {
    display: block;
    margin-top: 5px;
}

#name, #tel, #mail, #age {
    width: 200px;
}

#food {
    width: 208px;
}

#day, #new_food {
    width: 203px;
}

#container {
    display: block;
}

form {
    display: flex;
}