Results 1 to 9 of 9

Thread: How does html code work?

  1. #1
    Join Date
    Mar 2013
    Beans
    2

    How does html code work?

    so i want to know how the html code produces the form displayed in the browser? any ideas guys?
    HTML Code:
     <head>
     <title>Exam entry</title>
     
    <script language="javascript" type="text/javascript">
     
    function validateForm() {
     var result = true;
     var msg="";
     
    if (document.ExamEntry.name.value=="") {
     msg+="You must enter your Name. \n";
     document.ExamEntry.name.focus();
     document.getElementById('name').style.color="red";
     result = false;
     }
     
    if (document.ExamEntry.subject.value=="") {
     msg+="You must enter the Subject. \n";
     document.ExamEntry.subject.focus();
     document.getElementById('subject').style.color="red";
     result = false;
     }
     
    if (document.ExamEntry.examinationnumber.value=="") {
     msg+="You must enter the Examination Number. \n";
     document.ExamEntry.examinationnumber.focus();
     document.getElementById('examination number').style.color="red";
     result = false;
     }
     
    if (msg=="") {
     return result;
     }
     
    {
     window.alert(msg)
     return result;
     }
     
    }
     </script>
     </head>
     <body>
     <p>
     <font face="Candara">
     <font size="2">
     <h1><u>Exam Entry Form</u></h1>
     <fieldset>
     <form name="ExamEntry" method="post" action="success.html">
     <table width="50%" border="0">
     <tr>
     <td id="name">Name</td>
     <td><input type="text" name="name" /></td>
     </tr>
     <tr>
     <td id="subject">Subject</td>
     <td><input type="text" name="subject" /></td>
     </tr>
     <tr>
     <tr>
     <td id="examination number">Examination Number</td>
     <td><input type="text"  name="examinationnumber" maxlength="4" 
     </tr>
     <tr>
     <script type="text/javascript">
    function validateRadio(obj,correct){
      var result = 0
      for(var i=0; i<obj.length; i++){
        if(obj[i].checked==true && obj[i].value==correct) result = 1
      }
      if(!result && obj.value == correct) result = 1
      return result
    }
    </script>
     <tr>
    <td><input onclick="if(!validateRadio(this,3)) alert('You have selected GCSCE')" name="a" value="1" type="radio"> GCSE
     </tr>
     <tr>
    <td><input onclick="if(!validateRadio(this,3)) alert('You have selected AS')" name="a" value="2" type="radio"> AS
     </tr>
     <tr>
    <td><input onclick="if(!validateRadio(this,3)) alert('You have selected A2')" name="a" value="4" type="radio"> A2
     </tr>
     </tr>
     <td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
     <td><input type="reset" name="Reset" value="Reset" /></td>
     </tr>
     </table>
     </form>
     </p></font></size></body>
    Last edited by varunendra; March 14th, 2013 at 02:27 PM. Reason: added html tags

  2. #2
    Join Date
    Jun 2010
    Location
    London, England
    Beans
    7,839
    Distro
    Ubuntu Development Release

    Re: Hey ive got a question.

    The browser is programmed to react in specific ways to the instructions in the web page.

    http://www.w3schools.com/html/default.asp

    Start learning Hyper Text Markup Language (HTML)

    Regards.
    It is a machine. It is more stupid than we are. It will not stop us from doing stupid things.
    Ubuntu user #33,200. Linux user #530,530


  3. #3
    Join Date
    Mar 2013
    Beans
    2

    I am new to programming guys,can anyone lend a hand please?

    How does this html code produces the form displayed in the browser and how does the javascript function performs the validation check.Am a new guys, i just started programming two weeks ago so i lack a lot of knowledge, so please no hate and finaly how does the html calls the validation routine?tnx

    HTML Code:
    <head>
     <title>Exam entry</title>
     
    <script language="javascript" type="text/javascript">
     
    function validateForm() {
     var result = true;
     var msg="";
     
    if (document.ExamEntry.name.value=="") {
     msg+="You must enter your Name. \n";
     document.ExamEntry.name.focus();
     document.getElementById('name').style.color="red";
     result = false;
     }
     
    if (document.ExamEntry.subject.value=="") {
     msg+="You must enter the Subject. \n";
     document.ExamEntry.subject.focus();
     document.getElementById('subject').style.color="red";
     result = false;
     }
     
    if (document.ExamEntry.examinationnumber.value=="") {
     msg+="You must enter the Examination Number. \n";
     document.ExamEntry.examinationnumber.focus();
     document.getElementById('examination number').style.color="red";
     result = false;
     }
     
    if (msg=="") {
     return result;
     }
     
    {
     window.alert(msg)
     return result;
     }
     
    }
     </script>
     </head>
     <body>
     <p>
     <font face="Candara">
     <font size="2">
     <h1><u>Exam Entry Form</u></h1>
     <fieldset>
     <form name="ExamEntry" method="post" action="success.html">
     <table width="50%" border="0">
     <tr>
     <td id="name">Name</td>
     <td><input type="text" name="name" /></td>
     </tr>
     <tr>
     <td id="subject">Subject</td>
     <td><input type="text" name="subject" /></td>
     </tr>
     <tr>
     <tr>
     <td id="examination number">Examination Number</td>
     <td><input type="text"  name="examinationnumber" maxlength="4" 
     </tr>
     <tr>
     <script type="text/javascript">
    function validateRadio(obj,correct){
      var result = 0
      for(var i=0; i<obj.length; i++){
        if(obj[i].checked==true && obj[i].value==correct) result = 1
      }
      if(!result && obj.value == correct) result = 1
      return result
    }
    </script>
     <tr>
    <td><input onclick="if(!validateRadio(this,3)) alert('You have selected GCSCE')" name="a" value="1" type="radio"> GCSE
     </tr>
     <tr>
    <td><input onclick="if(!validateRadio(this,3)) alert('You have selected AS')" name="a" value="2" type="radio"> AS
     </tr>
     <tr>
    <td><input onclick="if(!validateRadio(this,3)) alert('You have selected A2')" name="a" value="4" type="radio"> A2
     </tr>
     </tr>
     <td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
     <td><input type="reset" name="Reset" value="Reset" /></td>
     </tr>
     </table>
     </form>
     </p></font></size></body>
    Last edited by varunendra; March 14th, 2013 at 02:37 PM. Reason: added html tags

  4. #4
    Join Date
    Mar 2010
    Location
    India
    Beans
    8,175
    Distro
    Ubuntu 12.04 Precise Pangolin

    Re: Hey ive got a question.

    Duplicate threads merged.

    Please do not create multiple threads for same question. It dilutes community efforts to help.

    Thank you, and Welcome to the forums!

    PS:
    I have edited the Thread title to make it relevant to your question.

    Also, please use suitable tags while posting codes. For example, follow the 'Code tags example' link in my signature to see an example of 'Code' tags.
    The html/php code tags are located in the same place as code tag.
    Last edited by varunendra; March 14th, 2013 at 02:30 PM.
    Varun
    Help others by marking threads as [SOLVED], if they are. (See how)
    Wireless Script | Use Code Tags
    Am I not replying you? Perhaps this is why.

  5. #5
    Join Date
    Nov 2008
    Location
    Metro Boston
    Beans
    9,344
    Distro
    Kubuntu 14.04 Trusty Tahr

    Re: How does html code work?

    If you ask for help, please have the courtesy to check for responses and thank the people who helped you.

    Blog · Linode System Administration Guides · Android Apps for Ubuntu Users

  6. #6
    prodigy_ is offline May the Ubuntu Be With You!
    Join Date
    Mar 2008
    Beans
    1,219

    Re: How does html code work?

    First, you seem a bit confused. HTML doesn't produce anything. It's just a markup language that can be used to describe what should be where on the webpage when browser renders it. Particularly, <form></form> and <input></input> tags are used to describe forms. HTML by itself is completely static. For anything dynamic (say, evaluating conditions) you need to add a programming language, most commonly PHP and/or JS.

    Second, your questions seem too broad. If your code works, you probably should just leave it untouched. :) If it doesn't, then what exactly goes wrong?
    Last edited by prodigy_; March 14th, 2013 at 04:41 PM.

  7. #7
    Join Date
    Jan 2012
    Beans
    133
    Distro
    Ubuntu 13.04 Raring Ringtail

    Re: How does html code work?

    i think the only thing you should know at the beginning is that browsers decide how to produce the form by html codes that placed in the page and one can be deferent from the other one
    Last edited by woxuxow; March 14th, 2013 at 07:39 PM.

  8. #8
    Join Date
    Sep 2009
    Location
    California U.S.A.
    Beans
    398

    Re: How does html code work?

    Quote Originally Posted by prodigy_ View Post
    First, you seem a bit confused. HTML doesn't produce anything. It's just a markup language that can be used to describe what should be where on the webpage when browser renders it. Particularly, <form></form> and <input></input> tags are used to describe forms. HTML by itself is completely static. For anything dynamic (say, evaluating conditions) you need to add a programming language, most commonly PHP and/or JS.

    Second, your questions sound to broad. If your code works, you probably should just leave it untouched. If it doesn't, then what exactly goes wrong?
    This ^^. Your page that you created (I haven't tested it) is full of javascript. That is what is handling the form in the browser. All of your variables, functions, and if statements are javascript. Not html. The html is just the visual formatting of the page not the script backend.

  9. #9
    Join Date
    Feb 2008
    Beans
    251
    Distro
    Ubuntu 12.04 Precise Pangolin

    Re: How does html code work?

    The validation routine is a JavaScript function called "validateForm".

    Now have a look at the last <input> in the <form>... specifically where it says: "onclick="return validateForm();". That's how the validation routine is being called. If it returns "false" the form won't be forwarded to what is set as the "action" attribute on the <form> :

    HTML Code:
    <form name="ExamEntry" method="post" action="success.html">
    Hope that helps!


    To improve your understanding, try changing things on the page and opening it in your browser, and never ever stop reading Also, get a good text editor which will tell you when things are wrong, or weird.

    Good luck!
    Gp

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •