Categories
HTML

Input-mobile first

Everyone uses smartphone. I mean, do you now anyone that does not? If you do – it must be someone in coma.

Most of the websites, even landing pages tend to have some sort of a form (contact form, register form, newsletter form, login form…). So we need to think about it.

We need to use different kind of input for different type of data. For many reasons. First is that today browsers are very smart. They can validate your data for you. For example if you use input type email, browser will automatically validate its value, and set notification if something is wrong. Or if you use input type number, user will not be able to use letters and other signs (apart from “.”)

Second reason is smartphone. For example if you use input type tel smartphone will automatically switch to numeric keyboard.

Open next example in desktop browser and in mobile browser and check it out.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="webinuse" data-slug-hash="oNXmjEL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Inputs">
  <span>See the Pen <a href="https://codepen.io/webinuse/pen/oNXmjEL">
  Inputs</a> by webinuse (<a href="https://codepen.io/webinuse">@webinuse</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

You’ ll be surprised how many types of inputs there are out there. Here is the list:

  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week