فرم ها و ورودی ها در HTML

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

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

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

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

فرم ها در HTML

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

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

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

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

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

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

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

فیلدهای متنی

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

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

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

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

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

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

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

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

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

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

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

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

<input type=”radio” />

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

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

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

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

:چک باکس ها

<input type=”checkbox” />

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

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

[html]
<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>
[/html]

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

 دکمه ارسال:

<input type=”submit” />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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