…..../…....
/……………
..
HTML Forms
Are a group of input elements that are required, when you want to collect some data from the site visitor.
Such as name, email address, credit card, etc.
There are various form elements available like text fields, radio buttons, checkboxes, etc.
We use <form>…</form> tag to design the form window then we add a set of elements on the webpage
such as (button – Textbox – radio button –checkbox…) to be used for entering data and saving it.
1. Adding textbox field to write the name or age:
Textbox
Is a graphical control element that enables the user to input text data such as name, address, …
through the tag <input type ="text">.
Page | 3
Steps for inserting textbox in the webpage:
1. Open Notepad program and create a new file and write the basic constructions for HTML as you studied
before.
2. Write the code <input type ="text"> between form tags <form>…</form>
3. Save the page with the extension .html.
4. Open the webpage through the browser, then you can write inside the textbox.
2. Adding the Password field:
Password
Is a graphical control element that enables the user to input characters which are displayed in a form of
symbols to be secured.
To add a password input field, we must add the password field (password), (●) the icon appears during
writing the password in order to hide the real password components.
Write the code <input type ="password"> in the form <form> …</form>
By the same method you can insert confirm password field
Page | 4
3. Adding radio button to the webpage:
Radio button
Is a tool used to select Only one option from a group of options; such as select the gender male or female.
Write the following code inside the form tag <input type ="radio">
EX 1:
<form> Single sign-on to the following: <br>
<input type = "radio" > Mail <br>
<input type = "radio" > Payroll <br>
<input type = "radio" > Self-service </form>
You still can choose and select all available options!
So, we add the attribute name with two radio buttons and give it the same value "a" to select
one option only.
EX 2:
<form> Single sign-on to the following: <br>
<input type = "radio" name="a" > Mail <br>
<input type = "radio" name="a" > Payroll <br>
<input type = "radio" name="a" > Self-service </form>
Ex 3:
Page | 5
…..../…..../……………
..
4. Adding checkbox to the form:
Checkbox
Is a tool used to select one option or more from a group of options at the same time. Write the following
code inside the form tag <input type ="checkbox">
Page | 9
5. Adding the command button:
Button
Is a tool used to execute a JavaScript function such as save or delete entered data, Write the following
code inside the form tag <input type = "button"> and use the attribute value with it to determine the
text which appears on the button <input type = "button" value = "OK">
There are three types of the command button:
1. Button to execute tasks. <input type = "button">
2. Submit to send data to another website “database”.
<input type = "Submit">
3. Reset to clear data which written in the toolboxes. <input type = "reset">
We have to use the attribute action with form to link between another webpage "server.php”
which receive the data after click on submit button.
Page | 10
…..../…..../……………
..
Basic Concepts of JavaScript Language
• With JavaScript you can develop your project website by using another language which used with HTML
• You can convert the static webpage to webpages more interactive by using the JavaScript language.
Basics of JavaScript:
1. The JavaScript commands and instructions are called statements.
2. Each JavaScript statement should end with the sign ; “semicolon”
3. JavaScript statements are written between <script>…</script> tag.
4. JavaScript statements are written inside HTML tags.
5. Put in mind the status of letters capital or small when writing JavaScript.
6. You can write the java script statements between </head>…</head> or </body>…</body>
Page | 17
JavaScript statements
A. alert statement
alert statement is used to display a message box to attract the attention to read it.
Using the command: alert (" the message");
▪ You have to write the message between double high quotations " ".
Steps for displaying message box in webpage when opening:
1- Open notepad and create new file and write the basic constructions for HTML.
2- Write the following code:
3- Save the page with the extension html.
4- Open the webpage in the browser you can see the message box.
Page | 18
B. document. write statement:
Used to display a message inside the same page (written text) through the following code:
<Script>
document. write ("the message");
</script>
Questions on Unit2 lesson One
QA: Choose the correct answer:
1. Script tag is considered from …………………
A) Html tags B) Form elements C) JavaScript D) Body tag
2.We use ……………………….…language to create more interactive webpages .
A) Html B) Form C) JavaScript D) Program
3.We use ………… to display a message box to attract the attention to read.
A) If statement B) Alert statement C) Document. Write statement D) None of the previous
4.JavaScript statements written inside……………………tag
A) <form>… </form> B) <script>… </script> C) </script>… <script/> D) function
5.We write ……………… (“welcome”); statement to display the word “welcome” inside a message box.
A) If B) alert C) document.write D) function
Page | 19
Calling the JavaScript statements …..../…..../……………
..
You noticed that all JavaScript statements within <script> </script> tag were implemented
automatically but If you want to execute the JavaScript statements when an event occurs (such
as: click on a button) you have to learn about Functions.
You can call the JavaScript statements when clicking on button by using function.
The function
Is a group of JavaScript statements written under a certain name; and will be executed when calling it.
1. It is preferable that the name of the function expresses its purpose.
2. The function contains one or more of JavaScript statements that will be executed in the same time.
3. Calling the function depends on an event occurrence.
Page | 22
First: Create a function:
To create a function, follow the coming steps:
1- Write the word function followed with its name and two brackets ().
2- Write the code to be executed (JavaScript statements) between brackets { }
function name of the function ()
{
The code to be executed
}
Steps for creating a function and calling it to display message box which is written in it
1- Open notepad and create new file and write the basic constructions for HTML.
2- Write the following code:
3- Save the page with the extension html or htm.
4- Open the webpage in the browser.
Nothing appears in the webpage because the code of function doesn't be
called so if you want to implement any function you must call it first.
Page | 23
Second: Calling the function:
You have to write the code as the following:
1. Insert input button to webpage.
2. Add the attribute onclick to the button where its value is the function name.
3. The button will be added by the code:
<input type = "button" onclick = "the function name()">
• The (message box) will not appear until the event (Welcome alert) occurs.
• Function will be called and executed only when a button is clicked
Page | 24
…..../…..../……………
..
Dealing with textbox content
In the following figure:
1. Add textbox and command button (view).
2. When clicking on command button. Message box will appear display the textbox content (the text
which in textbox)
3. Add name attribute to the form tag with value form1
4. Add name attribute to the textbox with value t1.
5. We access to the text which in the textbox through the code in the function: (form1.t1.value) that it
means the message box will displays the text which in the textbox t1 of form1
The result
Page | 27
Branching
JavaScript statements are being executed one by one but we may need to execute some of these
statements according to result of a conditional expression.
For example:
In case we check the score of the student, if the score is more than or equal to 50; will print a word
"Successful" unless doesn't execute the code.
To check the conditional expression, we will use If statement as the following:
if (condition expression) {Statements to be executed if the result of the expression is true}
1- Open notepad, create new file and write the basic constructions for HTML.
2- Write the following code:
The result
3- Save the page with the extension html or htm.
4- Open the webpage in the browser.
Page | 28
Code explanation:
1. The condition which required to check it – if (form1.t1.value>=50)
2. The code of function is written between two brackets { }
3. In case achieving the condition, the code will be executed.
4. In case the condition doesn't achieve the code won't be executed.
Some of operators that are used with condition:
> More than >= More than or equal
< Less than <= Less than or equal
== equal !== Not equal
Page | 29
Internet Safety
Identity theft:
It is the impersonation of someone or using his name or data for stealing him.
Malware (Malicious Software)
Is a software program designed to damage your computer system. To protect your system,
use Anti-virus program.
Spyware
Is a computer program that gather personal information of the users without their
permission to protect your computer you must use Anti-spyware programs that detect
programs like Spyware, Adware and files that control your internet.
Virus
Is a small program that can spread to infect the computer and program to protect your
computer you must use Anti-virus.
Secret codes:
They are all the personal data that must not be shown to everyone on the internet like
password or mobile phone number.
Page | 48
