Basically, student detail form consist of various fields like name, Marks of subjects, total, average etc.
This is basic example of form in HTML. This should be able to help you to get some idea about to how to create some forms and make buttons works using HTML.
HTML is basic markup language to for any website, which is very compatible with most of the scripting language available in present day. So what do you need to know before we can move forward with this form creation :-
1. Basic knowledge about HTML
2.Difference between java script and HTML
3. Knowledge about basic HTML tags
4. Basic syntax about Java scripts
5. Function of Buttons
So, if you know how to that then we are good to go ahead with program.
When you are able to execute the code you should get form something like this :
 |
| Student Information Table |
This is simplest table you can hope to create using HTML, Those buttons will calculate the total, average , result and grade as given by programmer.
Now, that's not hard and confusing at all is it?
So, now you are wondering how to it?
Here is the code to try by yourself.
Hope you enjoyed this, i will be publishing more in near future. For more programs and fun follow me in google plus i will be posting new programs soon.
Now, that's not hard and confusing at all is it?
So, now you are wondering how to it?
Here is the code to try by yourself.
<html><head><title>Student information </title><script type="text/javascript">function calc(){form=document.getElementById("form1");sub1=form.sub1.value;sub2=form.sub2.value;sub3=form.sub3.value;sub4=form.sub4.value;// Find the total -- TypeCast the values of the textboxes to integer.total=parseInt(sub1)+parseInt(sub2)+parseInt(sub3)+parseInt(sub4);form.total.value= total; // display the total into textbox.form.avg.value= parseInt(total)/4; // typecast.// if any one sub is <35 then result is "Fail".if(sub1<35||sub2<35||sub3<35||sub4<35){ form.result.value="Fail";}else {form.result.value="Pass";}// Grading system.if(form.avg.value>90){form.grade.value="A";}else if (form.avg.value>80 && form.avg.value<90){form.grade.value="B";}else if (form.avg.value>70 && form.avg.value<80){form.grade.value="C";}else if (form.avg.value>60 && form.avg.value<70){form.grade.value="D";}else if (form.avg.value>=35 && form.avg.value<60){form.grade.value="E";}}</script></head><body><form id="form1"> Student information.<br /><br />Enter the Name : <input type="text" size="20" name="name"/><br />Marks in sub1 : <input type="text" size="20" name="sub1"/><br />Marks in sub2 : <input type="text" size="20" name="sub2"/><br />Marks in sub3 : <input type="text" size="20" name="sub3"/><br />Marks in sub4 : <input type="text" size="20" name="sub4"/><br /><input type="button" name="btn" value="Calculate" onclick="calc()"/><br />Total : <input type="text" size="20" name="total"/><br />Average : <input type="text" size="20" name="avg"/><br />Result : <input type="text" size="20" name="result"/><br />Grade : <input type="text" size="20" name="grade"/><br /><input type="reset" name="Btn2" value="Reset"/></form></body></html>
Hope you enjoyed this, i will be publishing more in near future. For more programs and fun follow me in google plus i will be posting new programs soon.
No comments:
Post a Comment