Последние записи

made in programmersforum 7

Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk

Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw

24th
Окт

Вёрстка табличная vs. CSS

Posted by obzor under HTML

Сегодня мне потребовалось решить несколько проблем при вёрстке собственной простенькой формы авторизации для моего очередного проекта.

Предо мной стояло всего две задачи:
1 — форма должна быть отцентрирована по горизонтали и по вертикали;
2 — поля ввода логина и пароля должны быть выровнены относительно друг друга, а лейбы с подписями должны «обтекать» эти поля ввода.

При решении первой задачи я нарвался на помесь CSS и использования тегов <table> и <div> …

Как можно реализовать поставленную мною задачу более «правильно» что ли ?

Naive

Чем меньше лишних тегов, тем лучше.
На данный момент самый кошерный способ для такой задачи — это гриды. А отцентрировать можно любым удобным способом, но чтобы не вводить новые блоки, удобнее всего флексом.

<form class="login-form" action="index.php" method="post">
<label class="login-form_label" for="login">Логін:</label>
<input class="login-form_value" name="login" id="login" type="text" size="15" maxlength="15">
<label class="login-form_label" for="password">Пароль:</label>
<input class="login-form_value" name="password" id="password" type="password" size="15" maxlength="15">
<input class="login-form_submit" type="submit" value="Увійти">
</form>

Javany

Можно например так:

Код:


<!DOCTYPE html>

<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
form{
	width: 15%;
	margin:50vh auto;
	display: table;
}

input{
	display: table-column;
	text-align: right;
}

span{
	display: table-row;	
}

label{
	display:table-cell;
	text-align: left;
}

</style>
</head>

<body>                
    <form action="index.php" method="post">
        <span>
        	<label>Логін:</label>
			<input name="login" type="text" size="15" maxlength="15">
		</span>
		<br>                             
    	<span>
    		<label>Пароль:</label>
        	<input name="password" type="password" size="15" maxlength="15">
        </span>
        <br> 	
        <input type="submit" value="Увійти">
    </form>                  
</body>
</html>

тема на форуме

Последние записи

made in programmersforum 7

Вёрстка табличная vs. CSS

Похожие статьи

Купить рекламу на сайте за 1000 руб

пишите сюда - alarforum@yandex.ru