CodeCom | HTML

Forms are elements of HTML that are used to collect information from the user. They are usually sent to the internet to be processed and used another time.

There are many form elements. One of them is the <input> element. Here's a list of form elements.

<input>
<label>
<select>, <option> and <optgroup>
<button>
<fieldset> and <legend>
<textarea>

These all are form elements. You are going to learn them one by one. But don't think that it's too hard. If you learn it today, you just have to revise it to use it another day. Easy right? So, let's dig in.

The <form> element holds can hold all this form elements in it. Like this

You can add as much as form elements as you want. We only added the <input> and <label> for sample here.
The <form> element has 2 main attributes. These are "action" and "method".

⭐ In the action attribute you write the URL of the website (Example: https://www.google.com/).

⭐ In the method attribute you have to either write "post" or "get".
😀 Their main difference is that if you use "get", the information you gave the website will be written on the URL, but if you use "post" your information is hidden. And also "get" has size limitations while "post" doesn't have size limitations.

URL is the text written at the search bar of your browser.

So now, let's make our form better.

Input

Now, let's learn about <input>.
Well <input> can be displayed in many ways using the 'type' attribute.

type='text'
type='radio'
type='checkbox'
type='submit'
type='button'
type='email' (for email) & type='password' (for password)

Here is an example.

<form action='https://www.google.com/' method='post'>
<input type='checkbox'>Meat<br>
<input type='checkbox'>Veggies
</form>

Text
The 'text' attribute is used to take information from the user through text (letters, words, symbols,…).
<input type='text'>
Radio and Checkbox
Both are the same, except that using 'checkbox' you can select more than 1 choice, but in radio you can only select 1 choice.
😏 Don't forget that if you are using these two values (radio and checkbox) you need to give the same 'name' attribute to your <input> to bind your choices together.
Example:

<form action='https://www.google.com/' method='post'>
    <input type='checkbox' name='foods'>Meat<br>
    <input type='checkbox' name='foods'>Veggies
    <input type='radio' name='drinks'>Coca Cola<br>
    <input type='radio' name='drinks'>Fanta
</form>

Button and Submit
We can also use inputs as buttons. For example:
<input type='button' value='say-something'>
<input type='submit'>
Button and submit are the same. Their difference is just that 'submit' has already a value of 'submit'.
If we want to change the value for submit, we can change it as we did on 'button'. For example:
<input type='submit' value='changed'>
Now, it is changed.

Label

Now, let's learn about <label>. The <label> element helps us to give a label (name) to different 'form elements'.
The other use of the <label> element is that it binds together the 'form elements' with their 'labels' and make them one. To understand more let's see some examples.
Now we are going to bind our <input> with a <label>. To do that we need to add some attributes to them.
Let's add an 'id' attribute to <input>, and let's add a 'for' attribute to <label>. Then you can use any words but the values of each of them needs to be the same.

<form action='https://www.google.com/' method='post'>
    <input id='meat' type='checkbox'>
    <label for='meat'>Meat
    <input id='veggies' type='checkbox'>
    <label for='veggies'>Veggies
</form>

Now, when you click on the label called meat, the checkbox of meat will be checked. And also, if you click on the label veggies, the checkbox of veggies will be checked.
🤩 This helps people with eye problem to check the checkbox easily.

If you try to write using the normal <input> way, the checkbox won't be checked if you click on the text. Try it yourself!

<form action='https://www.google.com/' method='post'>
<input id='meat' type='checkbox'>Meat<br>
<input id='veggies' type='checkbox'>Veggies
</form>

Now, if you click on the texts they won't be checked.

Also, if you want to write any text use <label> without any attribute.
<label>My Personal Information

Select, Option and Optgroup

These are used to create a dropdown menu. Let's see the example below.

<form action='https://www.google.com/' method='post'>
    <select name='nationality'>
        <option value='United States'>United States</option>
        <option value='United Kingdom'>United Kingdom</option>
        <option value='France'>France</option>
    </select>
</form>

And 'optgroup' is used to group the options. For example:

<form action='https://www.google.com/' method='post'>
    <select name='nationality'>
        <optgroup label='North America'>
            <option value='United States'>United States</option>
            <option value='Canada'>Canada</option>
        </optgroup>
        <optgroup label='Europe'>
            <option value='United Kingdom'>United Kingdom</option>
            <option value='France'>France</option>
        </optgroup>
    </select>
</form>

Textarea

This is like an input. But it is much larger in size. It is used to write long messages, emails, recommendations, etc. For example
<textarea></textarea>
Also, you can write something in between <textarea>. For example:
<textarea>Hello there!</textarea>
You can also add a placeholder to 'textarea'. For example
<textarea placeholder='Write your message'></textarea>

Fieldset and Legend

They are used to add a border to your 'form'. The field set will add the border and the legend will be the title. Here's an example

<form action='https://www.google.com/' method='post'>
    <fieldset>
        <legend>User Information</legend>
        <label for='foremail'>Email<br>
        <input type='email' id='foremail'><br>
        <label for='forpass'>Password<br>
        <input id='forpass' type='password'><br>
        <select name='nationality'>
            <optgroup label='North America'>
                <option value='United States'>United States</option>
                <option value='Canada'>Canada</option>
            </optgroup>
            <optgroup label='Europe'>
                <option value='United Kingdom'>United Kingdom</option>
                <option value='France'>France</option>
            </optgroup>
        </select>
        <input type='submit'>
        <input type='button' value='Send'>
    </fieldset>
</form>