Chapterبەش 3 · Lectureوانە 3.3

HTML Forms Reviewپێداچوونەوەی فۆرمەکانی HTML

Everything you need to build forms before PHP handles them: action and method, labels, text and password fields, radio buttons, checkboxes, drop-down lists, text areas, HTML5 input types and attributes — with the lab forms corrected and the Sign Up homework solved.

هەموو ئەوەی پێویستە بۆ دروستکردنی پێش ئەوەی PHP مامەڵەیان لەگەڵ بکات: action و method، ، و ، ، ، ، ، جۆر و inputـی ⁦HTML5⁩؛ تاقیگە ڕاستکراونەتەوە و ئەرکی ماڵەوەی ⁦Sign Up⁩ شیکراوەتەوە.

27 min read25 خولەک خوێندنەوە · 22 stepsهەنگاو

What you will learnچی فێر دەبیت

Explain what the action and method attributes do, and when to use GET or POST.
Build forms with labels, text and password fields, radio buttons, checkboxes, drop-down lists, text areas and submit buttons.
Predict exactly which name=value pairs a form sends.
Use the HTML5 input types and the attributes autofocus, min, max, placeholder and required.
Explain why browser checks never replace validation in PHP.

ڕوونی بکەیتەوە action و method چی دەکەن و کەی GET یان POST بەکاربهێنیت.
دروست بکەیت بە ، ، ، ، ، ، و .
بە وردی پێشبینی بکەیت کام جووتی ⁦name=value⁩ دەنێرێت.
جۆرەکانی inputـی ⁦HTML5⁩ و autofocus، min، max، placeholder و required بەکاربهێنیت.
ڕوونی بکەیتەوە بۆچی پشکنینەکانی هەرگیز جێگەی لە PHPـدا ناگرنەوە.

Why forms matterبۆچی فۆرمەکان گرنگن

Form controls are used to collect information from the user. A may also contain text and other elements, such as headings and images. Every time you log in, sign up, search or write a comment, you fill in an HTML form.

بۆ کۆکردنەوەی زانیاری لە بەکارهێنەر بەکاردێن. دەتوانێت دەق و تریش لەخۆ بگرێت، وەک سەردێڕ و وێنە. هەر جارێک دەچیتە ژوورەوە، خۆت تۆمار دەکەیت، دەگەڕێیت یان لێدوانێک دەنووسیت، HTML پڕ دەکەیتەوە.

HTML only draws the form. When the user presses the submit button, the browser packs the data and sends it to the server, where a PHP program receives it. So the HTML you write here decides what PHP will get later. This lecture reviews the form material of Lecture 1 and Lab 1; the Forms and User Input chapter then handles the data with PHP.

HTML تەنها دەکێشێت. کاتێک بەکارهێنەر دادەگرێت، دراوەکان کۆ دەکاتەوە و دەیاننێرێت بۆ ، کە لەوێ PHP وەریان دەگرێت. بۆیە ئەو HTMLـەی لێرە دەینووسیت بڕیار دەدات PHP دواتر چی وەردەگرێت. ئەم وانەیە پێداچوونەوە بە بابەتی وانەی ١ و تاقیگەی ١دا دەکات؛ پاشان بەشی فۆرمەکان و نێوخستەی بەکارهێنەر بە PHP مامەڵە لەگەڵ دراوەکان دەکات.

From form to PHP: every named field is sent as a name=value pair.لە بۆ PHP: هەر ناودار وەک جووتی ناو=نرخ دەنێردرێت.CêIT

A paper application formفۆرمێکی کاغەزی داواکاری

Think of a paper application form at a university registration office. Each box has a label ("Name", "Date of birth"). When you finish, you hand the form to one particular office (the action). You can hand it over openly, so anyone in the queue can read it, or in a sealed envelope (the method: GET or POST).

بیر لە کاغەزی داواکاری بکەرەوە لە فەرمانگەی تۆمارکردنی زانکۆ. هەر چوارگۆشەیەک ناونیشانێکی هەیە («ناو»، «بەرواری لەدایکبوون»). کاتێک تەواو دەبیت، دەدەیتە ژوورێکی دیاریکراو (action). دەتوانیت بە ئاشکرا بیدەیت، بەشێوەیەک هەر کەسێک لە ڕیزەکەدا بتوانێت بیخوێنێتەوە، یان لەناو زەرفێکی داخراودا (method: GET یان POST).

Where the analogy stops workingسنووری ئەم نموونەیە

A clerk checks a paper form by hand. A browser can check only a few simple rules, and a user can switch them off, so the server must always check the data again.

فەرمانبەرێک کاغەزییەکە بە دەست دەپشکنێت. تەنها دەتوانێت چەند یاسایەکی سادە بپشکنێت و بەکارهێنەر دەتوانێت لایان ببات، بۆیە دەبێت هەمیشە دراوەکان دووبارە بپشکنێتەوە.

The form element: action and methodتوخمی ⁦form: action⁩ و method

Everything inside <form> … </form> belongs to one form. The opening tag usually has two attributes:

هەموو شتێک لەناو <form> … </form>دا هی یەک . دەستپێک زۆرجار دوو هەیە:

action () defines the action to be performed when the form is submitted. Normally the form data is sent to a web page on the server when the user clicks the submit button. In <form action="action_page.php"> the data goes to a page called action_page.php, which contains a server-side script that handles the form data.
method says how the data travels: get or post. If you leave it out, the browser uses GET.

action () ئەو کارە دیاری دەکات کە کاتی ناردنی ئەنجام دەدرێت. بە شێوەی ئاسایی، کاتێک بەکارهێنەر کرتە لە دەکات، دراوەکانی دەنێردرێن بۆ لەسەر . لە <form action="action_page.php">دا دراوەکان دەچن بۆ بە ناوی action_page.php، کە تێدایە و مامەڵە لەگەڵ دراوەکانی دەکات.
method دەڵێت دراوەکان چۆن دەگوازرێنەوە: get یان post. ئەگەر نەینووسیت، GET بەکاردەهێنێت.

action and methodaction و methodHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<form action="action_page.php" method="post">
  ...
</form>

About the action slideدەربارەی سلایدی action

The slide writes <form action=“action_page.php”> with curly quotes, which breaks the address (use straight quotes). It also says "in the example above", but the form on the previous slide sends to /mailinglist.php, and there is no example above the text. The idea is the same: action names the server page that receives the data. The slide does not mention method.

سلایدەکە <form action=“action_page.php”> بە خوار دەنووسێت، کە ناونیشانەکە تێکدەدات ( ڕاست بەکاربهێنە). هەروەها دەڵێت «لە نموونەی سەرەوەدا»، بەڵام سلایدی پێشوو بۆ /mailinglist.php دەنێرێت و هیچ نموونەیەک لە سەرەوەی دەقەکەدا نییە. بیرۆکەکە هەمان شتە: action ناوی ئەو دەڵێت لەسەر کە دراوەکان وەردەگرێت. سلایدەکە باسی method ناکات.

The form element: action and methodتوخمی ⁦form: action⁩ و method

GET or POST?GET یان POST؟

GET and POST in shortGET و POST بە کورتی
Questionپرسیار	GET	POST
Where the data goesدراوەکان دەچنە کوێ	In the URL, after `?` (the )لەناو ، دوای `?` ()	Inside the request, not in the URLلەناو ، نەک لە
Visible in the address bar and history?لە و مێژوودا دەبینرێت؟	Yesبەڵێ	Noنەخێر
Can be bookmarked or shared?دەتوانرێت پاشەکەوت یان هاوبەش بکرێت؟	Yesبەڵێ	Noنەخێر
Good forباشە بۆ	Searches and filters that only read dataگەڕان و پاڵاوتن کە تەنها دراوە دەخوێننەوە	Passwords, sign-ups and anything that changes data، و هەر شتێک دراوە بگۆڕێت

Here is exactly what the browser sends for the mailing-list form below, once with each method. Notice that @ is sent as %40: the browser encodes special characters.

ئەمە ڕێک ئەوەیە کە بۆ ⁦mailing-list⁩ ـی خوارەوە دەینێرێت، جارێک بە هەر شێوازێک. سەرنج بدە کە @ وەک %40 دەنێردرێت: پیتە تایبەتەکان دەگۆڕێت.

With method="get": the data is in the URLبە ⁦method="get⁩": دراوەکان لە URLـەکەدانHTTP

GET /mailinglist.php?username=Aram&email=aram%40example.com HTTP/1.1
Host: localhost

With method="post": the data is in the body of the requestبە ⁦method="post⁩": دراوەکان لەناو داواکارییەکەدانHTTP

POST /mailinglist.php HTTP/1.1
Host: localhost
Content-Type: application/x-www-form-urlencoded

username=Aram&email=aram%40example.com

Quick checkپشکنینی خێراA form uses method="get". Where does the browser put the form data? method="get" بەکاردەهێنێت. دراوەکانی دەخاتە کوێ؟In a cookieلەناو کووکییەکداInside the body of the requestلەناو جەستەی داواکارییەکەداNowhere: GET sends no dataهیچ کوێ: GET هیچ دراوەیەک نانێرێتIn the URL, after ?لەناو URLـەکە، دوای ?

A first complete formیەکەم فۆرمی تەواو

This is the lecture's mailing-list form. It is correct HTML. Type it and look at each line:

ئەمە ⁦mailing-list⁩ـی وانەکەیە. HTMLـێکی دروستە. بینووسە و سەیری هەموو دێڕێک بکە:

Mailing-list form with labelsفۆرمی ⁦mailing-list⁩ لەگەڵ لەیبڵەکانmailing.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<form action="/mailinglist.php" method="post">
  <h3>Please add your name to Mailing lists</h3>
  <label for="firstlast">Name:</label>
  <input type="text" name="username" id="firstlast">
  <br />
  <label for="email">Email:</label>
  <input type="text" name="email" id="email">
  <br /><br />
  <input type="submit" value="Submit">
</form>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<form action="/mailinglist.php" method="post">
  <h3>Please add your name to Mailing lists</h3>
  <label for="firstlast">Name:</label>
  <input type="text" name="username" id="firstlast">
  <br />
  <label for="email">Email:</label>
  <input type="text" name="email" id="email">
  <br /><br />
  <input type="submit" value="Submit">
</form>

In this preview the Submit button does nothing; on a real server it would send the data to mailinglist.php.

لەم پێشبینینەدا دوگمەی Submit هیچ ناکات؛ لەسەر ڕاستەقینە دراوەکان دەنێرێت بۆ ⁦mailinglist.php⁩.

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 1

Send the data to /mailinglist.php with POST.

دراوەکان بە POST بنێرە بۆ /mailinglist.php.

Lineدێڕی 3

<label for="firstlast"> belongs to the field whose id is firstlast.

<label for="firstlast"> هی ئەو خانەیەیە کە idـەکەی firstlastـە.

Lineدێڕی 4

name="username" is the key the server receives; id is only for the label (and CSS).

name="username" ئەو کە وەری دەگرێت؛ id تەنها بۆ (و CSS).

Lineدێڕی 5

<br /> is a line break (old XHTML style; <br> is the same).

<br /> شکاندنی دێڕە (شێوازی کۆنی XHTML؛ <br> هەمان شتە).

Lineدێڕی 9

The submit button. value is the text on the button.

. value ئەو دەقەیە کە لەسەر دوگمەکە دەنووسرێت.

Looking ahead: what mailinglist.php could doسەیرێکی پێشوەخت: ⁦mailinglist.php⁩ چی دەکات

You will learn this properly in the Forms chapter. Here is a first look: PHP finds each value in $_POST under the field's name.

ئەمە لە بەشی بە تەواوی فێر دەبیت. ئەمە سەیرێکی یەکەمە: PHP هەر لە $_POSTدا لە ژێر nameـی خانەکەدا دەدۆزێتەوە.

mailinglist.phpPHPRuns on the serverلەسەر ڕاژەکاری وێب کار دەکات

<?php
// mailinglist.php: a first look at receiving form data
$name  = $_POST["username"] ?? "";
$email = $_POST["email"] ?? "";

echo "<h3>Thank you, " . htmlspecialchars($name) . "!</h3>\n";
echo "<p>We will write to " . htmlspecialchars($email) . ".</p>\n";

Output when the form sent username=Aram and email=aram@example.comدەرخستە کاتێک فۆرمەکە ⁦username=Aram⁩ و ⁦email=aram@example.com⁩ـی ناردبێت

Thank you, Aram!
We will write to aram@example.com.

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<h3>Thank you, Aram!</h3>
<p>We will write to aram@example.com.</p>

Tested by giving $_POST these two values. If someone types <b>Rezan</b> as the name, htmlspecialchars() turns it into <b>Rezan</b>, so it is shown as text, not run as HTML.

بە دانانی ئەم دوو نرخە لە $_POSTدا تاقیکرایەوە. ئەگەر کەسێک <b>Rezan</b> وەک ناو بنووسێت، htmlspecialchars() دەیکاتە <b>Rezan</b>، بۆیە وەک دەق پیشان دەدرێت، نەک وەک HTML جێبەجێ بکرێت.

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 3-4

$_POST["username"] is the value of the field with name="username". ?? "" gives an empty text if the field was not sent.

$_POST["username"] ئەو خانەیەیە کە name="username"ـی هەیە. ?? "" دەقێکی بەتاڵ دەدات ئەگەر خانەکە نەنێردرابێت.

Lineدێڕی 6-7

htmlspecialchars() makes the visitor's text safe to print inside HTML.

htmlspecialchars() دەقی سەردانیکەر سەلامەت دەکات بۆ چاپکردن لەناو HTMLـدا.

A first complete formیەکەم فۆرمی تەواو

Labels: name, id and forلەیبڵەکان: name، id و for

The parts of a form control: for/id link the label, type picks the control, name is the key sent to the server.بەشەکانی : ⁦for/id⁩ دەبەستنەوە، type جۆری هەڵدەبژێرێت، name ئەو کە بۆ دەنێردرێت.CêIT

name, id and forname، id و for
Attribute	What it is forبۆ چییە	Must be unique?دەبێت تاقانە بێت؟
`name`	The key under which the value is sent (`username=Aram`). PHP reads it as `$_POST['username']`.ئەو لە ژێریدا دەنێردرێت (`username=Aram`). PHP وەک `$_POST['username']` دەیخوێنێتەوە.	No: radio buttons in one group share a name.نەخێر: یەک گرووپ هەمان nameـیان هەیە.
`id`	A unique name in the page, used by `<label for>` and by CSS.ناوێکی تاقانەیە لە ، کە `<label for>` و CSS بەکاری دەهێنن.	Yesبەڵێ
`for` (on `<label>`)`for` (لەسەر `<label>`)	Points to the `id` of the field the label belongs to.ئاماژە بە `id`ـی ئەو خانەیە دەکات کە هی ئەوە.	—

A makes the form easier to use: clicking the label puts the cursor in the field (or ticks the box), and screen readers read the label aloud. You can also put the field inside the label; then for and id are not needed: <label>Email: <input type="email" name="email"></label>.

بەکارهێنانی ئاسانتر دەکات: کرتەکردن لە دەخاتە ناو خانەکە (یان چوارگۆشەکە نیشان دەکات) و بە دەنگی بەرز دەخوێننەوە. دەتوانیت خانەکە بخەیتە ناو ؛ ئەو کاتە پێویستت بە for و id نییە: <label>Email: <input type="email" name="email"></label>.

Form elements (controls)توخمەکانی فۆرم

Most form controls are made with the <input> element. Its type attribute decides what the browser draws. <input> is a void element: it has no closing tag. Every control that should send data needs a name.

زۆربەی بە <input> دروست دەکرێن. type بڕیار دەدات چی بکێشێت. <input> بەتاڵە: کۆتایی نییە. هەر کە دەبێت دراوە بنێرێت، پێویستی بە name هەیە.

One more type sends a value that the visitor never sees: type="hidden". Pages use it to carry information from one page to the next, for example the id of the record being edited (the CRUD application).

typeـێکی تر دەنێرێت کە سەردانکەر هەرگیز نایبینێت: type="hidden". لاپەڕەکان بەکاری دەهێنن بۆ گواستنەوەی زانیاری لە لاپەڕەیەکەوە بۆ لاپەڕەی دواتر، بۆ نموونە id ـی ئەو دەستکاری دەکرێت (بەرنامەی CRUD).

HTML

<input type="hidden" name="id" value="5">

Form elements (controls)توخمەکانی فۆرم

Text and password fieldsخانەی دەق و خانەی تێپەڕەوشە

A is a one-line box for short text, such as a user name:

چوارگۆشەیەکی یەک دێڕییە بۆ دەقی کورت، وەک :

Text inputخانەی دەقHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<label for="uname">User name:</label>
<input type="text" name="uname" id="uname">

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<label for="uname">User name:</label>
<input type="text" name="uname" id="uname">

A looks the same, but it shows dots instead of the letters you type:

هەمان شێوەی هەیە، بەڵام لەبری ئەو پیتانەی دەینووسیت خاڵ پیشان دەدات:

Password inputخانەی تێپەڕەوشەHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<label for="password">Password:</label>
<input type="password" name="password" id="password">

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<label for="password">Password:</label>
<input type="password" name="password" id="password">

Curly quotes and a missing nameنیشانەکانی گوتەی خوار و nameـی ون

The slides write <input type=“text” name=“uname”> and <input type=“password”> with curly quotes. Then type gets the invalid value “text”. For an unknown type the browser draws a plain text box, so the password would be visible while typing. The name would become “uname” (with the quote marks), so PHP would receive a different key. And the password example has no name at all, so its value would never be sent.

سلایدەکان <input type=“text” name=“uname”> و <input type=“password”> بە خوار دەنووسن. ئەو کاتە type نادروستی “text” وەردەگرێت. بۆ جۆرێکی نەناسراو ئاسایی دەکێشێت، بۆیە لە کاتی نووسیندا دەبینرێت. ناوەکەش دەبێتە “uname” (لەگەڵ نیشانەکان)، بۆیە PHP جیاواز وەردەگرێت. هەروەها نموونەی هیچ nameـێکی نییە، بۆیە هەرگیز نانێردرێت.

Form elements (controls)توخمەکانی فۆرم

Radio buttons and checkboxesدوگمەکانی ڕادیۆ و چێک‌بۆکسەکان

let the user choose exactly one option from a group. All radio buttons with the same name form one group; choosing one clears the others. Each one needs its own value: that value is what is sent. Add checked to choose one in advance.

ڕێگە بە بەکارهێنەر دەدەن تەنها یەک هەڵبژاردە لە گرووپێک هەڵبژێرێت. هەموو کە هەمان nameـیان هەیە یەک گرووپن؛ هەڵبژاردنی یەکێکیان ئەوانی تر لادەبات. هەریەکەیان پێویستی بە valueـی خۆی هەیە: ئەو ئەوەیە کە دەنێردرێت. checked زیاد بکە بۆ ئەوەی پێشوەخت یەکێکیان هەڵبژێردرێت.

A radio groupگرووپێکی دوگمەی ڕادیۆHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<p>Gender:</p>
<input type="radio" name="gender" value="male" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">Female</label>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<p>Gender:</p>
<input type="radio" name="gender" value="male" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">Female</label>

Click one, then the other: only one can be selected.

کرتە لە یەکێکیان بکە، پاشان لەوی تر: تەنها یەکێکیان دەتوانێت هەڵبژێردراو بێت.

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 2-4

Same name="gender", different value. If Female is chosen, the browser sends gender=female.

هەمان name="gender"، valueـی جیاواز. ئەگەر Female هەڵبژێردرێت، gender=female دەنێرێت.

let the user tick any number of options, or none. An unticked checkbox sends nothing; a ticked one sends its value (or on if it has no value).

ڕێگە بە بەکارهێنەر دەدەن هەر ژمارەیەک هەڵبژاردە نیشان بکات، یان هیچ. نیشاننەکراو هیچ نانێرێت؛ نیشانکراو valueـەکەی دەنێرێت (یان on ئەگەر valueـی نەبێت).

A group of checkboxesگرووپێکی چێک‌بۆکسHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<p>Languages you speak:</p>
<input type="checkbox" name="lang[]" value="kurd" id="kurd" checked>
<label for="kurd">Kurdish</label>
<input type="checkbox" name="lang[]" value="arab" id="arab">
<label for="arab">Arabic</label>
<input type="checkbox" name="lang[]" value="eng" id="eng">
<label for="eng">English</label>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<p>Languages you speak:</p>
<input type="checkbox" name="lang[]" value="kurd" id="kurd" checked>
<label for="kurd">Kurdish</label>
<input type="checkbox" name="lang[]" value="arab" id="arab">
<label for="arab">Arabic</label>
<input type="checkbox" name="lang[]" value="eng" id="eng">
<label for="eng">English</label>

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 2

checked ticks this box in advance. name="lang[]" with [] lets PHP receive all ticked values as a list.

checked ئەم چوارگۆشەیە پێشوەخت نیشان دەکات. name="lang[]" بە [] ڕێگە دەدات PHP هەموو نرخە نیشانکراوەکان وەک لیستێک وەربگرێت.

Why lang[]?بۆچی ⁦lang[]⁩؟

The slide's checkbox is name="lang" (without []). That is fine for one box. With several boxes of the same name, the browser sends lang=kurd&lang=eng, and PHP keeps only the last value (eng; checked with PHP 8.5). With name="lang[]", PHP receives both. The GET and POST lecture shows how to read them.

سلایدەکە name="lang"ـە (بێ []). بۆ یەک چوارگۆشە باشە. بەڵام بە چەند چوارگۆشەیەک بە هەمان ناو، lang=kurd&lang=eng دەنێرێت و PHP تەنها دوایین دەهێڵێتەوە (eng؛ بە ⁦PHP 8.5⁩ پشکنراوە). بە name="lang[]"، PHP هەردووکیان وەردەگرێت. وانەی GET و POST پیشان دەدات چۆن بیانخوێنیتەوە.

What the slides left outئەوەی سلایدەکان لەبیریان کرد

The slides show only one radio button, <input type=“radio” name=“gender” value=“male”>, and one checkbox, <input type=“checkbox” name=“lang” value=“kurd”>, both with curly quotes. With those quotes the type is invalid, so the browser draws text boxes instead. A single radio button is also not useful: radio buttons only make sense as a group with one shared name.

سلایدەکان تەنها یەک پیشان دەدەن، <input type=“radio” name=“gender” value=“male”> و یەک ، <input type=“checkbox” name=“lang” value=“kurd”>، هەردووکیان بە خوار. بەو نیشانانە type نادروستە، بۆیە لەبری ئەوان دەکێشێت. یەک بە تەنهاش سوودی نییە: تەنها وەک گرووپێک بە یەک ناوی هاوبەش مانایان هەیە.

Learn HTML forms in 8 minutes 📝Bro Code · Englishئینگلیزی · 690K viewsبینین · 17K likesلایک · Partبەشی 5:50–8:39 (ofلە 8:39)
Shows a radio-button group where only one choice is allowed, a drop-down menu, and checkboxes.
نیشان دەدات کۆمەڵێک کە تەنها دەتوانیت یەکێکیان هەڵبژێریت، لەگەڵ و چەند .
Watch 5:50 to the end: radio buttons, drop-down and checkboxes
لە ⁦5:50⁩ تا کۆتایی سەیر بکە: ، و .

Form elements (controls)توخمەکانی فۆرم

Drop-down listsلیستەکانی هەڵبژاردن

A is made with <select>, and each choice with <option>. The selected attribute chooses an option in advance; in the lecture's example the closed list shows Sulaimani.

بە <select> دروست دەکرێت و هەر هەڵبژاردەیەک بە <option>. selected هەڵبژاردەیەک پێشوەخت هەڵدەبژێرێت؛ لە نموونەی وانەکەدا لیستە داخراوەکە Sulaimani پیشان دەدات.

A drop-down list with a preselected cityلیستی هەڵبژاردن لەگەڵ شارێکی پێشوەخت هەڵبژێردراوHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<label for="city">City:</label>
<select name="cities" id="city">
  <option>Erbil</option>
  <option selected>Sulaimani</option>
  <option>Duhok</option>
  <option>Halabja</option>
  <option>Kirkuk</option>
</select>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<label for="city">City:</label>
<select name="cities" id="city">
  <option>Erbil</option>
  <option selected>Sulaimani</option>
  <option>Duhok</option>
  <option>Halabja</option>
  <option>Kirkuk</option>
</select>

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 4

selected makes Sulaimani the starting choice.

selected Sulaimani دەکاتە هەڵبژاردەی سەرەتا.

These options have no value attribute, so the browser sends the option's text: cities=Sulaimani. Usually you give each option a short value, which is sent instead of the text:

ئەم هەڵبژاردانە valueـیان نییە، بۆیە دەقی هەڵبژاردەکە دەنێرێت: cities=Sulaimani. زۆرجار valueـێکی کورت دەدەیتە هەر هەڵبژاردەیەک، کە لەبری دەقەکە دەنێردرێت:

Options with valuesهەڵبژاردە لەگەڵ valueHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<select name="city">
  <option value="erbil">Erbil</option>
  <option value="sulaimani" selected>Sulaimani</option>
  <option value="duhok">Duhok</option>
</select>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<select name="city">
  <option value="erbil">Erbil</option>
  <option value="sulaimani" selected>Sulaimani</option>
  <option value="duhok">Duhok</option>
</select>

Add multiple and the user can choose several options (Ctrl-click on Windows, Cmd-click on a Mac); size sets how many lines are visible. Give the name square brackets, so PHP receives all the choices as an array, as with checkboxes:

multiple زیاد بکە و دەتوانێت چەند بژاردەیەک هەڵبژێرێت (Ctrl لەگەڵ کرتە لە ویندۆز، Cmd لەگەڵ کرتە لە ماک)؛ size دیاری دەکات چەند دێڕ دیار بێت. کەوانەی چوارگۆشە بخە دوای ناوەکە، بۆ ئەوەی PHP هەموو هەڵبژاردنەکان وەک وەربگرێت، وەک چێک‌بۆکسەکان:

HTML

<label for="classes">Classes attended:</label>
<select name="classes[]" id="classes" multiple size="3">
  <option value="geography">Geography</option>
  <option value="mathematics">Mathematics</option>
  <option value="english">English</option>
</select>

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 2

classes[]: PHP gets $_POST["classes"] as an array, for example ["geography", "english"].

classes[]: PHP $_POST["classes"] وەک وەردەگرێت، بۆ نموونە ["geography", "english"].

Html 5 Kurdish Course Select And Option 13Code Land · Kurdish (Sorani)کوردی (سۆرانی) · 1.6K viewsبینین · 65 likesلایک
In Kurdish: how to make a drop-down list with select and option inside a form.
بە کوردی: چۆن بە `<select>` و `<option>` لەناو دروست بکەیت.
Whole video: Kurdish explanation of select and option
هەموو ڤیدیۆکە: ڕوونکردنەوەی `<select>` و `<option>` بە کوردی.

Form elements (controls)توخمەکانی فۆرم

Text areas and submit buttonsناوچەکانی دەق و دوگمەکانی ناردن

A is a box for several lines of text, such as a biography or a comment. Unlike <input>, it has a closing tag, and any starting text goes between the tags. rows and cols set its size.

چوارگۆشەیەکە بۆ چەند دێڕێک دەق، وەک ژیاننامە یان لێدوانێک. بە پێچەوانەی <input>، کۆتایی هەیە و هەر دەقێکی سەرەتایی دەچێتە نێوان . rows و cols قەبارەکەی دیاری دەکەن.

A text areaناوچەی دەقHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<label for="bio">Biography:</label><br>
<textarea name="bio" id="bio" rows="4" cols="40"></textarea>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<label for="bio">Biography:</label><br>
<textarea name="bio" id="bio" rows="4" cols="40"></textarea>

The sends the form. You can make it with <input type="submit"> (the value is the button text) or with <button type="submit">, which can contain any content between its tags. Both do the same job:

دەنێرێت. دەتوانیت بە <input type="submit"> دروستی بکەیت (value دەقی سەر دوگمەکەیە) یان بە <button type="submit">، کە دەتوانێت هەر ناوەڕۆکێک لە نێوان هەبێت. هەردووکیان هەمان کار دەکەن:

Two ways to make a submit buttonدوو ڕێگا بۆ دروستکردنی دوگمەی ناردنHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<input type="submit" value="Register">
<button type="submit">Register</button>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<input type="submit" value="Register">
<button type="submit">Register</button>

Two more button types. type="reset" puts every field back to its first value; real forms rarely use it, because one wrong click deletes everything the user typed. type="button" (or <button type="button">) does nothing by itself: it is a button for JavaScript to use.

دوو جۆری تری دوگمە. type="reset" هەموو خانەیەک دەگەڕێنێتەوە بۆ سەرەتاکەی؛ ڕاستەقینە کەم بەکاری دەهێنن، چونکە یەک کرتەی هەڵە هەموو ئەوەی نووسیویەتی دەسڕێتەوە. type="button" (یان <button type="button">) خۆی هیچ ناکات: دوگمەیەکە بۆ ئەوەی بەکاری بهێنێت.

HTML

<input type="reset" value="Clear form">
<button type="button">Show more</button>  <!-- does nothing until JavaScript gives it a job -->

The main form controls سەرەکی
Control	Codeکۆد	What is sentچی دەنێردرێت
Text field	`<input type="text" name="uname">`	`uname=` + typed text`uname=` + دەقی نووسراو
Password field	`<input type="password" name="password">`	`password=` + typed text`password=` + دەقی نووسراو
Radio buttons	`<input type="radio" name="gender" value="male">`	The `value` of the chosen one`value`ـی ئەوەی هەڵبژێردراوە
Checkboxes	`<input type="checkbox" name="lang[]" value="kurd">`	The `value` of each ticked box`value`ـی هەر چوارگۆشەیەکی نیشانکراو
Drop-down list	`<select name="city"><option>…</option></select>`	The chosen option's `value` (or its text)`value`ـی هەڵبژاردەی هەڵبژێردراو (یان دەقەکەی)
Text area	`<textarea name="bio"></textarea>`	`bio=` + typed text`bio=` + دەقی نووسراو
Submit button	`<input type="submit" value="Send">`	Only if it has a `name`تەنها ئەگەر `name`ـی هەبێت

HTML5 input typesجۆرەکانی input لە HTML5ـدا

added several new values for type. On phones they bring the right keyboard, and many of them give a ready-made picker (a calendar, a colour chooser, a slider). Some also check the value before the form is sent. Here are all the types from the lecture, corrected, plus week:

چەند نرخێکی نوێی بۆ type زیاد کرد. لەسەر مۆبایل تەختەکلیلی گونجاو دەهێنن و زۆربەیان هەڵبژێرێکی ئامادە دەدەن (ڕۆژژمێر، هەڵبژاردنی ڕەنگ، خلیسکێنەر). هەندێکیشیان پێش ناردنی دەپشکنن. ئەمە هەموو جۆرەکانی وانەکەیە، ڕاستکراوە، لەگەڵ week:

HTML5 input typesجۆرەکانی inputـی ⁦HTML5⁩
type	What the browser shows چی پیشان دەدات	Value sentئەو نرخەی دەنێردرێت
`color`	A colour pickerهەڵبژێری ڕەنگ	`#ff0000`
`date`	A calendar to pick a dayڕۆژژمێرێک بۆ هەڵبژاردنی ڕۆژ	`2026-10-16`
`datetime-local`	A date and a time (no time zone)بەروار و کات (بێ ناوچەی کات)	`2026-10-16T09:30`
`email`	A text box that checks for an email address کە دەپشکنێت	`aram@example.com`
`month`	A month and yearمانگ و ساڵ	`2026-10`
`number`	A number box with up/down arrows; `min`, `max`, `step`چوارگۆشەی ژمارە بە تیری سەرەوە/خوارەوە؛ `min`، `max`، `step`	`5`
`range`	A slider (default 0 to 100)خلیسکێنەر (بە شێوەی بنەڕەتی 0 تا ⁦100⁩)	`7`
`search`	A text box for searching (may show a clear ✕ button) بۆ گەڕان (لەوانەیە دوگمەی سڕینەوەی ✕ پیشان بدات)	the typed textدەقە نووسراوەکە
`tel`	A text box with a phone keypad on mobiles (no format check) لەگەڵ تەختەکلیلی ژمارەی تەلەفۆن لەسەر مۆبایل (بێ پشکنینی شێوە)	`0750 000 0000`
`time`	A timeکات	`09:30`
`url`	A text box that checks for a full web address کە ناونیشانی تەواوی وێب دەپشکنێت	`https://www.php.net`
`week`	A week of the yearهەفتەیەکی ساڵ	`2026-W42`

All the HTML5 input types in one formهەموو جۆرەکانی inputـی ⁦HTML5⁩ لە یەک فۆرمداHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<form>
  <p><label>color: <input type="color" name="favcolor" value="#ff0000"></label></p>
  <p><label>date: <input type="date" name="bday"></label></p>
  <p><label>datetime-local: <input type="datetime-local" name="appointment"></label></p>
  <p><label>email: <input type="email" name="email"></label></p>
  <p><label>month: <input type="month" name="bdaymonth"></label></p>
  <p><label>number: <input type="number" name="quantity" min="1" max="10"></label></p>
  <p><label>range: <input type="range" name="point" min="0" max="10"></label></p>
  <p><label>search: <input type="search" name="googlesearch"></label></p>
  <p><label>tel: <input type="tel" name="usrtel"></label></p>
  <p><label>time: <input type="time" name="usr-time"></label></p>
  <p><label>url: <input type="url" name="homepage"></label></p>
  <p><label>week: <input type="week" name="week"></label></p>
</form>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<form>
  <p><label>color: <input type="color" name="favcolor" value="#ff0000"></label></p>
  <p><label>date: <input type="date" name="bday"></label></p>
  <p><label>datetime-local: <input type="datetime-local" name="appointment"></label></p>
  <p><label>email: <input type="email" name="email"></label></p>
  <p><label>month: <input type="month" name="bdaymonth"></label></p>
  <p><label>number: <input type="number" name="quantity" min="1" max="10"></label></p>
  <p><label>range: <input type="range" name="point" min="0" max="10"></label></p>
  <p><label>search: <input type="search" name="googlesearch"></label></p>
  <p><label>tel: <input type="tel" name="usrtel"></label></p>
  <p><label>time: <input type="time" name="usr-time"></label></p>
  <p><label>url: <input type="url" name="homepage"></label></p>
  <p><label>week: <input type="week" name="week"></label></p>
</form>

Each browser draws these controls in its own way. Firefox and Safari on a computer show month and week as plain text boxes.

هەر ئەم بە شێوەی خۆی دەکێشێت. Firefox و Safari لەسەر کۆمپیوتەر month و week وەک ئاسایی پیشان دەدەن.

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 2

A label can wrap the input; then for/id are not needed.

دەتوانێت input لەخۆ بگرێت؛ ئەو کاتە پێویست بە for/id ناکات.

Lineدێڕی 7

min and max limit the number.

min و max ژمارەکە سنووردار دەکەن.

Errors in the HTML5 types slideهەڵەکان لە سلایدی جۆرەکانی ⁦HTML5⁩دا

Every example uses curly quotes (type=“color”). The browser then reads an invalid type and falls back to a plain text box, so none of the HTML5 widgets would appear. Use straight quotes.
type=“color ” has a space inside the value, and value=“#ﬀ0000” contains a special "ff" ligature character from copy and paste. It must be value="#ff0000".
datetime is obsolete (see above).
name=“datet-local” is a typo. The number example is named datetime and misses its closing quote. The range example has an extra quote (name=“point” ” min=…). We use clear names.
url appears in the code but not in the list, and week is missing. Type values are written in lowercase (date, email, number, search), not "Date" or "Email" as on the slide.

هەموو نموونەکان خوار بەکاردەهێنن (type=“color”). ئەو کاتە جۆرێکی نادروست دەخوێنێتەوە و دەگەڕێتەوە بۆ ئاسایی، بۆیە هیچ یەکێک لە ئامرازەکانی ⁦HTML5⁩ دەرناکەوێت. ڕاست بەکاربهێنە.
type=“color ” لەناو هەیە و value=“#ﬀ0000” پیتێکی تایبەتی «ff»ـی تێدایە کە لە کۆپی و لکاندنەوە هاتووە. دەبێت value="#ff0000" بێت.
datetime (سەرەوە ببینە).
name=“datet-local” هەڵەی نووسینە. نموونەی ژمارەکە ناوی datetimeـە و نیشانەی کۆتایی گوتەی نییە. نموونەی range نیشانەیەکی زیادەی هەیە (name=“point” ” min=…). ئێمە ناوی ڕوون بەکاردەهێنین.
url لە کۆدەکەدا هەیە بەڵام لە لیستەکەدا نییە و week ونە. نرخەکانی type بە پیتی بچووک دەنووسرێن (date، email، number، search)، نەک «Date» یان «Email» وەک سلایدەکە.

Learn HTML forms in 10+ minutes! 📝Bro Code · Englishئینگلیزی · 256K viewsبینین · 5.1K likesلایک · Partبەشی 6:16–10:46 (ofلە 17:55)
Short, clear chapters on the HTML5 input types email, tel (phone), date and number.
چەند بەشێکی کورت و ڕوون دەربارەی جۆرە نوێیەکانی لە : `email`، `tel` (ژمارەی تەلەفۆن)، `date` و `number`.
Watch 6:16 to 10:46: email, phone, date and number inputs
لە ⁦6:16⁩ تا ⁦10:46⁩ سەیر بکە: بۆ ، تەلەفۆن، بەروار و ژمارە.

Important HTML5 attributesخەسڵەتە گرنگەکانی HTML5

autofocus puts the cursor in this field automatically when the page loads. Use it on one field only.
min and max set the minimum and maximum values for an <input>, for example a number or a date. step sets the jump between allowed values.
placeholder shows a grey hint that describes the expected value. It disappears when the user starts typing.
required means the field must be filled in before the form can be submitted (a ).

autofocus کاتێک دەکرێتەوە، خۆکارانە دەخاتە ناو ئەم خانەیە. تەنها لەسەر یەک خانە بەکاری بهێنە.
min و max کەمترین و زۆرترین بۆ <input>ـێک دیاری دەکەن، بۆ نموونە ژمارە یان بەروار. step ماوەی نێوان ڕێگەپێدراوەکان دیاری دەکات.
placeholder ڕێنماییەکی خۆڵەمێشی پیشان دەدات کە چاوەڕوانکراو وەسف دەکات. کاتێک بەکارهێنەر دەست بە نووسین دەکات ون دەبێت.
required واتە خانەکە دەبێت پێش ناردنی پڕ بکرێتەوە ().

placeholder, required, min and maxplaceholder، required، min و maxHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<form action="register.php" method="post">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" placeholder="e.g. Aram" required>
  <br><br>
  <label for="age">Age:</label>
  <input type="number" name="age" id="age" min="17" max="60" required>
  <br><br>
  <input type="submit" value="Register">
</form>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<form action="register.php" method="post">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" placeholder="e.g. Aram" required>
  <br><br>
  <label for="age">Age:</label>
  <input type="number" name="age" id="age" min="17" max="60" required>
  <br><br>
  <input type="submit" value="Register">
</form>

In a normal page, pressing Register with an empty name or an age of 70 shows a browser message and the form is not sent.

لە ئاساییدا، داگرتنی Register بە ناوێکی بەتاڵ یان تەمەنی ⁦70⁩، پەیامێکی پیشان دەدات و نانێردرێت.

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 3

A hint inside the box, and the field cannot stay empty.

ڕێنماییەک لەناو چوارگۆشەکە و خانەکە ناتوانێت بەتاڵ بمێنێتەوە.

Lineدێڕی 6

Only numbers from 17 to 60 are accepted.

تەنها ژمارەکانی ⁦17⁩ تا ⁦60⁩ قبووڵ دەکرێن.

autofocusنموونەی autofocusHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<label for="search">Search:</label>
<input type="search" name="q" id="search" autofocus>

required and autofocus are attributes: writing the name is enough to switch them on. They take no value, and any value means "on": even required="false" still makes the field required. To switch them off, leave them out. Attribute names are written in lowercase (the slide writes "Autofocus", "Placeholder").

required و autofocus : نووسینی ناوەکە بەسە بۆ چالاککردنیان. وەرناگرن و هەر واتە «چالاک»: تەنانەت required="false"یش خانەکە پێویست دەکات. بۆ ناچالاککردنیان، مەیاننووسە. ناوی بە پیتی بچووک دەنووسرێن (سلایدەکە «Autofocus» و «Placeholder» دەنووسێت).

The browser is not a guardتۆڕگەڕ پاسەوان نییە

These checks run in the browser (). They help honest users, but anyone can switch them off or send data without your form. PHP on the server must always check the data again (). You will do this in Form validation.

ئەم پشکنینانە لە ئەنجام دەدرێن (). یارمەتیی بەکارهێنەرە ڕاستگۆکان دەدەن، بەڵام هەر کەسێک دەتوانێت لایان ببات یان بەبێ دراوە بنێرێت. PHP لەسەر دەبێت هەمیشە دراوەکان دووبارە بپشکنێتەوە (). ئەمە لە پشتڕاستکردنەوەی فۆرم دەکەیت.

Important HTML5 attributesخەسڵەتە گرنگەکانی HTML5

Suggestions and locked fields: datalist, readonly and disabledپێشنیار و خانەی داخراو: datalist، readonly و disabled

<datalist> gives a text field a list of suggestions while the user types. Link the two with the same name in the field's list and the datalist's id. Unlike <select>, the user may still type something that is not in the list.

<datalist> لیستێک پێشنیار دەداتە لە کاتێکدا دەنووسێت. ئەم دووانە بە هەمان ناو لە listـی خانەکە و idـی datalistـەکەدا بەیەکەوە ببەستە. بە پێچەوانەی <select>، هێشتا دەتوانێت شتێک بنووسێت کە لە لیستەکەدا نییە.

HTML

<label for="city">City:</label>
<input type="text" name="city" id="city" list="cities">
<datalist id="cities">
  <option value="Erbil"></option>
  <option value="Sulaymaniyah"></option>
  <option value="Duhok"></option>
  <option value="Halabja"></option>
</datalist>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<label for="city">City:</label>
<input type="text" name="city" id="city" list="cities">
<datalist id="cities">
  <option value="Erbil"></option>
  <option value="Sulaymaniyah"></option>
  <option value="Duhok"></option>
  <option value="Halabja"></option>
</datalist>

Click the box or type "S": the browser suggests the cities.

کرتە لە خانەکە بکە یان «S» بنووسە: شارەکان پێشنیار دەکات.

Two attributes lock a field. With readonly the user can read and select the text but not change it, and the value is sent with the form (the lecture uses it for a terms-and-conditions box). With disabled the field is greyed out, cannot be used and is not sent at all.

دوو خانەیەک دادەخەن. بە readonly، دەتوانێت دەقەکە بخوێنێتەوە و دیاری بکات بەڵام ناتوانێت بیگۆڕێت و لەگەڵ دەنێردرێت (وانەکە بۆ سندووقی مەرج و ڕێساکان بەکاری دەهێنێت). بە disabled، خانەکە خۆڵەمێشی دەبێت، بەکار نایەت و هەرگیز نانێردرێت.

HTML

<textarea name="terms" rows="3" cols="40" readonly>Terms and conditions …</textarea>
<input type="text" name="code" value="A-17" disabled>

Lab 1: practising formsتاقیگەی ١: ڕاهێنان لەسەر فۆرمەکان

Lab 1 practises forms in two steps: a basic registration form (Exercise three) and a login form (More example). The lab gives the code for both. Type each one, open it in the browser, and then compare it with the corrected version.

تاقیگەی ١ لە دوو هەنگاودا ڕاهێنان لەسەر دەکات: سادەی (ڕاهێنانی سێیەم) و (نموونەی زیاتر). تاقیگەکە کۆدی هەردووکیانی داوە. هەریەکەیان بنووسە، لە بیکەرەوە، پاشان لەگەڵ وەشانە ڕاستکراوەکەدا بەراوردی بکە.

Lab 1: practising formsتاقیگەی ١: ڕاهێنان لەسەر فۆرمەکان

Exercise three: a basic formڕاهێنانی سێیەم: فۆرمێکی سادە

"Form is used to collect information from the user. Write the following code." Here is the lab's code with the quotes corrected:

« بۆ کۆکردنەوەی زانیاری لە بەکارهێنەر بەکاردێت. ئەم کۆدەی خوارەوە بنووسە.» ئەمە کۆدی تاقیگەکەیە بە ڕاستکراوە:

Exercise three (corrected)ڕاهێنانی سێیەم (ڕاستکراوە)register.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<form action="" method="post">
  <h3>please enter your name and email address</h3>
  Name: <input type="text" name="uname"><br>
  Email: <input type="text" name="email"><br>
  <input type="submit" name="submit" value="register">
</form>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<form action="" method="post">
  <h3>please enter your name and email address</h3>
  Name: <input type="text" name="uname"><br>
  Email: <input type="text" name="email"><br>
  <input type="submit" name="submit" value="register">
</form>

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 1

action="" sends the form back to the same page, with POST. Later, the PHP code on this page will read the data.

action="" بە POST دەنێرێتەوە بۆ هەمان . دواتر کۆدی PHPـی ئەم دراوەکان دەخوێنێتەوە.

Lineدێڕی 5

The submit button has a name, so submit=register is sent too. PHP can use it to see that the form was submitted.

nameـی هەیە، بۆیە submit=registerیش دەنێردرێت. PHP دەتوانێت بەکاری بهێنێت بۆ زانینی ئەوەی کە نێردراوە.

Why the lab's version would failبۆچی وەشانەکەی تاقیگە سەرناکەوێت

In the lab sheet every attribute uses curly quotes (action=”” method=”post”). Then the method is invalid, so the browser falls back to GET; the action becomes an address literally called ””, which leads to a "Not Found" page; and the field names include the quote marks, so PHP would not find uname or email. With straight quotes, the form posts to its own page as intended. As improvements, use <label> elements and type="email" for the email field.

لە پەڕەی تاقیگەکەدا هەموو خوار بەکاردەهێنێت (action=”” method=”post”). ئەو کاتە method نادروستە، بۆیە دەگەڕێتەوە بۆ GET؛ action دەبێتە ناونیشانێک کە ناوی ڕێک ””ـە و دەگاتە پەڕەی «⁦Not Found⁩»؛ و ناوی خانەکان نیشانەکانی گوتەیان تێدا دەبێت، بۆیە PHP uname یان email نادۆزێتەوە. بە ڕاست، وەک مەبەست دەنێردرێت بۆ خۆی. وەک باشترکردن، <label> و type="email" بۆ خانەی ئیمەیڵ بەکاربهێنە.

Lab 1: practising formsتاقیگەی ١: ڕاهێنان لەسەر فۆرمەکان

<fieldset> draws a border around a group of related controls, and <legend> puts a title in that border. Here is the lab's code as it was given:

<fieldset> هێڵێک بە دەوری گرووپێک پەیوەندیدار دەکێشێت و <legend> ناونیشانێک دەخاتە ناو ئەو هێڵە. ئەمە کۆدی تاقیگەکەیە وەک خۆی:

The lab's login form (as given)فۆرمی چوونەژوورەوەی تاقیگە (وەک خۆی)login.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<div style="margin-top:200px;background-color:navajowhite;margin-left: 300px;margin-right: 300px" align="center">
<form action="#">
<fieldset>
<legend>Login Information:</legend>
First name:<br>
<input type="text" name="firstname" placeholder="Your name">
<br>
Last name:<br>
<input type="password" name="lastname" placeholder="Password">
<br><br>
<input type="submit" value="LogIN">
</fieldset>
</form>
</div>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<div style="margin-top:200px;background-color:navajowhite;margin-left: 300px;margin-right: 300px" align="center">
<form action="#">
<fieldset>
<legend>Login Information:</legend>
First name:<br>
<input type="text" name="firstname" placeholder="Your name">
<br>
Last name:<br>
<input type="password" name="lastname" placeholder="Password">
<br><br>
<input type="submit" value="LogIN">
</fieldset>
</form>
</div>

The fixed 300px side margins leave the orange box very little room on a narrow screen (like this preview), so the fieldset spills out of it. On a wide screen it looks like the picture in the lab sheet.

پەراوێزە جێگیرەکانی ⁦300px⁩ لەسەر شاشەی تەسک (وەک ئەم پێشبینینە) شوێنێکی زۆر کەم بۆ چوارگۆشە پرتەقاڵییەکە دەهێڵنەوە، بۆیە fieldsetـەکە لێی دەڕژێتە دەرەوە. لەسەر شاشەی پان وەک وێنەکەی پەڕەی تاقیگەکە دەردەکەوێت.

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 1

A light-orange (navajowhite) box with big fixed margins.

چوارگۆشەیەکی پرتەقاڵیی کاڵ ⁦(navajowhite)⁩ لەگەڵ پەراوێزی گەورەی جێگیر.

Lineدێڕی 3-4

<fieldset> and its <legend> title.

<fieldset> و ناونیشانی <legend>ـەکەی.

Lineدێڕی 6

placeholder shows the grey hint "Your name".

placeholder ڕێنماییە خۆڵەمێشییەکەی «⁦Your name⁩» پیشان دەدات.

Problems in the login exampleکێشەکانی نموونەی چوونەژوورەوە

The label says Last name, but the field is a password box named lastname with the hint "Password". Choose one: a password field labelled "Password:" with name="password".
action="#" with no method uses GET, so the password would appear in the address bar. A login form must use method="post".
align="center" on a <div> is obsolete; use CSS text-align: center. The fixed margin-left: 300px and margin-right: 300px break on phones; use max-width and margin: auto.
"First name:" and "Last name:" are plain text, not <label> elements.

دەڵێت ⁦Last name⁩، بەڵام خانەکە ـە بە ناوی lastname و ڕێنمایی «Password». یەکێکیان هەڵبژێرە: بە «Password:» و name="password".
action="#" بەبێ method GET بەکاردەهێنێت، بۆیە لە دەردەکەوێت. دەبێت method="post" بەکاربهێنێت.
align="center" لەسەر <div> ؛ CSS text-align: center بەکاربهێنە. margin-left: 300px و margin-right: 300pxی جێگیر لەسەر مۆبایل تێکدەچن؛ max-width و margin: auto بەکاربهێنە.
«⁦First name⁩:» و «⁦Last name⁩:» دەقی سادەن، نەک <label>.

