Advise on labels vs no labels (form)

Question

As the title says i am looking for advice on labels vs no labels for a form.

I have a small "check availability" form on the home page, and wonder what approach i should take.

Options:

Mobile

version 1

version 2

Desktop

Version 1

version 2

Version 3

Answer 1

It's better to place the label above the input box it will be noticeable to the user at all times. Because the moment you place the label inside the input field user will lose context on what is the input type to be entered in turn a cognitive load on the user. The user has to delete/erase the input in order to recheck.

For the desktop version, you can with ver 2 & 3. For the mobile version, ver 2.

For reference: https://www.nngroup.com/articles/form-design-placeholders/

https://uxplanet.org/float-label-pattern-in-ux-form-design-7ab5e33010ab

Let me know if you have any doubts. Hope this solves the problem.