آموزش کار با فرم ها یا Forms در سند HTML

چکیده مطلب

در این مقاله به آموزش ایجاد فرم در سند html پرداخته ایم و در مورد بسیاری از تگ های فرم HTML یاد گرفته ایم و موارد ضروری را پوشش داده ایم.

فرم های HTML قبل از ظهور جاوا اسکریپت ابداع و استاندارد شده بودند. امروزه، ما از ورودی‌های فرم، دکمه‌ها و دیگر مکانیسم‌های تعاملی به روش‌های مختلف استفاده می‌کنیم. اما زیربنای آن یک سیستم مبتنی بر پارادایم درخواست-پاسخ HTTP است.

هنگامی که می خواهید داده هایی را از شخصی که از وب سایت شما بازدید می کند جمع آوری کنید، از فرم ها استفاده میکنیم. به عنوان مثال، هنگامی که برای برنامه هایی مانند Uber، Netflix یا Facebook ثبت نام/ورود می کنید، اطلاعاتی مانند نام ، ایمیل و رمز عبور را از طریق فرم های HTML وارد می کنید .

کاربر گاهی اوقات باید ورودی خود را ارائه دهد . این نوع تعامل عبارتند از:

ثبت نام و ورود به وب سایت ها
وارد کردن اطلاعات شخصی (نام، آدرس، مشخصات کارت اعتباری و …)
فیلتر کردن محتوا (با استفاده از سلکت باکس، چک باکس ها و …)
انجام جستجو
آپلود فایل ها

برای پاسخگویی به این نیازها، HTML کنترل‌های فرم تعاملی را ارائه می‌کند :

ورودی های متن (برای یک یا چند خط)
دکمه های رادیویی
چک باکس ها
سلکت باکس ها
آپلود ویجت ها
دکمه های ارسال

اکنون تمام عناصر مورد نیاز برای ایجاد یک فرم را یاد می گیریم.

تگ Form

این اولین تگ برای ایجاد فرم است که ما یاد خواهیم گرفت. این تگ تمام تگ های دیگری را که داخل فرم ما قرار می گیرند را می پوشاند.

فرم ما داده ها را به هیچ کجا ارسال نمی کند زیرا به سرور متصل نیست. برای اتصال فرم خود به سرور و پردازش داده های خود، می توانیم از هر زبان سمت سرور مانند Node، Python، Ruby یا PHP استفاده کنیم. بخشی از پردازش داده ها شامل دو ویژگی مهم است که به تگ <form> متصل می شوند. بیایید نگاهی به آن ویژگی ها بیندازیم.

ویژگی ها:

action : ویژگی action آدرس وب (URL) یک برنامه است که اطلاعات ارسال شده توسط فرم ما را پردازش می کند.
method : روش HTTP است که مرورگر برای ارسال فرم از آن استفاده می کند، مقادیر ممکن POST و GET هستند.

POST : داده ها از بدنه فرم به سرور ارسال می شود.
GET : داده ها در داخل URL ارسال می شوند و پارامترها با علامت سوال از هم جدا می شوند.
توجه: نمی‌توانید فرم‌هایی را درون فرم دیگری قرار دهید . این بدان معناست که شما نمی توانید یک تگ <form> را در تگ <form> دیگری داشته باشید.

توجه: نمی‌توانید فرمهایی را درون فرم دیگری قرار دهید . این بدان معناست که شما نمی توانید یک تگ <form> را در تگ <form> دیگری داشته باشید.

تگ input

تگ input بسیار تگی پرکاربردی است. برای ایجاد یک فیلد متنی استفاده می شود که در آن کاربر می تواند اطلاعاتی مانند ایمیل ، رمز عبور و … را تایپ کند.

بیایید یک فیلد متنی ایجاد کنیم که کاربر بتواند نام خود را تایپ کند.

<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <form action="" method="GET">
     <label for="name">نام</label> 
     <input name="name" id="name"> 
     <input type="submit"> 
   </form>
</body>
</html>

برای بررسی نحوه عملکرد فرم HTML در عمل، قطعه کد بالا را در index.html یا فایل html دیگری که برای این آموزش استفاده می کنید، قرار دهید.

نکته: تگ input یک تگ بسته شدنی است، بنابراین نیازی به تایپ تگ بسته شدنی برای مطابقت با تگ باز نیست.

من سه ویژگی در تگ input بالا اضافه کردم. بیایید هر یک را با جزئیات بررسی کنیم.

نوع (type)

