HTML Form Input Type (PART-2)

Published by StudyMuch on January 17, 2022January 17, 2022

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;

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-

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.