ایجاد تگ فرم در HTML

ایجاد تگ فرم در HTML

یک دیدگاه

دیدگاه خود را بنویسید لغو پاسخ

ایجاد تگ فرم در HTML

مطالب مرتبط

یک دیدگاه

دیدگاه خود را بنویسید لغو پاسخ

تگ <form></form>

تگ های زیر مجموعه تگ Form

تگ <form></form>

تگ های زیر مجموعه تگ Form

داژیار پردازش ایساتیس

ارتباط با ما

اطمینان به اعتبار ما

تگ <form></form>

تگ های زیر مجموعه تگ Form

داژیار پردازش ایساتیس

ارتباط با ما

اطمینان به اعتبار ما

صفت های تگ <form>

تگ <input>

تگ <textarea></textarea>

تگ <select></select> و تگ <option></option>

خصوصیات مشترک برای فیلدهای ورودی

صفت های تگ <form>

تگ <input>

تگ <textarea></textarea>

تگ <select></select> و تگ <option></option>

خصوصیات مشترک برای فیلدهای ورودی

صفت های تگ <form>

تگ <input>

تگ <textarea></textarea>

تگ <select></select> و تگ <option></option>

خصوصیات مشترک برای فیلدهای ورودی

این مطلب رو با دوستانتون به اشتراک بگذارید

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

از تگ <form></form> برای ایجاد فرم در html استفاده می شود.البته این تگ به تنهایی کار خاصی نمی کند و نیاز به تگ های دیگری دارد که در ادامه با آن ها آشنا خواهیم شد.

در ادامه به خاصیت های این تگ می پردازیم:

Action: با این ویژگی مشخص می کنیم اطلاعاتی که در این فرم وارد می شود به چه آدرسی ارسال شود.(این اطلاعات به یک فایل در سرور ارسال می شود مثلا get.php، که بررسی آن در آموزش html و css نمی گنجد)
Method: با این ویژگی می توانیم شیوه ارسال اطلاعات فرم به صفحه مقصد را مشخص کنیم.دو روش کلی وجود دارد:
- get :در این حالت اطلاعات در نوار آدرس مرورگر نمایش داده می شود و مقادیر همراه با پارامترها برای سرور ارسال می شوند
- Post: در این حالت اطلاعات در بدنه پیج مخفی می شود و بعد به سرور مقصد ارسال می شود بنابراین امنیت بالاتری دارد.
Target : مشخص می کند با فشردن دکمه ارسال چگونه اطلاعات ارسال شود
- _self : در صفحه ای که اکنون باز است اطلاعات ارسال شود.
- _blank: در صفحه ای جدید اطلاعات ارسال شود.

تگ های زیر مجموعه تگ فرم در html به سه دسته اصلی تقسیم می شوند که به تگ form ظاهر می بخشند.

تگ <input>
تگ <textarea><textarea>
تگ <select> و تگ <option> به صورت ترکیبی

(البته تگ های دیگری هم هست که در این سطح از آموزش نمی گنجد، برای اطلاعات بیشتر به این لینک مراجعه کنید)

استفاده از این تگ در تگ form به شدت پرکاربرد است.این تگ با توجه به مقداری که برای خاصیت type اش تعریف می شود ،به روش های مختلفی مورد استفاده قرار می گیرد.(راستی این تگ از اون دسته تگ هاییه که تگ پایانی نداره)

در ادامه با چندین type پرکاربرد آشنا می شویم (برای کسب اطلاعات بیشتر به این لینک مراجعه کنید) :

<input type=”text”> : از این نوع type برای ایجاد فیلد متنی استفاده می کنیم و انواع کاراکتر ها را می پذیرد.
<input type=”password”> : این نوع type هم برای ایجاد فیلد متنی است فقط ورودی را به صورت نقطه نمایش میدهد.
<input type=”button”> : این نوع type برای ایجاد دکمه به کار می رود.
<input type=”checkbox”> : این نوع type برای ایجاد چک باکس به کار می رود.
<input type=”radio”> : این نوع type برای ایجاد دکمه های رادیو به کار می رود.
<input type=”submit”> : این نوع type برای ایجاد دکمه ارسال اطلاعات فرم به کار می رود.
<input type=”reset”> : این نوع type برای ایجاد یک دکمه ریسیت به کار می رود که با فشردن آن تمام فیلدها مقادیر پیشفرض می گیرند.

از این تگ برای ایجاد فیلد متنی طولانی یا چند خطی استفاده می شود .بین تگ باز و بسته هم می توان مقدار پیشفرض فیلد را نوشت.
سه خصوصیت بارز برای این تگ شامل موارد زیر است:

maxlength : تعداد کاراکترهایی مجاز برای این فیلد را مشخص می کند.
rows : ارتفاع این فیلد را مشخص می کند
cols : عرض این فیلد را مشخص می کند.

البته توجه داشته باشید عرض و ارتفاع را می توانیم در CSS هم مشخص کنیم.

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

multiple برای تگ select: از این خاصیت برای انتخاب چند مورد از لیست استفاده می شود . (کاربر برای انتخاب چند مورد باید کلید ctrl را نگه دارد و موارد انتخاب شده به صورت آرایه ارسال می شود.)
size برای تگ select: این خاصیت مشخص می کند چه تعداد ار منوهای لیست به صورت پیش فرض، بدون اسکرول، قابل مشاهده باشد.
value برای تگ option: مقادیر لیست را مشخص می کند.
selected برای تگ option: با این خاصیت می توان مقدار پیشفرض لیست را مشخص کرد.

چندین خصوصیت می باشد که به صورت مشترکی برای فیلدهای ورودی به کار می رود مثل:

value: برای مشخص کردن مقدار پیش فرض هر فیلد به کار می رود.
readonly: این خاصیت باعث می شود یک فیلد فقط خواندنی باشد
disabled : این خاصیت باعث می شود یک فیلد غیرفعال شود.
maxlength : ماکزیمم تعداد کاراکترهایی مجاز برای ورودی فیلد را مشخص می کند.
size: این خاصیت مشخص می کند یک فیلد ورودی به اندازه چه تعداد کاراکتر رشد کند . توجه داشته باشید این خاصیت فقط عرض فیلد را تغییر می دهد و در مشخص کردن تعداد کاراکترهای ورودی دخالتی ندارد.
placeholder: متنی که به این خاصیت می دهیم به صورت راهنما در فیلد ورودی قرار می گیرد و به محض تایپ کاربر این متن حذف می شود.

نکته: می توانیم از المان تگ <lable></lable> برای مشخص کردن برچسب هر ورودی استفاده کنیم.

خب در ادامه میریم سراغ یک مثال کامل و دقیق برویم تا تمام موارد گفته شده را عینی ببنیم و درک کنیم.

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
body{
background:#89F7FE;
}
form{
  font-family: WYekan, Tahoma, cursive;
  font-size:14px;
}
</style>
</head>
<body>
 <form action="" method="POST">
 <table>
  <tr>
    <td><label>نام</label></td>
    <td><input type="text" placeholder="داژیار"></td>
  </tr>
  <tr>
    <td><label>نام خانوادگی</label></td>
    <td><input type="text" placeholder="پردازش ایساتیس" ></td>
  </tr>
  <tr>
    <td><label>جنسیت</label></td>
     <td> خانم<input type="radio" name="title" value="خانم">
      آقا<input type="radio" name="title" value="آقا"></td>
  </tr>
   
  <tr>
    <td><label>ایمیل</label></td>
    <td><input type="email" placeholder="dazhyarco@gmail.com" ></td>
  </tr>
  <tr>
    <td><label>رمز عبور</label></td>
    <td><input type="password" placeholder="حداقل 8 کاراکتر"></td>
  </tr>
  <tr>
    <td><label>تایید رمز عبور</label></td>
    <td><input type="password" placeholder="تکرار رمز" ></td>
  </tr>
  <tr>
    <td><label>کشور</label></td>
    <td>
	<select size="3">
      <option>ایران</option>
      <option selected>فرانسه</option>
      <option>آلمان</option>
      <option>ایتالیا</option>
      <option>ژاپن</option>
      <option>روسیه</option>
      <option>آمریکا</option>
    </select>
	</td>
  </tr>
    <tr>
	  <td><label>توضیحات</label></td>
	  <td>
      <textarea maxlength="200" name="message" rows="10" cols="30">در اینجا می توانید چندین خط تایپ کنید</textarea>
	  </td>
   </tr>
  <tr>
    <td><label>
      <input type="checkbox">
      با <a href="#">قوانین سایت</a> موافقم
    </label>
	</td>
  </tr>
  <tr>
   <td> <input type="submit" value="ثبت نام"></td>
  </tr>
 </table>
 </form>
</body>
</html>

<!DOCTYPE html>

<head>

<style>

body{

background:#89F7FE;

}

form{

font-family: WYekan, Tahoma, cursive;

font-size:14px;

}

</style>

</head>

<body>

<table>

<tr>

</tr>

<tr>

<td><label>نام خانوادگی</label></td>

</tr>

<tr>

<td><label>جنسیت</label></td>

آقا<input type="radio" name="title" value="آقا"></td>

</tr>

<tr>

<td><label>ایمیل</label></td>

</tr>

<tr>

</tr>

<tr>

<td><label>تایید رمز عبور</label></td>

</tr>

<tr>

<td>

<option>ایران</option>

<option selected>فرانسه</option>

<option>آلمان</option>

<option>ایتالیا</option>

<option>روسیه</option>

<option>آمریکا</option>

</select>

</td>

</tr>

<tr>

<td><label>توضیحات</label></td>

<td>

<textarea maxlength="200" name="message" rows="10" cols="30">در اینجا می توانید چندین خط تایپ کنید</textarea>

</td>

</tr>

<tr>

با <a href="#">قوانین سایت</a> موافقم

</label>

</td>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

نتیجه اجرا به شکل زیر می باشد که فکر نمیکنم به توضیح اضافه تری نیاز داشته باشد.

امیدواریم که این آموزش مورد رضایت شما واقع شده باشد و بتوانید با توجه به نیازتون فرم در html طراحی کنید .

خلاصه جلسه امروز به شرح زیر می باشد:

باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید ;-)

به این مقاله چند تا ستاره میدی؟
[تعداد رای: 5 امتیاز: 4.2]

توضیحات

این تگ با صفت type شکل های مختلف فیلدهای ورودی را مشخص میکند.

textarea

ایجاد فیلد ورودی چندخطی

select-option

ایجاد لیست بازشونده