Education

How to Loop using JavaScript?

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">Loops in JavaScript are used to execute the same block of code a specified number of times or while a specified condition is true.<br /><br />In JavaScript there are two different kinds of loops which are for loop, which loops through a block of code a specified number of times and while loop, which loops through a block of code while a specified condition is true. <br /><br /><h3>JavaScript For Loop</h3><br />The for loop is used when you know in advance how many times the script should run.<br /><h4>Syntax: </h4>for(var=startvalue; var<=endvalue;var=var+increment)<br />{<br />code to be executed<br />}<br /><h4>Example:</h4><html><br /><head><br /></head><br /><body><br /><script type="text/javascript"><br />var i=0<br />for (i=0;i<=10;i++){</div><div style="text-align: justify;">document.write("The number is" +i)<br />document.write("<br/>")}<br /></script><br /></body><br /></html><br /><br />The above example defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 10. i will increase by 1 each time the loop runs. <br /><h4>Preview:</h4><script type="text/javascript">var i=0 for (i=0;i<=10;i++) {document.write("The number is" +i) document.write("<br/>")} </script> <br /><h3>JavaScript While Loop</h3><br />The while loop is ued when you want the loop to execute and continue executing while the specified condition is true.<br /><h4>Syntax: </h4>while (var<=endvalue)<br />{<br />code to be executed<br />}<br /><h4>Example: </h4><html><br /><head></head><br /><body><br /><script type="text/javascript"><br />var i=0<br />while(i<=10)<br />{<br />document.write("The number is "+i)<br />document.write("<br/>")<br />i=i+1<br />}<br /></script><br /></body><br /></html><br /><br />The example above defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 10. i will increase by 1 each time the loop runs.<br /><h4>Preview:</h4><script type="text/javascript">var i=0 while(i<=10) { document.write("The number is "+i) document.write("<br/>") i=i+1 } </script> <br /><h3>JavaScript do .... while Loop:</h3><br />The do .... while loop is a variant of the while loop. This loop will always execute a block of code Once, and then it will repeat the loop as long as the specified condition is true. The lop alway be executed at least once, even if the condition is false, because the code is executed before the condition is tested.<br /><h4>Syntax:</h4>do<br />{<br />code to be executed <br />}<br />while (var<=endvalue)<br /><h4>Example:</h4><html><br /><head></head><br /><body><br /><script type="text/Javascript"><br />var i=0<br />do<br />{<br />document.write("The number is "+i)<br />document.write("<br/>")<br />i=i+i<br />}<br />while (i<0)<br /></script><br /></body><br /></html><br /><h4>Preview:</h4><script type="text/Javascript">var i=0 do { document.write("The number is "+i) document.write("<br/>") i=i+i } while (i<0) </script> <br /><h3>JavaScrpt Break and Continue Statements</h3><br />There are two special statements that can be used inside loops: break and continue.<br /><h4>Break</h4>The break command will break the loop and continue executing the code that follows after the loop. <br /><h4>Example:</h4><html><br /><head></head><br /><body><br /><script type="text/javascript"><br />var i=0<br />for(i=0;i<=10;i++)<br />{<br />if (i==3) {break}<br />document.write("The number is " +i)<br />document.write("<br/>")<br />}<br /></script><br /></body><br /></html><br /><h4>Preview:</h4><script type="text/javascript">var i=0 for(i=0;i<=10;i++) { if (i==3) {break} document.write("The number is " +i) document.write("<br/>") } </script> <br /><h4>Continue</h4>The continue command will break the current loop and continue with the next value.<br /><h4>Example:</h4><html><br /><head></head><br /><body><br /><script type="text/javascript"><br />var i=0<br />for(i=0;i<=10;i++)<br />{<br />if (i==3) {continue}<br />document.write("The number is " +i)<br />document.write("<br/>")<br />}<br /></script><br /></body><br /></html><br /><h4>Preview:</h4><script type="text/javascript">var i=0 for(i=0;i<=10;i++) { if (i==3) {continue} document.write("The number is " +i) document.write("<br/>") } </script> <br /><h3 style="text-align: justify;"></h3><h4>Read Next:<a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a></h4><h3 style="text-align: justify;"><a name="more"></a></h3><h3 style="text-align: justify;">Related Search Terms</h3><ul style="text-align: left;"><li><h3> <a href="http://www.siteforinfotech.com/search?q=JavaScript+for+loop" target="_blank">Javascript For Loop</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/search?q=JavaScript+do+while+loop" target="_blank">Javascript Do While Loop</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/search?q=JavaScript+while+loop" target="_blank">JavaScript While Loop</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/search?q=JavaScript+break+continue" target="_blank">JavaScript Break and Continue</a></h3></li></ul><div style="text-align: justify;"><h3><br /> </h3><h3> Related Posts:<br /> </h3><ul><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3><a href="http://www.siteforinfotech.com/2013/07/create-simple-image-slideshow-using-javascript.html">How To Create Simple Image Slideshow Using JavaScript ?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/image-slideshow-with-navigation-buttons.html">Image Slideshow with Navigation Buttons Using JavaScript</a>  </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Slideshow with LInks</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/detecting-visitors-browser-using-javascript.html">How to Detect Visitor's Browser Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li></ul></div></div></div>

How to Loop using JavaScript?

Loops in JavaScript are used to execute the same block of code a specified number of times or while a specified condition is true. In JavaSc...

مزيد من المعلومات »

How to Show Pop Up Boxes Using JavaScript?

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">Using JavaScript you can create three kinds of pop-up boxes, Alert box, Confirm box and prompt box.</div><br /><h3 style="text-align: justify;">Alert Box</h3><div style="text-align: justify;"><br />An alert box is used if you want to make sure information comes through to the user. When an alert box pops up, the user will have to click on "OK" to processed. </div><h4 style="text-align: justify;">Syntax:</h4><div style="text-align: justify;">alert("Alert Text")</div><h4 style="text-align: justify;">Example: </h4><div style="text-align: justify;"><html></div><div style="text-align: justify;"><head></div><div style="text-align: justify;"><script type="text/javascript"></div><div style="text-align: justify;">function display_alert()</div><div style="text-align: justify;">{</div><div style="text-align: justify;">alert("This is an alert box!")</div><div style="text-align: justify;">}</div><div style="text-align: justify;"></script></div><div style="text-align: justify;"></head></div><div style="text-align: justify;"><body></div><div style="text-align: justify;"><input type="button" onclick="display_alert()" value="Display alert box"/></div><div style="text-align: justify;"></body></div><div style="text-align: justify;"></html></div><h4 style="text-align: justify;">Preview:</h4><script type="text/javascript">function display_alert() { alert("This is an alert box!") } </script><input onclick="display_alert()" type="button" value="Display alert box" /><br /><br /><br /><h3 style="text-align: justify;"></h3><h3 style="text-align: justify;"> Conform box</h3><br />A conform box is used if you want the user to verify or accept something. When a conform box pops up, the user will have to click either "OK" or "Cancel" to processed. If the user clicks "OK" the box returns true. If the user clicks "Cancel", the box returns false.<br /><h4 style="text-align: justify;">Syntax:</h4><div style="text-align: justify;">confirm{"Conform Text")</div><h4 style="text-align: justify;">Example:</h4><div style="text-align: justify;"><html></div><div style="text-align: justify;"><head></div><div style="text-align: justify;"><script type="text/javascript"></div>function display_conform(){<br /><br />r=confirm("Press a button");<br />if (r===true)<br />{<br />alert("You pressed OK!");<br />}<br />else<br />alert("You pressed Cancel");<br />}<br /><div style="text-align: justify;"></script></div><div style="text-align: justify;"><body></div><div style="text-align: justify;"><input type="button" onclick="display_conform()" value="Display a confirm box"/></div><div style="text-align: justify;"></body></div><div style="text-align: justify;"></html></div><h4 style="text-align: justify;">Preview:</h4><script type="text/javascript">function display_conform(){  r=confirm("Press a button"); if (r===true) { alert("You pressed OK!"); } else alert("You pressed Cancel"); } </script><input onclick="display_conform()" type="button" value="Display a confirm box" /><br /><br /><h3 style="text-align: justify;"></h3><h3 style="text-align: justify;"> Prompt Box</h3><br /><div style="text-align: justify;">A prompt box is used if you want the user to input a value before entering a page. When a prompt box pops up, the user will have to click "OK" or "Cancel" to processed entering in input value.</div><div style="text-align: justify;">If the use clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.</div><h4 style="text-align: justify;">Syntax:</h4><div style="text-align: justify;">prompt{"sometext", "defaultvalue"}</div><h4 style="text-align: justify;">Example: </h4><div style="text-align: justify;"><html></div><div style="text-align: justify;"><head></div><div style="text-align: justify;"><script type="text/javascript"></div>function display_prompt(){<br />name=prompt("Please enter your name", "Your Name");<br />if ((name!=null) && name!=" ")<br />{<br />alert("Hello "+name+"! How are you today?");<br />}<br />}<br /><div style="text-align: justify;"></script></div><div style="text-align: justify;"></head></div><div style="text-align: justify;"><input type="button"onclick="display_prompt()" value="Display a prompt box"/></div><div style="text-align: justify;"></body></div><div style="text-align: justify;"></html></div><h4 style="text-align: justify;">Preview:</h4><script type="text/javascript">function display_prompt(){ name=prompt("Please enter your name", "Your Name"); if ((name!=null) && name!=" ") { alert("Hello "+name+"! How are you today?"); } } </script> <input onclick="display_prompt()" type="button" value="Display a prompt box" /><br /><div style="text-align: justify;"><br /><h4>Read Next:<a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a></h4><h4><a name="more"></a></h4></div><h3 style="text-align: justify;">Related Search Terms</h3><ul style="text-align: left;"><li><h3> <a href="http://www.siteforinfotech.com/search?q=JavaScript+pop+up+box" target="_blank">Javascript Pop Up Boxes</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/search?q=JavaScript+alert+box" target="_blank">Javascript Alert Box </a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/search?q=JavaScript+conform+box" target="_blank">JavaScript Conform Box</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/search?q=JavaScript+prompt+box" target="_blank">JavaScript Prompt Box</a></h3></li></ul><div style="text-align: justify;"><h3><br /> </h3><h3> Related Posts: </h3><h3></h3><ul><li><h3> <a href="http://www.siteforinfotech.com/2013/07/create-simple-image-slideshow-using-javascript.html">How To Create Simple Image Slideshow Using JavaScript ?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/image-slideshow-with-navigation-buttons.html">Image Slideshow with Navigation Buttons Using JavaScript</a> </h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Slideshow with LInks</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/detecting-visitors-browser-using-javascript.html">How to Detect Visitor's Browser Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li></ul></div></div>

