-------- Page 1 (Lecture #8-01.jpg) ---------
Faculty of Information Technology – Tripoli University

مقدمة في برمجة الانترنت
Introduction to Internet Programming

[ ITGS226 ]

المحاضرة الثامنة

أستاذة المادة
أ. وفاء حسين المصباحي

HTML5
CSS3
XML
PHP
Cloud
js
flat
header
.com
footer
.net

ربيع 2025

-------- Page 2 (Lecture #8-02.jpg) ---------
المواضيع التي سيتم دراستها في مقرر : مقدمة في برمجة الإنترنت
Introduction to Internet Pr ogramming
المحاضرة الثامنة

1
Forms . النماذج

-------- Page 3 (Lecture #8-03.jpg) ---------
Forms النماذج

- النموذج أو الإستماراة Form يستخدم لتجميع مجموعة مختلفة من مدخلات المستخدم user iputs مثل : الإسم name الإيميل email address ورقم الهاتف phone number أو معلومات عن بطاقة الإئتمان credit card .

: الشكل العام

<form>
.
.
.
</form>

- الوسم <form> يحتوي على أنواع مختلفة من المدخلات input مثل : text fields و checkboxes و radio buttons و submit buttons وغيرها... تسمى controls.

- المستخدمون users يقومون بإكمال النموذج form بإستخدام controls مثل إدخال text أو إختيار item وغيرها ويرسل مدخلات النموذج إلى web server ليقوم بمعالجتها.

-------- Page 4 (Lecture #8-04.jpg) ---------
Forms النماذج

سمات/خصائص Attributes لعنصر النموذج Form :

- خاصية action : التي تحدد اسم الملف البرمجي الذي سيقوم بمعالجة البيانات المدخلة في النموذج ويكون الملف البرمجي مكتوبا بإحدى لغات البرمجة مثل PHP أو ASP.NET أو JSP وغيرها.

- خاصية method : التي تحدد طريقة إرسال البيانات إلى الملف البرمجي المذكور سابقا بإحدى الطريقتين:

• الطريقة get حيث يتم إرسال البيانات في شريط العنوان في المستعرض بعد اسم الملف البرمجي بشكل أزواج ( مفتاح=قيمة ) انظر للرابط التالي على سبيل المثال:

http://www.site.com/file.php?name=Mukhtar&age=23&job=ComputerEngin

القيم المرسلة                       الملف البرمجي

• الطريقة post حيث يتم إرسال البيانات بشكل غير ظاهر في شريط العنوان ( يتم إرسالها مع ترويسة طلب HTTP ).

-------- Page 5 (Lecture #8-05.jpg) ---------
Forms النماذج

- خاصية name : التي تخصص اسم للنموذج Form ، والذي يجب أن يكون الإسم فريد عن بقية أسماء النماذج Forms في الوثيقة document ويجب ألا يكون فاضي empty .

- خاصية target : تحدد أين سيتم عرض النتيجة التي ستسلم بعد تقديم النموذج Form ، القيم المحتملة : _blank ، _self ، _parent ، _top .
3

-------- Page 6 (Lecture #8-06.jpg) ---------
Forms النماذج

: Form elements عناصر النموذج
• <fieldset> & <legend>
• <label>
• <input> & its types & its attributes
• <textarea>
• <select> & <option> & <optgroup>
• <datalist>
• <button>

4

-------- Page 7 (Lecture #8-07.jpg) ---------
Forms النماذج

<fieldset> & <legend>

• The <fieldset> element is used to group related data in a form.

• The <fieldset> tag draws a box around the related elements.

• The <legend> element defines a caption for the <fieldset> element.

5

-------- Page 8 (Lecture #8-08.jpg) ---------
Forms النماذج

<label>

• The <label> tag defines a label for several elements such as input, textarea, select, etc.

• labels will benefit screen reader users (will read out loud the label, when the user is focused on the element) and users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the <label> element, it toggles the input (this increases the hit area).

• The for attribute of <label> must be equal to the id attribute of the related element to bind them together.

• A label can also be bound to an element by placing the element inside the <label> element.

6

-------- Page 9 (Lecture #8-09.jpg) ---------
Forms النماذج

<input>

• This is the most commonly used element within HTML forms.

• An input element can be of type text field, password field, checkbox, radio button, submit button, reset button, file select box, as well as several new input types introduced in HTML5.

• The default value of the type attribute is "text".

7

-------- Page 10 (Lecture #8-10.jpg) ---------
Forms
النماذج

<input type="">

• <input type="text">
• <input type="password">
• <input type="hidden">
• <input type="submit">
• <input type="reset">
• <input type="button">
• <input type="image">
• <input type="radio">
• <input type="checkbox">
• <input type="file">
• <input type="date">

• <input type="datetime-local">
• <input type="time">
• <input type="week">
• <input type="month">
• <input type="search">
• <input type="tel">
• <input type="url">
• <input type="email">
• <input type="number">
• <input type="range">
• <input type="color">

8

-------- Page 11 (Lecture #8-11.jpg) ---------
Forms النماذج

<input type="">

► <input type="text">
    defines a single-line text input field.

► <input type="password">
    defines a password field. The characters in a password field
    are masked (shown as asterisks or circles).

► The <input type="hidden">
    defines a hidden input field (not visible to a user). This
    field let web developers include data that cannot be seen
    or modified by users when a form is submitted.

► <input type="submit">
    defines a button for submitting form data to a form-handler
    which is typically a server page with a script for processing
    input data that is specified in the form's action attribute.

► <input type="reset">
    defines a reset button that will reset all form values to
    their default values.

► <input type="button">
    defines a button, mostly used with a JavaScript to
    activate a script inside a <button>.

► <input type="image">
    defines an image as a submit button. The path to the
    image is specified in the src attribute.

► <input type="radio">
    defines a radio button. Radio buttons let a user select
    ONLY ONE of a limited number of choices. The radio
    group must have share the same name (the value of
    the name attribute) to be treated as a group. To make a
    radio button selected by default, add the attribute
    checked to the input element.

9

-------- Page 12 (Lecture #8-12.jpg) ---------
Forms النماذج

<input type="">
▶ <input type="checkbox">
   defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. The name is used to group multiple checkboxes together. To make a checkbox selected by default, add the attribute checked to the input element.

▶ <input type="file">
   defines a file-select field and a "Browse" button for file uploads. It allows a user to browse for a local file and send it as an attachment with the form data. It has the attribute accept that specifies a filter for what file types the user can pick from the file input dialog box e.g. <input accept="audio/*,video/*,image/*"> or <input accept=".jpg">.

▶ <input type="date">
   is used for input fields that should contain a date. The resulting value includes the year, month and day.

▶ <input type="datetime-local">
   specifies a date and time input field, with no time zone. The resulting value includes the year, month, day and time.

▶ <input type="time">
   allows the user to select a time (no time zone).

▶ <input type="week">
   allows the user to select a week and year.

▶ <input type="month">
   allows the user to select a month and year. The format is "YYYY-MM".

▶ The <input type="search">
   is used for search fields (a search field behaves like a regular text field).

10

-------- Page 13 (Lecture #8-13.jpg) ---------
Forms النماذج

<input type="">

- The <input type="tel">
  is used for input fields that should contain a telephone number.

- The <input type="url">
  is used for input fields that should contain a URL address.

- <input type="email">
  is used for input fields that should contain an e-mail address. The input value is automatically validated to ensure it is a properly formatted e-mail address.

- <input type="number">
  defines a numeric input field. Restrictions can be set using the attributes: max, min, step or value.

- The <input type="range">
  defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes

- <input type="color">
  used for input fields that should contain a color. The default value is #000000 (black).

11

-------- Page 14 (Lecture #8-14.jpg) ---------
Forms
النماذج

: input عناصر Attributes سمات/خصائص

Attribute            Value                Description
name                 text                 Specifies the name of an <input> element
required             required             Specifies that an input field must be filled out before submitting the form
autofocus            autofocus            Specifies that an <input> element should automatically get focus when the page loads
readonly             readonly             Specifies that an input field is read-only
disabled             disabled             Specifies that an <input> element should be disabled
placeholder          text                 Specifies a short hint that describes the expected value of an <input> element

autocomplete         on                   Specifies whether an <input> element should have autocomplete enabled
                     off

accept               file_extension       Specifies a filter for what file types the user can pick from the file input dialog box (only for type="file")
                     audio/*
                     video/*
                     image/*

checked              checked              Specifies that an <input> element should be pre-selected when the page loads (for type="checkbox" or type="radio")

max                  number               Specifies the maximum value for an <input> element
                     date

maxlength            number               Specifies the maximum number of characters allowed in an <input> element

min                  number               Specifies a minimum value for an <input> element
                     date

minlength            number               Specifies the minimum number of characters required in an <input> element

multiple             multiple             Specifies that a user can enter more than one value in an <input> element

pattern              regexp               Specifies a regular expression that an <input> element's value is checked against

size                 number               Specifies the width, in characters, of an <input> element

step                 number               Specifies the interval between legal numbers in an input field

value                text                 Specifies the value of an <input> element

12

-------- Page 15 (Lecture #8-15.jpg) ---------
Forms النماذج

- (1)مثال:   نموذج Form يحتوي على عناصر إدخال input element مختلفة.

<html lang="en">
  <head>
    <title> form </title>
    <meta charset='utf-8'>
  </head>
  <body>
    <form>
      <input type="text">
      <input type="number">
      <input type="password">
      <input type="email">
      <input type="tel">
    </form>
  </body>
</html>

13

-------- Page 16 (Lecture #8-16.jpg) ---------
( program#40.html ) عملي

EXPLORER
HTML LANGUAGE
program#27.html
program#28.html
program#29.html
program#30.html
program#31.html
program#32.html
program#33.html
program#34.html
program#35.html
program#36.html
program#37.html
program#38.html
program#39.html
program#40.html

OUTLINE
TIMELINE

program#40.html

HTML language

<html lang="en">
  <head>
    <title>   form   </title>
    <meta charset="utf-8">
  </head>
  <body>
    <form>
      <input type="text">
      <input type="number">
      <input type="password">
      <input type="email">
      <input type="tel">
    </form>
  </body>
</html>

Ln 8, Col 22   Spaces: 4   UTF-8   CRLF   HTML

14

-------- Page 17 (Lecture #8-17.jpg) ---------
( program#40.html ) عملي

form
file:///C:/Users/Z10/Desktop/HTML%20langu...

form
file:///C:/Users/Z10/Desktop/HTML%20langu...

wafa elmisbahi         0
925276841
                       *****
                                           wafa@yahoo.com

15

-------- Page 18 (Lecture #8-18.jpg) ---------
Forms النماذج

- مثال(2): لعمل نموذج Form لتسجيل الدخول login .

<html lang="en">
<head>
    <title> form2 </title>
    <meta charset='utf-8'>
</head>
<body>
    <form>
        <label>user name</label>
        <input type="text">
        <br/>
        <label>pass word</label>
        <input type="password">
        <br/>
        <input type="submit">
    </form>
</body>
</html>

16

-------- Page 19 (Lecture #8-19.jpg) ---------
( program#41.html ) عملي

EXPLORER
HTML LANGUAGE
program#28.html
program#29.html
program#30.html
program#31.html
program#32.html
program#33.html
program#34.html
program#35.html
program#36.html
program#37.html
program#38.html
program#39.html
program#40.html
program#41.html

OUTLINE
TIMELINE

program#41.html
program#41.html > html > body > form

1  <html lang="en">
2    <head>
3      <title>      form2      </title>
4      <meta charset='utf-8'>
5    </head>
6    <body>
7      <form>
8        <label>user name</label>
9        <input type="text">
10       <br/>
11       <label>pass word</label>
12       <input type="password">
13       <br/>
14       <input type="submit">
15     </form>
16   </body>
17 </html>

Ln 7, Col 15   Spaces: 4   UTF-8   CRLF   HTML

-------- Page 20 (Lecture #8-20.jpg) ---------
( program#41.html ) عملي

form2

user name [____________________]
pass word [____________________]
Submit

form2

user name  ahmed [__________]
pass word  ••••• [__________]
Submit

18

-------- Page 21 (Lecture #8-21.jpg) ---------
Forms
النماذج

- مثال(3): المثال السابق بالإضافة إلى ربط input بـ label باستخدام الخاصيتين for و id، وجعل تعبئة
البيانات إجباري بإستخدام الخاصية required، وإضافة إسم للزر بإستخدام خاصية value.

<html lang="en">
    <head>
        <title> form3 </title>
        <meta charset="utf-8">
    </head>
    <body>
        <form>
            <label for="txt">user name</label>
            <input id="txt" type="text" required>
            <br/>
            <label for="pass">pass word</label>
            <input id="pass" type="password" required>
            <br/>
            <input type="submit" value="save">
        </form>
    </body>
</html>

19

-------- Page 22 (Lecture #8-22.jpg) ---------
عملي ( program#42.html )

File  Edit  Selection  …

EXPLORER

HTML LANGUAGE
  program#28.html
  program#29.html
  program#30.html
  program#31.html
  program#32.html
  program#33.html
  program#34.html
  program#35.html
  program#36.html
  program#37.html
  program#38.html
  program#39.html
  program#40.html
  program#41.html
  program#42.html

OUTLINE
TIMELINE

program#42.html ×

program#42.html > html > body > form > br

<html lang="en">
<head>
    <title>   form3   </title>
    <meta charset="utf-8">
</head>
<body>
    <form>
        <label for="txt">user name</label>
        <input id="txt" type="text" required>
        <br/>
        <label for="pass">pass word</label>
        <input id="pass" type="password" required>
        <br/>
        <input type="submit" value="save">
    </form>
</body>
</html>

Ln 10, Col 18   Spaces: 4   UTF-8   CRLF   HTML

20  0  0

-------- Page 23 (Lecture #8-23.jpg) ---------
عملي  ( program#42.html )

form3

user name
pass word
save

عند الضغط على label ينتقلنا إلى textbox

form3

user name
pass word
save

Please fill out this field.

عندما لا يتم تعبئة البيانات عند الضغط على زر save تظهر هذه الرسالة وذلك بسبب إستخدام خاصية required

21

-------- Page 24 (Lecture #8-24.jpg) ---------
Forms
النماذج

- مثال (4): لعمل مربع بداخل form وعمل عنوان لـ form ، باستخدام العناصر <fieldset> و <legend>.

<html lang="en">
  <head>
    <title> form4 </title>
    <meta charset='utf-8'>
  </head>
  <body>
    <form>
      <fieldset>
        <legend> login </legend>
        <label for="txt">user name</label>
        <input id="txt" type="text" required>
        <br/>
        <label for="pass">pass word</label>
        <input id="pass" type="password" required>
        <br/>
        <input type="submit" value="save">
      </fieldset>
    </form>
  </body>
</html>

22

-------- Page 25 (Lecture #8-25.jpg) ---------
عملي ( program#43.html )

EXPLORER
HTML LANGUAGE
program#29.html
program#30.html
program#31.html
program#32.html
program#33.html
program#34.html
program#35.html
program#36.html
program#37.html
program#38.html
program#39.html
program#40.html
program#41.html
program#42.html
program#43.html

HTML language

program#43.html x
program#43.html > html > body > form

<html lang="en">
<head>
    <title>    form4    </title>
    <meta charset='utf-8'>
</head>
<body>
    <form>
        <fieldset>
            <legend> login </legend>
            <label for="txt">user name</label>
            <input id="txt" type="text" required>
            <br/>
            <label for="pass">pass word</label>
            <input id="pass" type="password" required>
            <br/>
            <input type="submit" value="save">
        </fieldset>
    </form>
</body>
</html>

OUTLINE
TIMELINE

23

-------- Page 26 (Lecture #8-26.jpg) ---------
( program#43.html ) عملي

form4

login
user name  ______________________
pass word  ______________________
save

24

-------- Page 27 (Lecture #8-27.jpg) ---------
Forms
النماذج

- مثال(5): المثال السابق مع إضافة الخاصيتين action و method إلى وسم <form>.

<html lang="en">
  <head>
    <title> form5 </title>
    <meta charset='utf-8'>
  </head>
  <body>
    <form method="get" action="file.php">
      <fieldset>
        <legend> login </legend>
        <label for="txt">user name</label>
        <input id="txt" type="text" required>
        <br/>
        <label for="pass">pass word</label>
        <input id="pass" type="password" required>
        <br/>
        <input type="submit" value="save">
      </fieldset>
    </form>
  </body>
</html>

25

-------- Page 28 (Lecture #8-28.jpg) ---------
عملي ( program#44.html )

EXPLORER
HTML LANGUAGE
program#30.html
program#31.html
program#32.html
program#33.html
program#34.html
program#35.html
program#36.html
program#37.html
program#38.html
program#39.html
program#40.html
program#41.html
program#42.html
program#43.html
program#44.html

OUTLINE
TIMELINE

program#44.html
HTML language

program#44.html > html > body > form > fieldset > input#txt

1  <html lang="en">
2  <head>
3      <title>   form5   </title>
4      <meta charset="utf-8">
5  </head>
6  <body>
7      <form method="get" action="file.php">
8          <fieldset>
9              <legend>  login  </legend>
10             <label for="txt">user name</label>
11             <input id="txt" type="text" required>
12             <br/>
13             <label for="pass">pass word</label>
14             <input id="pass" type="password" required>
15             <br/>
16             <input type="submit" value="save">
17         </fieldset>
18     </form>
19 </body>
20 </html>

Ln 11, Col 33    Spaces: 4    UTF-8    CRLF    HTML

26

-------- Page 29 (Lecture #8-29.jpg) ---------
عملي ( program#44.html )

login
user name
pass word
save

عند الضبط على save يتم إرسال البيانات إلى ملف file.php

form5

login
user name
pass word
save

file:///C:/Users/Z10/Desktop/HTML%20language/...

تظهر البيانات المرسلة في URL بجانب اسم الملف file.php ولكن لكي لا تظهر البيانات يتم تغيير قيمة الخاصة method="post"

27

-------- Page 30 (Lecture #8-30.jpg) ---------
النماذج Forms

مثال (6):

<html lang="ar">
  <head>
    <title> نموذج 6 </title>
    <meta charset="utf-8">
  </head>
  <body dir="rtl">
    <form method="get" action="file.php">
      <fieldset>
        <legend> تسجيل </legend>
        <label for="txt"> : الاسم </label>
        <input id="txt" name="txt" type="text" required>
        <br/>
        <label for="pass"> : كلمة المرور </label>
        <input id="pass" name="pass" type="password" required>
        <br/>
        <label for="pic"> : الصورة الشخصية </label>
        <input id="pic" name="pic" type="file" required>
        <br/>
        <input id="resBtn" name="resBtn" type="reset" value="استعادة">
        <br/>
        <input id="okButton" name="okButton" type="submit" value="موافق">
      </fieldset>
    </form>
  </body>
</html>

28

-------- Page 31 (Lecture #8-31.jpg) ---------
عملي ( program#45.html )

EXPLORER

HTML LANGUAGE
  program#31.html
  program#32.html
  program#33.html
  program#34.html
  program#35.html
  program#36.html
  program#37.html
  program#38.html
  program#39.html
  program#40.html
  program#41.html
  program#42.html
  program#43.html
  program#44.html
  program#45.html

OUTLINE
TIMELINE

program#45.html

program#45.html > html > body > form > fieldset > input#resBtn

1  <html lang="ar">
2      <body dir="rtl">
3          <form>
4
8              <fieldset>
11                 <input id="txt" name="txt" type="text" required>
12                 <br/>
13                 <label for="pass"> كلمة المرور : </label>
14                 <input id="pass" name="pass" type="password" requi
15
16                 <br/>
17                 <label for="pic"> الصورة الشخصية : </label>
18                 <input id="pic" name="pic" type="file" required>
19                 <br/>
19                 <input id="resBtn" name="resBtn" type="reset" valu
20                 <input id="okButton" name="okButton" type="submit"
21             </fieldset>
22         </form>
23
24     </body>
25 </html>

Ln 19, Col 79     Spaces: 4     UTF-8     CRLF     HTML

29

0 0 Δ 0

-------- Page 32 (Lecture #8-32.jpg) ---------
عملي ( program#45.html )

نموذج 6

تسجيل
الاسم :
كلمة المرور :
الصورة الشخصية :

No file chosen   Choose File

موافق   استعادة

زر لإعادة ضبط القيم الافتراضية لعناصر الإدخال كاملة في النموذج form

30

-------- Page 33 (Lecture #8-33.jpg) ---------
النماذج Forms

- مثال :(7)

عناصر الإختيار radio و checkbox:

يتم إستعمال هذه العناصر في النماذج لتمكين المستخدم من الإجابة على سؤال محدد:

▪ العنصر radio: يتم إختيار إجابة واحدة فقط من عدة إجابات محتملة.

▪ العنصر checkbox: يتم إختيار أكثر من إجابة على سؤال محدد.

ويتم إستخدام هذه العناصر بنفس طريقة إستخدام العناصر السابقة مع ملاحظة: إعطاء جميع العناصر التي تمثل إجابة لنفس السؤال القيمة الخاصة name وقيمًا مختلفة للخاصية value.

31

-------- Page 34 (Lecture #8-34.jpg) ---------
Forms النماذج

تابع.

<html lang=“ar”>
  <head>
    <title> radio and checkbox </title>
    <meta charset=“utf-8”>
  </head>
  <body dir=“rtl”>
    <form method=“post” action=“file.php”>
      <fieldset>
        <legend> : أحب عن الأسئلة التالية </legend>
        <p> ؟ من أين علمت عن موقعنا </p>
        <label>جريدة</label>
        <input type=“checkbox” name=“wrknow ” value=“nPaper”>
        <label>موقع إلكتروني</label>
        <input type=“checkbox” name=“wrknow ” value=“wbSite”>
        <label>صديق</label>
        <input type=“checkbox” name=“wrknow ” value=“frnd”>
        <label>محرك بحث</label>
        <input type=“checkbox” name=“wrknow ” value=“srEng”>
        <p> ؟ ما تقييمك لموقعنا </p>
        <label>جيد</label>
        <input type=“radio” name=“rate ” value=“good”>
        <label>متوسط</label>
        <input type=“radio” name=“rate ” value=“mid”>
        <label>سيء</label>
        <input type=“radio” name=“rate ” value=“bad”>
      </fieldset>
    </form>
  </body>
</html>

32

-------- Page 35 (Lecture #8-35.jpg) ---------
عملي ( program#46.html )

EXPLORER
HTML LANGUAGE
program#32.html
program#33.html
program#34.html
program#35.html
program#36.html
program#37.html
program#38.html
program#39.html
program#40.html
program#41.html
program#42.html
program#43.html
program#44.html
program#45.html
program#46.html

OUTLINE
TIMELINE

program#46.html
program#46.html  html
<html lang="ar">
  <body dir="rtl">
    <form>
      <fieldset>
        <label> جريدة </label>
        <input type="checkbox" name="wrknow" value="nPape">
        <label> موقع إلكتروني </label>
        <input type="checkbox" name="wrknow" value="wbSite">
        <label> صديق </label>
        <input type="checkbox" name="wrknow" value="frnd">
        <label> محرك بحث </label>
        <input type="checkbox" name="wrknow" value="srEng">
        <p> ما تقييمك لموقعنا ؟ </p>
        <label> جيد </label>
        <input type="radio" name="rate" value="good">
        <label> متوسط </label>
        <input type="radio" name="rate" value="mid">
        <label> سيء </label>
        <input type="radio" name="rate" value="bad">
      </fieldset>
    </form>
  </body>
</html>

HTML language
Ln 1, Col 13  Spaces: 4  UTF-8  CRLF  HTML

33
x 0  Δ 0

-------- Page 36 (Lecture #8-36.jpg) ---------
عملي  ( program#46.html )

radio and checkbox

file:///C:/Users/Z10/Desktop/HTML%20language/…

أجب عن الأسئلة التالية :
من أين علمت عن موقعنا ؟
جريدة   موقع إلكتروني   صديق   محرك بحث
ما تقييمك لموقعنا ؟
جيد   متوسط   سيء
34

-------- Page 37 (Lecture #8-37.jpg) ---------
عملي  ( program#46.html )

radio and checkbox

file:///C:/Users/Z10/Desktop/HTML%20language/...

أجب عن الأسئلة التالية: -

من أين علمت عن موقعنا ؟
جريدة  ☑ موقع إلكتروني  صديق  □ محرك بحث  □

ما تقييمك لموقعنا ؟
جيد  ○ متوسط  ○ سيء  ○

العنصر checkbox : يتم إختيار أكثر من
إجابة على سؤال محدد.

العنصر radio : يتم إختيار إجابة
واحدة فقط من عدة إجابات
محتملة.

35

-------- Page 38 (Lecture #8-38.jpg) ---------
Forms النماذج

- مثال (8):

نموذج Form يحتوي على عنصر القائمة المنسدلة <select> وعناصر القائمة يتم إدخالها عن طريق الوسم <option> ، وعملهم مشابه لعنصر radio من حيث اختيار إجابة واحدة فقط ويستخدم العنصر select في حالة وجود أجوبة كثيرة محتملة للسؤال.

ويتم تحديد أحد هذه العناصر كخيار افتراضي عن طريق تمرير الخاصية selected=“selected” في وسم بدايته.

36

-------- Page 39 (Lecture #8-39.jpg) ---------
Forms النماذج

تابع .

<html lang="ar">
    <head>
        <title> القائمة المنسدلة </title>
        <meta charset="utf-8">
    </head>
    <body dir="rtl">
        <form method="post" action="file.php">
            <p> من أي البلدان أنت ؟ </p>
            <select name="nationality">
                <option selected="selected"> ليبيا </option>
                <option> المغرب </option>
                <option> سوريا </option>
                <option> لبنان </option>
                <option> السعودية </option>
                <option> مصر </option>
                <option> تونس </option>
            </select>
        </form>
    </body>
</html>

37

-------- Page 40 (Lecture #8-40.jpg) ---------
عملي ( program#47.html )

EXPLORER
HTML LANGUAGE
program#33.html
program#34.html
program#35.html
program#36.html
program#37.html
program#38.html
program#39.html
program#40.html
program#41.html
program#42.html
program#43.html
program#44.html
program#45.html
program#46.html
program#47.html

OUTLINE
TIMELINE

program#47.html ×
program#47.html > html > body > form > select

1  <html lang="ar">
2    <head>
3      <title> القائمة المنسدلة </title>
4      <meta charset="utf-8">
5    </head>
6    <body dir="rtl">
7      <form>
8        <p> من أي البلدان أنت ؟ </p>
9        <select name="nationality">
10         <option selected="selected">  ليبيا  </option>
11         <option>  المغرب  </option>
12         <option>  سوريا  </option>
13         <option>  لبنان  </option>
14         <option>  السعودية  </option>
15         <option>  مصر  </option>
16         <option>  تونس  </option>
17       </select>
18     </form>
19   </body>
20 </html>

Ln 17, Col 22     Spaces: 4   UTF-8   CRLF   HTML
38

-------- Page 41 (Lecture #8-41.jpg) ---------
( program#47.html ) عملي

القائمة المنسدلة

file:///C:/Users/Z10/Desktop/HTML%20language/...

من أي البلدان أنت؟

ليبيا

القائمة المنسدلة

file:///C:/Users/Z10/Desktop/HTML%20language/...

من أي البلدان أنت؟

ليبيا
المغرب
سوريا
لبنان
فلسطين
مصر
الأردن

39

-------- Page 42 (Lecture #8-42.jpg) ---------
Forms النماذج

- مثال(9):

نموذج Form يحتوي على عنصر <textarea> والذي يستخدم لإدخال قيمة نصية متعددة الأسطر على عكس العنصر <input> من نوع text والذي يستخدم لإدخال قيمة نصية وحيدة السطر.
يستخدم العنصر <textarea> الخاصيتان cols و rows لتحديد عرضه وإرتفاعه.

<html lang="ar">
  <head>
    <title> textarea </title>
    <meta charset="utf-8">
  </head>
  <body dir="rtl">
    <form method="post" action="file.php">
      <p> أكتب نبذة قصيرة عنك </p>
      <textarea cols="30" rows="10" name="bio"> </textarea>
    </form>
  </body>
</html>

40

-------- Page 43 (Lecture #8-43.jpg) ---------
عملي ( program#48.html )

EXPLORER
HTML LANGUAGE
program#34.html
program#35.html
program#36.html
program#37.html
program#38.html
program#39.html
program#40.html
program#41.html
program#42.html
program#43.html
program#44.html
program#45.html
program#46.html
program#47.html
program#48.html

OUTLINE
TIMELINE

program#48.html x
program#48.html html body
1  <html lang="ar">
2    <head>
3      <title>        textarea       </title>
4      <meta charset='utf-8'>
5    </head>
6  <body dir="rtl">
7    <form>
8        <p>       أكتب نبذة قصيرة عنك       </p>
9        <textarea cols="30" rows="10" name="bio"> </textarea>
10   </form>
11  </body>
12 </html>
13

Ln 11, Col 12   Spaces: 4   UTF-8   CRLF   HTML

41

-------- Page 44 (Lecture #8-44.jpg) ---------
( program#48.html ) عملي

اكتب نبذة قصيرة عنك

42

-------- Page 45 (Lecture #8-45.jpg) ---------
عملي ( program#48.html )

كتـب نبذة تغيير عنك

الاسم : أحمد علي
العمر : 25
المادة : مقدمة في برمجة الإنترنت

-------- Page 46 (Lecture #8-46.jpg) ---------
Thank you