If you have a Facebook account you have to submit your first name, lastname,email address or phone, password, date of birth, country, gender and more to Facebook to record your information in its servers or databases.
Today you learn how to create those kinda textfields you’ve experienced on Facebook.
As I mentioned earlier Facebook wants your firstname, lastname, email or phone,password, date of birth, gender, country.
All of these are input fields that we’re going to learn them.
### Like the below image which is from Facebook signup form👇

To create this of forms in HTML we use form element.
Every other content is wrapped inside form element like: first name input field. Last name input field...
Look at the below code 👇
<!--Your input fields come here-->
In HTML when we create form, it has some attributes like other elements for example:
* method
* action

### Method attribute takes two parameters:


These parameters are very crucial and important when submitting form to a server.
Differences between POST and GET parameters is as follow:
GET is for getting data from form.
POST is for sending data through a form like comment,story...
These are some useful form attributes👇
* action
* autocomplete
* method
* novalidate
* target

#### Now let's learn how to create a basic form in HTML:

<form method="POST">
<label for="firstname">First Name</label>
<input type="text" id="firstname" placeholder="First Name">
<label for="lastname">Lastname</label>
<input type="text" id="lastname" placeholder="Lastname">
<input type="submit" value="submit">

We can create email input field just by changing the type value to email and to create password field change into password and so on so.
#### Some are the useful form input fields 👇
* text
* email
* password
* file
* submit
* image
* date
* local-date
* week
* color
* number
* tel
* reset
* url
* search
* radio
* checkbox
As well these input fields like email, password, number, url, search, tel have some attributes like below👇
* placeholder
* type
* name
* id
* value
* autocomplete
* spellcheck
Forms are very useful in a website and a web app.
### Look at the below Examples👇
<label for="username">Username</label>
<input type="text" id="username" placeholder="Username">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Email">
<label for="password">Password</label>
<input type="password" id="password">
<h1>Choose your favourite subjects?</h1>
<input type="checkbox" id="math">
<label for="math">Math</label>
<input type="checkbox" id="biology" checked>
<label for="biology">Biology</label>
<h1>Choose your gender?</h1>
<input type="radio" name="gender" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female">
<label for="female">Femalr</label>
<input type="color">
<input type="date">
<input type="week">
<input type="number">
<input type="file">
<input type="tel">
<label for="languages">Choose your language</label>
<select id="languages" multiple>
<option value="English" selected>English</option>

I hope you enjoy the video and also share and like it




I am a web developer who writes web development content for you to make web development easier

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Beginner’s Guide To The Different Kinds of Web Hosting

Adobe Flash is working in Safari

Elastic Container Service — When AWS Documentation is not enough

Taming Android Unit Test when using different flavors and build types

Top String Programs For Interview : Swift 5.0 | Part -3

How to actually have agility in software development

Everything about the working of Hashmap/ Unordered map in C++, Amortized Time

Functional Decomposition: Modularisation by Business Functions — Not Technical Layers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


I am a web developer who writes web development content for you to make web development easier

More from Medium

How to Boost Your Coding Life by Powerful VS Code Emmet

Progressive Web App(PWA)

Debugging tips for beginners

Benefits of Object Oriented Programming