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:
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
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)
Quiet:
Login Form
Extravagance:
Registration Form
Interactivity:
Login Form
Colorful:
Contact Us Form
And now a list of 41, yes 41! responsive forms:
On 
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:
Check if password is valid:
Codepen sample:
Hope this helped and thanks for reading!
Check this article: The ultimate compilation of Cheat sheets (100+) - 🎁 / Roadmap to dev 🚀
Subscribe to my newsletter!
A loooong, and fun, weekly recap for you
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!
Top comments (7)
It's been a while since I handle native event without a framework but if I'm right you can get a input value inside the form form the event using input name
form.addEventListener("submit", function (e) {
const inputValue = e.target.inputName.value;
});
Great post!
Once you are done creating your HTML form, you can use services like Getform.io to setup an action URL to handle your form submissions.
Thanks for your comment!
Just a question, where are you coming from?
This was my first article (published around 2 months ago) and I don't understand why I just made 500 views in two days.
I came across to your post from the Dev.to's search actually. I was checking out the HTML Form tags and ran into your post.
Btw, I have sent an email for possible collaboration opportunity to the email address under your profile. I hope you check and get back to me :)
Cheers!
Sure I will!
If you are making a HTML form 'like a pro' then you have to ensure its WCAG21 compliant
w3.org/WAI/WCAG21/quickref/
I'll check, thank for sharing