View video tutorial
HTML Input Types
HTML
The <input> elements creates and carry input information in the form.
Form input type="text"
➔ <input type="text"> is used for plain text information in one line.
➔ type="text" defines a single-line text for a input field.
➔ Browsers read HTML document to display web contents properly.
The HTML text input look like below in a browser:
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML form Tag input type Example</title>
<meta charset="utf-8" />
<style>
input {
margin: 10px;
padding: 5px;
}
</style>
</head>
<body>
<h2>HTML form Tag input type Example</h2>
<form id="myform" action="./server-endpoint" method="post">
<div>
<label>Book ID:
<input type="text" name="bookid" id="bookid" required>
</label>
</div>
<div>
<label>Book Name:
<input type="text" name="bookname" id="bookname" required>
</label>
</div>
<div>
<label>Author Email:
<input type="email" name="authoremail" id="authoremail" required>
</label>
</div>
<div>
<label>Author Phone:
<input type="tel" name="authorphone" id="authorphone" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
placeholder="123-456-6789">
</label>
</div>
<div>
<label>Published Date:
<input type="date" name="publisheddate" id="publisheddate" required>
</label>
</div>
<div>
<label>Book Price:
<input type="number" name="bookprice" id="bookprice" required>
</label>
</div>
<div>
<label>Cover Page:
<input type="file" name="coverimage" id="coverimage" required>
</label>
</div>
<div>
<label>Background Color:
<input type="color" name="backgroundcolor" id="backgroundcolor" required>
</label>
</div>
<div>
<input type="submit" onclick=submitForm(event) value="Upload Data">
</div>
</form>
<script>
let myform = document.getElementById("myform");
let bookid = document.getElementById("bookid");
let bookname = document.getElementById("bookname");
let authoremail = document.getElementById("authoremail");
let authorphone = document.getElementById("authorphone");
let publisheddate = document.getElementById("publisheddate");
let bookprice = document.getElementById("bookprice");
let coverimage = document.getElementById("coverimage");
let backgroundcolor = document.getElementById("backgroundcolor");
function submitForm(e) {
if (myform.checkValidity()) {
let txt = "Book Id: " + bookid.value +
"\nBook Name: " + bookname.value +
"\nDate: " + authoremail.value +
"\nPhone Number: " + authorphone.value +
"\nPublished Date: " + publisheddate.value +
"\nBook Price: " + bookprice.value +
"\nCover Image: " + coverimage.value +
"\nBackground Color: " + backgroundcolor.value;
alert("Form information Uploaded.\n" + txt);
event.preventDefault();
}
}
</script>
</body>
</html>
Copy and click on the "TryitNow" button to see how it works.
Form input type="radio"
➔ <input type="text"> is used for plain text information in one line.
➔ type="text" defines a single-line text for a input field.
➔ Browsers read HTML document to display web contents properly.
The HTML radio input look like below in a browser:
Example (radio)
<!DOCTYPE html>
<html>
<head>
<title>HTML input type radio Example</title>
<meta charset="utf-8" />
<style>
input {
margin: 10px;
padding: 5px;
}
</style>
</head>
<body>
<h2>HTML input type radio Example</h2>
<form id="myform" action="./server-endpoint" method="post">
<fieldset>
<legend>Please fill out the form.</legend>
<div>
<label>Name:
<input type="text" name="name" id="name" required>
</label>
</div>
<div>
<label>Email:
<input type="email" name="email" id="email" required>
</label>
</div>
<div>
<label>Admission Date:
<input type="date" name="date" id="date" required>
</label>
</div>
<div>
<input type="radio" name="gender" id="trans" value="trans" required>
<label>Trans</label>
<input type="radio" name="gender" id="female" value="female" required>
<label>Female</label>
<input type="radio" name="gender" id="male" value="male" required>
<label>Male</label>
</div>
<div>
<label>Color:
<input type="color" name="color" id="color" required>
</label>
</div>
<div>
<input type="submit" value="Sent Now" onclick=submitForm(event)>
</div>
</fieldset>
</form>
<script>
let myform = document.getElementById("myform");
let name = document.getElementById("name");
let email = document.getElementById("email");
let date = document.getElementById("date");
let gender = "";
let color = document.getElementById("color");
document.querySelectorAll('input[name="gender"]').forEach(elmnt => {
elmnt.addEventListener("input", () => {
gender = elmnt.value;
});
});
function submitForm(e) {
if (myform.checkValidity()) {
let txt = "Name: " + name.value +
"\nEmail: " + email.value +
"\nDate: " + date.value +
"\nGender: " + gender +
"\nColor: " + color.value;
alert("Form information submitted.\n" + txt);
event.preventDefault();
}
}
</script>
</body>
</html>
Click on the "Try Now" button to see how it works.
Form input type="checkbox"
➔ <input type="text"> is used for plain text information in one line.
➔ type="text" defines a single-line text for a input field.
➔ Browsers read HTML document to display web contents properly.
HTML checkbox input allows users to select multiple options.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML input type checkbox Example</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML input type checkbox Example</h2>
<form action="" method="get">
<p>HTML checkbox input allows users to select multiple options.</p>
<input type="checkbox" id="java" name="java" value="java">
<label for="java"> I know JAVA</label>
<br>
<input type="checkbox" id="cpp" name="cpp" value="cpp">
<label for="cpp"> I know C++</label>
<br>
<input type="checkbox" id="python" name="python" value="python">
<label for="python"> I know Python</label>
</form>
</body>
</html>
Click on the "Try Now" button to see how it works.
Example (checkbox)
<!DOCTYPE html>
<html>
<head>
<title>HTML input type checkbox Example</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML input type checkbox Example</h2>
<form id="myform" action="./server-endpoint" method="post">
<p>HTML checkbox input allows users to select multiple options.</p>
<input type="checkbox" name="java" value="java">Java<br>
<input type="checkbox" name="cpp" value="cpp">C++<br>
<input type="checkbox" name="python" value="python">Python<br>
<div>
<input type="submit" value="Submit Data" onclick=submitForm(event)>
</div>
</form>
<script>
let myform = document.getElementById("myform");
let skill = new Set();
document.querySelectorAll('input[type="checkbox"]').forEach(elmnt => {
elmnt.addEventListener("change", () => {
if (elmnt.checked) {
skill.add(elmnt.value);
} else {
skill.delete(elmnt.value);
}
});
});
function submitForm(e) {
if (myform.checkValidity()) {
let txt = "\nSkill: " + Array.from(skill);
alert("Form information submitted.\n" + txt);
event.preventDefault();
} else {
event.preventDefault();
}
}
</script>
</body>
</html>
Copy code and click on the "TryitNow" button to see how it works.
Example (radio and checkbox)
<!DOCTYPE html>
<html>
<head>
<title>HTML input type radio Example</title>
<meta charset="utf-8" />
<style>
input {
margin: 10px;
padding: 5px;
}
</style>
</head>
<body>
<h2>HTML input type radio Example</h2>
<form id="myform" action="./server-endpoint" method="post">
<fieldset>
<legend>Please fill out the form.</legend>
<div>
<label>Name:
<input type="text" name="name" id="name" required>
</label>
</div>
<div>
<label>Email:
<input type="email" name="email" id="email" required>
</label>
</div>
<div>
<label>Date:
<input type="date" name="date" id="date" required>
</label>
</div>
<div>
<label>Color:
<input type="color" name="color" id="color" required>
</label>
</div>
<div>
<fieldset style="display:inline;">
<legend>Select Your Gender.</legend>
<input type="radio" name="gender" id="trans" value="trans" required>
<label>Trans</label>
<input type="radio" name="gender" id="female" value="female" required>
<label>Female</label>
<input type="radio" name="gender" id="male" value="male" required>
<label>Male</label>
</fieldset>
</div><br>
<div>
<fieldset style="display:inline;">
<legend>Select Your skill.</legend>
<input type="checkbox" name="java" id="java" value="java">Java<br>
<input type="checkbox" name="cpp" id="cpp" value="cpp">C++<br>
<input type="checkbox" name="python" id="python" value="python">Python<br>
</fieldset>
</div>
<div>
<input type="submit" value="Sent Now" onclick=submitForm(event)>
</div>
</fieldset>
</form>
<script>
let myform = document.getElementById("myform");
let name = document.getElementById("name");
let email = document.getElementById("email");
let date = document.getElementById("date");
let gender = "";
let skill = new Set();
let color = document.getElementById("color");
document.querySelectorAll('input[name="gender"]').forEach(elmnt => {
elmnt.addEventListener("input", () => {
gender = elmnt.value;
});
});
document.querySelectorAll('input[type="checkbox"]').forEach(elmnt => {
elmnt.addEventListener("change", () => {
if (elmnt.checked) {
skill.add(elmnt.value);
} else {
skill.delete(elmnt.value);
}
});
});
function submitForm(e) {
let skilldata = Array.from(skill);
if (myform.checkValidity()) {
let txt = "Name: " + name.value +
"\nEmail: " + email.value +
"\nDate: " + date.value +
"\nColor: " + color.value +
"\nGender: " + gender +
"\nSkill: " + skilldata;
alert("Form information submitted.\n" + txt);
event.preventDefault();
}
}
</script>
</body>
</html>
Copy and click on the "TryitNow" button to see how it works.