How to make a HTML form like a pro 🚀

Hello World! Today we are talking about HTML form, it's mostly for beginners but everyone needs a refresher sometimes. So although I'm sure that you already knew this...

Here is the list of all input types in html5!

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

Source: w3schools

Remember the like❤️❤️

You can also have:

• A label --> <label for="username">Click me to focus on input</label>
• A Disabled input --> <input type="text" placeholder="This is a text input Disabled" disabled>
• A multiple answer input (maybe with disabled options) -->

<select name="Select" id="Select">
      <option value="Default">Default field</option>
      <option value="1">Field 1</option>
      <option value="2" disabled>Fiel 2</option>
      <option value="3">Field 3</option>
      <option value="4" disabled>Fiel 4</option>
    </select>

• A placeholder --> <input type="text" placeholder="I am the placeholder">
• A cool user-friendly form --> ...

You can have here a live preview (in case you missed something): Click Me

Now it's time to add Some style!

First the basics

:hover

  input:hover {
  background-color: whitesmoke;
  margin-bottom: 1%;
  border-width: 3px;
}

:focus

  input:focus {
  background-color: yellow;
  color: black;
}

After a long search: here some stylish form:

• Simplicity: Contact Us Form (CodePen)

• Tranquility: Login Form

  Our Amazing Sponsors

  View Website

  DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

  View Website

  Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

  View Website

  A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

• Extravagance: Registration Form

• Interactivity: Login Form Colorful: Contact Us Form

A list of 41, yes 41! responsive forms: On

Smash that ❤️ button!

And now, -I'm sorry if you started web development last week- but you also need a little bit of JS:

A Prevent default never hurt anyone:

form.addEventListener("submit", function (e) {
	e.preventDefault();
});

Retrieve info from the form:

form.addEventListener("submit", function (e) {
	InputValue = document.getElementById("InputId").value;
});

Check if email is valid:

Here

Check if password is valid:

Here

Codepen sample:

Hope this helped and thanks for reading!

Check this article: The ultimate compilation of Cheat sheets (100+) - 🎁 / Roadmap to dev 🚀