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.
Love it! I tried it out and it worked great! Thanks for sharing! I look forward to seeing more from you.
ReplyDelete