HTML Form Input Type (PART-2)
HTML TUTORIAL NO: 21 (HTML Form Input Type PART-2)
HTML Form Input Type (PART-2)
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.
Learn HTML Input Type PART-1, Visit Now-
For example;
|
<input |
In First Tutorial of HTML Form Input Type PART-1 we learned some basic Input Type, today we will learn what we did not read in PART-1 HTML Form Input Type. Such as, File Input Type, Number, Range, Search, Tel, Time, URL and Week.
File Input Type
In HTML File Input Type control to selecting a file.
We can define the accept attribute to only allow specific file type e.g., <input type=”file” accept=”pdf”/>.
<!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="file" accept="pdf" name="file" id="file"> <input type="submit"> </form> </body> </html> |
Output of above Example
 |
Range Input Type
In Range Input Type control for entering a number value exact value is not important, selecting range.
<!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"> Range<input type="range"> <input type="submit"> </form> </body> </html> |
Output of above Programming
 |
Search Input Type
In search Input Type we entering and search any queries in search box.
<!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="search"> <input type="submit"> </form> </body> </html> |
Output of above Programming Example
 |
Time Input Type
In Time Input Type we select and enter a 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"> <input type="time"> <input type="submit"> </form> </body> </html> |
Output of above programming,
 |
Tel Input Type
Tel input type control for entering a telephone number, when we enter above 10 digit and below 10 digit it shows error because telephone number is 10 digits.
<!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" autocomplete="on"> <input type="tel" name="mobileno"><br> <input type="submit"> </form> </body> </html> |
Output of above programming.
 |
URL Input Type
In URL Input Type, a text field to entering a URL. If the form is submitted and the URL is not valid the 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" autocomplete="on"> Enter URL :<inputtype="url"><br> <input type="submit"> </form> </body> </html> |
Output of above programming,
 |
Week Input Type
Week Input Type control for entering a date consisting of week-year number and a week number, selecting weeks.
<!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" autocomplete="on"> Week:<input type="week"><br> <input type="submit"> </form> </body> </html> |
Output of above programming,
 |
So, in this tutorial we learned all the Input Type in Form HTML, this was last tutorial of HTML Form Input Type and we learned all Input Type. I hope you all learned this and entertain through this tutorial; we will learn some new things in next tutorial of HTML.
Learn PART-1 HTML Form Input Type-
Read Also-
- Learn PART-1 HTML Form Input Type.
- Learn HTML Form Full Tutorial.
- Learn HTML Form Labels with Examples.
- HTML button full tutorial.
- HTML Table full tutorial with examples.
2 Comments
zoritoler imol · November 5, 2022 at 11:01 pm
naturally like your web site but you need to test the spelling on quite a few of your posts. Several of them are rife with spelling issues and I to find it very troublesome to inform the truth however I’ll certainly come back again.
chao · March 21, 2023 at 12:34 am
Ηi to all, how is all, I think every one is getting more from this ѕіte, and your views arе fastidіous designed for
new visitors.