Untitled

mail@pastecode.io avatar
unknown
html
a year ago
8.2 kB
4
Indexable
<!DOCTYPE html>
<html>
    <head>
        <title>Квитанция</title>
        <style>
            td{
                border: 1px solid black; /*стиль для отображения границ ячеек таблиц*/
            }

            /*дальнейшие стили нужны для корректного позиционирования элементов 
            (чтобы позиционирование соответствовало заданию из методички) */
            div{
                margin: 10px 10px 0px 10px;
            }
            input
            {
                width: 100%;
            }
            .simple_input{
                width: auto;
            }
            .label_center{
                display: block;
                text-align: center;
            }
            .complex_content{
                display: flex;
                flex-direction: row;
                margin: 10px;
            }
            .complex_label{
                flex-shrink: 0;
                margin-right: 5px;
            }
        </style>
    </head>
    <body>
        <div>
            <table> <!--таблица, содержит две платёжки-->
                <tr> <!--строка таблицы с типом платёжки и полями для заполнения-->
                    <td>Извещение</td> <!--элемент таблицы, содержит тип платёжки-->
                    <td> <!--элемент таблицы, содержит основной контент платёжки-->
                        <div><input id="payment_receiver" /></div> <!--блок для инпута-->
                        <label for="payment_receiver" class="label_center">получатель платежа</label><!--подпись под инпутом-->
                        <div class="complex_content"> <!--блок для инпута с подписью слева-->
                            <label for="checking_account" class="complex_label">Расчётный счёт №</label>
                            <input id="checking_account" />
                        </div>
                        <div class="complex_content"> <!--блок для инпута с подписью слева-->
                            <label for="bank_name" class="complex_label">В</label>
                            <input id="bank_name" />
                        </div>
                        <label for="bank_name" class="label_center">(наименование банка)</label> <!--подпись под инпутом-->
                        <div><input id="oth_bank_details" /></div> <!--блок для инпута-->
                        <label for="oth_bank_details" class="label_center">другие банковские реквизиты</label> <!--подпись под инпутом-->
                        <div class="complex_content"> <!--блок для инпута с подписью слева-->
                            <label for="personal_account" class="complex_label">Лицевой счет № </label>
                            <input id="personal_account" />
                        </div>
                        <div><input id="full_name" /></div> <!--блок для инпута-->
                        <label for="full_name" class="label_center">ФИО, адрес плательщика</label> <!--подпись под инпутом-->
                        <div><input /></div> <!--блок для инпута-->
                        <table id="additional_info"> <!--таблица для трёх инпутов и их названий в шапке таблицы-->
                            <tr> <!--шапка таблицы с названиями столбцов-->
                                <th>Вид платежа</th> 
                                <th>Дата</th>
                                <th>Сумма</th>
                            </tr>
                            <tr> <!--строка таблицы с тремя инпутами-->
                                <td><input type="number" class="simple_input"/></td>
                                <td><input class="simple_input"/></td>
                                <td><input class="simple_input"/></td>
                            </tr>
                        </table>
                        <label for="additional_info">Плательщик</label> <!--подпись под таблицей с тремя инпутами-->
                    </td>
                </tr>
                <tr> <!--строка таблицы с типом платёжки и полями для заполнения-->
                    <td>Квитанция</td> <!--элемент таблицы, содержит тип платёжки-->
                    <td> <!--элемент таблицы, содержит основной контент платёжки-->
                        <div><input id="payment_receiver" /></div> <!--блок для инпута-->
                        <label for="payment_receiver" class="label_center">получатель платежа</label><!--подпись под инпутом-->
                        <div class="complex_content"> <!--блок для инпута с подписью слева-->
                            <label for="checking_account" class="complex_label">Расчётный счёт №</label>
                            <input id="checking_account" />
                        </div>
                        <div class="complex_content"> <!--блок для инпута с подписью слева-->
                            <label for="bank_name" class="complex_label">В</label>
                            <input id="bank_name" />
                        </div>
                        <label for="bank_name" class="label_center">(наименование банка)</label> <!--подпись под инпутом-->
                        <div><input id="oth_bank_details" /></div> <!--блок для инпута-->
                        <label for="oth_bank_details" class="label_center">другие банковские реквизиты</label> <!--подпись под инпутом-->
                        <div class="complex_content"> <!--блок для инпута с подписью слева-->
                            <label for="personal_account" class="complex_label">Лицевой счет № </label>
                            <input id="personal_account" />
                        </div>
                        <div><input id="full_name" /></div> <!--блок для инпута-->
                        <label for="full_name" class="label_center">ФИО, адрес плательщика</label> <!--подпись под инпутом-->
                        <div><input /></div> <!--блок для инпута-->
                        <table id="additional_info"> <!--таблица для трёх инпутов и их названий в шапке таблицы-->
                            <tr> <!--шапка таблицы с названиями столбцов-->
                                <th>Вид платежа</th> 
                                <th>Дата</th>
                                <th>Сумма</th>
                            </tr>
                            <tr> <!--строка таблицы с тремя инпутами-->
                                <td><input type="number" class="simple_input"/></td>
                                <td><input class="simple_input"/></td>
                                <td><input class="simple_input"/></td>
                            </tr>
                        </table>
                        <label for="additional_info">Плательщик</label> <!--подпись под таблицей с тремя инпутами-->
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>