Как сделать чтобы label был над input
Перейти к содержимому

Как сделать чтобы label был над input

  • автор:

Label над input

Author24 — интернет-сервис помощи студентам

выровнять input c label
привет подскажите пожалуйста, как выровнять input по label’y. <html> <head> .

Label поместить в поле input
Господа! Нет возможности поместить placeholder поэтому нужно классом вогнать label в поле.

Расположить label и input в одну строку
Здравствуйте, подскажите как сделать чтоб мои label и input распологались не друг под другом а в.

Регистрация: 26.05.2012
Сообщений: 50
можно просто поставить input выше label

1 2 3 4
form action="bbd.php" method="POST"> input type="text" name="fio" placeholder="ФИО">br> label for="fio">ФИО/label> /form>

и так далее в таком же духе
Регистрация: 09.07.2014
Сообщений: 147
Killy, в таком случае текст из поля лабел будет не перед инпутом а после но не над ним

Эксперт JSЭксперт HTML/CSS

3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
Killy, в HTML5 для связи input с label используем id вместо name
avi1, как вариант

label>Текст:input type="text">/label> label>Текст:input type="text">/label>
1 2 3
input, label{ display:block; }

Как поставить label над input?

5b9abebe9d795223064666.png

дело в том что инпуты я разметил внутри form который имеет класс flex потому что надо делить пространсто поровну в форме надо решить задачу чтобы было валидно по валидатору

  • Вопрос задан более трёх лет назад
  • 1080 просмотров

1 комментарий

Простой 1 комментарий

Как сделать чтобы label был над input

Нравится ресурс?

Модераторы: Vasya2000, Serafim, fatalist

‘>

  • Подписаться на тему
  • Сообщить другу
  • Скачать/распечатать тему

Сообщ. #1 , 15.03.08, 02:46

Рейтинг (т): 53

Приветствую.
Код:

Необходимо оба label-а разместить над соответствующими input-ами, но как бы я ни крутил — ничего не получается.
Подскажите: как сие осуществить?
Заранее всем благодарен.

Сообщ. #2 , 15.03.08, 06:53

Как сделать label над input css

enter image description here

Для формированию подписи к текстовому полю ввода input обычно используется тэг label. Рассмотрим вариант в котором подпись поля смещена на границу. Пример на фото:

Исходный HTML файл:

 class="input-box"> label name  type="text">  
.input-box  /* родительский блок относительно которого будем формировать положение тега label */ position: relative; > input  background: #fff; padding: 10px; /* закруглим края у поля ввода */ border-radius: 11px; width: 200px; > label  position: absolute; /* смещение относительно родительского элемента 10px вверх от верхнего края и 10px влево */ top: -10px; left: 10px; background: #fff; padding: 0 5px; > 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *