Стилизация форм на HTML и CSS
HTML-код
- Опубликовано: 11 сен 2024
- В этом видео я расскажу Вам как стилизовать форму на сайте.
А также я расскажу Вам как стилизовать поле input когда в нем есть текст.
Мы будем использовать HTML и CSS.
Поддержать развитие канала: www.donational...
VK: id27996...
Почта для связи: codeBurger770@Gmail.com
#codeburger
5:48 - не знаю почему это работает у автора, но у меня без параметра "left: 0;'" тайтлы никак не "наезжали" на инпуты.
На случай, если кто столкнулся с такой же проблемой...
очень благодарю что оставил это тут я пол часа пересматривал видео и у меня нихера не получалось !
spasibo bratusik
Спасибо бро, 2 часа искал ошибку, а там left нужен был
Вот только я не понял куда вписывать / или может как правильно вписать left: 0, у меня та же проблема
@@anatoliysavchenko6888 5:48 - там, где в данный момент чел работает.
Неужели есть грамотный верстальщик, который делает по БЭМ и flexbox? Спасибо! Отличный урок!
Спасибо из 2024, бро, просто и понятно) респект
За что поставлю лайк. Что каждый ход объясняется зачем и как. Так в разы проще воспринимается информация.
Спасибо автор !
@dergas310 а что не работает?
@dergas310 у меня не работает .form в css что можно сделать?
Молодец, так держать. Единственный канал, где всё доходчиво разъ
ясняется и поясняется
Офигенно! Спасибо! Крутой урок! Впервые попал на Ваш канал, но сразу же лайк и подписка =)
Огромное Вам спасибо из 2022-го! Успехов!
Волшебство,не иначе)
Крутое видео, продолжай в том же духе))
Супер, спасибо огромное, форма получилась классной!)
Ну все же можно сделать CSSами, а то взяли моду - чуть что, сразу JS лепить... А потом удивляются - что браузеры стока ресурсов жрут!
Чувак - Огромное Спасибо!!! Я столько нового узнал!!! Поставил - бы 300 лайков если б можно было! Удачи!
Спасибо. Очень полезное видео.
Очень полезное видео, спасибо!
Видео топ, ещё бы рефреш страницы был... Лайк
Спасибо очень интересно ,но есть вопрос почему когда вы писали в .form__label,
Апсолютную позицию у меня та натпись (Пароль,емаел) осталась с боку?
это видео которое мне реально помогло спасибо!!
\
Крутой ролик, все понятно
Спасибо огромное!
Получилось!!! ЛАЙК, ПОДПИСКА
Спасибо, очень часто пользуюсь, удобно
спасибо помог а то где не посмотрю везде js
Супер!
большое спасибо 👍 помогло
Спасибо за туториал. Во внимание других, псевдокласс placeholder-shown не работает на IE 11
Спасибо за видео!
Спасибо
Красава!))
Спасибо :)
Спасибо за урок, а куда дальше эти данные поступают? Вдруг логин неправильный
Не за что, в данном видео показана только стилизация формы :) В реальном проекте данные стоит отправить на сервер
А можешь сделать так, чтобы изменения сразу происходили, чтобы наглядно было что на что влияет
Можно
супер видос)
Спасибо!
зачем делать через Label если можно же сразу прописать placeholder в input
затем, что placeholder исчезает когда ты что-то пишеш в инпут, а нужно чтобы он просто уходил вверх
Спасибо за урок, ни разу не юзал селекторы с псевдоклассом not(). Подскажите, как с поддержкой в браузерах, стоит ли начинать применять на реальных и больших проектах?
:not поддерживается всеми браузерами
:placeholder-shown проблемы в edge
сайт caniuse в помощь
codeBurger я через гугл пишу но у меня :placeholder-shown не работает
@@muradsuleymanli1147 и как вы решили проблему?
красиво)
Эм я не чего не хочу сказать,но padding не работает у тебя,ты поставил 32 пикселя,но у тебя там явно меньше,это с вязано с тем что нужно знать что padding создает не видимые поля во внутрь элемента,плюс размер самих элементов,это все нужно учитывать)
Хороший урок
Спасибо :)
Чет не выходит поместить Email и Passw в поле ввода(
У .form__label пропишите left: 0;
@@codeBurger спасибо, помогли. А почему у Вас все хорошо было?
В то время немного иначе позиционирование в хроме работало
@@codeBurger сука я ролик несколько раз пересмотрел и переделывал код .
объясните эту запись кто может .form__input:focus ~ .form__label. Именно не пойму зачем тильда
Соседний элемент
Привет codeBurger. Друг подскажи пожалуйста. Я уже долго не могу решить проблему. В коде примерно всё тоже. Только у меня добавлен pattern="[А-Яа-я]*?\s[А-Яа-я]*?\s[А-Яа-я]*". И когда введено например имя и фамилия без отчества. То label опускается прям на них. Грубо говоря после добавления pattern , label начал опускаться на текст. Как пофиксить данную проблему? Ни где не могу найти решение. ((
Хорош
z-index: -1;
не работает, текст вообще пропадает
поставь 1
Автор ставит курсор в адресную строку и потом обновляет страницу. Странно, времени много? Достаточно нажать F5. Заметил, что многие преподаватели-обучатели этого не знают, удивительно! Кроме того, продолжительное оформление в CSS не очень понятно, т.к. уже не помнишь, какие элементы мы оформляем. Надо возвращаться в окно кода и показывать, о чем идет речь. Да и обновлять окно лучше чаще, чтобы было понятнее, какое свойство изменилось. Урок довольно плохой.
Музыка лишняя была - всю дорогу мешала. Половина свойств стилей не комментируется - подразумевая, что они уже известны
Как стилизовать пароль чтобы он не был виден???
type="password"
это subline такой ?
Да
У меня ничего не изминилса
Как вставить форму в кнопку в html коде? Что бы при нажатии кнопки данные передавались в банк. Форма еть - нао ее в конпку упаковать.
ru.stackoverflow.com/
У меня слова слиплись вверху
.form__label {
position: absolute;
top: 10px;
left: 0;
color: #000000;
transition: 0.3s;
}
улетают за пределы формы надписи что делать?
в стилизацию общего .form__label добавь left: 0;
@@dooleanoff Благодарю
@@dooleanoff Ты же моя зайка. Спасибо, 10 минут мучался.
Неудобно, что обновление браузера вручную, хочется сразу видеть изменения после каждой строчки css. И музыка дурацкая, какая-то наркоманская, действует на мозг.