8/100: Creating Forms in HTML

Hey there, today is my last day of learning HTML and today I learnt about input forms. I have discussed about form element in this blog ahead. To give you a full insight of what did I learn in html in last 7 days, I have prepared a table.

Learnings till now in HTML
Days	Topics	Code Link	Blog Link
Day 1	Syntax	Syntax	Blog
Day 2	Headings and Lists	Headings Lists	Blog
Day 3	Formatting Tags	Formatting	Blog
Day 4	Images	Images	Blog
Day 5	Tables	Table	Blog
Day 6	Anchor Tag	Anchor	Blog
Day 7	Navigation Bar	Navigation bar	Blog

What is a form in html?

A form is used to take inputs from users.
HTML5 introduced <form> element which is very useful in websites.
A form element is a container element.
These inputs are then sent to the server where these inputs are processed and further actions are taken.
Mostly these form inputs are stored in a database.
A form contains many form controls such as a textbox, radio button, checkbox, submit button etc.
These controls are used for filling up the form.
Some examples of commonly used forms in websites are registration form, login form, add payment info form etc.
A brief introduction to such form controls is given below.

Input element and its types:

Input element is the most important form elements.
The <input> element specifies a input field in which users can fill required data.
The appearance of a input filed can be changed based on the "type" attribute.
Syntax of input element is given below:

    <form>
        <input type="" name="" id="">
    </form>

Some of the commonly used input type attributes are listed below.

text:

The type="text" attribute is used to create a single line input field.
This input field is a textbox, in which users can enter their name or user id or some plain text depending on what is asked.
The "name" attribute in <input> tag specifies the name of the element and the "id" attribute creates a specific identity for that element.
Syntax :

    <input type="text" name="username" id="u_name">

password:

The type="password" is used to enter password.
This type attribute encodes the password.
The "name" attribute in <input> tag specifies the name of the element and the "id" attribute creates a specific identity for that element.
Syntax:

    <input type="password" name="pass" id="u_pass">

email:

The type="email" is used for entering email id in the input field.
This attribute checks for a "@" sign and a ".com" to validate that entered data is an email id.
The "name" attribute in <input> tag specifies the name of the element and the "id" attribute creates a specific identity for that element.
Syntax:

    <input type="email" name="email" id="u_email" placeholder="someone@gmail.com">

tel:

The type="tel" attribute is used to enter phone number.
It checks for number in input field and does not takes alphabets or letters as a parameter.
The "name" attribute in <input> tag specifies the name of the element and the "id" attribute creates a specific identity for that element.
Syntax:

    <input type="tel" name="phone" id="p_num" placeholder="9137000000">

submit:

The type="submit" attribute is a submit button.
When clicked, this attribute submits the entered data to the server.
The "name" attribute in <input> tag specifies the name of the element and the "id" attribute creates a specific identity for that element.
Syntax:

    <input type="submit" name="submit" value="Register" id="u_sub">

Create a form in html

The following code creates a simple form in html:

    <form>
        <p>Enter your name: <input type="text" name="username" id="u_name" placeholder="John"></p>
        <p>Enter your password: <input type="password" name="pass" id="u_pass"></p>
        <p>Enter E-mail id: <input type="email" name="email" id="u_email" placeholder="someone@gmail.com"></p>
        <p>Enter Phone No.: <input type="tel" name="phone" id="p_num" placeholder="9137000000"></p>
        <p><input type="submit" name="submit" value="Register" id="u_sub"></p>
    </form>
    <form>
        <input type="text" name="username" id="u_name">
    </form>