HTML Input– How to Insert Inputs in HTML with Examples

HTML Input

In the last tutorial you learned about HTML form. In this tutorial we will focus on HTML Inputs in Form. There are many inputs type used for different purposes. In this tutorial you will learn about all of them with examples.

Input Tag in HTML Form

Input tag is used to get the input from the user. Input tag is written in HTML form tag. Input tag has no ending tag so this means its self-closing tag. General syntax of Input tag is as follow.

<input type=” “>

Type Attribute in Input tag

There are many type attribute in Input tag. You will learn about all of them one by one. Type attribute actually tells which type of input user has to write in input tag. You will know by Example.

Text Type Input

Text type input attribute is used to get the simple text values from the user. Text contains everything user can write for examples symbols like @ and number from 0 to 9. See Example of Text Type Input.


text type input in HTML


Text type input in HTML form

Password Type Input

Password type input attribute is used to get the password from the user. The difference in password and simple text type input is that the password type will convert all the text into password that user will type in the box. See example.


Password type input in HTML form


password type input in form

Email Type Input

Email type input is used to get only the email value from the user. An email contains @ sign in it. So if this sign is not included the form will not be submitted. User will see and error when he/she will try to submit the form without entering the email. See Example below how it works.


Email Type in HTML form


Emial type in HTML form

Filled Form Correctly

email type in form

What will happen if someone tries to submit a form in which an email is not valid ? See the picture below to know which error will occur is someone tries to do this.

Email Validation Error in HTML input



Please enter your comment!
Please enter your name here