بهترین سایت برای توسعه دهندگان وب

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML عناصر فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 عناصر جدید HTML5 عناصر معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5. Уроки для начинающих

فرم های HTML


فرم HTML مثال

نام :

نام خانوادگی :


خودتان آزمایش کنید »

المان <form>

از المان<form> برای ایجاد فرم HTML برای ورودی کاربر استفاده می شود:

<form>
.
عناصر تشکیل می دهند
.
</form>

فرم HTML حاوی عناصر فرم است.

عناصر فرم انواع مختلفی از عناصر ورودی مانند جعبه متن ، جعبه چک ، دکمه های رادیویی ، ارسال دکمه ها و غیره


المان <input>

المان <input>مهمترین المان فرم است.

المان <input> بسته به ویژگی نوع type از چند طریق قابل نمایش است. .

در اینجا چند نمونه آورده شده است:

نوع توضیحات
<input type="text"> یک قسمت ورودی متن یک خطی را تعریف می کند
<input type="radio"> یک دکمه رادیویی را تعریف می کند (برای انتخاب یکی از بسیاری از گزینه ها)
<input type="submit"> دکمه ارسال را تعریف می کند (برای ارسال فرم)

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


ورودی متن

<input type="text"> یک قسمت ورودی تک خطی را برای ورودی متن text input تعریف می کند. :

مثال

<form>
  First name:<br>
  <input type="text" name="نام"><br>
  Last name:<br>
  <input type="text" name="نام خانوادگی">
</form>
خودتان آزمایش کنید »

در مرورگر اینگونه به نظر می رسد:

نام:

نام خانوادگی:

توجه: خود فرم قابل مشاهده نیست. همچنین توجه داشته باشید که عرض جعبه متن پیش فرض 20 حرف است.


برچسب المان <lable>

به استفاده از المان <lable> در مثال بالا توجه کنید.

برچسب <lable> برچسب بسیاری از عناصر فرم را تعریف می کند.

المان <lable> برای کاربران صفحه خوان خواننده مفید است ، زیرا خواننده صفحه با تمرکز کاربر بر روی المان ورودی ، برچسب را با صدای بلند می خواند.

المان <lable> همچنین به کاربرانی که در کلیک کردن بر روی مناطق بسیار کوچک (مانند دکمه های رادیویی یا کادرهای انتخاب) مشکل دارند ، کمک می کند - زیرا وقتی کاربر متن را در المان <lable> کلیک می کند ، دکمه / جعبه رادیو را ضامن می کند.

ویژگی for از برچسب <lable> باید برابر با مشخصه id المان <input> باشد تا آنها را به هم متصل کند.

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

<input type="radio"> یک دکمه رادیو را تعریف می کند. .

سوئیچ ها (دکمه های رادیویی) به کاربر اجازه می دهند یکی از تعداد محدودی گزینه را انتخاب کند:

مثال

<form>
  <input type="radio" name="gender" value="male" checked> مرد<br>
  <input type="radio" name="gender" value="female"> زن<br>
  <input type="radio" name="gender" value="other"> دیگر
</form>
خودتان آزمایش کنید »

کد HTML بالا به این ترتیب در مرورگر ارائه می شود:

مرد
زن
دیگر

دکمه ارسال

<input type="submit"> دکمه ای را برای ارسال داده های فرم به یک کنترل کننده فرم تعریف می کند.

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

کنترل کننده فرم در ویژگی عملکرد action فرم مشخص شده است:

مثال

<form action="/action_page.php">
  نام:<br>
  <input type="text" name="firstname" value="احمد"><br>
  نام خانوادگی:<br>
  <input type="text" name="lastname" value="فرجی"><br><br>
  <input type="submit" value="Submit">
</form>
خودتان آزمایش کنید »

کد HTML بالا به این ترتیب در مرورگر ارائه می شود:

نام:

نام خانوادگی:



ویژگی اکشن

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

معمولاً با کلیک کاربر بر روی دکمه ، داده های فرم به یک صفحه وب در سرور ارسال می شود در حال ارسال ..

در مثالهای فوق فرم داده به صفحه ای در سرور با نام "/action_page.php" ارسال می شود. این صفحه شامل یک اسکریپت سمت سرور است که داده های فرم را پردازش می کند:

<form action="/action_page.php">

اگر ویژگی action حذف شود ، اقدام به صفحه فعلی تنظیم می شود.


ویژگی هدف Target

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

مقدار پیش فرض "_self" به این معنی است که فرم در پنجره فعلی ارسال می شود.

برای باز کردن نتیجه فرم در برگه مرورگر جدید ، از مقدار "_blank" استفاده کنید:

مثال

<form action="/action_page.php" target="_blank">
خودتان آزمایش کنید »

مقادیر معتبر دیگر "_parent", "_top"" یا نامی است که نشان دهنده نام iframe است.


ویژگی متد Method

مشخصه روش ، method HTTP ((GET یا POST) را برای استفاده در هنگام ارسال داده های فرم مشخص می کند:

مثال

<form action="/action_page.php" method="get">
خودتان آزمایش کنید »

یا:

مثال

<form action="/action_page.php" method="post">
خودتان آزمایش کنید »

چه موقع از GET استفاده کنیم؟

روش پیش فرض هنگام ارسال داده های فرم GET است.

با این حال ، هنگام استفاده از GET ، داده های فرم ارسال شده در قسمت آدرس صفحه قابل مشاهده است:

/action_page.php?firstname=Ahmad&lastname=Faraji

یادداشت های مربوط به GET:

  • داده ها را در فرم ارسال به یک URL در جفت نام / مقدار اضافه می کند
  • طول URL محدود است (حدود 3000 نویسه)
  • هرگز از GET برای ارسال اطلاعات حساس استفاده نکنید! (در url نشان داده خواهد شد)
  • برای ارسال فرمهایی که کاربر می خواهد نتیجه را علامت گذاری کند مفید است
  • GET بهترین گزینه برای داده های امن ، در رشته های جستجوی مثال در Google است

چه موقع از POST استفاده کنیم؟

همیشه هنگامی که داده های فرم حاوی اطلاعات محرمانه یا شخصی است ، از POST استفاده کنید. روش POST داده های فرم ارسالی را در نوار آدرس صفحه نمایش نمی دهد.

یادداشت های : POST:

  • POST هیچ محدودیتی در اندازه ندارد و می تواند برای ارسال مقدار زیادی داده استفاده شود
  • فرم های ارسال شده با POST نمی توانند نشانک گذاری شوند

ویژگی اسم Name

هر قسمت ورودی باید یک ویژگی نامname برای ارسال داشته باشد.

اگر مشخصه نام name حذف شود ، داده های این قسمت ورودی به هیچ وجه ارسال نمی شوند.

این مثال فقط قسمت ورودی "نام خانوادگی" را ارسال می کند:

مثال

<form action="/action_page.php">
  نام:<br>
  <input type="text" value="Mickey"><br>
  نام خانوادگی:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>
خودتان آزمایش کنید »

گروه بندی فرم با <fieldset>

المان <fieldset> برای گروه بندی داده های مرتبط در یک فرم استفاده می شود.

المان <legend> عنوانی را برای المان <fieldset> تعریف می کند.

مثال

<form action="/action_page.php">
  <fieldset>
    <legend>اطلاعات شخصی:</legend>
    نام کوچک:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    نام خانوادگی:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
خودتان آزمایش کنید »

کد HTML بالا به این ترتیب در مرورگر ارائه می شود:

اطلاعات شخصی: نام کوچک:

نام خانوادگی:



تمرینات HTML

خود را امتحان کنید

تمرین:

در فرم زیر ، یک قسمت ورودی از نوع "دکمه" و مقدار "تأیید" اضافه کنید.

<form>
<>
</form>

تمرین را شروع کنید


لیست تمام ویژگی های <form>:

ویژگی توضیحات
accept-charset مجموعه کاراکتری را که در فرم ارسالی استفاده می شود مشخص می کند (پیش فرض: مجموعه کاراکترها صفحات).
action آدرس (url) محل ارسال فرم را مشخص می کند (پیش فرض: صفحه ارسال).
autocomplete مشخص می کند که آیا مرورگر باید فرم را به طور خودکار پر کند (به طور پیش فرض فعال است).
enctype رمزگذاری داده های ارسالی را تعیین می کند (پیش فرض: url-encoded).
method روش HTTP را برای استفاده در هنگام ارسال فرم مشخص می کند (پیش فرض: GET).
name نامی را که برای شناسایی فرم استفاده می شود مشخص می کند (برای استفاده از DOM: document.forms.name).
novalidate نشان می دهد که مرورگر نباید فرم را تأیید کند.
target هدف آدرس را در ویژگی action مشخص می کند (پیش فرض: _ self).

درباره مشخصات در بخشهای بعدی در سایت اطلاعات بیشتری کسب خواهید کرد.






این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir