Стилизация форм на HTML и CSS

[@carrotJam17]

5:48 - не знаю почему это работает у автора, но у меня без параметра "left: 0;'" тайтлы никак не "наезжали" на инпуты. На случай, если кто столкнулся с такой же проблемой...

[@ВладиславГанзюк]

очень благодарю что оставил это тут я пол часа пересматривал видео и у меня нихера не получалось !

[@SoferPeOZN]

spasibo bratusik

[@relapse55]

Спасибо бро, 2 часа искал ошибку, а там left нужен был

[@anatoliysavchenko6888]

Вот только я не понял куда вписывать / или может как правильно вписать left: 0, у меня та же проблема

[@carrotJam17]

@@anatoliysavchenko6888 5:48 - там, где в данный момент чел работает.

[@ВладиславЧелухин-м6я]

Спасибо из 2024, бро, просто и понятно) респект

[@DragonnSteve]

Неужели есть грамотный верстальщик, который делает по БЭМ и flexbox? Спасибо! Отличный урок!

[@beda9679]

За что поставлю лайк. Что каждый ход объясняется зачем и как. Так в разы проще воспринимается информация. Спасибо автор !

[@beda9679]

@dergas310 а что не работает?

[@АнастасіяЯник]

@dergas310 у меня не работает .form в css что можно сделать?

[@enterkvas]

Огромное Вам спасибо из 2022-го! Успехов!

[@Mykhailo_Vdovychenko]

Офигенно! Спасибо! Крутой урок! Впервые попал на Ваш канал, но сразу же лайк и подписка =)

[@OnReverbOnlySlowed]

Спасибо очень интересно ,но есть вопрос почему когда вы писали в .form__label, Апсолютную позицию у меня та натпись (Пароль,емаел) осталась с боку?

[@Egor_Polakov]

Также

[@Радиодеталисодержащиедрагметал]

Молодец, так держать. Единственный канал, где всё доходчиво разъ ясняется и поясняется

[@A_Trix_R]

Видео топ, ещё бы рефреш страницы был... Лайк

[@bombilovka16gd17]

Супер, спасибо огромное, форма получилась классной!)

[@Antonpianomusic]

Чувак - Огромное Спасибо!!! Я столько нового узнал!!! Поставил - бы 300 лайков если б можно было! Удачи!

[@avalonex2971]

спасибо помог а то где не посмотрю везде js

[@ArtemiyGusev]

Крутое видео, продолжай в том же духе))

[@АлексейЛевин-в6д]

Ну все же можно сделать CSSами, а то взяли моду - чуть что, сразу JS лепить... А потом удивляются - что браузеры стока ресурсов жрут!

[@Ser_artemKa]

Волшебство,не иначе)

[@manofsteppe179]

Спасибо за туториал. Во внимание других, псевдокласс placeholder-shown не работает на IE 11

[@Крашбой-и2е]

.form__label { position: absolute; top: 10px; left: 0; color: #000000; transition: 0.3s; }

[@Nikitanus3549]

Спасибо, очень часто пользуюсь, удобно

[@daradel9468]

это видео которое мне реально помогло спасибо!! \

[@dekanaka8595]

Крутой ролик, все понятно

[@АнтонЕфименко-щ8ч]

объясните эту запись кто может .form__input:focus ~ .form__label. Именно не пойму зачем тильда

[@ИванАукин]

Соседний элемент

[@janedow]

Спасибо за урок, а куда дальше эти данные поступают? Вдруг логин неправильный

[@codeBurger]

Не за что, в данном видео показана только стилизация формы :) В реальном проекте данные стоит отправить на сервер

[@ВладиславХоменко-э4ж]

зачем делать через Label если можно же сразу прописать placeholder в input

[@хочуспать-и2о]

затем, что placeholder исчезает когда ты что-то пишеш в инпут, а нужно чтобы он просто уходил вверх

[@el_damro]

Чет не выходит поместить Email и Passw в поле ввода(

[@codeBurger]

У .form__label пропишите left: 0;

[@macraen99]

@@codeBurger спасибо, помогли. А почему у Вас все хорошо было?

[@codeBurger]

В то время немного иначе позиционирование в хроме работало

[@I_want_HAPPINESS]

​@@codeBurger сука я ролик несколько раз пересмотрел и переделывал код .

[@Light96241]

Очень полезное видео, спасибо!

[@snchs7]

Получилось!!! ЛАЙК, ПОДПИСКА

[@АлександрЛогинов-м9с]

Спасибо за урок, ни разу не юзал селекторы с псевдоклассом not(). Подскажите, как с поддержкой в браузерах, стоит ли начинать применять на реальных и больших проектах?

[@codeBurger]

:not поддерживается всеми браузерами :placeholder-shown проблемы в edge

[@vitalii4287]

сайт caniuse в помощь

[@muradsuleymanli1147]

codeBurger я через гугл пишу но у меня :placeholder-shown не работает

[@I_want_HAPPINESS]

​@@muradsuleymanli1147 и как вы решили проблему?

[@gegemonx3210]

А можешь сделать так, чтобы изменения сразу происходили, чтобы наглядно было что на что влияет

[@МирославМагуран-ъ4в]

Можно

[@push_ann]

Спасибо огромное!

[@v.eropov8391]

z-index: -1; не работает, текст вообще пропадает

[@Рагнар-м3и]

поставь 1

[@27tamerlan]

большое спасибо 👍 помогло

[@ВикторГутшмидт]

Привет codeBurger. Друг подскажи пожалуйста. Я уже долго не могу решить проблему. В коде примерно всё тоже. Только у меня добавлен pattern="[А-Яа-я]*?\s[А-Яа-я]*?\s[А-Яа-я]*". И когда введено например имя и фамилия без отчества. То label опускается прям на них. Грубо говоря после добавления pattern , label начал опускаться на текст. Как пофиксить данную проблему? Ни где не могу найти решение. ((

[@elenkarnaeva2458]

Супер!

[@snchs7]

Как стилизовать пароль чтобы он не был виден???

[@sasha_modnikov]

type="password"

[@johnproskurnin8214]

это subline такой ?

[@codeBurger]

Да

[@MsDiese1]

Спасибо за видео!

[@blackmulthumor]

Спасибо

[@innard3552]

улетают за пределы формы надписи что делать?

[@dooleanoff]

в стилизацию общего .form__label добавь left: 0;

[@yaroslavsavkin]

@@dooleanoff Благодарю

[@warcraft.mp4889]

​@@dooleanoff Ты же моя зайка. Спасибо, 10 минут мучался.

[@иваниванов-з5е6к]

Красава!))

[@codeBurger]

Спасибо :)

[@ИльяАрхипов-у1с]

супер видос)

[@Tornado-ln7fq]

Эм я не чего не хочу сказать,но padding не работает у тебя,ты поставил 32 пикселя,но у тебя там явно меньше,это с вязано с тем что нужно знать что padding создает не видимые поля во внутрь элемента,плюс размер самих элементов,это все нужно учитывать)

[@Видево-я5п]

Хороший урок

[@codeBurger]

Спасибо :)

[@serhiistanislav]

Спасибо!

[@astrokaterinka]

Как вставить форму в кнопку в html коде? Что бы при нажатии кнопки данные передавались в банк. Форма еть - нао ее в конпку упаковать.

[@MasterHobbitLoL]

ru.stackoverflow.com/

[@supfiger]

красиво)

[@ВадимАндреев-ч5ь]

Музыка лишняя была - всю дорогу мешала. Половина свойств стилей не комментируется - подразумевая, что они уже известны

[@yuno_dota2]

У меня ничего не изминилса

[@MasterHobbitLoL]

Хорош

[@towaroved]

Автор ставит курсор в адресную строку и потом обновляет страницу. Странно, времени много? Достаточно нажать F5. Заметил, что многие преподаватели-обучатели этого не знают, удивительно! Кроме того, продолжительное оформление в CSS не очень понятно, т.к. уже не помнишь, какие элементы мы оформляем. Надо возвращаться в окно кода и показывать, о чем идет речь. Да и обновлять окно лучше чаще, чтобы было понятнее, какое свойство изменилось. Урок довольно плохой.

[@димакотов-н9р]

У меня слова слиплись вверху

[@anyayujnaya]

Неудобно, что обновление браузера вручную, хочется сразу видеть изменения после каждой строчки css. И музыка дурацкая, какая-то наркоманская, действует на мозг.

[@dik3372]

Спасибо. Очень полезное видео.

[@АртемДевочко]

Спасибо