HTML الدرس الثامن فى

Forms

-والمقصود بيها النماذج التى يتم تصممها فى صفحة الويب وهى المسئولة عن نقل الداتا من صفحة الويب عن طريق المستخدم وارسالها الى السرفر والتاج الخاص بالنماذج هو <form> </form> ويستخدم مع تاج النماذج تاج <input> ويوضع داخلة وليس لهذا التاج تاج نهاية ولهذا التاج انواع منها:

(1)Text Fields:

وهى عبارة عن حقل لادخال قيم نصية فية عن طريق مستخدم الموقع.

First name: <input type=”text” name=”firstname”>
Last name: <input type=”text” name=”lastname”>
</form>

وتظهر بصفحة الويب كالتالى:

First name:

Last name:

(2)Password Field:

وهى عبارة عن حقل لادخال باسورد المستخدم

<form>
Password: <input type=”password” name=”pwd”>
</form>

وتظهر بصفحة الويب كالتالى:

Password:

(3)Radio Buttons:

ويستخدم هذا النوع فى وضع خيارات للمستخدم ولة ان يختار واحدة فقط ولة مثال مشهور جدا على جميع المواقع عند التسجيل فى الموقع كمستخدم جديد فيطلب منك تحديد جنسك فهو اما ذكر او انثى اى لا بد ان تختار واحدة فقط كما فى المثال التالى:

<form>
<input type=”radio” name=”sex” value=”male”>ذكر<br>
<input type=”radio” name=”sex” value=”female”>انثى
</form>

وتظهر بصفحة الويب كالتالى:

ذكرانثى

(4)Checkboxes:

وهذا النوع يشبة النوع السابق مع الفرق اننا هنا يمكن ان نختار اكثر من خيار او لا نختار ونتركها بدون قيمة كما فى المثال التالى:

<form>
<input type=”checkbox” name=”vehicle” value=”html”>I learn html<br>
<input type=”checkbox” name=”vehicle” value=”css”>I learn css
</form>

وتظهر بصفحة الويب كالتالى:

I learn html
I learn css

(5)Submit Button:

ويستخدم هذا النوع فى ارسال داتا عن مستخدمين الموقع الى السرفر وسوف يتم دراستة وفهمة اكثر فيما بعد ويتم استخدامها كما فى المثال التالى:

<form name=”input” action=”html_page.php” method=”get”>
Username: <input type=”text” name=”user”>
<input type=”submit” value=”Submit”>
</form>

وتظهر بصفحة الويب كالتالى:

Username:

(6)drop-down list:

وتستخدم فى الاختيار من متعدد كالتالى:

<form ><select name=”number”>
<option value=”1″>1</option><option value=”2″>2</option><option value=”3″>3</option><option value=”4″>4</option></select></form>

وتظهر بصفحة الويب كالتالى:

choose number1234

(7)Textarea:

وهو عبارة عن حقل لادخال نصوص ويمكن لك ان تتحكم فى حجمة كالتالى:

<form ><textarea rows=”10″ cols=”30″>

Leave comment.

</textarea>

</form>

حيث تتحكم بحجمها عن طريق(rows) التى تزيد عدد الاسطر او(cols) والتى تزيد عدد الاعمدة وتظهر بصفحة الويب كالتالى:

Leave comment.

Advertisements

ضع تعليقك هنا

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: