HTML Form Input Type
HTML TUTORIAL NO: 20 (HTML Form Input Type PART-1)
HTML Form Input Type
HTML form Input element are the input fields inside the HTML Form, there are many and different types of input fields and we will learn all the input type <input> in tis tutorial.
For example;
|
<input |
All Input Types in HTML Form are Text, Email, Color, Checkbox, Date, Week, Datetime Local, File, Hidden, Month, Number, Password, Radio, Range, Search, Tel, Time. We see all these Input Types example one by one in this tutorial.
Text Input Type
More than one line text field where we used line-break tag <br>.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Input Type</title> </head> <body> <form action="action.html"> Name:<input type="text"> <br> Class:<input type="text"> </form> </body> </html> |
Output of above Example
 |
Email Input type
In HTML Form Email Input Type, the field is entering a valid e-mail address, If the e-mail address is not valid form is not submitted and user will be warned.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Input Type</title> </head> <body> <form action="action.html"> E-mail<input type="email"> <br> <input type="submit"> </form> </body> </html> |
Output of above Example
 |
Checkbox Input Type
A checkbox allow itself to be checked or unchecked, the value of a check box could either be true if it is checked or if it is unchecked it is false.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Input Type</title> </head> <body> <form action="action.html"> <input type="checkbox">True <br> <input type="checkbox">False <br> <input type="submit"> </form> </body> </html> |
Output of above Example
 |
Color Input Type (color-picker)
A simple color-picker built in HTML input type form; it returns a RGB, HEX color code.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Input Type</title> </head> <body> <form action="action.html"> Pick Color<input type="color"><br> <input type="submit"> </form> </body> </html> |
Output of above Example
 |
Date Input Type
A control for entering a date in HTML Form (Year, Month and Day)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <metaname="viewport" content="width=device-width, initial-scale=1.0"> <title>Input Type</title> </head> <body> <form action="action.html"> Enter Date:<input type="date"> <br> <input type="submit"> </form> </body> </html> |
Output of above Example
 |
Datetime Local Input Type
An Input Type in HTML Form to entering date and time.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Input Type</title> </head> <body> <form action="action.html"> Date & Time:<input type="datetime-local"><br> <input type="submit"> </form> </body> </html> |
Output of above Example
 |
Month Input Type
In Month Input Type of HTML form, a control to entering a month and year.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Input Type</title> </head> <body> <form action="action.html"> Enter Month:<input type="month"><br> <input type="submit"> </form> </body> </html> |
Output of above Example
 |
Password Input Type
In Password Input Type in HTML Form, a single line text field whose value is obscured.
You know the password is not show in any for you fill, that show only a small and black dot.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Input Type</title> </head> <body> <form action="action.html"> Enter Password:<input type="password"><br> <input type="submit"> </form> </body> </html> |
Output of above Example
 |
Radio Input Type (Radio Button)
A radio button, allowing a single value to be selected out of multiple choice, for example; “select gender” in any registration for, option is male or female but you select one of them.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Input Type</title> </head> <body> <form action="action.html"> Select Gender:<input type="radio"name="gender" value="Male" id="male"> <label for="male">M ale</label> <input type="radio" name="gender" value="Female" id="female"> <label for="female">Female</label> <input type="submit"> </form> </body> </html> |
Output of above Example
 |
In this tutorial we learned some basic important Input Type of HTML form, in next tutorial of HTML Input Type PART-2 we will learn all the HTML Form Input Type elements.
Read Also-
1 Comment
smorter giremal · November 3, 2024 at 7:32 pm
I like this web blog very much, Its a really nice post to read and get information.