Input Tag is used in the form, Input tag is one of the important tags in the form, without input tag, we can't perform any operation in the form if we want to input any data from the user then we have to use the input tag.
Let's study different types of input tags along with their values.
<input type="text">
it is a single line text-field, text field also allows you to write a number as well as some symbols because everything comes under the text.
<form action="">
<label for="fname">Firstname</label>
<input type="text" name="fname" id="fname"
maxlength="10" minlength="5" required>
</form>
attributes used here are maxlength, minlength, required.
. required:- means it is mandatory that you have to fill that field before submitting you cannot keep it empty.
.minlength:- though here we are given the value for minlength so you have a written minimum upto 5 characters not less than 5.
.maxlength:- here also I have given the value upto 10 so it only allows us to write upto 10 characters not more than that.
<input type="email">
it allows the user to enter the email, though we are using type="email" this will perform the basic validation for us for example if we forgot the [ @ ]symbol and we are clicking on submit then we will get a msg like "please include "@" in the email address.
<input type="password">
This input tag will allow the user to enter the password, though we are using [ type = password ] that's why when we will type the password we will not be able to read what we are typing, it is usually replaced by (" * ") or (" . ") depending upon the operating system, but instead of using <input type ="password"> if we will use <input type="text"> we will be able to read whatever password we are typing so, it's better to use <input type ="password">.
<input type="button">
<input type="checkbox">
<!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>CheckBox|HTML</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800;900&display=swap" rel="stylesheet">
</head>
<style>
.container{
max-width: 1200px;
border: 2px solid black;
margin: 1rem auto 0 auto;
padding: 0 0 1rem 1rem;
}
.container h1{
font-family: 'Inter', sans-serif;
font-weight: 900;
text-shadow: 2px 2px 5px rgb(0, 0, 0);
color:rgb(247, 159, 7)
}
.container p{
font-family: 'Inter', sans-serif;
font-weight: 800;
}
</style>
<body>
<div class="container">
<h1>CheckBox :</h1>
<p>Choose Your Favoutite players</p>
<form action="./form_result.html" method="get">
<label for="playerOne">Virat</label>
<input type="checkbox" name="playerOne" value="Virat">
<label for="playerTwo">Rohit</label>
<input type="checkbox" name="playerTwo" value="Rohit">
<label for="playerThree">Hardik</label>
<input type="checkbox" name="playerThree" value="Hardik">
<label for="playerFour">Kl Rahul</label>
<input type="checkbox" name="playerFour" value="KlRahul"><br><br>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
<input type="radio">
Radio Buttons are presented in a group, Only one radio button can be selected once at a time, the checkbox will allow you to select multiple options but the radio button will be selected only once. The radio buttons are the inline elements.
In Radio buttons, the value of the name attribute should be the same but the value of value attribute should be unique, and different Though we are writing the value of the name attribute same that's why when we select one radio button it will deselect the other radio button automatically
<!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>Password|HTML</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800;900&display=swap" rel="stylesheet">
</head>
<style>
.container{
max-width: 1200px;
border: 2px solid black;
margin: 1rem auto 0 auto;
padding: 0 0 1rem 1rem;
}
.container h1{
font-weight: 900;
text-shadow: 2px 2px 5px rgb(0, 0, 0);
color:rgb(247, 159, 7)
}
body{
font-family: 'Inter', sans-serif;
}
</style>
<body>
<div class="container">
<form action="#">
<h1>Radio :</h1>
<p>Select Only One Favourite Player:</p>
<label for="playerOne">Virat</label>
<input type="radio" name="PlayerName" id="playerOne" value="Virat">
<label for="playerTwo">Rohit</label>
<input type="radio" name="PlayerName" id="playerTwo" value="Rohit">
<label for="playerThree">Kl Rahul</label>
<input type="radio" name="PlayerName" id="playerThree" value="Kl Rahul">
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
<input type="date"> and <input type="datetime-local">
<!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>Date|HTML</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800;900&display=swap" rel="stylesheet">
</head>
<style>
.container{
max-width: 1200px;
border: 2px solid black;
margin: 1rem auto 0 auto;
padding: 0 0 1rem 1rem;
}
.container h1{
font-family: 'Inter', sans-serif;
font-weight: 900;
text-shadow: 2px 2px 5px rgb(0, 0, 0);
color:rgb(247, 159, 7)
}
</style>
<body>
<div class="container">
<h1>Date :</h1>
<form action="./form_result.html" method="get">
<label for="date">Select Your Date:</label>
<input type="date" name="date" min="1992-11-22" max="2034-11-22">
<input type="submit" value="Submit">
</form>
</div>
<div class="container">
<h1>DateTime :</h1>
<form action="./form_result.html" method="get">
<label for="datetime">Select Date and Appointment Time:</label>
<input type="datetime-local" name="datetime" value="2018-06-12T09:30">
<input type="submit" value="submit">
</form>
</div>
</body>
</html>
<input type="hidden">
<!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>Hidden|HTML</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800;900&display=swap" rel="stylesheet">
</head>
<style>
body{
font-family: 'Inter', sans-serif;
}
.container{
max-width: 1200px;
border: 2px solid black;
margin: 1rem auto 0 auto;
padding: 0 0 1rem 1rem;
}
.container h1{
font-weight: 900;
text-shadow: 2px 2px 5px rgb(0, 0, 0);
color:rgb(247, 159, 7)
}
.buttonOne{
background-color: crimson;
border:none;
padding: .5rem;
color:white;
font-size: 15px;
}
.buttonTwo{
background-color: rgb(211, 27, 253);
border:none;
padding: .5rem;
color:white;
font-size: 15px;
}
</style>
<body>
<div class="container">
<h1>Hidden :</h1>
<p>The browser will not allow us to see if we have used a hidden attribute, suppose we have created a paragraph and a button but we can't see if we are using hidden attribute on any of these.</p>
<input class="buttonOne" type="submit" value="ButtonOne">
<input class="buttonTwo" type="submit" value="Buttontwo">
<p>Here we are using two button's but it will display only the <b style="color: rgb(76, 0, 255);">ButtonOne</b> not the <b style="color: rgb(36, 130, 7);">ButtonTwo</b> because i will use hidden attribute on the <b style="color: chocolate;">ButtonTwo</b>, for more understanding see my <b>HTML CODE</b> whether i have used two buttons or not. </p>
<input class="buttonOne" type="submit" value="ButtonOne">
<input type="submit" value="Buttontwo" hidden>
</div>
</body>
</html>
<input type="reset">
<!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>Hidden|HTML</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800;900&display=swap" rel="stylesheet">
</head>
<style>
body{
font-family: 'Inter', sans-serif;
}
.container{
max-width: 1200px;
border: 2px solid black;
margin: 1rem auto 0 auto;
padding: 0 0 1rem 1rem;
}
.container h1{
font-weight: 900;
text-shadow: 2px 2px 5px rgb(0, 0, 0);
color:rgb(247, 159, 7)
}
input{
display:block;
margin-bottom: .5rem;
}
input[type=text],[type=email]{
height: 30px;
width: 200px;
}
.btn-reset{
display:block;
font-size: 1rem;
padding: .5rem 2rem;
background: green;
border-radius: 5px;
border: none;
color:white;
}
</style>
<body>
<div class="container">
<h1>Reset :</h1>
<form action="">
<label for="fname">FirstName: </label>
<input type="text" name="fname" id="fname" placeholder="Enter Your Name">
<label for="lname">LastName: </label>
<input type="text" name="lname" id="lname" placeholder="Enter Your Last Name">
<label for="email">Email: </label>
<input type="email" name="email" placeholder="Enter Your Email">
<input class="btn-reset" type="reset" value="Reset">
</form>
</div>
</body>
</html>
<input type="file">
it allows the user to choose any file from your device and will be able to upload it to the server with the help of form submission.
ATTRIBUTES USED:
accept: the accept attribute allows us to choose which type of file we want to upload it can be an image and its format for example (png, jpeg), it can be a pdf file as well, and some word files also.
accept=".jpg, .jpeg, .png" or accept=image/* (this will accept any type of image)
multiple: the multiple attributes will allow us to select more than one file.
<input type="number">
The input type number will allow you to only enter only the number we cannot enter anything else because we have used type = number so it will automatically help in validating
attributes I have used here are [ min, max, value ] we can also use required and step
<!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>Number|HTML</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800;900&display=swap" rel="stylesheet">
</head>
<style>
.container{
max-width: 1200px;
border: 2px solid black;
margin: 1rem auto 0 auto;
padding: 0 0 1rem 1rem;
}
.container h1{
font-family: 'Inter', sans-serif;
font-weight: 900;
text-shadow: 2px 2px 5px rgb(0, 0, 0);
color:rgb(247, 159, 7)
}
</style>
<body>
<div class="container">
<h1>Number :</h1>
<form action="#">
<label for="number">Number:</label>
<input type="number" placeholder="Enter your number here"
min="5" max="10" value="1" id="number">
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
<input type="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>Range|HTML</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800;900&display=swap" rel="stylesheet">
</head>
<style>
.container{
max-width: 1200px;
border: 2px solid black;
margin: 1rem auto 0 auto;
padding: 0 0 1rem 1rem;
}
.container h1{
font-weight: 900;
text-shadow: 2px 2px 5px rgb(0, 0, 0);
color:rgb(247, 159, 7)
}
body{
font-family: 'Inter', sans-serif;
}
</style>
<body>
<div class="container">
<h1>Range input</h1>
<label for="volume">Volume</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="10"><br><br>
<label for="volume">Volume</label><br>
<input type="range" id="volume" name="volume" min="0" max="100" list="markers">
<datalist id="markers">
<option value="0"></option>
<option value="25"></option>
<option value="50"></option>
<option value="75"></option>
<option value="100"></option>
</datalist>
</div>
</body>
</html>