How to make an HTML form like a pro
Tags: html, webdev, css, codenewbie
Published: 2021-02-03 16:51:25

`Hello World!` Today we are talking about HTML form, it's mostly for beginners but anyone needs a refresh sometimes. 
So although I'm **sure** that you already knew this...
# Here is **the** list of all *input types* in html5!

Read also:
{% link https://dev.to/devlorenzo/50-best-inspiring-form-designs-36k %}
 
> And remember the like❤️❤️

---

```
<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](https://www.w3schools.com/html/html_form_input_types.asp)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8e63i0kc3iic4r2czt1h.jpg)


---

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">`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6sq94g2wsqeccbda0p30.jpg)
* A cool user-friendly form --> ...

You can have here a live preview (in case you missed something):
[Click Me](https://codepen.io/DevLorenzo/full/wvzNPKz)

---

## 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;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jzd1j33lcuqidopsmc6e.jpeg)

####After a long search: here some stylish form:
Simplicity:
[Contact Us Form (CodePen)](https://codepen.io/tutsplus/pen/ZNWQje)
Quiet:
[Login Form](https://colorlib.com/etc/lf/Login_v9/index.html)
Extravagance:
[Registration Form](https://colorlib.com/etc/regform/colorlib-regform-3/)
Interactivity:
[Login Form](https://colorlib.com/etc/lf/Login_v1/index.html)
Colorful:
[Contact Us Form](https://colorlib.com/etc/cf/ContactFrom_v11/index.html)

And now a list of 41, yes 41! responsive forms:
[On ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c73khzt7ih6388y0z0x5.jpeg)](https://uicookies.com/free-bootstrap-login-forms/)


> Please press like 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:

{% link  https://dev.to/devlorenzo/js-check-if-an-email-is-valid-23m4 %}

### Check if password is valid:

{% link  https://dev.to/devlorenzo/js-check-if-a-password-is-valid-746 %}

### Codepen sample:

{% codepen https://codepen.io/DevLorenzo/pen/wvzNPKz %}

---

Hope this helped and thanks for reading!

Check this article: [The ultimate compilation of Cheat sheets (100+) - 🎁 / Roadmap to dev 🚀](https://dev.to/devlorenzo/the-ultimate-compilation-of-cheat-sheets-100-268g)

{% link https://dev.to/devlorenzo/the-ultimate-compilation-of-cheat-sheets-100-268g %}

---

## **[Subscribe to my newsletter!](https://worldindev.ck.page)**
A loooong, and fun, weekly recap for you 
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!