How to Create Float Input Label using HTML and CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 พ.ย. 2024

ความคิดเห็น • 68

  • @RG_aming
    @RG_aming 4 หลายเดือนก่อน +31

    this is the video everyone wants, no voiceover no 30minute intro ... just useful content

    • @mr.mobinyt
      @mr.mobinyt  4 หลายเดือนก่อน +2

      @@RG_aming Thank you for your comment, Yes, you are right, many people need these videos, and I tried to show this very quickly and usefully. I am glad that it was useful.

    • @God_Of_Sigma2.0
      @God_Of_Sigma2.0 4 หลายเดือนก่อน

      ​@@mr.mobinytbro how do I merge this two HTML and CSS content 1. th-cam.com/video/QCg7-pVbid8/w-d-xo.htmlsi=aMJMSZH9m9utjboJ 2. th-cam.com/video/XJMar7fE0PM/w-d-xo.htmlsi=_lZvVXKRRRjJIlqc

  • @CuriousFox_
    @CuriousFox_ 3 หลายเดือนก่อน +2

    Wow! Your tutorials take our projects to a new level! Thank you very much and much success!

    • @mr.mobinyt
      @mr.mobinyt  3 หลายเดือนก่อน +1

      @@CuriousFox_ Thank you very much for your kindness

  • @LandenLam
    @LandenLam 4 หลายเดือนก่อน +5

    I just became your 1000 subscribers. Congrats and nice video.

    • @mr.mobinyt
      @mr.mobinyt  4 หลายเดือนก่อน +1

      @@LandenLam thanks for your comment bro🔥❤️

  • @OnlyADownstat
    @OnlyADownstat 3 หลายเดือนก่อน

    gr8 vid... this effect always look great until you apply it to a textarea....

  • @moecritic1493
    @moecritic1493 3 หลายเดือนก่อน +5

    For those who are new or just didnt know, pointer-events:none; makes the text un-selectable

    • @mr.mobinyt
      @mr.mobinyt  3 หลายเดือนก่อน +1

      @@moecritic1493 Using the pointer-events feature in CSS, you can specify whether a tag responds to the mouse pointer event or not! For example, by default, when the mouse is placed on a link, the mouse pointer changes shape.

    • @mr.mobinyt
      @mr.mobinyt  3 หลายเดือนก่อน +1

      @@moecritic1493 Thanks for your comments 🙏

    • @MaelkMark
      @MaelkMark 3 หลายเดือนก่อน

      Or just use `user-select: none` to disable selection.

  • @rshekhar11
    @rshekhar11 4 หลายเดือนก่อน +6

    The main point is you can't do it functional without required attribute on the input. This is the main catch otherwise whats stopping bootstrap to implement it.

    • @DesignThinkerer
      @DesignThinkerer 3 หลายเดือนก่อน

      You don't need attributes to do this

    • @PsalmJNFano
      @PsalmJNFano 3 หลายเดือนก่อน

      If it is div and not form element. its not needed add the required attribute

  • @omsharma9523
    @omsharma9523 4 หลายเดือนก่อน +1

    I needed this for so long thanks for easy tutorial

    • @mr.mobinyt
      @mr.mobinyt  4 หลายเดือนก่อน +1

      @@omsharma9523 thanks you bro❤️

  • @rxdy22
    @rxdy22 4 หลายเดือนก่อน +1

    A great tutorial, bro!❤️

    • @mr.mobinyt
      @mr.mobinyt  4 หลายเดือนก่อน +1

      @@rxdy22 Thanks for your comment bro🔥🙏

  • @SaranKonala
    @SaranKonala 4 หลายเดือนก่อน +3

    Nice

    • @mr.mobinyt
      @mr.mobinyt  4 หลายเดือนก่อน

      @@SaranKonala thanks🙏

  • @vinay_dias
    @vinay_dias 3 หลายเดือนก่อน +1

    Can you please try explaining what you do and why you do ?

  • @abdomohamad768
    @abdomohamad768 หลายเดือนก่อน

    just an advice, don't put the font-family rule in the '*' selector as it's also goes to unnecesary elements that don't use it

  • @mekalavasanthu
    @mekalavasanthu 4 หลายเดือนก่อน +2

    good content very useful to beginners .subscribed done. keep it up bro.

    • @mr.mobinyt
      @mr.mobinyt  4 หลายเดือนก่อน

      @@mekalavasanthu Thanks for motivation comment man🙏

  • @TechTasty-nx6zk
    @TechTasty-nx6zk 4 หลายเดือนก่อน

    Nice 👍👍👍

    • @mr.mobinyt
      @mr.mobinyt  4 หลายเดือนก่อน

      @@TechTasty-nx6zk thanks🙏

  • @tolgaflashtr2855
    @tolgaflashtr2855 4 หลายเดือนก่อน +1

    You should make it save each 0.5 sec. or something, in the beginning of the video, it is better for us to see what changes when you write X and Y, but you save it after writing some code, otherwise, thanks, 4.5 mins of video for one of the best features to add to a login form!

    • @mr.mobinyt
      @mr.mobinyt  4 หลายเดือนก่อน +1

      @@tolgaflashtr2855 Thank you for the comment, for sure, the number of people who have made this request has increased, auto save is active in the next videos

  • @ronaldallanaljunrupuesto2714
    @ronaldallanaljunrupuesto2714 4 หลายเดือนก่อน

    I'll subscribe looks like I'm gonna learn awesome things from you

    • @mr.mobinyt
      @mr.mobinyt  4 หลายเดือนก่อน +1

      @@ronaldallanaljunrupuesto2714 Thank you for your comment, I try to provide good content

  • @leo_6961
    @leo_6961 4 หลายเดือนก่อน

    awesome

    • @mr.mobinyt
      @mr.mobinyt  4 หลายเดือนก่อน

      @@leo_6961 thanks🔥🙏

  • @psociety371
    @psociety371 3 หลายเดือนก่อน

    Cool

    • @mr.mobinyt
      @mr.mobinyt  3 หลายเดือนก่อน

      @@psociety371 Thank you bro🙏

  • @ronaldallanaljunrupuesto2714
    @ronaldallanaljunrupuesto2714 4 หลายเดือนก่อน

    Awesome

    • @mr.mobinyt
      @mr.mobinyt  4 หลายเดือนก่อน

      @@ronaldallanaljunrupuesto2714 thank you🔥

  • @dragcoder
    @dragcoder 4 หลายเดือนก่อน

    Great

    • @mr.mobinyt
      @mr.mobinyt  4 หลายเดือนก่อน

      @@dragcoder thanks man🙏

  • @diesaffer
    @diesaffer 2 หลายเดือนก่อน

    fantastic unfortunately i can't get the animation to work if the label html comes before the input, even if you give the input id to the label.

    • @diesaffer
      @diesaffer 2 หลายเดือนก่อน

      AI fixed it: .input-field:focus-within label {
      top: 0;
      padding: 0 10px;
      background: #121212;
      }

  • @examscore9062
    @examscore9062 3 หลายเดือนก่อน

  • @mrnoname1005
    @mrnoname1005 2 หลายเดือนก่อน

    I can archive this using only HTML tag

  • @PRsHungama
    @PRsHungama 3 หลายเดือนก่อน +1

    bhai input:focus ke baad ~ lagane se kya hota hai?

    • @neerajbutola3753
      @neerajbutola3753 2 หลายเดือนก่อน

      if you select or click on the input . It will select any element after ~
      eg - input:focus ~ label
      here css will select label when u click on the input box

  • @Gulshansays_
    @Gulshansays_ 2 หลายเดือนก่อน

    Preview??

  • @Code_Cosmoss
    @Code_Cosmoss 4 หลายเดือนก่อน +1

    Hey! Which color scheme or theme are you using in vs code? Looks good. Im actually tired of the default theme

    • @mr.mobinyt
      @mr.mobinyt  3 หลายเดือนก่อน

      @@Code_Cosmoss Thank you for watching and your comment, the name of this theme is onedark pro

    • @Code_Cosmoss
      @Code_Cosmoss 3 หลายเดือนก่อน

      @@mr.mobinyt thanks!

  • @yashsoni8043
    @yashsoni8043 4 หลายเดือนก่อน

    bro when i click one somewhere then that text (enter your email) come again in the box after i write something on box whyyy also i copied the same code as your

  • @abhirupghosh1401
    @abhirupghosh1401 4 หลายเดือนก่อน +1

    what is the spellcheck attr used for?

    • @programmershray5260
      @programmershray5260 4 หลายเดือนก่อน +1

      It is used for preventing any sort of wrong spellings in the text field.
      For ex: Name: John (not jaun)

  • @rongitmukherjee
    @rongitmukherjee 4 หลายเดือนก่อน

    Good stuff

    • @mr.mobinyt
      @mr.mobinyt  4 หลายเดือนก่อน

      @@rongitmukherjee thanks🙏

  • @shuvosarkar8888
    @shuvosarkar8888 4 หลายเดือนก่อน +1

    source code ?

  • @WebDevXpert
    @WebDevXpert 4 หลายเดือนก่อน

    nice video bro @WebDevXpert

    • @mr.mobinyt
      @mr.mobinyt  4 หลายเดือนก่อน +1

      @@WebDevXpert thanks🔥

    • @WebDevXpert
      @WebDevXpert 4 หลายเดือนก่อน

      @@mr.mobinyt welcome

  • @vpbal0chplaying
    @vpbal0chplaying 3 หลายเดือนก่อน

    Bro not use music add keyboard sound

  • @aref003
    @aref003 4 หลายเดือนก่อน

    whats your vscode theme name?

    • @mr.mobinyt
      @mr.mobinyt  3 หลายเดือนก่อน

      @@aref003 onedark pro

  • @shuvosarkar8888
    @shuvosarkar8888 4 หลายเดือนก่อน

    Pro tip: if you don't add required in input html tag then the label isn't transforming

    • @mr.mobinyt
      @mr.mobinyt  3 หลายเดือนก่อน

      @@shuvosarkar8888 If we do not add the value inside the tag, the label will return to the previous state

  • @jackson-media123
    @jackson-media123 4 หลายเดือนก่อน

    guys lets get him to 1k subs plz🙏🙏

    • @mr.mobinyt
      @mr.mobinyt  4 หลายเดือนก่อน

      @@jackson-media123 Thank you for your favor, bro🔥🙏

  • @shohelshake6664
    @shohelshake6664 2 หลายเดือนก่อน

    Where your code??

  • @sojibhasan1380
    @sojibhasan1380 4 หลายเดือนก่อน

    Nice