eduTrain

Lesson 23 / الدرس 23

Introduction to forms / مقدمة إلى النماذج

A form is how a page collects something from the visitor and sends it somewhere. You need four things: <form>, action, method, and an input with a label.

النموذج هو الطريقة التي تجمع بها الصفحة شيئًا من الزائر وترسله إلى مكان ما. وتحتاج فيه إلى أربعة أشياء: <form> و action و method وحقل إدخال له تسمية.

Everything you have written so far only shows things. A form is the first thing on a page that does something: the visitor types, presses a button, and the browser packs up what they typed and sends it to a server. 

<form action="/search" method="get">
    <label for="q">What are you looking for?</label>
    <input type="text" id="q" name="q">
    <button type="submit">Search</button>
</form>
The smallest useful form: one label, one text box, one button. Try it live and type in the box — nothing will actually be sent here, because the preview has nowhere to send it.

The <form> element and its two attributes

The <form> element wraps every field that should be sent together. It carries two attributes that decide what happens when the visitor presses the button: action is the address the data is sent to, and method is how it is sent.

GET or POST

With method="get" the browser puts the values in the address bar, after a ?. That suits a search: the address can be bookmarked and sent to a friend, and asking for it again changes nothing. With method="post" the values travel inside the request instead, out of the address bar. Use it for anything private, anything long, and anything that changes something — a password, a comment, an order. 

<form action="/search" method="get">
    <input type="text" name="q">
    <button type="submit">Search</button>
</form>

<form action="/comments" method="post">
    <input type="text" name="comment">
    <button type="submit">Send</button>
</form>
The same field, sent two different ways. The first would arrive at /search?q=dates; the second shows nothing at all in the address.

Every field needs a label

A <label> is the text that names a field. Link the two by giving the input an id and giving the label a for with the same value. Then the browser knows they belong together: a screen reader announces the label when the visitor reaches the field, and clicking the label puts the cursor inside the box.

AttributeGoes onWhat it does
action<form>The address the data is sent to
method<form>get or post
name<input>The name the server receives the value under
id<input>Connects the field to its label
for<label>Holds the id of the field it names
type<input>text gives a one-line text box

Every attribute used in this lesson.

Try it live / جرّب بنفسك

Preview / المعاينة

Check yourself / اختبر نفسك

1. What does the action attribute do?

2. Which method puts the values in the address bar?

3. You filled in a text box and its value never arrived. What is missing?

Your task / مهمتك

Build a "contact us" form: a heading, then a form that sends to /contact with method="post" and holds two text fields — a name and a subject — each with its own label, and a button that submits it.

ابنِ نموذج "اتصل بنا": عنوان، ثم نموذج يُرسل إلى /contact بطريقة method="post"، وفيه حقلا نص — الاسم والموضوع — لكل منهما تسميته، وزر يرسل النموذج.

  • The <form> has both action and method وسم <form> فيه action و method معًا
  • Two text inputs, each with a name حقلا نص، لكل منهما سمة name
  • Each label's for matches the id of its field سمة for في كل تسمية تطابق id حقلها
  • A button that submits the form زر يرسل النموذج
How do you want to submit? / كيف تريد التسليم؟