Untitled
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>