HTML5 Attributes and Function Calling

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

________________________________________________________________________


Pranay is a versatile Oracle Technical consultant. Adept in Oracle ERP development, SDLC management, design, and architecture. He has 11 years of extensive experience in Oracle Apps implementation engaged in technical development areas of Oracle Applications 11i/R12 E-Business Suite. He possesses sound knowledge in technologies like OAF, ADF, J2EE, MSCA, Oracle PaaS Cloud, Java Cloud services, ADF & XML Publisher. Currently, he is working for BirlaSoft Inc. USA. Being a Consistent solution provider in Oracle Developer Community forums earned him the title of "Technology Master”, Currently he holds 3rd position globally for providing a solution in Oracle Developer Community for the OAF Workspace. He has also authored several articles on ADF Technology, Fusion Financials, OAF & PaaS Cloud. He successfully presented the case study in Oracle Collaborate event forum on "How optimizing the Oracle Mobile App Solution Helped in Boosting the Productivity of a Warehouse."

Comments

Post a Comment

Popular posts from this blog

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

By -
1. Below Code will create Contact Point in Oracle . DECLARE    P_CONTACT_POINT_REC   HZ_CONTACT_POINT_V2PUB.CONTACT_POINT_REC_TYPE;    P_PHONE_REC           HZ_CONTACT_POINT_V2PUB.PHONE_REC_TYPE;    P_EDI_REC_TYPE        HZ_CONTACT_POINT_V2PUB.EDI_REC_TYPE;    P_EMAIL_REC_TYPE      HZ_CONTACT_POINT_V2PUB.EMAIL_REC_TYPE;    P_TELEX_REC_TYPE      HZ_CONTACT_POINT_V2PUB.TELEX_REC_TYPE;    P_WEB_REC_TYPE        HZ_CONTACT_POINT_V2PUB.WEB_REC_TYPE;    X_RETURN_STATUS       VARCHAR2 (1000);    X_CONTACT_POINT_ID    NUMBER;    X_MSG_COUNT           NUMBER;    X_MSG_DATA            VARCHAR2 (1000); BEGIN    P_CONTACT_POINT_REC.CONTACT_POINT_TYPE := 'EMAIL';    P_CONTACT_POINT_REC.OWN...
Read more

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

By -
Image
Processing large files in any integration requires a lot of effort and complex coding. Every integration platform has a limit size to read a file, similarly, the OIC service provides a limit of 10MB to read the file, if the size exceeds, then the below error will be encountered  Error Reason: Translation Error. Translation Error. Error while translating message to native format. Please make sure that the payload for the outbound interaction conforms to the schema and payload size does not exceed threshold. Error occured as File size exceeds maximum threshold size of 10 MB : Application Error Error Summary: ICS runtime execution error  In this article, we will learn how to read the big-size file in OIC.  Note only XML and CSV formats are supported for larger file read operations.  Here we will build an integration with a source FTP connector to read files containing sizes more than 10 MB  &  read them through the "Read File in Chunks" features and c...
Read more