HTML TUTORIAL FOR BEGINNERS PART 8

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 👇
```
<form>
<!--Your input fields come here-->
</form>
```
In HTML when we create form, it has some attributes like other elements for example:
* method
* action

### Method attribute takes two parameters:

* POST
* GET

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">
<br>
<label for="lastname">Lastname</label>
<input type="text" id="lastname" placeholder="Lastname">
<br>
<input type="submit" value="submit">
</form>

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👇
```
<form>
<label for="username">Username</label>
<input type="text" id="username" placeholder="Username">
<br>
<label for="email">Email</label>
<input type="email" id="email" placeholder="Email">
<br>
<label for="password">Password</label>
<input type="password" id="password">
<br>
<h1>Choose your favourite subjects?</h1>
<input type="checkbox" id="math">
<label for="math">Math</label>
<br>
<input type="checkbox" id="biology" checked>
<label for="biology">Biology</label>
<br>
<h1>Choose your gender?</h1>
<input type="radio" name="gender" id="male">
<label for="male">Male</label>
<br>
<input type="radio" name="gender" id="female">
<label for="female">Femalr</label>
<br>,
<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>
<option>Arabic</option>
</select>
</form>
```

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

How Microsoft Is Adopting Rust

Scraping Memes From Reddit With the Python Reddit API

One container many applications

What is GraphQL and why Facebook felt the need to build it?

Finely Chopped Meat — The Mathematics of Retro Programming

IOTA Research Status Update - April 2020

FlatIron Mod 2 Sinatra Project

Adding Git Pre-commit hooks — Python projects

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
Ahmadullahnikzad

Ahmadullahnikzad

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

More from Medium

HOW TO IMPROVE AS A JUNIOR DEVELOPER

The 8 Errors that Developers Tend to Make

Why Web Developers Should Use Framework Codeigniter?

How Kids Can Start Programming