Stay N Tom

Showing a slice of what it means to be Thomas.

Pages

Tuesday, April 3, 2012

HTML 5

After today's lesson you will be able to do this.













go ahead type your first name, last name and a comment(your the only one that can see it though.)

This is a new unit called HTML 5. It is a combination between HTML and javascript

First we need the program to run HTML 5.click to download the program, Komodo. OPEN IT!!!



Type:

<html>
<head>
 <title> My Form</title>  
    <script>
 
        function loadForm(e) {
            var my_output = document.getElementById("say_hi");
            var first_name_object = document.getElementById("first_name");
            var last_name_object = document.getElementById("last_name");
            var boom = document.getElementById("boom");
            my_output.innerHTML = first_name_object.value + " " + last_name_object.value + "
</br>" + "
</br>" + boom.value;
        }
        function deleteForm(e) {
            var first_name_object = document.getElementById('first_name');
            first_name_object.value = "";
            var last_name_object = document.getElementById('last_name');
            last_name_object.value = "";
            var boom = document.getElementById('boom');
            boom.value = "";
        }
 
</script>
         
         
</head>

<body>

    <form id="toms_form">
<fieldset>
<label for="first_name">First Name: </label><input id="first_name" type="text" />
            <label for="last_name">Last Name: </label><input id="last_name" type="text" />  
         
<div>
<label for="boom">Comments </label><textarea cols="40" id="boom" placeholder="Enter your comments here..." rows="5"></textarea></div>
<div>
<input id="submit_button" onclick="loadForm(); false;" type="button" value="Submit" /></div>
<div>
<input id="reset_button" onclick="deleteForm(); false;" type="button" value="Reset" /></div>
</fieldset>
</form>
<output id="say_hi">
     
    </output>
 
 
</body>
</html>





At the top(make sure your not running any websites but Komodo) click the blue earth, click what you want it to run on(ex. google chrome), and hit run.Try it out. I like it.

1 comment:

  1. Love it! I tried it out and it worked great! Thanks for sharing! I look forward to seeing more from you.

    ReplyDelete