فرم های HTML

فرم های HTML

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

فرم های HTML فرم های HTML فرم های HTML form html design

فرم های HTML برای انتقال داده ها به یک سرور استفاده می شود.

فرم های HTML می تواند شامل عناصر ورودی مانند فیلدهای متنی، چک باکس، دکمه های رادیویی، دکمه ارسال و … باشد. فرم همچنین می تواند شامل لیست های انتخابی ، منطقه متنی، تنظیم فیلد ، راهنما و عناصر برچسب باشد.

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

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

مشخصه ی method: توسط این مشخصه می توانید نحوه ی ارسال اطلاعات را مشخص نمایید که دو مقدار post و get را دریافت می کند. تفاوت این دو مقدار در این است که مقدار post اطلاعات را به صورت امن ارسال می کند که توسط کاربر دیده نمی شود و برای ارسال اطلاعات طولانی مناسب است ولی مقدار get علاوه بر اینکه توسط کاربر قابل مشاهده است از نظر اندازه ی اطلاعات نیز محدود می باشد.

برچسب <form> برای ایجاد یک فرم HTML استفاده می شود:

 

 

انواع فیلد های موجود در فرمها

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

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

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

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

  • text
  • email
  • url
  • password
  • checkbox
  • radio
  • hidden
  • submit
  • reset
  • button
  • file

 

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

فرم های HTML – عنصر ورودی

مهم ترین عنصر فرم، عنصر <input> است.
عنصر <input> برای انتخاب اطلاعات کاربر مورد استفاده قرار می گیرد.
یک عنصر <input> می تواند بسته به صفت نوع ، در بسیاری جهات متفاوت باشد . یک عنصر <input> می تواند نوعی از فیلد متن، چک باکس، رمز عبور، دکمه های رادیویی، دکمه ارسال و… باشد.
معمول ترین انواع ورودی ها در زیر توضیح داده شده است.

 

فیلد متنی

تعریف یک خط فیلد ورودی است که یک کاربر می تواند متن را وارد کند:

که به صورت زیر در مرورگر دیده می شود.

فرم های HTML فرم های HTML فرم های HTML Capture

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

 

فیلدهای پسورد یا password

فیلدهای رمزعبور نیز دقیقا مانند فیلدهای متنی می باشند با این تفاوت که متن تایپ شده در آن ها به صورت ستاره و یا دایره های توپر مشاهده می شود. تنها کافی است در تگ فوق میزان مشخصه ی type را برابر password قرار دهید. برای مثال:

 

کاراکترها در فیلد رمز عبور پوشانده می شود. (به عنوان ستاره یا دایره نشان داده می شود) .

 

فیلدهای مخفی یا hidden

این گونه فیلد ها در واقع انتخاب یا دکمه ای را برای کاربر نمایش نمی دهند و برای ارسال اطلاعات ثابت که توسط شما تعیین شده است استفاده می شوند بدون اینکه کاربر از آنها اطلاعی داشته باشد. مثلا شما یک فرم با موضوع “فرم وام” در سایت خود قرار داده اید و نمی خواهید که کاربر موضوع را مشاهده کند در این هنگام از این نوع فیلدها استفاده می کنیم. برای مثال:

 

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

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

فرم های HTML فرم های HTML فرم های HTML Capture 1

 

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

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

 

 

در واقع سه انتخاب یعنی رنگهای زرد، سبز و مشکی را برای کاربر قرار دادیم ولی تنها یک رنگ قابلیت انتخاب شدن را دارد! حتما متوجه این نکته شده اید که در تمام تگ های فوق مقداری که متغیر name دریافت کرده است یکسان و برابر با color می باشد و این نکته برای درست کار کردن دکمه های رادیویی ضروری است.

 

چک باکس

<“input type=”checkbox> چک باکس را تعریف می کند. چک باکس این امکان به کاربر می دهد تا هیچکدام یا بیش از یک گزینه از تعداد محدودی از انتخاب ها را علامت بزند.برخلاف دکمه های رادیویی که تنها یک گزینه قابلیت انتخاب شدن را دارد در دکمه های انتخاب چندتایی، که کاربر آنها را به شکل مربع های کوچک توخالی مشاهده می کند، چند گزینه قابلیت انتخاب شدن را دارا می باشند. مشخصه ی type در این دکمه ها مقدار checkbox را دریافت می نمایند. در مثال زیر از کاربر می خواهیم زبان هایی را که به آنها آشنایی دارد انتخاب نماید:

فرم های HTML فرم های HTML فرم های HTML Capture 2

دکمه ارسال

<“input type=”submit> تعریف یک دکمه ارسال.
یک دکمه submit است مورد استفاده قرار گیرد برای ارسال داده های فرم به سرور. داده ها به صفحه مشخص شده در عنصر Action فرم فرستاده می شود. فایل معرفی شده در عنصر Action معمولا کاری را با اطلاعات ورودی دریافتی:

Capture فرم های HTML فرم های HTML Capture 3

لیست کشویی ساده

 

آموزش HTML آموزش طراحی وب

دیدگاه خود را بیان کنید