۰۸ اسفند ۱۳۹۰ ۱۰ 8120 بازدید
آشنایی با فرم ها در طراحی سایت

نمونه فرم طراحی شده در وب

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

در این مقاله از سلسله مقالات آموزش طراحی وب، مسائل و مفاهیم پایه مربوط به کار با فرم ها در html خواهیم پرداخت؛ در پایان این مقاله انتظار می رود که شما بتوانید اقدام به طراحی یک صفحه وب نمونه بنمایید و از عناصر مختلف مرتبط به فرم ها در آن استفاده کنید.

فرم ها و ورودی ها در اچ تی ام ال – HTML forms and inputs

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

فرم ها در HTML

از فرم های HTML برای انتقال داده ها به سرور استفاده می شود. یک فرم می تواند عناصر ورودی مانند فیلدهای متنی، چک باکس ها، دکمه رادیویی، دکمه ارسال و غیره باشد. همچنین یک فرم می تواند حاوی انتخاب لیست ، ناحیه ی متن، فرم، و عناصر label باشد.

از تگ FORMبرای ایجاد یک فرم HTML استفاده می شود.

<form>
عناصر ورودی
.
<form/>

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

مهم ترین عنصر فرم عنصر ورودی یا همان <input> است. از عنصر ورودی برای انتخاب اطلاعات کاربر مورد استفاده قرار می گیرد.

عنصر ورودی از بسیاری از جهات بسته به نوع ویژگی می تواند متفاوت باشد. عنصر ورودی می تواند از نوع فیلد متن ، چک باکس، رمز عبور ، دکمه های رادیویی ، ارسال ، و غیره باشد.

معروف ترین و پر استفاده ترین نوع ورودی ها در زیر توضیح داده شده است:

فیلدهای متنی

<input type=”text” /> تعریف یک خط ورودی که کاربر می تواند متن را وارد کند.

به عنوان مثال:

<form>
First  name:     <input type="text"   name="firstname" /><br />
Last  name:     <input type="text"   name="lastname" />
</form>

کد  HTML بالا در یک مرورگر اینگونه است :

یک فرم نمونه در طراحی وب

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

فیلد رمز عبور:

.تعریف فیلد کلمه عبور است<input type=”password” />

:به عنوان مثال

<form>
Password:  <input type="password"  name="pwd" />
</form>

:که خروجی به صورت زیر است

فیلد پسورد نمونه در یک فرم طراحی شده در صفحه وب

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

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

<input type=”radio” />

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


:به عنوان مثال

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

:که خروجی به صورت زیر است

انتخاب دکمه های رادیویی در طراحی وب

:چک باکس ها

<input type=”checkbox” />

تعریف چک باکس است. چک باکس ها این اجازه را به کاربر می دهند که از میان تعداد محدودی ها از انتخاب ها یک یا چند گزینه  را انتخاب کنند.

:به عنوان مثال

<form>
<input  type="checkbox"  name="vehicle"  value="Bike" /> I have a bike<br />
<input  type="checkbox"  name="vehicle"  value="Car" /> I have a car
</form>

:که خروجی به صورت زیر است

sample checkbox in a web page

 دکمه ارسال:

<input type=”submit” />

.تعریف دکمه ارسال است

دکمه ارسال جهت ارسال داده های فرم به سرور  مورد استفاده قرار می گیرد. پس از اینکه کاربران سایت، روی دکمه ی submit کلیک می کنند، اطلاعات فرم به آدرسی که توسط صفت action در خود تگ form ایجاد شده است، ارسال می شود.

:به عنوان مثال

<form  name="input"  action="html_form_action.asp" method="get">
Username:    <input type="text"  name="user"  />
<input  type="submit"  value="Submit"  />
</form>

که خروجی به صورت زیر است:

ارسال اطلاعات فرم به سرور در صفحه وب طراحی شده

  کلیک کنید، Submit در فیلد متنی بالا، اگر شما تعدادی کاراکتر تایپ کنید و روی دکمه

