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
---------------------------------------------------------------------------------------

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>




_________________________________________________________________________________

Progress Bar Tutorial in HTML5 By Pranay Tiwari

________________________________________________________________________


Comments

Popular posts from this blog

Sample HZ API's script to Create Contacts and Contact Points in Oracle

REST integration built-in OIC to read Large files with size more than 10MB