ویژگی type نشان می دهد که چه نوع ورودی می خواهیم. اگر مقداری از متن به ویژگی type بدهیم، منظور ما در اینجا این است که مقداری که در قسمت ورودی وارد می کنیم از نوع متن است. مقادیر زیادی برای این ویژگی خاص وجود دارد. برخی از مقادیر ممکن عبارتند از ایمیل، تلفن برای تلفن و رمز عبور و …

مثال: وقتی وارد هر یک از حساب‌های خود (Amazon/Netflix) می‌شوید، باید دو مورد را وارد کنید: ایمیل و رمز عبور . بنابراین در این مورد خاص از عنصر ورودی استفاده می شود. ویژگی type به ترتیب با مقدار ایمیل و رمز عبور داده می شود.

شناسه (ID)

ویژگی ID اجباری نیست، اما ایده خوبی است که یکی را اضافه کنید. در برخی موارد، این برای هدف قرار دادن عناصر با CSS/JavaScript مفید است. ویژگی ID اضافه می شود تا بتوانیم برچسب ها را به کنترل های فرم خاص مرتبط کنیم .

name

ویژگی name ضروری است. هنگامی که یک فرم به کد سمت سرور ارسال می شود، سرور می تواند داده های فرم را درک کرده و مقادیر را به طور مناسب پردازش کند.

نگهدارنده مکان (placeholder)

این یک اشاره کوتاه است که قبل از وارد کردن مقدار توسط کاربر در قسمت ورودی نمایش داده می شود. وقتی کاربر شروع به تایپ در فیلد ورودی می کند، مکان نگهدار ناپدید می شود.

label

در حال حاضر برای کاربر غیرممکن است که بگوید کدام فرم کنترل چه کاری را انجام می دهد. هیچ راهی برای دانستن اینکه ایمیل را کجا وارد می کنید و رمز عبور را کجا وارد می کنید وجود ندارد. فرم بسیار ناقص و درهم به نظر می رسد.

ما می توانیم هر یک از کنترل های فرم خود را با استفاده از عنصر label برچسب گذاری کنیم.

ویژگی ها:

for: ویژگی for برچسب را با یک تگ فرم خاص مرتبط می کند. نحوه تطبیق آن توسط ID است. همانطور که در مثال بالا می بینید، مقدار مشخصه ID داده شده به عنصر ورودی ایمیل است. مقدار ویژگی for داده شده به عنصر label نیز ایمیل است، بنابراین هر دوی آنها با یکدیگر مرتبط هستند.

<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <form action="" method="GET">
     <label for="name">نام</label></br> 
     <input name="name" id="name" placeholder="نام خود را وارد نمایید"></br>
     <input type="submit"> </br>
</form>
</body>
</html>

نتایج خود را ذخیره کرده و در مرورگر خود بررسی کنید. شما باید چیزی شبیه تصویر زیر مشاهده کنید:

نمونه کار با تگ input وویژگی هایش در ایجاد فرم

توجه: وقتی روی برچسب کلیک می کنیم، به طور خودکار به فیلد ورودی مرتبط با برچسب تمرکز می کنیم. این یک رفتار پیش فرض است.

بیایید ببینیم چند عنصر ورودی اصلی دیگر چگونه هستند.

تگ فرم ورودی چندگانه (متن، ایمیل، رمز عبور)

استفاده از مقادیر مختلف برای ویژگی type نتایج متفاوتی را به همراه خواهد داشت. برای مثال می‌توانید ورودی‌ها را از نوع ایمیل، متن یا رمز عبور و غیره تنظیم کنید. همه آنها رفتار کمی متفاوت نشان می‌دهند، که در زیر مشاهده خواهید کرد.

<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <form action="" method="GET">
     <label for="name">نام</label></br> 
     <input name="name" id="name" placeholder="نام خود را وارد نمایید"></br>
     <label for="email">ایمیل</label> </br>
     <input type="email"></br>
     <label for="password">رمز</label> </br>
     <input type="password"></br>
     <input type="submit"> </br>
</form>
</body>
</html>

نتایج خود را ذخیره کرده و در مرورگر خود بررسی کنید. شما باید چیزی شبیه تصویر زیر مشاهده کنید:

تگ فرم ورودی چندگانه (متن، ایمیل، رمز عبور)

تگ Textarea

گاهی اوقات یک خط متن کافی نیست و یک عنصر ورودی ساده کار نمی کند. به عنوان مثال، برخی از وب‌سایت‌ها یک فرم تماس برای افراد دارند تا سؤالات یا پیام‌های خود را تایپ کنند. در این موارد، بهتر است از تگ textarea استفاده کنید.

<textarea> یک تگ خود بسته شدنی نیست، بنابراین باید هم تگ باز و هم تگ بسته شدن را تایپ کنیم. (<textarea></textarea>)