How to Show Pop Up Boxes Using JavaScript?

Using JavaScript you can create three kinds of pop-up boxes, Alert box, Confirm box and prompt box. Alert Box An alert box is used if you wa...

مزيد من المعلومات »

How to Write Conditional Statements in JavaScript?

<div dir="ltr" style="text-align: left;" trbidi="on">The different types of conditional statements used in JavaScript for making different decisions are as follows.<br /><br /><h3 style="text-align: left;">If Statement</h3><div style="text-align: left;"><br />This statement is used to execute some code only if a specified condition is true. </div><h4 style="text-align: left;">Syntax:</h4><div style="text-align: left;">if {condition}<br />{<br />code to be executed if condition is true <br />}</div><h4 style="text-align: left;">Example:</h4><div style="text-align: left;"><script type="text/javascript"><br />var d=new Date()<br />var time=d.getHours()<br />if (time<10)<br />{<br />document.write("<b>Good morning</b>")<br />}<br /></script></div><div style="text-align: left;"><br />This script writes "Good morning" greeting if the time is less than 10</div><br /><h3 style="text-align: left;">If .... elese statement</h3><div style="text-align: left;"><br />This statement is used to execute some code only if the condition is true and another code if the condition is false. </div><h4 style="text-align: left;">Syntax:</h4><div style="text-align: left;">if {condition}<br />{<br />code to be executed if condition is true<br />}<br />else<br />{<br />code to be executed if condition is not true<br />}</div><h4 style="text-align: left;">Example:</h4><div style="text-align: left;"><script type="text/javascript"><br />var d=new Date()<br />var time=d.getHours()<br />if (time<10)<br />{<br />document.write("Good morning")<br />}<br />else <br />{<br />document.write("Good Day")<br />}<br /></script><br /><br /><h4 style="text-align: left;">Preview:</h4><script type="text/javascript"> var d=new Date()  var time=d.getHours()  if (time<10)  {  document.write("Good morning")  }  else  {  document.write("Good Day")  }  </script></div><br /><br /><h3 style="text-align: left;">If .... else If ..... else statement</h3><div style="text-align: left;"><br />This statement is used to select one of many blocks of code to be executed.</div><h4 style="text-align: left;">Syntax:</h4><div style="text-align: left;">if {condition}<br />{<br />code to be executed if condition1 is true<br />}<br />else if {condition2}<br />{ <br />code to be executed if condition2 is true <br />}<br />else<br />{<br />code to be executed if condition1 and condition2 are not true.<br />}</div><h4 style="text-align: left;">Example:</h4><div style="text-align: left;"><script type="text/javascript"><br />var d=new Date()<br />var time=d.getHours()<br />if (time<10)<br />{<br />document.write("Good morning")<br />}<br />else if (time>=10 && time<16)<br />{<br />document.write("Good Day")<br />}<br />else<br />{<br />document.write("Hello World")<br />}<br /></script><br /><br /><h4 style="text-align: left;">Preview:</h4><script type="text/javascript"> var d=new Date()  var time=d.getHours()  if (time<10)  {  document.write("Good morning")  }  else if (time>=10 && time<16)  {  document.write("Good Day")  }  else  {  document.write("Hello World")  }  </script></div><br /><br /><h3 style="text-align: left;">Switch statement</h3><div style="text-align: left;"><br />This statement is used to select one of many blocks of code to be executed. </div><h4 style="text-align: left;">Syntax:</h4><div style="text-align: left;">switch(n)<br />{<br />case 1:<br />execute code block 1<br />break;<br />case 2:<br />execute code block 2<br />break;<br />default:<br />code to be executed if n is different from case 1 and 2<br />}</div><h4 style="text-align: left;">Example:</h4><div style="text-align: left;"><script type="text/javascript"><br />var d=new Date();<br />theDay=d.getDay();<br />switch(theDay)<br />{<br />case 5:<br />document.write("Good Friday");<br />break;<br />case 6:<br />document.write("Super Saturday");<br />break;<br />case 0:<br />document.write("Sleepy Sunday");<br />break;<br />default:<br />document.write("I am looking forward to this weekend!");<br />}</script></div><h4 style="text-align: left;">Preview:</h4><script type="text/javascript">var d=new Date(); theDay=d.getDay(); switch(theDay) { case 5: document.write("Good Friday"); break; case 6: document.write("Super Saturday"); break; case 0: document.write("Sleepy Sunday"); break; default: document.write("I am looking forward to this weekend!"); } </script> <br /><div style="text-align: left;"><h4>Read Next: <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a></h4><h4><a name="more"></a></h4><h3>Related Search Terms</h3><ul style="text-align: left;"><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/search?q=JavaScript+conditional+statement" target="_blank">Javascript Conditional Statements</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/search?q=JavaScript+if+if+else+statement" target="_blank">Javascript if and if else Statement </a></h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/search?q=JavaScript+if+condition" target="_blank">JavaScript if Condition Example</a></h3></li></ul><div style="text-align: justify;"><h3><br /> </h3><h3> Related Posts: </h3><h3></h3><ul><li><h3> <a href="http://www.siteforinfotech.com/2013/07/create-simple-image-slideshow-using-javascript.html">How To Create Simple Image Slideshow Using JavaScript ?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/image-slideshow-with-navigation-buttons.html">Image Slideshow with Navigation Buttons Using JavaScript</a> </h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Slideshow with LInks</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/detecting-visitors-browser-using-javascript.html">How to Detect Visitor's Browser Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li></ul></div></div></div>

How to Write Conditional Statements in JavaScript?

The different types of conditional statements used in JavaScript for making different decisions are as follows. If Statement This statement ...

مزيد من المعلومات »

How to Write JavaScript With HTML?

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">JavaScript is the most popular scripting language in the web to improve the design, validate forms, detect browsers, create cookies and many more client side functionalities and works in all major browsers, such as Internet Explorer, Mozilla Firefox, Google Chrome, Netscape, Opera and many more. <br /><br />It is a lightweight programming language consisting of lines of executable computer code and usually embedded directly into HTML pages. <br /><br />To write JavaScript with HTML page, you have to use the <script> tag along with the type attribute to define the scripting language. So the <script type="text/javascript"> and </script> tells where the javascript starts and end. <br /><br /><br /><h3>Different Ways to Write JavaScript with HTML</h3><br />There are different ways to write JavaScript with HTML, which are as follows.<br /><br /><h4>Scripts in the HEAD Section</h4>When scripts are placed in head section, they needs to be executed when they are called, or when an event is triggered and it will ensure that the script is loaded before anyone uses it.<br /><br />You can write <script> tag in the head section as follows.<br /><br /><html><br /><head><br /><script type="text/javascript"> <br /><i>javascript codes are written here</i><br /></script><br /></head><br /><body><br /></body><br /></html><br /><br /><h4>Scripts in the BODY section</h4>As in the head section, you can also place JavaScript codes in the body section using <script> tag and it will be executed when the page loads. <br /><br />You can write <script> tag in the body section as follows.<br /><br /><html><br /><head><br /></head><br /><body><br /><script type="text/javascript"> <br /><i>javascript codes are written here</i><br /></script><br /></body><br /></html><br /><br /><h4>Scripts in both the HEAD and BODY section</h4>You can write <script> tag in both the head and body section as follows.<br /><br /><html><br /><head><br /><script type="text/javascript"> </div><div style="text-align: justify;"><i>javascript codes are written here</i><br /></script><br /></head><br /><body><br /><script type="text/javascript"> <br /><i>javascript codes are written here</i><br /></script><br /></body><br /></html><br /><h4><br />Scripts Using an External JavaScript File</h4>If you needs to write same JavaScript code on several pages, you can write it on separate external page with a .js file extension and can link it to the HTML file.<br /><br />You can link external JavaScript file to HTML file as follows. <br /><br /><html><br /><head><br /><script src="javascript.js"> <br /></script><br /></head><br /><body><br /></body><br /></html>  <br /><h4>Read Next: <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html" rel="next">How to Write Conditional Statements in JavaScript?</a></h4><h4><a name="more"></a></h4><h3>Related Search Terms</h3><ul><li><h3><a href="http://www.siteforinfotech.com/search?q=how+JavaScript+HTML">How to link JavaScript with HTML</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/search?q=how+JavaScript+HTML">How to use JavaScript on HTML</a></h3></li></ul></div><div style="text-align: justify;"><h3><br /> </h3><h3> Related Posts: </h3><h3></h3><ul><li><h3> <a href="http://www.siteforinfotech.com/2013/07/create-simple-image-slideshow-using-javascript.html">How To Create Simple Image Slideshow Using JavaScript ?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/image-slideshow-with-navigation-buttons.html">Image Slideshow with Navigation Buttons Using JavaScript</a> </h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Slideshow with LInks</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/detecting-visitors-browser-using-javascript.html">How to Detect Visitor's Browser Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li></ul></div></div>

How to Write JavaScript With HTML?

JavaScript is the most popular scripting language in the web to improve the design, validate forms, detect browsers, create cookies and many...

مزيد من المعلومات »

How to create Changeable Date and Time Using JavaScript?

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">You can create changeable Date and Time using JavaScript Date object. JavaScript Date object will automatically hold the current date and time as its initial value. You can manipulate it easily by using different methods in Date object. The different methods in Date object I am going to use to create changeable Date and Time are as follows.</div><div style="text-align: justify;"><br /></div><ul style="text-align: justify;"><li>Date():    Returns today's date and time.</li><li>getDate(): Returns the day of the month from a Date object from 1-31.</li><li>getDay():  Returns the day of the week from a Date object from 1-6</li><li>getMonth():Returns the month from a Date object from 0-11</li><li>getFullYear(): Returns the year, as a four digit number from Date object.</li></ul><ul style="text-align: justify;"><li>getHours():   Returns the hour of a Date object from 0-23.</li><li>getMinutes(): Returns the minutes of a Date object from 0-59</li><li>getSeconds(): Returns the seconds of a Date object from 0-59</li></ul><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Do do rest of the work you have to create a new Date() object and needs to use that value to get date, month, day name and time with hours, minutes and seconds. You can create variables for day, month and year as follows.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><blockquote class="tr_bq">var now=new Date();<br />var today=now.getDate();<br />var month=now.getMonth();<br />var year=now.getFullYear();<br />var day=now.getDay();</blockquote></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">You can create variables for hours, minutes and seconds as follows.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><blockquote class="tr_bq">var now=new Date();<br />var hours=now.getHours();<br />var minutes=now.getMinutes();<br />var seconds=now.getSeconds();</blockquote></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">After getting month and day in number format, you can change it into name of the month and day by using the arrays as follows.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">var monthname=new Array(12)</div><div style="text-align: justify;">monthname[0]="January ";</div><div style="text-align: justify;">monthname[1]="February ";</div><div style="text-align: justify;">monthname[2]="March ";</div><div style="text-align: justify;">monthname[3]="April ";</div><div style="text-align: justify;">monthname[4]="May ";</div><div style="text-align: justify;">monthname[5]="June ";</div><div style="text-align: justify;">monthname[6]="July ";</div><div style="text-align: justify;">monthname[7]="August ";</div><div style="text-align: justify;">monthname[8]="Septmber ";</div><div style="text-align: justify;">monthname[9]="October ";</div><div style="text-align: justify;">monthname[10]="November ";</div><div style="text-align: justify;">monthname[11]="December ";</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">var dayname=new Array(7)</div><div style="text-align: justify;">dayname[0]="Sunday ";</div><div style="text-align: justify;">dayname[1]="Monday ";</div><div style="text-align: justify;">dayname[2]="Tuesday ";</div><div style="text-align: justify;">dayname[3]="Wednesday ";</div><div style="text-align: justify;">dayname[4]="Thrusday ";</div><div style="text-align: justify;">dayname[5]="Friday ";</div><div style="text-align: justify;">dayname[6]="Saturday "; </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><h3 style="text-align: justify;">Full HTML Code to Create Changeable Date</h3><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Here is a full HTML code to create changeable date, you can use these codes to display full date or you can customize to display in different format on your web page.</div><br /><pre class="prettyprint"><html><br /><body><br /><script type="text/javascript"><br />function displayDate(){<br />var now=new Date();<br />var today=now.getDate();<br />var month=now.getMonth();<br /><br />var monthname=new Array(12)<br />monthname[0]="January ";<br />monthname[1]="February ";<br />monthname[2]="March ";<br />monthname[3]="April ";<br />monthname[4]="May ";<br />monthname[5]="June ";<br />monthname[6]="July ";<br />monthname[7]="August ";<br />monthname[8]="Septmber ";<br />monthname[9]="October ";<br />monthname[10]="November ";<br />monthname[11]="December ";<br /><br />var year=now.getFullYear();<br />var day=now.getDay();<br /><br />var dayname=new Array(7)<br />dayname[0]="Sunday ";<br />dayname[1]="Monday ";<br />dayname[2]="Tuesday ";<br />dayname[3]="Wednesday ";<br />dayname[4]="Thrusday ";<br />dayname[5]="Friday ";<br />dayname[6]="Saturday ";<br /><br />document.write(monthname[month]+today+  ",   "+year+  "  "+dayname[day]);<br />}<br />window.onload=displayDate();<br /></script><br /></body><br /></html><br /></pre><br /><h4 style="text-align: left;"><b>Preview of Date Displayed: </b><script type="text/javascript">function displayDate(){ var now=new Date(); var today=now.getDate(); var month=now.getMonth();  var monthname=new Array(12) monthname[0]="January "; monthname[1]="February "; monthname[2]="March "; monthname[3]="April "; monthname[4]="May "; monthname[5]="June "; monthname[6]="July "; monthname[7]="August "; monthname[8]="Septmber "; monthname[9]="October "; monthname[10]="November "; monthname[11]="December ";  var year=now.getFullYear(); var day=now.getDay();  var dayname=new Array(7) dayname[0]="Sunday "; dayname[1]="Monday "; dayname[2]="Tuesday "; dayname[3]="Wednesday "; dayname[4]="Thrusday "; dayname[5]="Friday "; dayname[6]="Saturday ";  document.write(monthname[month]+today+  ",   "+year+  "  "+dayname[day]); } window.onload=displayDate(); </script></h4><br /><h3 style="text-align: left;">Full HTML Code to Create Changable Time</h3><br /><div style="text-align: justify;">Here is a full HTML code to create changeable time, you can use these codes to display full time or you can customize to display in different format on your web page. You can use these codes to <a href="http://www.siteforinfotech.com/2014/02/how-to-create-digital-clock-in-javascript.html" target="_blank">create digital clock using JavaScript</a>, which I have already posted in my previous post.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint"><html><br /><head></head><br /><body><br /><script type="text/javascript"><br />function startTime()<br />{<br />var today=new Date()<br />var h=today.getHours()<br />var m=today.getMinutes()<br />var s=today.getSeconds()<br />var ap="AM";<br /><br />//to add AM or PM after time<br /><br />if(h>11) ap="PM";<br />if(h>12) h=h-12;<br />if(h==0) h=12;<br /><br />//to add a zero in front of numbers<10<br /><br />m=checkTime(m)<br />s=checkTime(s)<br /><br />document.getElementById('clock').innerHTML=h+":"+m+":"+s+" "+ap<br />t=setTimeout('startTime()', 500)<br />}<br /><br />function checkTime(i)<br />{<br />if (i<10)<br />{ i="0" + i}<br />return i<br />}<br /><br />window.onload=startTime;<br /><br /></script><br /><br /><div id="clock"></div><br /></body><br /></html><br /></pre></div><h4 style="text-align: left;"><b><span style="font-weight: normal;"><b>Preview of Time Displayed:</b></span></b></h4><script type="text/javascript">function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds() var ap="AM";  //to add AM or PM after time  if(h>11) ap="PM"; if(h>12) h=h-12; if(h==0) h=12;  //to add a zero in front of numbers<10  m=checkTime(m) s=checkTime(s)  document.getElementById('clock').innerHTML=h+":"+m+":"+s+" "+ap t=setTimeout('startTime()', 500) }  function checkTime(i) { if (i<10) { i="0" + i} return i }  window.onload=startTime;  </script> <br /><div id="clock"></div><br /><a name="more"></a><br /><h3 style="text-align: left;">Related Posts: </h3><ul style="text-align: left;"><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2013/07/create-simple-image-slideshow-using-javascript.html">How To Create Simple Image Slideshow Using JavaScript ?</a> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2013/11/image-slideshow-with-navigation-buttons.html">Image Slideshow with Navigation Buttons Using JavaScript</a> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Slideshow with LInks</a> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3 style="text-align: left;"></h3><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a></h3><h3 style="text-align: left;"> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2014/02/detecting-visitors-browser-using-javascript.html">How to Detect Visitor's Browser Using JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a></h3></li><li><h3 style="text-align: left;"></h3><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li></ul></div>

How to create Changeable Date and Time Using JavaScript?

You can create changeable Date and Time using JavaScript Date object. JavaScript Date object will automatically hold the current date and ti...

مزيد من المعلومات »

How to Validate a HTML Form Using JavaScript?

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">In the previous post, I have described about <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">"How to create a simple form using HTML"</a> step by step with describing what is a form and what elements are used to create HTML form along with complete HTML code for a form. In this post I am going to describe about to Validate a this HTML Form Using JavaScript.<br /><br />You can validate a HTML Form Using JavaScript for the following circumstances.<br /><br /><ul><li>Whether or not the user left required fields empty</li><li>Whether or not the user entered a valid e-mail address</li><li>Whether or not the user entered a valid date </li><li>Whether or not the user entered text in numeric field or entered number in text field</li></ul><br />Here in this post I am going to describe you, "How to Validate Required Fields using JavaScript. <br /><br /><h3>Validating Required Field using JavaScript</h3><br />This JavaScript Function below checks if a required field has been left empty. If the required field is blank, an alert box alerts a message and the function returns false. If the value is entered the function returns true. <br /><br /><blockquote class="tr_bq">function validate_required(field, alerttxt)<br />{<br />with(field)<br />{<br />if (value===null||value==="")<br />{alert(alerttxt); return false;}<br />else {return true;}<br />}<br />}</blockquote><br /><h3>Complete JavaScript Code with HTML for Validating Required Field </h3></div><br />Here are the complete JavaScript codes along with complete HTML codes uses with the JavaScript Functions given below.<br /><br /><pre class="prettyprint"><html><br /><head><title>Subscription Form</title><br /><script type="text/javascript"><br />function validate_required(field, alerttxt)<br />{<br />with(field)<br />{<br />if (value===null||value==="")<br />{alert(alerttxt); return false;}<br />else {return true;}<br />}<br />}<br /><br />function validate_form(thisform)<br />{<br />with(thisform)<br />{<br />if (validate_required(fname, "First name must be filled out!")===false)<br />   {fname.foucus(); return false;}<br />if (validate_required(lname, "Last name must be filled out!")===false)<br />   {lname.foucus(); return false;}<br />if (validate_required(password, "Password must be filled out!")===false)<br />   {password.foucus(); return false;}<br />if (validate_required(rpassword, "Retype Password must be filled out!")===false)<br />   {rpassword.foucus(); return false;}<br />}<br />}<br /></script><br /></head><br /><body><br /><FORM METHOD='GET' ONSUBMIT="return validate_form(this);" ACTION="http://www.siteforinfotech.com/p/about-us.html"><br /><DIV>First Name:<INPUT TYPE='text' NAME='fname' VALUE='Enter First Name' SIZE=30 MAXLENGTH=25></DIV><br/><br /><DIV>Last Name:<INPUT TYPE='text' NAME='lname' VALUE='Enter Last Name' SIZE=30 MAXLENGTH=25></DIV><br/> <br /><DIV>Password:<INPUT TYPE='password' NAME='password' SIZE=30 MAXLENGTH=25></DIV><br/> <br /><DIV>Retype Password:<INPUT TYPE='password' NAME='rpassword' SIZE=30 MAXLENGTH=25></DIV><br/><br /><DIV>Email:<INPUT TYPE='text' NAME='email' VALUE='Enter Your Email' SIZE=30 MAXLENGTH=25></DIV><br/> <br /><br/><br /><INPUT TYPE='submit' VALUE='Submit'><INPUT TYPE='reset' VALUE='Reset'><br /></FORM><br /></body><br /></html><br /></pre><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /><h3 style="text-align: left;">Preview of the above HTML Code</h3><br /><script type="text/javascript">function validate_required(field, alerttxt) { with(field) { if (value===null||value==="") {alert(alerttxt); return false;} else {return true;} } }  function validate_form(thisform) { with(thisform) { if (validate_required(fname, "First name must be filled out!")===false)    {fname.foucus(); return false;} if (validate_required(lname, "Last name must be filled out!")===false)    {lname.foucus(); return false;} if (validate_required(password, "Password must be filled out!")===false)    {password.foucus(); return false;} if (validate_required(rpassword, "Retype Password must be filled out!")===false)    {rpassword.foucus(); return false;} } } </script> <br /><form action="http://www.siteforinfotech.com/p/about-us.html" method="GET" onsubmit="return validate_form(this);"><div>First Name:<input maxlength="25" name="fname" size="30" type="text" value="Enter First Name" /></div><br /><div>Last Name:<input maxlength="25" name="lname" size="30" type="text" value="Enter Last Name" /></div><br /><div>Password:<input maxlength="25" name="password" size="30" type="password" /></div><br /><div>Retype Password:<input maxlength="25" name="rpassword" size="30" type="password" /></div><br /><div>Email:<input maxlength="25" name="email" size="30" type="text" value="Enter Your Email" /></div><br /><br /><input type="submit" value="Submit" /><input type="reset" value="Reset" /></form></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><div style="text-align: justify;">Here I have posted this JavaScript and HTML codes  for sample only. You can write validation JavaScript to validate other fields for other circumstances.</div><br /><a name="more"></a><br /><br /><h3 style="text-align: left;">Related Posts: </h3><ul style="text-align: left;"><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2013/07/create-simple-image-slideshow-using-javascript.html">How To Create Simple Image Slideshow Using JavaScript ?</a> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2013/11/image-slideshow-with-navigation-buttons.html">Image Slideshow with Navigation Buttons Using JavaScript</a> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Slideshow with LInks</a> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2014/02/how-to-create-digital-clock-in-javascript.html">How to Create a Digital Clock in JavaScript?</a> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2014/02/detecting-visitors-browser-using-javascript.html">How to Detect Visitor's Browser Using JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a></h3></li><li><h3 style="text-align: left;"></h3><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li></ul></div></div>

