HTML5 Attributes and Function Calling
HTML5 Attributes and Function Calling
This article will guide HTML5 Attributes and Elements
Code Snippet 1
1. How to make field autofocus and provide suggestion in the Input text field
<!DOCTYPE html>
<!--Oracle ERP eLearning Page-->
<html>
<h1>HTML5 Session by Pranay Tiwari</h1>
<body>
<form>
<Label for="FirstName">First Name</Label>
<input type="text" id="FirstName" name="FirstName" autofocus required placeholder="enter first name" </input>
</form>
</body>
</html>
The output of the above code
---------------------------------------------------------------------------------------
Code Snippet 2
2. How to make a field required and provide suggestion in text box like " Enter First Name"
_________________________________________________________________________________
Code Snippet 3
3. Adding different fields to the HTML page like Date , week
<!DOCTYPE html>
<!--Oracle ERP eLearning Page-->
<html>
<h1>HTML5 Session by Pranay Tiwari</h1>
<body>
<form>
<!--First Name Declaration-->
<div>
<Label for="FirstName">First Name</Label>
<input type="text" id="FirstName" name="FirstName" autofocus required placeholder="Enter First Name" </input>
</div>
<!--Second Name Declaration-->
<div>
<Label for="LastName">Last Name</Label>
<input type="text" id="LastName" name="LastName" required placeholder="Enter Last Name" </input>
</div>
<div>
<Label for="Date">Enter Date</Label>
<input type="date" id="Date" name="Date" </input>
</div>
<div>
<Label for="dtime">Enter Time</Label>
<input type="datetime-local" id="dtime" name="dtime" required</input>
</div>
<div>
<Label for="week">Enter Week</Label>
<input type="week" id="week" name="week" required </input>
</div>
<button type="submit">Register</button>
</form>
</body>
</html>
Output
________________________________________________________________________________
Code snippet 3 for Background color change, range, and Number field
<!DOCTYPE html>
<!--Oracle ERP eLearning Page-->
<html>
<h1>HTML5 Session by Pranay Tiwari</h1>
<body>
<form>
<!--First Name Declaration-->
<div>
<Label for="FirstName">First Name</Label>
<input type="text" id="FirstName" name="FirstName" autofocus required placeholder="Enter First Name" </input>
</div>
<!--Second Name Declaration-->
<div>
<Label for="LastName">Last Name</Label>
<input type="text" id="LastName" name="LastName" required placeholder="Enter Last Name" </input>
</div>
<div>
<Label for="Date">Enter Date</Label>
<input type="date" id="Date" name="Date" </input>
</div>
<div>
<Label for="dtime">Enter Time</Label>
<input type="datetime-local" id="dtime" name="dtime" required</input>
</div>
<div>
<Label for="week">Enter Week</Label>
<input type="week" id="week" name="week" required </input>
</div>
<div>
<label for="ns">Numeric Stepper</label>
<input type="number" name="ns" id="ns" required min="0" max="30" step="5">
</div>
<div>
<label for="rang">Range </label>
<input type="range" name="rang" id="rang" required min="0" max="30" value="0" >
<output id="rperc"></output>
</div>
<div>
<label for="col">select color </label>
<input type="color" name="col" id="col">
</div>
<button type="submit">Register</button>
</form>
<script>
document.getElementById("rang").onmousemove=function(){
let val=this.value;
document.getElementById("rperc").value=val+"%";
}
document.getElementById("col").onchange=function(){
let color=this.value;
document.body.style.background=color;
}
</script>
</body>
</html>
_________________________________________________________________________________
_________________________________________________________________________________
Code snippet for Develop
<!DOCTYPE html>
<!---->
<html>
<body>
<style>
meter{
height:5px;
}
</style>
<form>
<div>
<label for="meter"> Meter</label>
<meter id="meter" name="meter" value="21" min=0 max=50 low=10 high=20> </meter>
</div>
</form>
</body>
<script>
let count=0;
function loadmeter(val)
{
document.getElementById("meter").value=val;
val++;
setTimeout("loadmeter("+val+")",500);
}
loadmeter(count);
</script>
</html>
Output Code
_________________________________________________________________________________
________________________________________________________________________________
Code Snippet for the Progress bar to display the image
Note: In this code, Image will be created dynamically
<!DOCTYPE html>
<!--Progress bar in HTML-->
<html>
<h1>Progress Bar Tutorial in HTML5 By Pranay Tiwari</h1>
<head>
<style>
meter{
height:5px;
}
</style>
</head>
<body>
<form>
<div>
<progress id="Prgs" value="50" min="0" max="100"></progress>
<output id="perc"></output>
</div>
</form>
<script>
let count=0;
let interval;
function loadprogress(val){
let image=document.createElement("img");
document.body.appendChild(image);
document.getElementById("Prgs").value=val;
document.getElementById("perc").value=val+"%";
val++;
interval=setTimeout("loadprogress("+val+")",50);
if(val>50){
image.setAttribute("src","https://i.picsum.photos/id/136/200/300.jpg")
clearTimeout(interval)
}
}
loadprogress(count);
</script>
</body>
</html>
Output of above script
_________________________________________________________________________________
Code Snippet for Parameterizing Meter
<!DOCTYPE html>
<!---->
<html>
<body>
<style>
meter{
height:5px;
}
</style>
<form>
<div>
<label for="param1">Parameter</label>
<input type="textbox" id="param1" name="param1"></input>
<output id="paramoutput"></output>
</div>
<div>
<label for="meter"> Meter</label>
<meter id="meter" name="meter" value="30" min=0 max=100 low=30 high=40> </meter>
<output id="meteroutput"></output>
</div>
</form>
</body>
<script>
let count=0;
let interval;
let outparam;
function loadmeter(val)
{
document.getElementById("param1").oninput=function(){
outparam =this.value;
document.getElementById("paramoutput").value=outparam;
}
document.getElementById("meter").value=val;
document.getElementById("meteroutput").value=val+"%";
val++;
interval=setTimeout("loadmeter("+val+")",500);
if (val>outparam){
clearTimeout(interval)
}
}
loadmeter(count);
</script>
</html>
Output of above code
________________________________________________________________________________
______________________________________________________________________________
Code Snippet : Dynamically pass value to the progress counter to display image
<!DOCTYPE html>
<!--Progress bar in HTML-->
<html>
<h1>Progress Bar Tutorial in HTML5 By Pranay Tiwari</h1>
<head>
<style>
meter{
height:5px;
}
</style>
</head>
<body>
<form>
<div>
<input type="textbox" id="parameter" name="parameter"></input>
<output id="paramoutput"></output>
</div>
<div>
<progress id="Prgs" value="50" min="0" max="100"></progress>
<output id="perc"></output>
</div>
</form>
<script>
let count=0;
let interval;
let outparam;
function loadprogress(val){
let image=document.createElement("img");
document.body.appendChild(image);
document.getElementById("parameter").oninput=function(){
outparam =this.value;
document.getElementById("paramoutput").value=outparam;
}
document.getElementById("Prgs").value=val;
document.getElementById("perc").value=val+"%";
val++;
interval=setTimeout("loadprogress("+val+")",500);
if(val>outparam){
image.setAttribute("src","https://i.picsum.photos/id/136/200/300.jpg")
clearTimeout(interval)
}
}
loadprogress(count);
</script>
</body>
</html>
_________________________________________________________________________________
This article will guide HTML5 Attributes and Elements
Code Snippet 1
1. How to make field autofocus and provide suggestion in the Input text field
<!DOCTYPE html>
<!--Oracle ERP eLearning Page-->
<html>
<h1>HTML5 Session by Pranay Tiwari</h1>
<body>
<form>
<Label for="FirstName">First Name</Label>
<input type="text" id="FirstName" name="FirstName" autofocus required placeholder="enter first name" </input>
</form>
</body>
</html>
The output of the above code
---------------------------------------------------------------------------------------
HTML5 Session by Pranay Tiwari
-----------------------------------------------------------------------------------------Code Snippet 2
2. How to make a field required and provide suggestion in text box like " Enter First Name"
_________________________________________________________________________________
HTML5 Session by Pranay Tiwari
_______________________________________________________________________________Code Snippet 3
3. Adding different fields to the HTML page like Date , week
<!DOCTYPE html>
<!--Oracle ERP eLearning Page-->
<html>
<h1>HTML5 Session by Pranay Tiwari</h1>
<body>
<form>
<!--First Name Declaration-->
<div>
<Label for="FirstName">First Name</Label>
<input type="text" id="FirstName" name="FirstName" autofocus required placeholder="Enter First Name" </input>
</div>
<!--Second Name Declaration-->
<div>
<Label for="LastName">Last Name</Label>
<input type="text" id="LastName" name="LastName" required placeholder="Enter Last Name" </input>
</div>
<div>
<Label for="Date">Enter Date</Label>
<input type="date" id="Date" name="Date" </input>
</div>
<div>
<Label for="dtime">Enter Time</Label>
<input type="datetime-local" id="dtime" name="dtime" required</input>
</div>
<div>
<Label for="week">Enter Week</Label>
<input type="week" id="week" name="week" required </input>
</div>
<button type="submit">Register</button>
</form>
</body>
</html>
Output
________________________________________________________________________________
HTML5 Session by Pranay Tiwari
_______________________________________________________________________________Code snippet 3 for Background color change, range, and Number field
<!DOCTYPE html>
<!--Oracle ERP eLearning Page-->
<html>
<h1>HTML5 Session by Pranay Tiwari</h1>
<body>
<form>
<!--First Name Declaration-->
<div>
<Label for="FirstName">First Name</Label>
<input type="text" id="FirstName" name="FirstName" autofocus required placeholder="Enter First Name" </input>
</div>
<!--Second Name Declaration-->
<div>
<Label for="LastName">Last Name</Label>
<input type="text" id="LastName" name="LastName" required placeholder="Enter Last Name" </input>
</div>
<div>
<Label for="Date">Enter Date</Label>
<input type="date" id="Date" name="Date" </input>
</div>
<div>
<Label for="dtime">Enter Time</Label>
<input type="datetime-local" id="dtime" name="dtime" required</input>
</div>
<div>
<Label for="week">Enter Week</Label>
<input type="week" id="week" name="week" required </input>
</div>
<div>
<label for="ns">Numeric Stepper</label>
<input type="number" name="ns" id="ns" required min="0" max="30" step="5">
</div>
<div>
<label for="rang">Range </label>
<input type="range" name="rang" id="rang" required min="0" max="30" value="0" >
<output id="rperc"></output>
</div>
<div>
<label for="col">select color </label>
<input type="color" name="col" id="col">
</div>
<button type="submit">Register</button>
</form>
<script>
document.getElementById("rang").onmousemove=function(){
let val=this.value;
document.getElementById("rperc").value=val+"%";
}
document.getElementById("col").onchange=function(){
let color=this.value;
document.body.style.background=color;
}
</script>
</body>
</html>
_________________________________________________________________________________
HTML5 Session by Pranay Tiwari
_________________________________________________________________________________
Code snippet for Develop
<!DOCTYPE html>
<!---->
<html>
<body>
<style>
meter{
height:5px;
}
</style>
<form>
<div>
<label for="meter"> Meter</label>
<meter id="meter" name="meter" value="21" min=0 max=50 low=10 high=20> </meter>
</div>
</form>
</body>
<script>
let count=0;
function loadmeter(val)
{
document.getElementById("meter").value=val;
val++;
setTimeout("loadmeter("+val+")",500);
}
loadmeter(count);
</script>
</html>
Output Code
_________________________________________________________________________________
________________________________________________________________________________
Code Snippet for the Progress bar to display the image
Note: In this code, Image will be created dynamically
<!DOCTYPE html>
<!--Progress bar in HTML-->
<html>
<h1>Progress Bar Tutorial in HTML5 By Pranay Tiwari</h1>
<head>
<style>
meter{
height:5px;
}
</style>
</head>
<body>
<form>
<div>
<progress id="Prgs" value="50" min="0" max="100"></progress>
<output id="perc"></output>
</div>
</form>
<script>
let count=0;
let interval;
function loadprogress(val){
let image=document.createElement("img");
document.body.appendChild(image);
document.getElementById("Prgs").value=val;
document.getElementById("perc").value=val+"%";
val++;
interval=setTimeout("loadprogress("+val+")",50);
if(val>50){
image.setAttribute("src","https://i.picsum.photos/id/136/200/300.jpg")
clearTimeout(interval)
}
}
loadprogress(count);
</script>
</body>
</html>
Output of above script
_________________________________________________________________________________
Progress Bar Tutorial in HTML5 By Pranay Tiwari
_________________________________________________________________________________Code Snippet for Parameterizing Meter
<!DOCTYPE html>
<!---->
<html>
<body>
<style>
meter{
height:5px;
}
</style>
<form>
<div>
<label for="param1">Parameter</label>
<input type="textbox" id="param1" name="param1"></input>
<output id="paramoutput"></output>
</div>
<div>
<label for="meter"> Meter</label>
<meter id="meter" name="meter" value="30" min=0 max=100 low=30 high=40> </meter>
<output id="meteroutput"></output>
</div>
</form>
</body>
<script>
let count=0;
let interval;
let outparam;
function loadmeter(val)
{
document.getElementById("param1").oninput=function(){
outparam =this.value;
document.getElementById("paramoutput").value=outparam;
}
document.getElementById("meter").value=val;
document.getElementById("meteroutput").value=val+"%";
val++;
interval=setTimeout("loadmeter("+val+")",500);
if (val>outparam){
clearTimeout(interval)
}
}
loadmeter(count);
</script>
</html>
Output of above code
________________________________________________________________________________
______________________________________________________________________________
Code Snippet : Dynamically pass value to the progress counter to display image
<!DOCTYPE html>
<!--Progress bar in HTML-->
<html>
<h1>Progress Bar Tutorial in HTML5 By Pranay Tiwari</h1>
<head>
<style>
meter{
height:5px;
}
</style>
</head>
<body>
<form>
<div>
<input type="textbox" id="parameter" name="parameter"></input>
<output id="paramoutput"></output>
</div>
<div>
<progress id="Prgs" value="50" min="0" max="100"></progress>
<output id="perc"></output>
</div>
</form>
<script>
let count=0;
let interval;
let outparam;
function loadprogress(val){
let image=document.createElement("img");
document.body.appendChild(image);
document.getElementById("parameter").oninput=function(){
outparam =this.value;
document.getElementById("paramoutput").value=outparam;
}
document.getElementById("Prgs").value=val;
document.getElementById("perc").value=val+"%";
val++;
interval=setTimeout("loadprogress("+val+")",500);
if(val>outparam){
image.setAttribute("src","https://i.picsum.photos/id/136/200/300.jpg")
clearTimeout(interval)
}
}
loadprogress(count);
</script>
</body>
</html>
_________________________________________________________________________________
Comments
Post a Comment