The login form, correctedفۆرمی چوونەژوورەوە، ڕاستکراوەlogin.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Log in</title>
  <style>
    .box {
      max-width: 420px;
      margin: 40px auto;
      background-color: navajowhite;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="box">
    <form action="login.php" method="post">
      <fieldset>
        <legend>Login Information:</legend>
        <label for="username">User name:</label><br>
        <input type="text" name="username" id="username" placeholder="Your name"><br>
        <label for="password">Password:</label><br>
        <input type="password" name="password" id="password" placeholder="Password"><br><br>
        <input type="submit" value="Log in">
      </fieldset>
    </form>
  </div>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Log in</title>
  <style>
    .box {
      max-width: 420px;
      margin: 40px auto;
      background-color: navajowhite;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="box">
    <form action="login.php" method="post">
      <fieldset>
        <legend>Login Information:</legend>
        <label for="username">User name:</label><br>
        <input type="text" name="username" id="username" placeholder="Your name"><br>
        <label for="password">Password:</label><br>
        <input type="password" name="password" id="password" placeholder="Password"><br><br>
        <input type="submit" value="Log in">
      </fieldset>
    </form>
  </div>
</body>
</html>

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 7-12

CSS replaces align and the fixed margins: at most 420px wide, centred.

CSS جێگەی align و پەراوێزە جێگیرەکان دەگرێتەوە: زۆرترین پانی ⁦420px⁩، لە ناوەڕاست.

Lineدێڕی 17

POST, so the password is not shown in the URL.

POST، بۆ ئەوەی لە پیشان نەدرێت.

Lineدێڕی 23

A real password field, with a matching label and a clear name.

ڕاستەقینە، لەگەڵ گونجاو و ناوێکی ڕوون.

Quick checkپشکنینی خێراIn the lab's login form, the field labelled "Last name" is <input type="password" name="lastname">. What is wrong?لە تاقیگەکەدا، ئەو خانەیەی «⁦Last name⁩»ـی هەیە <input type="password" name="lastname">ـە. چی هەڵەیە؟The label, the type and the name do not match: it should be a password field labelled "Password:" with name="password"لەیبڵ، type و name یەک ناگرنەوە: دەبێت خانەیەکی تێپەڕەوشە بێت بە لەیبڵی «Password:» و name="password"type="password" does not existtype="password" بوونی نییەPassword fields cannot have a nameخانەکانی تێپەڕەوشە ناتوانن nameـیان هەبێتNothing: it is correctهیچ: دروستە

The lab ends with a homework: "create the following form that shows in the image". No code is given; this is the only description:

تاقیگەکە بە ئەرکێکی ماڵەوە کۆتایی دێت: «ئەو دروست بکە کە لە وێنەکەدا دەردەکەوێت». هیچ کۆدێک نەدراوە؛ ئەمە تاکە وەسفەکەیە:

The homework: rebuild this Sign Up form.ئەرکی ماڵەوە: ئەم ⁦Sign Up⁩ـە دووبارە دروست بکەرەوە.Course material

Three <fieldset> groups with backgrounds of roughly grey (silver), light blue (skyblue) and tan (burlywood). The exact colours are not given.
Group 1, legend "Your basic info": Name, Email, Password and Age (two radio buttons: Under 13, 13 or older).
Group 2, legend "Your profile": Biography (a text area).
Group 3, no legend: Job Role (a drop-down list; only "Front-End Developer" is visible) and Interests (checkboxes Development, Design, Business).
A Sign Up submit button.
In the picture the legends read "1Your basic info": the number was probably a styled badge whose CSS is missing. Add a small space or style for the number.

سێ گرووپی <fieldset> بە باکگراوندی نزیکەی خۆڵەمێشی ⁦(silver)⁩، شینی کاڵ ⁦(skyblue)⁩ و قاوەیی کاڵ ⁦(burlywood)⁩. ڕەنگە ورددەکان نەدراون.
گرووپی ١، legend «⁦Your basic info⁩»: Name، Email، Password و Age (دوو : ⁦Under 13⁩، ⁦13 or older⁩).
گرووپی ٢، legend «⁦Your profile⁩»: Biography ().
گرووپی ٣، بێ ⁦legend: Job Role⁩ (؛ تەنها «⁦Front-End Developer⁩» دیارە) و Interests ( Development، Design، Business).
⁦Sign Up⁩.
لە وێنەکەدا legendـەکان دەڵێن «⁦1Your basic info⁩»: ژمارەکە لەوانەیە نیشانەیەکی ڕازێنراو بووبێت کە CSSـەکەی نەماوە. بچووک یان شێوازێک بۆ ژمارەکە زیاد بکە.

ExerciseڕاهێنانHomework: Sign Up formئەرکی ماڵەوە: فۆرمی ⁦Sign Up⁩

Create the Sign Up form from the picture. Use fieldsets with legends, labels for every field, a radio group for the age, a text area, a drop-down list and checkboxes. Send it with POST to signup.php.

⁦Sign Up⁩ لە وێنەکەوە دروست بکە. fieldset لەگەڵ legend، بۆ هەموو خانەیەک، گرووپێکی بۆ تەمەن، ، و بەکاربهێنە. بە POST بینێرە بۆ signup.php.

Hintئاماژە

Both age radio buttons need the same name. Give the checkboxes the name interests[].

هەردوو تەمەن پێویستیان بە هەمان name هەیە. ناوی interests[] بدە .

Show answerوەڵامەکە پیشان بدە

signup.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sign Up</title>
  <style>
    body     { font-family: Georgia, serif; max-width: 560px; margin: 20px auto; }
    fieldset { margin-bottom: 20px; padding: 8px 16px; border: 1px solid #777; }
    legend   { font-size: 1.3em; font-weight: bold; }
    .number  { margin-right: 6px; }
    label    { display: inline-block; margin: 6px 0; }
    .basic   { background: silver; }
    .profile { background: skyblue; }
    .job     { background: burlywood; }
  </style>
</head>
<body>
  <h1>Sign Up</h1>
  <form action="signup.php" method="post">
    <fieldset class="basic">
      <legend><span class="number">1</span>Your basic info</legend>
      <label for="name">Name:</label>
      <input type="text" name="name" id="name"><br>
      <label for="email">Email:</label>
      <input type="email" name="email" id="email"><br>
      <label for="password">Password:</label>
      <input type="password" name="password" id="password">
      <p>Age:</p>
      <input type="radio" name="age" value="under_13" id="under_13">
      <label for="under_13">Under 13</label><br>
      <input type="radio" name="age" value="13_or_older" id="older">
      <label for="older">13 or older</label>
    </fieldset>
    <fieldset class="profile">
      <legend><span class="number">2</span>Your profile</legend>
      <label for="bio">Biography:</label>
      <textarea name="bio" id="bio"></textarea>
    </fieldset>
    <fieldset class="job">
      <label for="job">Job Role:</label><br>
      <select name="job" id="job">
        <option value="front-end">Front-End Developer</option>
        <option value="back-end">Back-End Developer</option>
        <option value="full-stack">Full-Stack Developer</option>
      </select>
      <p>Interests:</p>
      <input type="checkbox" name="interests[]" value="development" id="development">
      <label for="development">Development</label><br>
      <input type="checkbox" name="interests[]" value="design" id="design">
      <label for="design">Design</label><br>
      <input type="checkbox" name="interests[]" value="business" id="business">
      <label for="business">Business</label>
    </fieldset>
    <input type="submit" value="Sign Up">
  </form>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sign Up</title>
  <style>
    body     { font-family: Georgia, serif; max-width: 560px; margin: 20px auto; }
    fieldset { margin-bottom: 20px; padding: 8px 16px; border: 1px solid #777; }
    legend   { font-size: 1.3em; font-weight: bold; }
    .number  { margin-right: 6px; }
    label    { display: inline-block; margin: 6px 0; }
    .basic   { background: silver; }
    .profile { background: skyblue; }
    .job     { background: burlywood; }
  </style>
</head>
<body>
  <h1>Sign Up</h1>
  <form action="signup.php" method="post">
    <fieldset class="basic">
      <legend><span class="number">1</span>Your basic info</legend>
      <label for="name">Name:</label>
      <input type="text" name="name" id="name"><br>
      <label for="email">Email:</label>
      <input type="email" name="email" id="email"><br>
      <label for="password">Password:</label>
      <input type="password" name="password" id="password">
      <p>Age:</p>
      <input type="radio" name="age" value="under_13" id="under_13">
      <label for="under_13">Under 13</label><br>
      <input type="radio" name="age" value="13_or_older" id="older">
      <label for="older">13 or older</label>
    </fieldset>
    <fieldset class="profile">
      <legend><span class="number">2</span>Your profile</legend>
      <label for="bio">Biography:</label>
      <textarea name="bio" id="bio"></textarea>
    </fieldset>
    <fieldset class="job">
      <label for="job">Job Role:</label><br>
      <select name="job" id="job">
        <option value="front-end">Front-End Developer</option>
        <option value="back-end">Back-End Developer</option>
        <option value="full-stack">Full-Stack Developer</option>
      </select>
      <p>Interests:</p>
      <input type="checkbox" name="interests[]" value="development" id="development">
      <label for="development">Development</label><br>
      <input type="checkbox" name="interests[]" value="design" id="design">
      <label for="design">Design</label><br>
      <input type="checkbox" name="interests[]" value="business" id="business">
      <label for="business">Business</label>
    </fieldset>
    <input type="submit" value="Sign Up">
  </form>
</body>
</html>

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 7-14

CSS for the fieldsets, the legend and the three background colours.

CSS بۆ fieldsetـەکان، legend و سێ ڕەنگی باکگراوند.

Lineدێڕی 21

A span holds the legend number, so it can be styled.

spanـێک ژمارەی legend هەڵدەگرێت، بۆ ئەوەی بتوانرێت ڕازێنرێتەوە.

Lineدێڕی 29-32

One radio group: the same name="age".

یەک گرووپی : هەمان name="age".

Lineدێڕی 42-44

Only "Front-End Developer" is visible in the picture; the other two options are our own examples.

تەنها «⁦Front-End Developer⁩» لە وێنەکەدا دیارە؛ دوو هەڵبژاردەکەی تر نموونەی خۆمانن.

Common mistakesهەڵەکانی باو

Form mistakes and fixes و چارەسەرەکانیان
Mistake	Resultئەنجام	Fixچارەسەر
A field has no `name` `name`ـی نییە	Its value is never sent. هەرگیز نانێردرێت.	Give every field a clear `name`.`name`ـێکی ڕوون بدە هەموو خانەیەک.
Curly quotes in attributes خوار لە	Wrong types, wrong names, GET instead of POST.جۆری نادروست، ناوی نادروست، GET لەبری POST.	Straight quotes only.تەنها ڕاست.
Radio buttons with different names بە ناوی جیاواز	The user can choose all of them.بەکارهێنەر دەتوانێت هەموویان هەڵبژێرێت.	One shared `name` per group.یەک `name`ـی هاوبەش بۆ هەر گرووپێک.
`for` does not match the `idfor` لەگەڵ `id` یەک ناگرێتەوە	Clicking the label does nothing.کرتەکردن لە هیچ ناکات.	Use exactly the same text in `for` and `id`.ڕێک هەمان دەق لە `for` و `id`دا بەکاربهێنە.
Login form with GET بە GET	The password appears in the URL and history. لە و مێژوودا دەردەکەوێت.	`method="post"`
Trusting `required`, `min`, `max`متمانەکردن بە `required`، `min`، `max`	Anyone can bypass them.هەر کەسێک دەتوانێت تێیان پەڕێنێت.	Check again in PHP.لە PHPـدا دووبارە بپشکنە.
`type="datetime"type="datetime"`	A plain text box. ئاسایی.	`type="datetime-local"`

More exercisesڕاهێنانی زیاتر

ExerciseڕاهێنانExercise: fix the formڕاهێنان: فۆرمەکە چاک بکەرەوە

This form was copied from slides and has five problems. Find them and write a correct version.

ئەم لە سلایدەوە کۆپی کراوە و پێنج کێشەی هەیە. بیاندۆزەوە و وەشانێکی دروست بنووسە.

save.htmlTEXT

<form action=”save.php” method=”post”>
  <label for="user">Name:</label>
  <input type="text" name="username" id="name">
  <label>Password:</label>
  <input type="password">
  Year:
  <input type="radio" name="year1" value="1"> 1
  <input type="radio" name="year2" value="2"> 2
  <input type="submit" value="Save">
</form>

Show answerوەڵامەکە پیشان بدە

Curly quotes in action and method (the method falls back to GET).
<label for="user"> does not match id="name".
The password label has no for, and the password field has no name and no id, so it is never sent.
The radio buttons have different names (year1, year2), so both can be chosen.
The numbers 1 and 2 next to the radios are not labels.

خوار لە action و methodدا (method دەگەڕێتەوە بۆ GET).
<label for="user"> لەگەڵ id="name" یەک ناگرێتەوە.
forـی نییە و name و idـی نییە، بۆیە هەرگیز نانێردرێت.
ناوی جیاوازیان هەیە (year1، year2)، بۆیە هەردووکیان دەتوانرێن هەڵبژێردرێن.
ژمارەکانی 1 و 2 لە تەنیشت نین.

save.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<form action="save.php" method="post">
  <label for="name">Name:</label>
  <input type="text" name="username" id="name">
  <label for="password">Password:</label>
  <input type="password" name="password" id="password">
  <p>Year:</p>
  <input type="radio" name="year" value="1" id="year1">
  <label for="year1">1</label>
  <input type="radio" name="year" value="2" id="year2">
  <label for="year2">2</label>
  <input type="submit" value="Save">
</form>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<form action="save.php" method="post">
  <label for="name">Name:</label>
  <input type="text" name="username" id="name">
  <label for="password">Password:</label>
  <input type="password" name="password" id="password">
  <p>Year:</p>
  <input type="radio" name="year" value="1" id="year1">
  <label for="year1">1</label>
  <input type="radio" name="year" value="2" id="year2">
  <label for="year2">2</label>
  <input type="submit" value="Save">
</form>

ExerciseڕاهێنانExercise: what does GET send?ڕاهێنان: GET چی دەنێرێت؟

A visitor types web programming in the search box of this form, chooses Books and clicks Search. Write the address the browser opens.

سەردانیکەرێک web programming لە خانەی گەڕانی ئەم دەنووسێت، Books هەڵدەبژێرێت و کرتە لە Search دەکات. ئەو ناونیشانە بنووسە کە دەیکاتەوە.

search.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<form action="search.php" method="get">
  <input type="search" name="q">
  <select name="type">
    <option value="all">All</option>
    <option value="books">Books</option>
  </select>
  <input type="submit" value="Search">
</form>

Hintئاماژە

GET puts name=value pairs after ?, joined with &. A space becomes +. The submit button has no name.

GET جووتەکانی name=value دوای ? دادەنێت، بە & پێکەوە. دەبێتە +. nameـی نییە.

Show answerوەڵامەکە پیشان بدە

search.php?q=web+programming&type=books (on the same server as the form, for example http://localhost/search.php?q=web+programming&type=books). The value of the option, books, is sent, not its text.

search.php?q=web+programming&type=books (لەسەر هەمان ، بۆ نموونە http://localhost/search.php?q=web+programming&type=books). هەڵبژاردەکە، books، دەنێردرێت، نەک دەقەکەی.

Quick checkپشکنینی خێراYour form has required on the email field. Do you still need to check the email in PHP? requiredـی لەسەر خانەی ئیمەیڵە. ئایا هێشتا پێویستە ئیمەیڵەکە لە PHPـدا بپشکنیت؟No, the browser already checked itنەخێر، تۆڕگەڕ پێشتر پشکنیویەتیOnly if the form uses GETتەنها ئەگەر فۆرمەکە GET بەکاربهێنێتOnly on old browsersتەنها لەسەر تۆڕگەڕەکانی کۆنYes, browser checks can be bypassedبەڵێ، پشکنینەکانی تۆڕگەڕ دەتوانرێت تێیان پەڕێنرێت

ExerciseڕاهێنانExercise: the complete enrolment formڕاهێنان: فۆرمی تەواوی ناونووسین

Rebuild the lecture's "HTML Forms Example" page. Box 1, Academic information: a Degree drop-down list (Bachelor of Arts, Bachelor of Science, Master of Business Administration, chosen in advance), a Student ID field and a "Classes attended" list where several classes can be chosen (Geography, Mathematics, English). Box 2, Personal details: first name, last name, gender (Male/Female) and e-mail. Below: a read-only terms box, then Send Form and Clear Form buttons. Also send the hidden value subject=Class.

لاپەڕەی «⁦HTML Forms Example⁩»ـی وانەکە دووبارە دروست بکەرەوە. سندووقی ١، ⁦Academic information⁩: بۆ ⁦Degree (Bachelor of Arts⁩، ⁦Bachelor of Science⁩، ⁦Master of Business Administration⁩ کە پێشتر هەڵبژێردراوە)، خانەیەک بۆ ⁦Student ID⁩ و لیستێکی «⁦Classes attended⁩» کە چەند وانەیەک تێیدا هەڵدەبژێردرێت (Geography، Mathematics، English). سندووقی ٢، ⁦Personal details⁩: ناوی یەکەم، ناوی کۆتایی، ڕەگەز ⁦(Male/Female)⁩ و . لە خوارەوە: سندووقێکی مەرجەکان کە ، پاشان دوگمەکانی ⁦Send Form⁩ و ⁦Clear Form⁩. هەروەها شاراوەی subject=Class بنێرە.

Hintئاماژە

Use <fieldset> and <legend> for the two boxes, multiple and classes[] for the list, readonly for the terms and type="reset" for Clear Form.

بۆ دوو سندووقەکە <fieldset> و <legend>، بۆ لیستەکە multiple و classes[]، بۆ مەرجەکان readonly و بۆ ⁦Clear Form⁩ type="reset" بەکار بهێنە.

Show answerوەڵامەکە پیشان بدە

enrol.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Forms Example</title>
</head>
<body>
  <form action="enrol.php" method="post">
    <input type="hidden" name="subject" value="Class">
    <fieldset>
      <legend>Academic information</legend>
      <p><label for="degree">Degree</label>
        <select name="degree" id="degree">
          <option value="BA">Bachelor of Arts</option>
          <option value="BS">Bachelor of Science</option>
          <option value="MBA" selected>Master of Business Administration</option>
        </select></p>
      <p><label for="studentid">Student ID</label>
        <input type="text" name="studentid" id="studentid"></p>
      <p><label for="classes">Classes attended</label>
        <select name="classes[]" id="classes" multiple size="3">
          <option>Geography</option>
          <option>Mathematics</option>
          <option>English</option>
        </select></p>
    </fieldset>
    <fieldset>
      <legend>Personal details</legend>
      <p><label for="fname">First name</label>
        <input type="text" name="fname" id="fname"></p>
      <p><label for="lname">Last name</label>
        <input type="text" name="lname" id="lname"></p>
      <p>Gender:
        <input type="radio" name="gender" id="gm" value="m"> <label for="gm">Male</label>
        <input type="radio" name="gender" id="gf" value="f"> <label for="gf">Female</label></p>
      <p><label for="email">Email</label>
        <input type="email" name="email" id="email"></p>
    </fieldset>
    <p><textarea name="terms" rows="4" cols="30" readonly>TERMS AND CONDITIONS...</textarea></p>
    <p>
      <input type="submit" value="Send Form">
      <input type="reset" value="Clear Form">
    </p>
  </form>
</body>
</html>

Two fixes to the lecture's code: its Student ID is a password field whose label points to an id that does not exist, and it writes "Bachelor of Art". Here the Student ID is a normal text field with a matching id, and the degree is Bachelor of Arts.

دوو ڕاستکردنەوە لە کۆدی وانەکەدا: ⁦Student ID⁩ـەکەی و ئاماژە بە idـێک دەکات کە بوونی نییە و «⁦Bachelor of Art⁩» دەنووسێت. لێرەدا ⁦Student ID⁩ ئاساییە بە idـی هاوتا و بڕوانامەکە ⁦Bachelor of Arts⁩ـە.

More exercisesڕاهێنانی زیاتر

Find the bugs: a registration pageهەڵەکان بدۆزەوە: لاپەڕەیەکی تۆمارکردن

A practical homework asked for a page with a student registration form and, under it, a table of all records. This solution looks right in the browser, but it has many bugs. Some would stop the form from working with PHP.

ئەرکێکی ماڵەوەی پراکتیکی داوای لاپەڕەیەکی دەکرد کە تۆمارکردنی خوێندکار و لە ژێریدا هەموو تێدا بێت. ئەم چارەسەرە لە دروست دەردەکەوێت، بەڵام زۆر هەڵەی تێدایە. هەندێکیان ڕێگە نادەن لەگەڵ PHP کار بکات.

homework.htmlHTML

<html>
  <head>
    <title>Registration</title>
  </head>
  <body>
    <h1>Welcome To Registration Form</h1>
    <h2>Student Registration</h2>
    <b><u>Required Fields *</u></b>
    <br><br><br><br><br>
    <form>
      <label>First Name:</label>
      <input type="text" placeholder="First Name"><br><br>
      <label>Middle Name:</label>
      <input type="text" placeholder="Middle Name"><br><br>
      <label>Last Name:</label>
      <input type="text" placeholder="Last Name"><br><br>
      <label>First Name:</label>
      <input type="text" placeholder="First Name"><br><br>
      <label>Department:
        <select>
          <option>IT</option>
          <option>Bank</option>
          <option>Businees</option>
          <option>Accounting</option>
        </select>
      </label><br><br>
      <input type="submit" value="Register...">
    </form>
    <h1>All Recors...</h1>
    <table border="1" style="border: 1px solid black; border-collapse: collapse;">
      <thead>
        <tr><th>#</th><th>First Name</th><th>Middle Name</th><th>Last Name</th><th>Department</th></tr>
        <tr><td>1</td><td>Aram</td><td>Kamal</td><td>Aziz</td><td>IT</td></tr>
        <tr><td>2</td><td>Shilan</td><td>Omar</td><td>Salih</td><td>Bank</td></tr>
      </thead>
    </table>
  </body>
</html>

ExerciseڕاهێنانExercise: find and fix the bugsڕاهێنان: هەڵەکان بدۆزەوە و چاکیان بکەرەوە

Find at least eight problems in this page, then write a corrected version.

لانیکەم هەشت کێشە لەم لاپەڕەیەدا بدۆزەوە، پاشان وەشانێکی ڕاستکراوە بنووسە.

Hintئاماژە

Look at the top of the file, at every <input>, at the labels, at the table sections and at the spelling.

سەیری سەرەتای فایلەکە، هەموو <input>ێک، ، بەشەکانی و ڕێنووسەکە بکە.

Show answerوەڵامەکە پیشان بدە

No <!DOCTYPE html>, no lang and no <meta charset="UTF-8">.
The form has no action and no method, so it is sent back to the same page with GET.
No <input> and no <select> has a name, so nothing would reach PHP.
The labels are not linked: there are no for and id pairs (only Department works, because its label wraps the list).
"First Name" appears twice: it was copied from the assignment picture.
The data rows are inside <thead>; they belong in <tbody>.
border="1" is obsolete and repeats the CSS border next to it.
Five <br> tags and <br><br> after each field are used for spacing; spacing is a job for CSS (margin).
Typos: "Businees" (Business) and "Recors" (Records). The second <h1> would also be better as <h2>.

<!DOCTYPE html>، lang و <meta charset="UTF-8"> نین.
action و methodـی نییە، بۆیە بە GET بۆ هەمان لاپەڕە دەنێردرێتەوە.
هیچ <input> و <select>ێک nameـی نییە، بۆیە هیچ شتێک ناگاتە PHP.
نەبەستراونەتەوە: هیچ جووتێکی for و id نییە (تەنها Department کار دەکات، چونکە لیستەکە لە خۆ دەگرێت).
«⁦First Name⁩» دوو جار هاتووە: لە وێنەی ئەرکەکەوە کۆپی کراوە.
لەناو <thead>دان؛ شوێنیان <tbody>ـە.
border="1" کۆن و لابراوە و هەمان کاری بۆردەری CSSـی تەنیشتی دووبارە دەکاتەوە.
پێنج <br> و <br><br> دوای هەر خانەیەک بۆ بۆشایی بەکارهاتوون؛ بۆشایی کاری CSSـە (margin).
هەڵەی ڕێنووس: «Businees» ⁦(Business)⁩ و «Recors» ⁦(Records)⁩. باشترە <h1>ـی دووەمیش ببێتە <h2>.

homework.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Registration</title>
  <style>
    form p { margin: 0 0 12px; }
    table, th, td { border: 1px solid black; border-collapse: collapse; }
    th, td { padding: 4px 8px; }
  </style>
</head>
<body>
  <h1>Welcome to the Registration Form</h1>
  <h2>Student Registration</h2>
  <p><strong>Required fields *</strong></p>
  <form action="register.php" method="post">
    <p><label for="first">First name *</label>
      <input type="text" name="first_name" id="first" placeholder="First name" required></p>
    <p><label for="middle">Middle name</label>
      <input type="text" name="middle_name" id="middle" placeholder="Middle name"></p>
    <p><label for="last">Last name *</label>
      <input type="text" name="last_name" id="last" placeholder="Last name" required></p>
    <p><label for="department">Department</label>
      <select name="department" id="department">
        <option>IT</option>
        <option>Bank</option>
        <option>Business</option>
        <option>Accounting</option>
      </select></p>
    <p><input type="submit" value="Register"></p>
  </form>
  <h2>All records</h2>
  <table>
    <thead>
      <tr><th>#</th><th>First name</th><th>Middle name</th><th>Last name</th><th>Department</th></tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>Aram</td><td>Kamal</td><td>Aziz</td><td>IT</td></tr>
      <tr><td>2</td><td>Shilan</td><td>Omar</td><td>Salih</td><td>Bank</td></tr>
    </tbody>
  </table>
</body>
</html>

Summary and reviewکورتە و پێداچوونەوە

A form collects user input. action says where it goes, method says how (GET in the URL, POST inside the request).
Every field that should be sent needs a name; the browser sends name=value pairs.
Labels (for = id) make forms easier to use.
Controls: text, password, radio (one choice per name), checkbox (many), select/option, textarea, submit.
HTML5 types (email, number, date, color…) and attributes (required, min, max, placeholder, autofocus) help the user, but PHP must still validate.
Use straight quotes everywhere; datetime is obsolete.

کۆ دەکاتەوە. action دەڵێت بۆ کوێ دەچێت، method دەڵێت چۆن (GET لەناو ، POST لەناو ).
هەموو کە دەبێت بنێردرێت پێویستی بە name هەیە؛ جووتەکانی name=value دەنێرێت.
(for = id) بەکارهێنانی ئاسانتر دەکەن.
: text، password، radio (یەک هەڵبژاردە بۆ هەر ناوێک)، checkbox (زۆر)، ⁦select/option⁩، textarea، submit.
جۆرەکانی ⁦HTML5 (email⁩، number، date، color…) و (required، min، max، placeholder، autofocus) یارمەتیی بەکارهێنەر دەدەن، بەڵام PHP هێشتا دەبێت بپشکنێت.
لە هەموو شوێنێک ڕاست بەکاربهێنە؛ datetime .

Review questionsپرسیارەکانی پێداچوونەوە

What do the action and method attributes do?خەسڵەتەکانی action و method چی دەکەن؟

action gives the address of the page that receives the data when the form is submitted. method chooses GET (data in the URL) or POST (data inside the request); the default is GET.

action ناونیشانی ئەو دەدات کە کاتی ناردنی دراوەکان وەردەگرێت. method GET (دراوە لەناو ) یان POST (دراوە لەناو ) هەڵدەبژێرێت؛ بە شێوەی بنەڕەتی GETـە.

What is the difference between radio buttons and checkboxes?جیاوازیی نێوان دوگمەکانی ڕادیۆ و چێک‌بۆکسەکان چییە؟

Radio buttons with the same name allow exactly one choice. Checkboxes allow any number of choices, including none.

بە هەمان ناو تەنها یەک هەڵبژاردە ڕێگە دەدەن. هەر ژمارەیەک هەڵبژاردە ڕێگە دەدەن، تەنانەت هیچیش.

What is sent from <option>Erbil</option> when it is chosen in <select name="cities">?کاتێک <option>Erbil</option> لە <select name="cities">دا هەڵدەبژێردرێت، چی دەنێردرێت؟

cities=Erbil: without a value attribute, the option's text is sent.

cities=Erbil: بەبێ value، دەقی هەڵبژاردەکە دەنێردرێت.

Name the four important HTML5 attributes from the lecture and what they do.چوار خەسڵەتە گرنگەکەی ⁦HTML5⁩ لە وانەکەدا ناو بهێنە و بڵێ چی دەکەن.

autofocus: focus this field when the page loads. min/max: smallest and largest allowed value. placeholder: a grey hint. required: the field must be filled in.

autofocus: لە کاتی کردنەوەی دەخاتە ئەم خانەیە. min/max: بچووکترین و گەورەترین ڕێگەپێدراو. placeholder: ڕێنماییەکی خۆڵەمێشی. required: خانەکە دەبێت پڕ بکرێتەوە.

Why did the HTML5 examples on the slide all show plain text boxes?بۆچی نموونەکانی ⁦HTML5⁩ لە سلایدەکەدا هەموویان خانەکانی دەقی ئاسایی پیشان دەدەن؟

Because of the curly quotes: the browser reads an invalid type and falls back to a text box.

بەهۆی خوارەوە: typeـێکی نادروست دەخوێنێتەوە و دەگەڕێتەوە بۆ .

What are fieldset and legend for?fieldset و legend بۆ چین؟

<fieldset> groups related controls inside a border; <legend> gives that group a title.

<fieldset> پەیوەندیدار لەناو هێڵێکدا کۆ دەکاتەوە؛ <legend> ناونیشانێک دەداتە ئەو گرووپە.

Videoڤیدیۆ

Watch a videoسەیری ڤیدیۆیەک بکە

A video that viewers liked a lot and praised in their comments, chosen for this lesson.ڤیدیۆیەک کە بینەران زۆریان پێ خۆش بووە و لە کۆمێنتەکانیاندا ستایشیان کردووە، بۆ ئەم وانەیە هەڵبژێردراوە.

Learn HTML Forms In 25 MinutesWeb Dev Simplified · Englishئینگلیزی · 1.1M viewsبینین · 25K likesلایک
Covers every part of an HTML form: action and method, labels, input types, placeholders, validation, checkboxes, radio buttons, select lists and text areas.
هەموو بەشەکانی ڕوون دەکاتەوە: و `method`، ، جۆرەکانی ، ، ، ، ، و .
Whole video: complete overview of HTML forms with chapters
هەموو ڤیدیۆکە: ناساندنێکی تەواوی ، دابەشکراو بە چەند بەشێک.

Lesson complete!وانەکە تەواو بوو!

Well done. Review the key terms, then go on to the next lesson.دەستخۆش. سەیرێکی زاراوە سەرەکییەکان بکەرەوە، پاشان بڕۆ بۆ وانەی داهاتوو.

Key termsزاراوە سەرەکییەکان

Next lessonوانەی داهاتوو

CSS Basics: Rules, Three Places and Coloursبنەماکانی CSS: ڕێسا، سێ شوێن و ڕەنگ

Related lecturesوانە پەیوەندیدارەکان

References and further readingسەرچاوەکان و خوێندنەوەی زیاتر

This lecture is a first edition. The Kurdish text and terminology are waiting for review by Kurdish IT teachers.ئەم وانەیە چاپی یەکەمە. دەقە کوردییەکە و زاراوەکانی چاوەڕێی پێداچوونەوەی مامۆستایانی کوردی بواری IT ن.

HTML Forms Reviewپێداچوونەوەی فۆرمەکانی HTML

What you will learnچی فێر دەبیت

Why forms matterبۆچی فۆرمەکان گرنگن

The form element: action and methodتوخمی ⁦form: action⁩ و method

GET or POST?GET یان POST؟

A first complete formیەکەم فۆرمی تەواو

Labels: name, id and forلەیبڵەکان: name، id و for

Form elements (controls)توخمەکانی فۆرم

Text and password fieldsخانەی دەق و خانەی تێپەڕەوشە

Radio buttons and checkboxesدوگمەکانی ڕادیۆ و چێک‌بۆکسەکان

Drop-down listsلیستەکانی هەڵبژاردن

Text areas and submit buttonsناوچەکانی دەق و دوگمەکانی ناردن

HTML5 input typesجۆرەکانی input لە HTML5ـدا

Important HTML5 attributesخەسڵەتە گرنگەکانی HTML5

Suggestions and locked fields: datalist, readonly and disabledپێشنیار و خانەی داخراو: datalist، readonly و disabled

Lab 1: practising formsتاقیگەی ١: ڕاهێنان لەسەر فۆرمەکان

Exercise three: a basic formڕاهێنانی سێیەم: فۆرمێکی سادە

More example: a login form with fieldset, legend and placeholderنموونەی زیاتر: فۆرمێک چوونەژوورەوە لەگەڵ fieldset، legend و placeholder

Homework: the Sign Up formئەرکی ماڵەوە: فۆرمی ⁦Sign Up⁩

Common mistakesهەڵەکانی باو

More exercisesڕاهێنانی زیاتر

Find the bugs: a registration pageهەڵەکان بدۆزەوە: لاپەڕەیەکی تۆمارکردن

Summary and reviewکورتە و پێداچوونەوە

Watch a videoسەیری ڤیدیۆیەک بکە

Lesson complete!وانەکە تەواو بوو!

Key termsزاراوە سەرەکییەکان

Related lecturesوانە پەیوەندیدارەکان