Learn web development 04 - All About HTML Forms and HTML Inputs.
Tags: html, webdev, beginners, css
Published: 2021-07-26 10:40:02

Hello, Welcome. My name is kunaal. This is a part of learn web development series.

In today's article, you'll learn about html forms and inputs, buttons in HTML. So, let's start.

#Forms
What is Form ? Well, we all know what is form, we have filled lot of forms in websites. Maybe you have filled some registration form or you have created your friend's gmail account. Forms are everywhere.

So,let's talk how we can make form in HTML.

`<form></form>` Form Tag - This is form tag used to make forms. But, this is like a container or wrapper for your input fields. But it's has some very important attributes that you should know.

<table>
<th>Attributes</th>
<th>Values</th>
<th>Description</th>
<tr>
<td>method</td>
<td>get| post</td>
<td>It's specify how to transfer data from site to the site specified in `action` attribute.</td>
</tr>
<tr>
<td>action</td>
<td>(path of HTML file or server)</td>
<td>It's specify, where to redirect user after filling form</td>
</tr>
</table>

###Understand `method` values in detail

<table>
<th>Value</th>
<th>Description</th>
<tr>
<td>get</td>
<td>This append the form data in the URL (https://site.com?name=modern+web)</td>
</tr>
<tr>
<td>post</td>
<td>Sends the form data as HTTP post transaction. This is more secure way to transfer data than `get`</td>
</tr>
</table>

We'll see `action` and `method` example at the last of the post where we'll make google search engine. Isn't it excited.

#Input Tag

`<input>` Input tag. This tag is self closing, it does not require a closing tag. Input Tag is used to add fields in our form. Let's see them in detail.

We have lot's of attributes and types for input. So let's understand them from table.

<table>
<th>Atrribute</th>
<th>Value</th>
<th>Description</th>
<tr>
<td>type</td>
<td>text, email, password, radio, checkbox, submit, range, date, color, file, reset, and more</td>
<td>Use to specify what type of input it is.</td>
</tr>
<tr>
<td>name</td>
<td>text. Example `name="first name"`</td>
<td>It is used to specify name for the input, so we can identify data</td>
</tr>
<tr>
<td>placeholder</td>
<td>text. Example `placeholder="type your first name"`</td>
<td>Specifies a short hint that describes the expected value of an <input> element</td>
</tr>
<tr>
<td>value</td>
<td>text. Example `value="john"`</td>
<td>it is used to specify the default value for the input</td>
</tr>
<tr>
<td>required</td>
<td>---</td>
<td>It specify the field must be filled before submitting form.</td>
</tr>
</table>

And so on, we have lots of attributes for Input tag. But these used most commonly. If you want you can read about more attributes [here](https://www.w3schools.com/tags/tag_input.asp).

Let's see types of input in detail.

###Text
`type` attribute is used to specify input type.

Example
 
```HTML
<form>
    <input type="text" placeholder="type your name" name="name">
</form>
```
>we are not using method and action attributes in above example because we don't have submit button.

Output
![Capture-3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vo22l12yoiybdefpbaiz.PNG)

>Email type is same as text but email text check `@` sign also.

###Password
This is also similar to text, but in this type you'll be not able to see text instead you'll see bullets.
```HTML
<form>
    <input type="password" placeholder="password" name="password">
</form>
```
Output
![Capture-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udgsg5tdwacwecpu2gm1.PNG)
 
###Range

This is used to create range slider in forms.
```HTML
<form>
    <input type="range" name="range" min="0" max="10" step="2" value="4">
</form>
```
Output
![Capture-4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70nm1yga8eio7rb0zqbz.PNG)
`min` is to define min value.`max` is used to define maximum value. `step` is used to specify the interval between legal numbers.

###Radio
This is to create radio button in the form. Like
```HTML
<form>
    <input type="radio" id="red" name="color" value="red" checked>
    <label for="red">red</label>
    <input type="radio" name="color" id="green" value="green">
    <label for="green">green</label>
    <input type="radio" name="color" id="blue" value="blue">
    <label for="blue">blue</label>
    <input type="radio" name="color" id="yellow" value="yellow">
    <label for="yellow">yellow</label>
</form>
```
Output
![-4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfdhh8mbb1uvgociey93.PNG)

You can notice some extra tags in the above example. 
1. `<label></label>` Label tag. It is used for input fields to add a label to them. In the above case we are adding label to our radio buttons.
2. `id` attribute. `id` is used to give unique ID to any element.
3. `for` attribute. `for` attribute is for label tag. It specifies for which input this label is. The value of this `for` attribute should be same to the `id` of the element.

###Checkbox

Checkbox is used to add tick box in the form. Like
```HTML
<form>
    <input type="checkbox" id="red" name="color" value="red" checked>
    <label for="red">red</label>
    <input type="checkbox" name="color" id="green" value="green">
    <label for="green">green</label>
    <input type="checkbox" name="color" id="blue" value="blue">
    <label for="blue">blue</label>
    <input type="checkbox" name="color" id="yellow" value="yellow">
    <label for="yellow">yellow</label>
</form>
```
Output
![Capture-5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c49or3b6eaufzwdbg864.PNG)

The difference between checkbox and radio is you can select multiple checkbox but you can select multiple radio buttons.

Note:- In radio type and checkbox type all inputs have same `name`. Same `name` means it belongs to same category.

###Date
This type is used to add calendar in the form.

```HTML
<form>
    <input type="date">
</form>
``` 
Output
![Capture-6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysc4xccx60qpvaquur07.PNG)
 
###And some more
```HTML
<form>
    <!-- to add color field in the form  -->
    <input type="color">
    <br>
    <br>
    <!-- to add upload file  -->
    <input type="file">
    <br>
    <br>
    <!-- to add a reset button which reset all input data -->
    <input type="reset" value="reset">
    <br>
    <br>
    <!-- to add submit button -->
    <input type="submit" value="submit">
</form>
```
Output
![Capture-7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0wpvwofrvx2wsf09p4x.PNG)

So, that was all about Inputs and forms. Now let's make a google search form to understand form's `action` attribute.

### Google Search

```HTML
<form method="get" action="https://www.google.com/search?">
    <label for="search">Search</label>
    <input type="text" id="search" name="q" required>
    <input type="submit" value="search">
</form>
```
Output
![Untitled design (3)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewhxxqxdpyl6iaj0lxo5.gif)  

Let's understand above example.
1. We set our `method` to `get` so it will append form data into URL.
2. In `action` attribute we have given a link `https://www.google.com/search?`. But from where I got this link.
      - First go to google.com.
      - Then search something. For example I searched 'car'.
      - copy the text from address bar and paste it into code.
        As I did. `action="https://www.google.com/search?q=car&sxsrf=ALeKk00oK8YP9RI6P3t-9YfvtPoZwqXsng%3A1627294553711...."` it's a very long address.
      - Notice we type `car` in search box. And if we see the link. We can find our car word here `q=car`. So okay, means google want this q field atleast to work.
      - After you found this just delete all the unwanted keywords from the link. And now our `action` is equal to `https://www.google.com/search?`. We also removed that `q` word. But remember to add `?` at last.
3. After we got our link also. Now create labels and text field for the form and create submit button.
4. But notice I gave text field name to `name="q"`. Why? because google want this `q` field. And whatever we type in our field. It data will belong to `q` field. 

That's how this google search is working.

So, that's it for today. Today we learnt about forms and input tags in HTML. I hope you understood each and everything. If you have any doubt feel free to ask me in discussions.

#Homework
I appreciate, If you do homework as well for you better practice. Today's homework is.
1. Make two forms.
2. One form for getting user data. Like name, phone number, email, password, age, D-O-B, favorite food etc. 
3. Make second form for youtube search. follow the steps that I took, to find youtube search link.
4. And practice all the examples done in this article.
 
#Bonus
We have `<button></button>` Button tags also. It is used to create button in the page. And you can use These buttons as submit button you only have to add `type="submit"`.

Example
```HTML
<button>Click me</button>
```
Output
![Capture-8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25x6g85b2miutsyvedk3.PNG)
 

If you want, you can tag your homework to my [Instagram](https://www.instagram.com/modern_web_channel/). I'll be glad to see you developing web pages.

If you like, you can subscribe my [youtube channel](https://www.youtube.com/c/modern_web?sub_confirmation=1).I create awesome web development tutorials. You can also watch tutorial on [Gradient Infinity loading animation](https://www.youtube.com/watch?v=89IFrt_Unj0)

Thanks For reading.