How to Validate a HTML Form Using JavaScript?

In the previous post, I have described about "How to create a simple form using HTML" step by step with describing what is a form...

مزيد من المعلومات »

How to create a simple form using HTML?

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">From is a necessary element in any website or blog. Mostly they are used to take user information for any of the purposes like logging into the user account, creating user account, allowing to subscribe malling list, allowing users to submit comments and allowing users to contact website admin, support or sales team. <br /><br />Here I am going to describe <b>"How to create a simple form using HTML"</b> step by step with describing what is a form and what elements are used to create HTML form along with complete HTML code for a form. <br /><br />A form is an area that contain form elements. You must set up a form before adding in run to the web page. To setup a form, you need to specify two important information Method and Action. <br /><br />Method is a property tells the form how to transfer the data to the form processor. The value for method can be 'post' or 'get' In post method you are just posting information and method get means that you are just going to get another page. In almost all of the form post method is used.<br /><br />Action property tells what action the form should take when the user presses the submit button. Action is the URL to which you are posting the information. <br /><br />We have to use different HTML tags to create a form. The most commonly used HTML tags to create a form are listed below.<br /><br /><br /><h3>Different Tags for HTML Form </h3><br /><b><INPUT> Tag:</b> The most form tag is <INPUT> tag. The type of INPUT is specified with the TYPE attribute. This tag doesn't have its ending tag. The most commonly used INPUT types are listed below:<br /><br /><b>TEXT:</b> It is used for plain type of text input. The attributes used in this type are NAME, VALUE, SIZE and MAXLENGTH.<br /><br />Example: <INPUT TYPE="TEXT" NAME="UserName" VALUE="Username" SIZE=16 MAXLENGTH=15><br /><br /><br /><b>PASSWORD:</b> It is used for password type of text input. The attributes used in this type are NAME, VALUE, SIZE and MAXLENGTH.<br /><br />Example: <INPUT TYPE="PASSWORD" NAME="Password" VALUE="Password" SIZE=16 MAXLENGTH=15><br /><br /><br /><b>RADIO:</b> It is used for single choice input system. The attributes used in this type are NAME, VALUE and CHECKED<br /><br />Example: <INPUT TYPE="radio" NAME="sex" VALUE="M" CHECKED><br /><br /><br /><b>CHECKBOX:</b> It is used for multiple choice input system. The attributes used in this type are NAME and VALUE.</div><div style="text-align: justify;"><br />Example: <INPUT TYPE="checkbox" NAME="MCQ" VALUE="M"></div><div style="text-align: justify;"><br /><br /><b>RESET:</b> It is used to reset values entered in a form. Value is the attribute of RESET type of INPUT. </div><div style="text-align: justify;"></div><div style="text-align: justify;">Example: <INPUT TYPE="reset" VALUE="Clear Form"></div><div style="text-align: justify;"><br /><br /><b>SUBMIT:</b> It is used to submit values entered in a form. Value is the attribute of SUBMIT type of INPUT.<br /><br />Example: <INPUT TYPE="submit" VALUE="Submit"><br /><br /><b><TEXTAREA> Tag:</b> This tag is used to specify the area of the text. This tag makes a two dimensional text area, in which viewer can type from a short sentence to many paragraphs. This tag has its ending tag and it is mostly used to create comment form or contact form. The attributes in this tag are NAME, VALUE, COLS and ROWS.<br /><br />Example: <TEXTAREA NAME="Details" COLS=30 ROWS=5></TEXTAREA><br /><br /><b><SELECT> Tag: </b>This tag is used to create a menu that offers visitors a list of option to choose from. This tab has also its ending tag. The attributes in this tag are NAME, MULTIPLE and SIZE.<br /><br />Example: <SELECT NAME="Menu" MULTIPLE SIZE=3><OPTION>.....</SELECT><br /><br /><b><OPTION> Tag:</b> It is the mini tag of <SELECT> tag. This tag is used to define the options to choose from the drop-down list. SELECTED is the attribute of <OPTION> Tag.<br /><br />Example: <SELECT NAME="Menu" MULTIPLE SIZE=3><OPTION SELECTED>Programming Guide<OPTION>MCQs</SELECT><br /><br />Here is a sample form to allow users to create user and subscribe for the topics they want along with complete HTML code and its output. <br /><br /><h3>HTML Code to Create a Simple Form</h3></div><div style="text-align: justify;"><br /></div><pre class="prettyprint"><html><br /><head><title>Subscription Form</title></head><br /><body><br /><h1 align=center>Subscription Form</h1><br /><br/><br /><FORM METHOD='POST' ACTION=mailto:siteforinfotech@gmail.com><br /><DIV>First Name:<INPUT TYPE='text' NAME='fname' VALUE='Enter First Name' SIZE=30 MAXLENGTH=25></DIV><br/><br /><DIV>Last Name:<INPUT TYPE='text' NAME='lname' VALUE='Enter Last Name' SIZE=30 MAXLENGTH=25></DIV><br/> <br /><DIV>Password:<INPUT TYPE='password' NAME='password' SIZE=30 MAXLENGTH=25></DIV><br/> <br /><DIV>Retype Password:<INPUT TYPE='password' NAME='rpassword' SIZE=30 MAXLENGTH=25></DIV><br/><br /><DIV>Email:<INPUT TYPE='text' NAME='email' VALUE='Enter Your Email' SIZE=30 MAXLENGTH=25></DIV><br/> <br /><DIV>Sex:<INPUT TYPE='radio' NAME='sex' VALUE='M'>Male<INPUT TYPE='radio' NAME='sex' VALUE='F'>Female</DIV><br/><br /><DIV>Write About You:<TEXTAREA NAME='about' COLS=30 ROWS=4></TEXTAREA></DIV><br/><br /><DIV>Your Academic Level: <SELECT><OPTION>High School<OPTION>College Degree<OPTION>University Degree</SELECT></DIV><br/><br /><DIV>Select your Topic to Subscribe:<br/><INPUT TYPE='checkbox' NAME='topic' VALUE='M'>Multiple Choice Questions<br/><br /><INPUT TYPE='checkbox' NAME='topic' VALUE='T'>IT Tutorials<br/><br /><INPUT TYPE='checkbox' NAME='topic' VALUE='P'>Programming Guide<br/><br/><br /><INPUT TYPE='submit' VALUE='Submit'><INPUT TYPE='reset' VALUE='Reset'><br /></FORM><br /></body><br /></html><br /></pre><br /><h3 style="text-align: left;">Preview of the above HTML Code</h3><h1 align="center"> </h1><h1 align="center">Subscription Form</h1><br /><form action="mailto:siteforinfotech@gmail.com" method="POST"><div>First Name:<input maxlength="25" name="fname" size="30" type="text" value="Enter First Name" /></div><br /><div>Last Name:<input maxlength="25" name="lname" size="30" type="text" value="Enter Last Name" /></div><br /><div>Password:<input maxlength="25" name="password" size="30" type="password" /></div><br /><div>Retype Password:<input maxlength="25" name="rpassword" size="30" type="password" /></div><br /><div>Email:<input maxlength="25" name="email" size="30" type="text" value="Enter Your Email" /></div><br /><div>Sex:<input name="sex" type="radio" value="M" />Male<input name="sex" type="radio" value="F" />Female</div><br /><div>Write About You:<textarea cols="30" name="about" rows="4">

Your Academic Level:

Select your Topic to Subscribe:
Multiple Choice Questions
IT Tutorials
Programming Guide

Here I have posted the HTML codes for sample only. You can customize this form according to your requirement. You can extract and use any element to create your own form.

How to create a simple form using HTML?

From is a necessary element in any website or blog. Mostly they are used to take user information for any of the purposes like logging into ...

مزيد من المعلومات »

Education

How to Loop using JavaScript?

How to Show Pop Up Boxes Using JavaScript?

How to Write Conditional Statements in JavaScript?

How to Write JavaScript With HTML?

How to create Changeable Date and Time Using JavaScript?

How to Validate a HTML Form Using JavaScript?

How to create a simple form using HTML?

Related Posts:

How To Create Simple Image Slideshow Using JavaScript ?

Image Slideshow with Navigation Buttons Using JavaScript

How to Create JavaScript Image Slideshow with LInks

How to Display Date Format in JavaScript?

How to Create a Digital Clock in JavaScript?

What are the Different Ways to Redirect Page in JavaScript?

How to Detect Visitor's Browser Using JavaScript?

How to make rounded corners border using CSS

How to Create Custom CSS Template for Printing

How to Create Responsive Website or Blogger Template

…

…

…

الاكثر زيارة