جلسه ی چهاردهم: تگ form (مقدماتی)

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

 

تگ Form چیست؟

از تگ Form در زبان html برای ایجاد یک فرم مشخصات یا قسمت نظرات و… استفاده می شود. تگ Form دارای دو attribute می باشد که نحوه ی کار با این دو ویژگی بسیار مهم می باشد. این ویژگی ها عبارتند از:

  1. ویژگی action

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

  1. ویژگی method

از ویژگی method برای تعیین نوع ارسال داده ها به سمت اکشن استفاده می شود که خود دارای دو حالت get و post می باشد:

Get: در حالت Get اطلاعات ارسالی ما در نوار ادرس بالای صفحه قابل مشاهده می باشند و دارای امنیت نیستند پس از این حالت در مواردی که اطلاعات ارزشی ندارد استفاده کنید.

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

چگونه یک فرم بسازیم؟

برای اینکه یک فرم بسازیم باید از تگ های متفاوتی را که مطابق با نیاز خود در ساخت فرم استفاده می کنیم را بشناسیم که این تگ ها عبارتند از:

  1. تگ <input>
  2. تگ <textarea>
  3. تگ <button>
  4. تگ <select>
  5. تگ <option>
  6. تگ <optgroup>
  7. تگ <fieldset>
  8. تگ <label>

که در این جلسه کار با تگ های input ، textarea و button را آموزش می دهیم.

 

تگ input

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

  1. Value
  2. Placeholder
  3. name
  4. Type

Value: ویژگی Value شامل یک متن می باشد که درون تگ input قرار می گیر و ثابت می باشد و برای تغییر متن باید آن را پاک کنیم و متن مورد نظر خود را در آن قرار دهیم.

Placeholder: از ویژگی Placeholder برای قرار دادن یک متن داخل تگ input استفاده می کنیم ولی تفاوتی با ویژگی value دارد به این صورت که با کلیک برو روی آن یا نوشتن متنی درون تگ input از بین می رود در حالی که value از بین نمی رود.

Name: با استفاده از ویژگی name می توانیم برای تگ input مورد نظر خود یک نام انتخاب کنیم برای مثال زمانی که می خواهیم نام کوچک یک فرد را بگیریم در مقابل صفت name مقدار Firstname را قرار می دهیم.

نکته: در صورتی که از ویژگی name استفاده نکنیم ممکن است اطلاعات ارسالی فرم ارسال نشوند و فرم ما دچار نقص اطلاعاتی باشد پس حتما از name درست استفاده کنید.

Type: با استفاده از ویژگی Type نوع نمایش تگ input را مشخص می کنیم که خود دارای ۶ حالت مهم می باشد که عبارتند از:

  1. text
  2. file
  3. password
  4. submit button
  5. radio button
  6. checkbox

Text: با استفاده از حالت text شما می توانید یک ورودی به صورت متنی و کوتاه داشته باشید برای مثال زمانی که می خواهید نام یا نام خانوادگی خود و یا اطلاعاتی را که به صورت عمومی باشند و از لحاظ امنیتی حائز اهمیت نباشند می توانید از حالت text استفاده کنید.

File: با استفاده از ویژگی File می توانید تعیین کنید که کاربر به وسیله ی فرم یک فایل برای شما نیز ارسال کند، که باید در این صورت از ویژگی accept استفاده نماییم و نوع فایل دریافتی را مشخص نماییم.

Password: ویژگی Password مانند ویژگی text می باشد اما با این فرق که در این ویژگی کاراکتر هایی که ما تایپ می کنیم به شکل ستاره نمایش داده می شود. از این ویژگی همانطور که از اسمش پیداس برای دریافت رمز و کاراکتر های مهم استفاده می کنیم.

Submit:  از ویژگی Submit برای ایجاد یک دکمه برای ارسال اطلاعات استفاده می شود.

Radio: با استفاده از ویژگی radio می توانید تعدادی دکمه بسازید که کاربر فقط می تواند یکی از آن ها انتخاب نمایید که با کلیک به روی آن دکمه ی مورد نظر انتخاب می شود از ویژگی radio زمانی استفاده می شود که می خواهیم سوالی بپرسیم و فرد فقط می تواند یکی را انتخاب کند.

نکته: برای دکمه های radio یک value تعریف نمایید تا در ارسال اطلاعات دچار مشکل نشویم.

نکته: گروهی که می خواهیم از بین آن ها انتخاب نماییم باید دارای نام های یکسانی باشند در غیر این صورت می توان تمامی آن ها را با هم انتخاب نمود که نادرست می باشد.

Checkbox: Checkbox ها به کاربر این اجازه را می دهند تا همزمان چند مورد را انتخاب کند که برعکس radio می باشد.

به مثال زیر توجه کنید:

کد HTML:

<form class="" action="#" method="post">
  <input type="text" value="" placeholder="text" name="text"><br>
  <input type="file" value="" name="file" accept="image/gif"><br>
  <input type="submit" value="submit" name="send"><br>
  <input type="radio" value="Iran" name="country">Iran
  <input type="radio" value="Germany" name="country">Germany
  <input type="radio" value="Russia" name="country">Russia<br>
  <input type="checkbox" value="ghorme" name="food">قورمه سبزی
  <input type="checkbox" value="gheimeh" name="food">قیمه
  <input type="checkbox" value="fesenjan" name="food">فسنجان
</form>

کدCSS:

input {

margin: 20px

}

خروجی کد بالا:

تگ input

 

تگ textarea

به وسیله ی تگ textarea می توانیم یک باکس برای نوشتن ایجاد کنیم اما در اینجا نوشته ما محدودیتی ندارد مگر اینکه ما برای آن محدویتی تعریف کنیم. از مواردی که از این تگ استفاده می کنیم می توان به قسمت نظرات سایت اشاره کرد.

برای تعیین اندازه ی محدوده ی این تگ ها از دو ویژگی Rows و Cols استفاده می کنیم که Rows برای افزایش ارتفاع آن می باشد و Cols برای افزایش طول می باشد.

به نمونه کد زیر توجه کنید:

کد HTML:

<form class="" action="#" method="post">
  <textarea rows="10" cols="80" name="description">
   نظر خود را بنویسید...
  </textarea>
</form>

خروجی کد بالا:

تگ textarea

 

تگ button

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

  1. button
  2. reset
  3. submit

Button: در حالت button تنها یک دکمه ی ساده داریم که تقریبا هیچ کاری نمیکند. در حالت button می توان با جاوا اسکریپت عمل خاصی را به دکمه نسبت داد.

نکته: در بعضی مرورگر ها ممکن است حالت button معادل نوع submit باشد.

Reset: این دکمه تمام اطلاعات داخل فرم را پاک می کند و فرم را به حالت اول بر می گرداند.

Submit: در حالت Submit دکمه میتواند اطلاعات فرم را به آدرسی که در action مشخص شده ارسال نماید. توجه داشته باشید که استفاده از Submit نوع دکمه در برخی مرورگرهای قدیمی تر باعث می شود که اطلاعات کلیه ی فرم های موجود در صفحه به صورت یکجا ارسال شود که باعث ایجاد اختلال می شود پس بنابراین شاید بهتر است که به جای این نوع دکمه از مشابه آن در تگ input استفاده کنیم. به نمونه کد زیر توجه کنید:

کد HTMH:

<form class="" action="#" method="post">
  <button type="button" value="button">button</button><br>
  <button type="submit" value="Submit">Submit</button><br>
  <button type="reset" value="Reset">Reset</button>
</form>

کد CSS:

button {

margin: 20px

}

خروجی کد بالا:

تگ button

خلاصه ی مطلب:

  1. از تگ Form برای ایجاد یک فرم مشخصات یا قسمت نظرات و… استفاده می شود.
  2. با استفاده از ویژگی action تعیین کنید که اطلاعات فرم مورد نظر ما به چه آدرسی ارسال شود.
  3. از ویژگی method برای تعیین نوع ارسال داده ها به سمت اکشن استفاده می شود.
  4. ویژگی method دارای دو حالت get و post می باشد.
  5. تگ input مشخص کننده ی یک فیلد ورودی می باشد که کاربر می تواند اطلاعات و مشخصات خود را در آن درج نموده و ارسال کند.
  6. در صورتی که از ویژگی name استفاده نکنیم ممکن است اطلاعات ارسالی فرم ارسال نشوند و فرم ما دچار نقص اطلاعاتی باشد.
  7. با استفاده از حالت text شما می توانید یک ورودی به صورت متنی و کوتاه به وسیله ی تگ input داشته باشید داشته باشید.
  8. با استفاده از ویژگی File می توانید تعیین کنید که کاربر به وسیله ی فرم یک فایل برای شما نیز ارسال کند.
  9. ویژگی Password مانند ویژگی text می باشد اما کاراکتر هایی که ما تایپ می کنیم به شکل ستاره نمایش داده می شود. (به دلیل مسائل امنیتی)
  10. از ویژگی Submit برای ایجاد یک دکمه برای ارسال اطلاعات استفاده می شود.
  11. با استفاده از ویژگی radio می توانید تعدادی دکمه بسازید که کاربر فقط می تواند یکی از آن ها انتخاب نمایید.
  12. Checkbox ها به کاربر این اجازه را می دهند تا همزمان چند مورد را انتخاب کند که برعکس radio می باشد.
  13. به وسیله ی تگ textarea می توانیم یک باکس برای نوشتن ایجاد کنیم اما در اینجا نوشته ما محدودیتی ندارد.
  14. از تگ button برای ایجاد دکمه استفاده می شود.
  15. در حالت button تنها یک دکمه ی ساده داریم.
  16. این دکمه تمام اطلاعات داخل فرم را پاک می کند و فرم را به حالت اول بر می گرداند.
  17. در حالت Submit دکمه میتواند اطلاعات فرم را به آدرسی که در action مشخص شده ارسال نماید که فرقی با دکمه ی مشابه آن در تگ input ندارد.

 

ادامه این آموزش را در آموزش بعدی در اختیار شما عزیزان قرار خواهیم داد.

ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

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