ویژگی ها:

id: همان چیزی است که در عنصر <input/> در بالا ذکر شد.
name: همان چیزی است که در عنصر <input/> در بالا ذکر شد.
cols: عرض قابل مشاهده یک ناحیه متنی را مشخص می کند.
rows: تعداد خطوط قابل مشاهده در یک ناحیه متن را مشخص می کند.

<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <form action="" method="GET">
     <label for="name">نام</label></br> 
     <input name="name" id="name" placeholder="نام خود را وارد نمایید"></br>
     <label for="email" id="email">ایمیل</label> </br>
     <input type="email"></br>
     <label for="password" id="password">رمز</label> </br>
     <input type="password"></br>
     <textarea placeholder="متن خود را وارد نمایید" id="text" cols="50" rows="5"></textarea></br>
     <button type="submit">
      ارسال
    </button>
</form>
</body>
</html>

می بینید که textarea به ما اجازه می دهد تا در چندین خط تایپ کنیم. یک textarea توسط کاربر قابل تغییر اندازه است.

تگ button

تگ button یکی از مهمترین عناصر فرم است. بدون دکمه نمی توانید هیچ فرمی را برای پردازش به سرور ارسال کنید.

تگ button مشخصه ای به نام type را می پذیرد. این ویژگی سه مقدار submit , reset و button را می پذیرد .

ویژگی ها:

“type =”reset: وقتی روی آن کلیک شود، تمام داده های فرم پاک می شود.
“type =”button: هیچ رفتار پیش فرضی ندارد و بیشتر با جاوا اسکریپت برای برنامه ریزی آن برای رفتار سفارشی استفاده می شود .
“type =”submit: رفتار پیش فرض نوع ارسال ، همانطور که از نام آن پیداست، ارسال فرم و ارسال تمام داده ها به سرور است.

<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <form action="" method="GET">
     <label for="name">نام</label></br> 
     <input name="name" id="name" placeholder="نام خود را وارد نمایید"></br>
     <label for="email">ایمیل</label> </br>
     <input type="email"></br>
     <label for="password">رمز</label> </br>
     <input type="password"></br>
     <label for="tel"> متن خود را وارد نمایید</label></br>
     <textarea placeholder="متن خود را وارد نمایید" id="text" cols="50" rows="5"></textarea></br>
     <button type="submit">
      ارسال
    </button>
</form>
</body>
</html>

حالا فرم ما خیلی خوب به نظر می رسد؟

در فرم سلکت باکس کشویی ایجاد کنید

گاهی اوقات، وقتی در حال ایجاد یک فرم هستید، نمی خواهید کاربر بتواند متن را تایپ کند. در عوض، ممکن است بخواهید آنها از بین برخی از گزینه های از پیش تعیین شده ای که شما ارائه می کنید، انتخاب کنند .

هر زمان که لیستی از گزینه ها دارید که از مثلاً چهار یا پنج مورد طولانی تر است، بهتر است از سلکت باکس استفاده کنید زیرا باعث صرفه جویی در فضا می شود.

بیایید بگوییم که فرم ما برای دانشجویانی است که قصد پذیرش در دانشگاه را دارند. ما می خواهیم به دانشجویان اجازه دهیم تا از لیست از پیش تعریف شده برنامه های دانشگاه انتخاب کنند.

تگ سلکت باکس ، <select> با استفاده از تگ باز و بسته کردن <select> ساخته می شود.

تگ select در ایجاد سلکت باکس ها در فرم ها

تگ Select یک منوی کشویی را ارائه می دهد که حاوی گزینه های قابل انتخاب است. تگ <select> به خودی خود کاری انجام نمی دهد. این تگ فرم در واقع به عناصر اضافی در داخل خود نیاز دارد، دقیقاً مانند تگ <ul> به تگ های <li> . تگ هایی که در داخل تگ انتخابی قرار می دهیم ، تگ های گزینه نامیده می شوند .

ویژگی ها:

name: همان چیزی است که در عنصر <input/> در بالا ذکر شد.
multiple : اگر ویژگی multiple را اضافه کنید، می توانید امکان انتخاب چندین گزینه را فراهم کنید.

تگ option

گزینه یکی از گزینه هایی را نشان می دهد که کاربر می تواند در منوی انتخابی انتخاب کند. تگ <option> از یک مقدار مشخصه استفاده می کند.

ویژگی ها:

value : وقتی فرمی را به کد سمت سرور ارسال می‌کنید، هر تگ فرم دارای یک مقدار مرتبط برای ورودی‌های متن و نواحی متن است. این مقدار هر چیزی است که کاربر در فیلد تایپ می کند. با این حال، از آنجایی که ما این گزینه‌های از پیش تعریف شده را ایجاد می‌کنیم، باید مشخص کنیم که مقدار در هنگام ارسال چگونه باید باشد. بنابراین، ما از ویژگی value برای تعیین مقادیر گزینه های از پیش تعریف شده استفاده می کنیم.
selected : برای انتخاب کردن یک آیتم از لیست

مانند :

<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <form action="" method="GET">
    <select multiple>
        <option value="moon1 selected">فروردین</option>
        <option value="moon2">اردیبهشت</option>
        <option value="moon3">خرداد</option>
        <option value="moon4">تیر</option>
        <option value="moon5">مرداد</option>
        <option value="moon6">شهریور</option>
        <option value="moon7">مهر</option>
        <option value="moon8">آبان</option>
        <option value="moon9">آذر</option>
        <option value="moon10">دی</option>
        <option value="moon11">بهمن</option>
        <option value="moon12">اسفند</option>
      </select>
     <button type="submit">
      ارسال
    </button>
</form>
</body>
</html>

نتایج خود را ذخیره کرده و در مرورگر خود بررسی کنید.

تگ <select> در ایجاد سلکت باکس ها در فرم ها — تگ

تگ optgroup

با تگ <optgroup> می توانیم لیست خود را به گروه های منطقی سازماندهی کنیم.

ویژگی ها:

label: نام گروهی از گزینه ها. در مثال زیر لیست گزینه های ما با lable فصل به چهار گروه تقسیم شده است.

<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <form action="" method="GET">
    <select>
        <optgroup label="فصل بهار">
            <option value="moon1">فروردین</option>
            <option value="moon2" selected>اردیبهشت</option>
            <option value="moon3">خرداد</option>
        </optgroup>
        <optgroup label="فصل تابستان">
            <option value="moon4">تیر</option>
            <option value="moon5">مرداد</option>
            <option value="moon6">شهریور</option>
        </optgroup>
        <optgroup label="فصل پاییز">
            <option value="moon7">مهر</option>
            <option value="moon8">آبان</option>
            <option value="moon9">آذر</option>
        </optgroup>
        <optgroup label="فصل زمسستان">
            <option value="moon10">دی</option>
            <option value="moon11">بهمن</option>
            <option value="moon12">اسفند</option>
        </optgroup>
      </select>
     <button type="submit">
      ارسال
    </button>
</form>
</body>
</html>

نتایج خود را ذخیره کرده و در مرورگر خود بررسی کنید. شما باید چیزی شبیه تصویر زیر مشاهده کنید:

دکمه های رادیویی در فرم

اگر گزینه های زیادی دارید، منوهای انتخابی عالی هستند. اگر چیزی حدود 5 گزینه یا کمتر دارید، بهتر است از دکمه های رادیویی استفاده کنید.

تفاوت بین سلکت باکس و دکمه های رادیویی در این است که دکمه های رادیویی همه گزینه ها را به یکباره به شما نشان می دهند. مانند منوی انتخاب، کاربر فقط می تواند یکی از آنها را انتخاب کند.

ویژگی ها:

name: همان چیزی است که در عنصر <input/> در بالا ذکر شد.
value: از آنجایی که ما این گزینه های از پیش تعریف شده را ایجاد می کنیم، باید مشخص کنیم که مقدار در هنگام ارسال چگونه باید باشد. بنابراین، ما از ویژگی value برای تعیین مقادیر گزینه های از پیش تعریف شده استفاده می کنیم.

توجه: اگر یک گزینه را انتخاب کنید و سپس سعی کنید گزینه دیگری را انتخاب کنید، می بینید که گزینه قبلی را از حالت انتخاب خارج می کند. روشی که می داند این کار را انجام می دهد به این دلیل است که ما ویژگی نام را دقیقاً یکسان داریم. بنابراین می داند که این دو دکمه رادیویی بخشی از یک گروه هستند.

<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <form action="" method="GET">
        <p>انتخاب ماه مورد نظر از فصل بهار</p>
        <label>
            <input type="radio" name="Season">
            فروردین
        </label>
        <label>
            <input type="radio" name="Season">
             اردیبهشت
        </label>
        <label>
            <input type="radio" name="Season">
             خرداد
            </label>
     <button type="submit">
      ارسال
    </button>
</form>
</body>
</html>

نتایج خود را ذخیره کرده و در مرورگر خود بررسی کنید. شما باید چیزی شبیه تصویر زیر مشاهده کنید:

توجه: اگر می خواهیم دکمه های رادیویی بخشی از همان گروه دکمه های رادیویی باشند، نام باید یکسان باشد.

چک باکس ها در فرم

گاهی اوقات ممکن است گروهی از گزینه های از پیش تعریف شده داشته باشید. شما می خواهید که کاربر بتواند چندین گزینه و نه تنها یکی از آنها را انتخاب کند. اینجاست که چک باکس ها مفید هستند.

ویژگی ها:

name: همان چیزی است که در عنصر <input/> در بالا ذکر شد.
value: از آنجایی که ما این گزینه های از پیش تعریف شده را ایجاد می کنیم، باید مشخص کنیم که مقدار در هنگام ارسال چگونه باید باشد. بنابراین، ما از ویژگی value برای تعیین مقادیر گزینه های از پیش تعریف شده استفاده می کنیم.
checked: به‌طور پیش‌فرض، علامت یک ورودی چک باکس برداشته شده است. با استفاده از مشخصه ای به نام checked می توانید حالت پیش فرض را در حالت checked قرار دهید . به یاد داشته باشید که این یک ویژگی بولی است.

<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <form action="" method="GET">
        <p>انتخاب ماه های مورد نظر از فصل بهار</p>
        <label>
            <input type="checkbox" checked> فروردین
        </label><br>
        <label>
            <input type="checkbox" > اردیبهشت
        </label><br>
        <label>
            <input type="checkbox" > خرداد
        </label><br>
     <button type="submit">
      ارسال
    </button>
</form>
</body>
</html>

نتایج خود را ذخیره کرده و در مرورگر خود بررسی کنید. شما باید چیزی شبیه تصویر زیر مشاهده کنید:

توجه: کلیک کردن روی یک چک باکس کوچک ممکن است سخت باشد. توصیه می شود یک عنصر <label> را در اطراف چک باکس قرار دهید. اگر روی برچسب کلیک کنیم، چک باکس ما نیز علامت زده یا برداشته می شود. من این کار را در زیر انجام نداده‌ام، اما می‌توانید این کار را انجام دهید تا UX بهتر شود.

تفاوت بین Checkbox و دکمه Radio در فرم

چک باکس می تواند به تنهایی وجود داشته باشد ، در حالی که دکمه های رادیویی فقط می توانند به عنوان یک گروه ظاهر شوند (حداقل 2 دکمه رادیویی باید وجود داشته باشد).
انتخاب چک باکس اختیاری است اما انتخاب یکی از دکمه های رادیویی الزامی است .

ما در مورد بسیاری از تگ های فرم HTML یاد گرفته ایم و موارد ضروری را پوشش داده ایم.

نگران حفظ کردن همه چیز نباشید. تقریبا هیچ توسعه دهنده وب حرفه ای نمی تواند هر ویژگی یا عنصر را نامگذاری کند. آنچه مهمتر از حفظ کردن است، یادگیری نحوه جستجوی موارد در اسناد در صورت نیاز است.

تبریک می گویم ! حال شما می توانید جداول مختلفی در صفحه وب در مرورگر تنظیم و طراحی کنید.گام به گام همراه ما باشید تا HTML را به صورت حرفه ای فرا بگیرید.

درباره HTML بیشتر بخوانید و حرفه ای شوید:

اگر سوالی یا نظری دارید خوش حال میشیم تا با ما در میان بگذارید. در تلگرام با ما در ارتباط باشید.

نویسنده

مدیریت طراحی

آموزش کار با فرم ها یا Forms در سند HTML

تگ Form

ویژگی ها:

تگ input

نوع (type)

شناسه (ID)

name

نگهدارنده مکان (placeholder)

label

ویژگی ها:

تگ فرم ورودی چندگانه (متن، ایمیل، رمز عبور)

تگ Textarea

ویژگی ها:

تگ button

ویژگی ها:

در فرم سلکت باکس کشویی ایجاد کنید

تگ select در ایجاد سلکت باکس ها در فرم ها

ویژگی ها:

تگ option

ویژگی ها:

تگ optgroup

ویژگی ها:

دکمه های رادیویی در فرم

ویژگی ها:

چک باکس ها در فرم

ویژگی ها:

تفاوت بین Checkbox و دکمه Radio در فرم

درباره HTML بیشتر بخوانید و حرفه ای شوید:

دیدگاهتان را بنویسید لغو پاسخ

موضوعات پربیننده

دیگران این مقالات را خوانده اند...

متاوبز در شبکه های اجتماعی

مقالات سایت متاوبز

جدیدترین مقالات متاوبز

راه های ارتباطی با مجموعه متاوبز