Untitled
unknown
html
a month ago
8.2 kB
2
Indexable
Never
<!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>