کار با فرم ها 2

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

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

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

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

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

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

form input text tag1 <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)" title="form-input-text-tag" width="216" height="35" />

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

form input password tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)" title="form-input-password-tag" width="246" height="37" />

  • radio : برای ایجاد دکمه های رادیویی به کار می رود. نکنه قابل توجه اینکه radioها معمولا به صورت گروهی به کار می روند و می بایست نام آنها در گروه یکسان بوده اما valueهای متفاوتی داشته باشند. کاربر فقط می تواند یک radio (گزینه) را از هر گروه انتخاب کند.

 

1 <input type="radio" name="sex" value="male" /> Male
2 <br />
3 <input type="radio" name="sex" value="female" /> Female

 

form label for tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)" title="form-label-for-tag" width="92" height="51" />

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

form input checkbox tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)" title="form-input-checkbox-tag" width="144" height="72" />


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

form input submit tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)" title="form-input-submit-tag" width="93" height="32" />

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

form input file tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)" title="form-input-file-tag" width="183" height="35" />

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

form input image tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)" title="form-input-image-tag" width="146" height="135" />

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

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

form input email tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)" title="form-input-email-tag" width="442" height="209" />


 

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

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

form input url tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)" title="form-input-url-tag" width="403" height="209" />

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

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

form input number tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)" title="form-input-number-tag" width="286" height="37" />

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

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

form input range tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)" title="form-input-range-tag" width="253" height="51" />

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

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

 

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

 

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

form input color tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)" title="form-input-color-tag" width="336" height="177" />

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

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

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

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

ارسال نظر