.ارسال می کند “html_form_action.asp”  مرورگر، ورودی خود را به یک صفحه به نام

. صفحه به شما اطلاعات ورودی دریافتی را نشان می دهد

:Html تگ های فرم در

.برای ورودی های کاربر می با شد HTML  تعریف یک فرم:<form> تگ

  .تعریف کنترل ورودی می باشد :<input> تگ

 .کنترل ورودی ها متن چند خطی را معرفی می کند:<textarea>  تگ

  .تعریف برچسب برای عنصر ورودی است:<label> تگ

  . تعریف کادر در اطراف عنصر یک فرم می باشد:<fieldset> تگ

  .تعریف یک عنوان برای عنصر فرم می باشد:<legend> تگ

( یک لیست انتخابی را معرفی می کند(لیست کشویی:<select> تگ

 .تعریف انتخاب یک گزینه از لیست انتخابی می باشد:<option> تگ

 .تعریف دکمه فشاری می باشد:<button> تگ

همانطوری که حتما متوجه شدید، فرم های مختلفی که در هنگام طراحی سایت های مختلف ایجاد می شوند، از جمله فرم های ارسال دیدگاه ها، تماس با وب سایت، نظرسنجی، ثبت نام، ارسال رزومه و ….. همگی به وسیله ی تگ هایی که در بالا به آن ها اشاره شد، قابل استفاده هستند.

استایل دهی به فرم ها در طراحی وب

فرم ها در صفحات وب، از یکسری استایل های پیش فرض برخوردارند که البته این استایل های پیش فرض، زیبایی مناسبی ندارند و اینکه بستگی به نوع مرورگر مورد استفاده توسط کاربر، با زیبایی متفاوتی به نمایش در می آیند؛ مثلا فرم های اینترنت اکسپلورر 6 با فرم های مرورگر سافاری (safari) اصلا قابل مقایسه نیست. البته استایل دهی به فرم ها به دلیل تنوع و گستردگی ای که دارد، شامل مباحث گسترده ای می شود اما به دلیل نقش موثری که در زیباسازی و جلوه دادن سایت نزد مخاطبان خودش دارد؛ بسیار حائز اهمیت بوده و مورد استقبال طراحان حرفه ای وب سایت ها، واقع می شود.

لطفا به این مطلب رای دهید
[تعداد: 0    میانگین: 0/5]

نظرات کاربران (۱۰)



  1. خرید

    سلام
    متشکر بابت انتشار پست


  2. سایت مفید و جامعی بود

  3. پریا

    سلام
    با عرض پوزش من خیلی مبتدی هستم و سایتی رو برای شرکت درست کردم و برای یک قسمت از سایت میخوام بخش ورود به سایت درست کنم تا کاربران با یوزر و پسوردی که ما در اختیارشون میذاریم وارد اون قسمت بشن. فرم ورود به سایت توی اینتر نت زیاد هست اما من نمیدونم چطوری اطلاعاتش رو مطابق اطلاعات خودمون تغییر بدم.
    میشه یه کد html ساده با یوزر و پسورد بهم بدین و راهنماییم کنید که چطوری کاربرا رو به قسمتی که میخوام منتقل کنم؟ یعنی کجای کد رو تغییر بدم؟

  4. امین

    سلام
    عالی بود
    متشکر بابت وقتی که گذاشتید

  5. N!ma

    kheili khob bod taghriban mikhastam bara zabane html beram kelas ama alan kamelan motevajeh shodam k chetor hastesh matalebe saiteton fogholadast

  6. سارا

    سلام
    چه طوری می تونیم یک checkboxکه گذاشتیم یک متن هم که کنارشه وقتی روی متن کلیک کردیم checkboxتیک بخوره؟

  7. MSA

    سلام تشکر از سایت خوبتون .دمتون گرم

  8. سپهر

    خیلی سایتتون عالیه

  9. علیرضا

    برای پایان کارم خیلی به کارم اومد دستت درد نکنه

  10. jh

    عالی بود