SAKKARA LANGUAGE SCHOOL
COMPUTER SHEET – SECOND TERM
Add Form
<html>
<head>
<title> My school </title>
</head>
<body>
<Form>
………………………………..
</Form>
</body>
</html>
Add Name Field
<html>
<head>
<title> My school </title>
</head>
<body>
<Form>
Name:-<input type="text">
</Form>
</body>
</html>
Add Password Field
<html>
<head>
<title> My school </title>
</head>
<body>
<Form>
Enter Password:-<input type="password">
</Form>
</body>
</html>
Add a radio button field
<html>
<head>
<title> My school </title>
</head>
<body>
<Form>
male<input type = "radio" name="a">
female<input type = "radio" name="a" >
</Form>
</body>
</html>
1
PREP2
SAKKARA LANGUAGE SCHOOL
COMPUTER SHEET – SECOND TERM
Add checkbox field
<html>
<head>
<title> My school </title>
</head>
<body>
<Form>
Arabic<input type = "checkbox" checked>
English<input type = "checkbox">
French<input type = "checkbox">
</Form>
</body>
</html>
Add Button input field
<html>
<head>
<title> My school </title>
</head>
<body>
<Form>
<input type = "button" value="ok">
</Form>
</body>
</html>
Add submit button
<html>
<head>
<title> My school </title>
</head>
<body>
<form action="process.php">
<input type = "submit">
</Form>
</body>
</html>
Add reset button
<html>
<head>
<title> My school </title>
</head>
<body>
<form >
<input type = "reset">
</Form>
</body>
</html>
2
PREP2
SAKKARA LANGUAGE SCHOOL
COMPUTER SHEET – SECOND TERM
Registration data Form
<html>
<head>
<title></title>
</head>
<body dir="ltr">
<center> registration form
<br><br><br>
<form action="pro.php">
name<input type="text">
<br><br><br>
password<input type="password">
<br><br><br>
confirm password<input type="password">
<br><br><br>
age (numeric)<input type="text">
<br><br><br>
gender<input type="radio">male
<input type="radio">female
<br><br><br>
proficiency language <input type="checkbox">english
<input type="checkbox">french
<input type="checkbox">germany
<br><br><br>
<input type="submit" value="save">
&nbsp&nbsp&nbsp
<input type="reset" value="new">
</center>
</form>
</body>
</html>
3
PREP2
SAKKARA LANGUAGE SCHOOL
COMPUTER SHEET – SECOND TERM
JavaScript Code
<script> … </script>
Alert message box
<html>
<body>
<script>
alert("welcome");
</script>
</body>
</html>
Document .write(…) statement
<html>
<body>
<script>
Document .write("computer and information technology subject");
</script>
</body>
</html>
Function creation
<script>
function function_ name ()
{
code to be executed
}
</script>
Function call
To call any function, follow these steps:
-Write an HTML tag for displaying a button within webpage.
-Write an 'onclick’ attribute to this button
-Write a function name as the value of that attribute (onclick).
As the following:
<input type="button" onclick="function name you need to call();">
4
PREP2
SAKKARA LANGUAGE SCHOOL
COMPUTER SHEET – SECOND TERM
PREP2
Create a function
that displays "Arab Republic of Egypt" via a message box
<html>
<body>
<form>
<input type="button" value="click me" onclick="country();">
</form>
<script>
function country()
{
alert ("Arab republic of Egypt");
}
</script>
</body>
</html>
Textbox content manipulation
<html>
<body>
<form name="form1">
<input type="text" name="t1">
<input type="button" onclick="printTextContent();" value="click me">
</form>
<script>
function print Text Content()
{
alert (form1.t1.value);
}
</script>
</body>
</html>
5
SAKKARA LANGUAGE SCHOOL
COMPUTER SHEET – SECOND TERM
Branching
IF (condition expression)
{
Statements to be executed if the result of the expression is true
}
Alert box with "success"
<html>
<body>
<form name="form1">
<input type="text" name="t1">
<input type="button" value="click me" onclick="total();">
</form>
<script>
function total()
{
if (form1.t1.value>=50)
{
alert("success");
}
}
</script>
</body>
</html>
Data validation
Leave the data field empty
Type any number of characters in textbox
Type a different password in the textbox
Type any data type in data field
6
PREP2
SAKKARA LANGUAGE SCHOOL
COMPUTER SHEET – SECOND TERM
(Required Field)
<html>
<body>
<form name="form1" action="data.php">
Student name <input type="text" name="text1" >
<br><br>
<input type="submit" value="send" onclick="return f1();"/>
</form>
<script>
function f1()
{
if (form1.text1.value=="")
{
alert("required field");
return false;
}
}
</script>
</body>
</html>
7
PREP2
SAKKARA LANGUAGE SCHOOL
COMPUTER SHEET – SECOND TERM
Define the minimum allowed length for the input
<html>
<head>
</head>
<body dir="rtl">
<form name="form1" action="data.php">
<input type="password" id="text1">
<input type="submit" value="send" onclick="return f1();"/>
</form>
<script>
function f1()
{
if (form1.text1.value.length<8)
{
alert("minimum allowed length 8 characters");
return false;
}
}
</script>
</body>
</html>
8
PREP2
SAKKARA LANGUAGE SCHOOL
COMPUTER SHEET – SECOND TERM
Matching the data entered in the two fields
<html>
<head>
</head>
<body dir="rtl">
<form name="form1" action="data.php">
password <input type="password" id="text1">
<br>
Re-type password <input type="password" id="text2">
<br>
<input type="submit" value="send" onclick="return f1();"/>
</form>
<script>
function f1()
{
if (form1.text1.value != = form1.text2.value)
{
alert("the two values do not match");
return false;
}
}
</script>
</body>
</html>
9
PREP2
SAKKARA LANGUAGE SCHOOL
COMPUTER SHEET – SECOND TERM
Prevent the user from entering type
<html>
<head>
</head>
<body dir="rtl">
<form name="form1" action="data.php">
<input type="text" id="text1">
<input type="submit" value="send" onclick="return f1();"/>
</form>
<script>
function f1()
{
if (isNaN(form1.text1.value))
{
alert("enter a numeric value");
return false;
}
}
</script>
</body>
</html>
10
PREP2
