View video tutorial
HTML Form Elements
HTML
Form elements are the elements carries the individual information.
Common HTML form elements
<input>, <option>, <label>, <button>, <textarea> etc.
Form element <input>
➔ This is one of the most and widely used form element in a plain text.
➔ type attribute of <input> element determines the input type and behaviour of the element.
➔ Most common input types are text, radio, checkbox, date, color, email, file, password, button, submit etc.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML form Tag input Example</title>
<meta charset="utf-8" />
<style>
input {
margin: 10px;
padding: 5px;
}
</style>
</head>
<body>
<h2>HTML form Tag inout Example</h2>
<form id="myform" action="./server-endpoint" method="post">
<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>
<input type="submit" value="Sent Now" onclick=submitForm(event)>
</div>
</form>
<script>
let myform = document.getElementById("myform");
let name = document.getElementById("name");
let email = document.getElementById("email");
let date = document.getElementById("date");
let color = document.getElementById("color");
function submitForm(e) {
if (myform.checkValidity()) {
let txt = "Name: " + name.value + "\nEmail: " + email.value + "\nDate: " + date.value + "\nColor: " + color.value;
alert("Form information submitted.\n" + txt);
event.preventDefault();
}
}
</script>
</body>
</html>
Copy code and click on the "tryitnow" button to see how it works.
Form element <label>
➔ <label> element specify the label of input element.
➔ for attribute of <label> element must match to the id attribute of <input> element.
➔ When the user clicks on the text of <label>, input element get focused and act accordingly.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML form Tag input type Example</title>
<meta charset="utf-8" />
<style>
input,
button {
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>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>Password:
<input type="password" name="password" id="password" required>
</label>
</div>
<div>
<label>Phone:
<input type="tel" name="tel" id="tel" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
placeholder="123-456-6789">
</label>
</div>
<div>
<label>File:
<input type="file" name="file" id="file" required>
</label>
</div>
<div>
<button type="submit" onclick=submitForm(event)>Submit Data</button>
</div>
</form>
<script>
let myform = document.getElementById("myform");
let name = document.getElementById("name");
let email = document.getElementById("email");
let password = document.getElementById("password");
let tel = document.getElementById("tel");
let file = document.getElementById("file");
function submitForm(e) {
if (myform.checkValidity()) {
let txt = "Name: " + name.value + "\nEmail: " + email.value + "\nDate: " + password.value + "\nPhone: " + tel.value + "\nFile: " + file.value;
alert("Form information submitted.\n" + txt);
event.preventDefault();
}
}
</script>
</body>
</html>
Copy and click on the "tryitnow" button to see how it works.