فرم های html

فرم های html را چطور بنویسیم؟

آموزش فرم های  html  درس اول

عنصر <form>

فرم های html  : عنصر  <form> یک فرم را تعریف می کند که برای جمع آوری  اطلاعات ورودی کاربر استفاده می شود:



&lt;form&gt;
.
form elements
.
&lt;/form&gt;


فرم های html
فرم های html

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

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

درس بعدی : عناصر فرم های  html  را از اینجا بخوانید.

عنصر <input>

عنصر <input>  مهمترین عنصر فرم است.
عنصر  <input> می تواند   با توجه به نوع ویژگی به روش های مختلف نمایش داده شود.
در اینجا چند نمونه است:

Type
Description
<input type="text">
Defines a one-line text input field
<input type="radio">
Defines a radio button (for selecting one of many choices)
<input type="submit">
Defines a submit button (for submitting the form)

 

ورودی متن

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

مثال :

 

&lt;form&gt;
  First name:
  &lt;input type="text" name="firstname"&gt;
  Last name:
  &lt;input type="text" name="lastname"&gt;
&lt;/form&gt;


 

 

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

 

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

<input type = "radio"> یک دکمه رادیویی را تعریف می کند.
دکمه های رادیویی به کاربر اجازه می دهد یکی از تعداد محدود از گزینه ها را انتخاب کند:

مثال :

 

&lt;form&gt;
  &lt;input type="radio" name="gender" value="male" checked&gt; Male
  &lt;input type="radio" name="gender" value="female"&gt; Female
  &lt;input type="radio" name="gender" value="other"&gt; Other
&lt;/form&gt;


 

دکمه ارسال  یا submit

<input type = "submit">  یک دکمه را برای ارسال اطلاعات فرم به یک  form-handler  تعریف می کند.
form-handler معمولاً یک صفحه سرور با یک اسکریپت برای پردازش داده های ورودی است.
form-handler در action attribute فرم مشخص شده است:

حتما بخوانید:  طراحی ظاهر html با css

مثال:

 

&lt;form action="/action_page.php"&gt;
  First name:
  &lt;input type="text" name="firstname" value="Mickey"&gt;
  Last name:
  &lt;input type="text" name="lastname" value="Mouse"&gt;

  &lt;input type="submit" value="Submit"&gt;
&lt;/form&gt;


 

Action Attribute

Action Attribute  زمانی که  فرم های html ارسال می شود عملی را برای انجام تعریف می کند.
به طور معمول، زمانی که کاربر بر روی دکمه ارسال کلیک  می کند، اطلاعات فرم به یک صفحه وب در سرور ارسال می شود.
در مثال بالا، داده های فرم به یک صفحه در سرور به نام “/action_page.php” ارسال می شود. این صفحه شامل یک اسکریپت سمت سرور است که  به داده های فرم  دسترسی دارد.

 

&lt;form action="/action_page.php"&gt;

اگر Action Attribute حذف شود، Action  بر روی صفحه فعلی یا آخرین صفحه  تنظیم می شود.

فرم های html
فرم های html

The Target Attribute

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

 
&lt;form action="/action_page.php" target="_blank"&gt; 

 

 

Method Attribute

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

 

&lt;form action="/action_page.php" method="get"&gt; 
 

&lt;form action="/action_page.php" method="post"&gt; 

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

روش پیش فرض  هنگام ارسال اطلاعات فرم Get است.
با این حال، هنگامی که GET استفاده می شود، داده های ارسال شده فرم های html در قسمت آدرس صفحه قابل مشاهده خواهد بود:


/action_page.php?firstname=Mickey&amp;lastname=Mouse 

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

حتما بخوانید:  انواع ورودی html

 

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

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

 

Name Attribute

هر فیلد ورودی باید یک name attribute برای ارسال داشته باشد.
اگر name attribute حذف شود، داده های فیلد ورودی اصلاً ارسال نمی شود.
این مثال فقط فیلد ورودی “Last name” را ارسال خواهد کرد.

مثال :

 

&lt;form action="/action_page.php"&gt;
  First name:
  &lt;input type="text" value="Mickey"&gt;
  Last name:
  &lt;input type="text" name="lastname" value="Mouse"&gt;

  &lt;input type="submit" value="Submit"&gt;
&lt;/form&gt;


 

 

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

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

مثال :

 

&lt;form action="/action_page.php"&gt;
  

&lt;fieldset&gt;
    

&lt;legend&gt;Personal information:&lt;/legend&gt;


    First name:
    &lt;input type="text" name="firstname" value="Mickey"&gt;
    Last name:
    &lt;input type="text" name="lastname" value="Mouse"&gt;

    &lt;input type="submit" value="Submit"&gt;
  &lt;/fieldset&gt;


&lt;/form&gt;


 

 

 

امتیاز کاربران به این مطلب
۰ نفر - میانگین: ۰
تلگرام

دیدگاه‌تان را ثبت کنید:

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

یازده + 10 =

PHN0eWxlPi5oX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWV7cG9zaXRpb246cmVsYXRpdmU7fSAuaF9pZnJhbWUtYXBhcmF0X2VtYmVkX2ZyYW1lIC5yYXRpbyB7ZGlzcGxheTpibG9jazt3aWR0aDoxMDAlO2hlaWdodDphdXRvO30gLmhfaWZyYW1lLWFwYXJhdF9lbWJlZF9mcmFtZSBpZnJhbWUge3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO2xlZnQ6MDt3aWR0aDoxMDAlOyBoZWlnaHQ6MTAwJTt9PC9zdHlsZT48ZGl2IGNsYXNzPSJoX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWUiPiA8c3BhbiBzdHlsZT0iZGlzcGxheTogYmxvY2s7cGFkZGluZy10b3A6IDU3JSI+PC9zcGFuPjxpZnJhbWUgc3JjPSJodHRwczovL3d3dy5hcGFyYXQuY29tL3ZpZGVvL3ZpZGVvL2VtYmVkL3ZpZGVvaGFzaC85dHk0VS92dC9mcmFtZSIgYWxsb3dGdWxsU2NyZWVuPSJ0cnVlIiB3ZWJraXRhbGxvd2Z1bGxzY3JlZW49InRydWUiIG1vemFsbG93ZnVsbHNjcmVlbj0idHJ1ZSIgPjwvaWZyYW1lPjwvZGl2Pg==
با سپاس از ثبت دیدگاه شما دوست عزیز
از تماشای این ویدیو لذت ببرید ...
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود فایل سخنرانی استیو جابز ...
ایبوک هدف‌گذاری موثر
زودتر از آنچه فکرش را می‌کنید به خواسته‌هایتان دست پیدا کنید!
* لینک دانلود بلافاصله ایمیل می‌شود.
چهار عامل شگفت انگیز کسب درآمد چیست؟
فقط چند ثانیه تا دانلود فاصله دارید!
* سه ایده کسب و کار خانگی پولساز
فقط چند ثانیه تا دانلود فاصله دارید!
* ایبوک: ده مکان عالی برای پیدا کردن یک ایده جدید
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود ویدیوی جذاب و با کیفیت مصاحبه جک ما
از همین امروز شروع کنید
بدون تجربه و دانش فنی وارد دنیای درآمدهای اینترنتی شوید!
فایل‌های آموزشی برای شما ایمیل می‌شود.
فقط چند ثانیه تا دریافت این فایل آموزشی فاصله دارید!
فایل‌های آموزشی ویژه اعضای سایت
* اگر عضو نیستید با وارد کردن ایمیل‌تان به این فایل دسترسی پیدا می‌کنید
دسترسی مخصوص اعضای سایت
عضو سایت نیستید؟
فقط کافیه نام و ایمیل‌تان را وارد کنید و ...
* دسترسی سریع به تمام فایل‌های آموزشی
هدیه ما به شما
با سپاس از اینکه دیدگاه تان را در سایت ما ثبت کردید.


یک کوپن تخفیف 30%
  • مشاوره حضوری
  • دوره های آنلاین
  • بسته های آموزشی
  • محصولات دانلودی
  • وبینارهای آموزشی
  این کد فقط یکبار به شما نمایش داده می‌شود.
کد: qwert
ورود کاربران
* دسترسی رایگان به بخش آکادمی