آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)

دسته بندی: آموزش
زمان مطالعه: 6 دقیقه
۱۵ مهر ۱۳۹۱
یاداوری :

در جلسه اول کار با فرم‌ها با طریقه ایجاد یک فرم و ارسال آن به صفحه پردازشگر از طریق دو متد post و get و تفاوت این دو روش آشنا شدیم.

گفتیم که با اسفاده از تگ <form> میتوان یک فرم را ساخت. و با استفاده از صفت method و یکی از دو مقدار post یا get آن را به صفحه پردازشگر فرستاد. گفتیم که برای آدرس دهی صفحه پردازشگر از صفت action استفاده میکنیم و مقدار آن برابر با آدرس صفحه پردازشگرمان خواهد بود. حال میخواهیم که با تگ <input> و صفت‌های آن برای ایجاد تکست باکس‌ها و دکمه‌ها برای گرفتن اطلاعات از کاربر آشنا شویم.

تگ <input> : از این تگ برای ایجاد انواع و اقسام عناصر فرم همچون دکمه‌ها و فیلد‌های متنی و رمزی و... استفاده می‌شود. این تگ صفت‌های زیر را پشتیبانی می‌کند:

name: برای نام گذاری عناصر استفاده می‌شود و می‌بایست در کل صفحه یکتا باشد

type : این صفت چندین مقدار می‌گیرد که هر کدام وظیفه ی خاصی دارند که در ادامه بررسی می‌کنیم.

  • text : برای ایجاد یک textfield ساده متنی به کار می‌رود.
<label for="email">Email :</label>
<input type="text" name="email" />

  • password: برای ایجاد یک textfield رمزی به کار می‌رود.
<label for="email">Password :</label>
<input type="password" name="pass" />

  • radio : برای ایجاد دکمه‌های رادیویی به کار می‌رود. توجه داشته باشید که radioها معمولا به صورت گروهی به کار می‌روند و می‌بایست نام آنها در گروه یکسان بوده اما valueهای متفاوتی داشته باشند. کاربر فقط می‌تواند یک radio (گزینه) را از هر گروه انتخاب کند.
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female

  •  checkbox : از این مقدار برای ایجاد checkbox‌ها استفاده می‌شود.
<input type="checkbox" name="vehicle" value="Bike" /> I have a Bike
<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a Car
<br />
<input type="checkbox" name="vehicle" value="Airplane" /> I have an Airplane

  • submit : برای ایجاد دکمه‌های از نوع submit (ارسال) استفاده می‌شود. در واقع این نوع دکمه‌ها وظیفه ارسال فرم به صفحه پردازشگر را دارند.
<input type="submit" value="Send Form" />

  • reset : برای ایجاد دکمه‌های پاک کننده ی form به کار می‌روند. این نوع دکمه‌ها محتویات فرم را به مقدار اولیه (پیشفرض) بر می‌گردانند.
  • button :از این مقدار برای ایجاد دکمه هایی که رفتار پیشفرضی ندارند، استفاده می‌شود. یعنی اینکه این دکمه‌ها کاری انجام نمی‌دهند. و باید خودمان برای آن‌ها رفتاری را کدنویسی کنیم.
  • file : از این مقدار برای ایجاد امکان آپلود فایل برای کاربران استفاده می‌شود. در صورت استفاده از این مقدار یک کادر متنی به همراه دکمه ای با عنوان Browse  و یا در مرورگر chrome با عنوان Choose File ایجاد خواهد شد که کاربر خواهد توانست با استفاده از آن فایلی را از کامپیوتر خود انتخاب کند.
<input type="file" />

  • hidden : گاهی اوقات طراح فرم می‌خواهد مقداری را به دور از چشم کاربر و بدون دخالت آن برای صفحه پردازگر ارسال کند. در این صورت می‌توان از مقدار hidden استفاده کرد. می‌توانیم از تمامی صفت‌های تگ img برای کنترل خصوصیات تصویر استفاده کنیم.
  • image : از این مقدار برای ایجاد دکمه‌های تصویری از نوع submit استفاده می‌شود. در واقع با این مقدار می‌توان تصویری ایجاد کرد که کاربر با کلیک بر روی آن می‌تواند form را ارسال کند. باید به این نکته توجه که زمانی که از مقدار image| برای صفت type استفاده می‌توانیم از تمامی صفت‌های تگ img برای کنترل خصوصیات تصویر استفاده کنیم.
<input type="image" src="images/submit.png" alt="Submit">

  • email : از این مقدار برای آن دسته از فیلدهایی که می‌بایست حاوی یک آدرس ایمیل معتبر باشند استفاده می‌شود. مقدار این فیلد قبل از ارسال فرم خطایابی خواهد شد و چنانچه آدرس ایمیل معتبر وارد نشده باشد یک پیغام خطا نمایش داده می‌شوذ:
<form>
E-mail: <input type="email" name="user_email" />
<input type="submit" name="send" />
</form>

تصویر زیر نحوه نمایش پیغام خطا در مرورگر کروم را نشان می‌دهد:

  • url : از ایمن مقدار برای آن دسته از فیلدهایی که می‌بایست حاوی یک آدرس اینترنتی معتبر باشند استفاده می‌شود. مقدار این فیلد قبل از ارسال فرم خطایابی خواهد شد و چنانچه آدرس معتبر وارد نشده باشد یک پیغام خطا نمایش داده می‌شود :
<form>
Homepage: <input type="url" name="user_url" />
<input type="submit" name="send" />
</form>

تصویر زیر نحوه نمایش پیغام خطا در مرورگر کروم را نشان می‌دهد:

  • number : از این مقدار برای آن دسته از فیلدهایی که می‌بایست حاوی یک مقدار عددی باشند استفاده می‌شود. ما همچنین می‌توانیم محدودیت هایی روی اعداد قابل قبول نیز اعمال کنیم :
Points: <input type="number" name="points min="1" max="10" step="3" value="4" />
<input type="submit" />

نتیجه کد فوق در مرورگر کروم به صورت زیر خواهد بود:

  • range :از این مقدار برای آن دسته از فیلدهایی که می‌توانند حاوی مقدار مشخصی از بازه خاصی از اعداد باشند استفاده می‌شود. ما همچنین می‌توانیم محدودیت هایی روی اعداد قابل قبول نیز اعمال کنیم.
<form>
Points: <input type="range" name="points" min="1" max="10" />
<input type="submit" name="send" />
</form>

حاصل اجرای کد فوق در مرورگر کروم به صورت زیر است:

همانطور که اشاره شد می‌توان محدودیت هایی بر روی اعداد قابل قبول اعمال کرد. هنگامی که از مقدار number یا range برای صفت type استفاده می‌شود. می‌توان از صفت‌های زیر برای اعمال محدودیت‌ها بهره برد:

  • max: حداکثر مقدار قابل قبول را مشخص می‌کند.
  • min: حداقل مقدار قابل قبول را مشخص می‌کند.
  • step: فواصل بین مقادیر عددی قابل قبول را مشخص می‌کند. به عنوان مثال اگر این صفت را برابر 3 قرار دهیم، مقادیر قابل قبول اعدادی همچون 6،3،0،-3 و ...خواهند بود.
  • value: مقدار پیشفرض را مشخص می‌کند.

  • color :از این مقدار برای ایجاد فیلدهایی که امکان انتخاب رنگ را به کاربر می‌دهند استفاده می‌شود. مرورگر opera از یک جعبه رنگ برای اینکار استفاده  می‌کند. در حالی که کروم فقط امکان وارد کردن مقادیر hexadecimal را می‌دهد و در غیر اینصورت پیغام خطا را نمایش می‌دهد.
<form>
Color: <input type="color" name="user_color" />
<input type="submit" name="send" />
</form>

حاصل اجرای کد فوق در مرورگر opera به صورت زیر خواهد بود:

  • date :در HTML5 چندین مقدار جدید به منظور امکان انتخاب تاریخ و زمان فراهم آورده شده است، یکی از این مقادیر date می‌باشد که امکان انتخاب تاریخ خاصی را برای یک فیلد می‌دهد.
<form>
Date: <input type="date" name="user_date" />
<input type="submit" name="send" />
</form>

سایر مقادیری که می‌توان برای انتخاب زمان و تاریخ استفاده کرد شامل مقادیری همچون month , week , time , datetime و datetime-local می‌باشد.

  • search : از این مقادیر همانطور که از نام آن نیز مشخص است برای ایجاد فیلدهای جستجو، همانند جستجو در سایت و جستجوی گوگل استفاده می‌شود. این نوع فیلدها همانند کادرهای متنی یک خطی نمایش داده می‌شوند:
Search in Site: <input type="shearch" name="search_box" />

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

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

MM888

سلام
کروم در ورژن های جدید، جعبه رنگ رو اضافه کرده، اصلاح کنید قسمت colo رو:

&lt;img src=&quot;http://uploadtak.com/images/n6882_Untitled.jpg&quot; /&gt;
Abbas412

سجاد جان ممنون از زحماتت
فقط یه سوال
مقدار type رو که برابر email میذارم تو همه مرورگرها بجز Ie کار میکنه
ولی url تو هیچ مرورگری کار نمیکنه؛ یعنی هرنوع آدرسی که من توی فیلد وارد میکنم گیر میده، حتی گوگل!

http://upload7.ir/images/52336655830895017405.jpg
سجاد دریس

سلام.
وقتی از مقدار url استفاده می کنی، قبل از آدرس باید حتما http:// قرار بدی. به طور مثال

https://7learn.com
Abbas412

راستش به نظر من این خاصیت کاربردی نداره
در نگاه اول، کاربر نمیدونه باید http بذاره، هرچی بذاره ارور میده
میشه یه ترفند بکار برد، value=http رو گذاشت، تا کاربر بقیشو بنویسه، ولی دیگه عملا از کار میفته، چون بعد از http هر چیزی بنویسی قبول میکنه، یعنی کافیه اولش http باشه، بقیش دیگه هر چی باشه قبول میکنه
ولی با همه اینا
سجاد جان ممنون از آموزش هات، خیییلیی جامع و کاملن، ممنونم

jenerik

سلان اقا این کداتون درست جواب نمیدن 😥

jenerik

اها تو کروم ج میده 😉

web_pro

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

حسین

ممنون ادامه بده….

نیاز به لاگین

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