فرم های HTML

فرم های HTML


در این جلسه اصول اولیه ایجاد فرم های «Forms» اچ تی ام ال را توضیح می دهیم.

HTML ما را قادر می سازد تا فرم ها را ایجاد کنیم. این جایی است که وب سایت های ما می توانند از یک بروشور تبلیغاتی بیشتر شوند. فرم ها به ما اجازه می دهند که وب سایت های داینامیک بیشتری ایجاد کنیم و کاربران ما بتوانند بیشتر با آن ارتباط برقرار کنند.

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

در HTML یک فرم با استفاده از تگ <form></form> تعریف می شود. عناصر فرم واقعی نیز میان این دو تگ (تگ باز و بسته فرم) تعریف می شوند.

مثل این:

<form>

(عناصر فرم در اینجا قرار می گیرند)

</form>

تگ <input>

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

متن

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

<form>

نام: <input type="text" name="نام">

نام خانوادگی: <input type="text" name="نام خانوادگی">

</form>

برای مشاهده نتیجه اینجا کلیک کنید.

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

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

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

برای انتخاب چندگزینه می توانید از چک باکس استفاده کنید (در ادامه توضیح داده شده است).

<form>

<input type="radio" name="lunch" value="آبی">آبی

<input type="radio" name="lunch" value="قرمز">قرمز

</form>

برای مشاهده نتیجه اینجا کلیک کنید.

چک باکس ها

چک باکس ها «Checkboxes» همانند دکمه های رادیویی هستند امّا کاربر را قادر می سازد تا انتخاب های مختلفی انجام دهد.

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

<form>

<input type="checkbox" name="technology" value="computer">آموزش کامپیوتر

<input type="checkbox" name="technology" value="laptop">آموزش لپ تاپ

</form>

برای مشاهده نتیجه اینجا کلیک کنید.

ارسال

دکمه ارسال «submit» اجازه می دهد تا کاربر به طور واقعی فرم را ارسال کند.

<form action="http://www.computerquestion.ir/آموزش-کامپیوتر.html/" target="_blank">

<input type="checkbox" name="technology" value="computer">آموزش کامپیوتر

<input type="checkbox" name="technology" value="laptop">آموزش لپ تاپ

<input type="submit">

</form>

فهرست انتخاب

فهرست یا لیست انتخاب «select list» یک لیست کشویی است که دارای گزینه می باشد. این اجازه می دهد تا کاربر یک گزینه را از یک لیست با گزینه های از پیش تعریف شده را انتخاب کند.

فهرست انتخاب با استفاده از عنصر <select> همراه با عنصر <option> ایجاد می شود.

<form>

<select>

<option value="farvardin">فروردین</option>

<option value="ordibehesht">اردیبهشت</option>

<option value="khordad">خرداد</option>

<option value="tir">تیر</option>

</select>

</form>

برای مشاهده نتیجه اینجا کلیک کنید.

محل متن

منطقه متنی یا محل متن «textarea»: شما می توانید از عنصر <textarea> برای فعال کردن کاربران برای وارد کردن بلوک های بزرگتر متنی نسبت به تگ <input> استفاده کنید.

در این روش برای اینکه تعداد حروف یا کاراکترها را برای کاربر مشخص کنید از ویژگی maxlength استفاده نمایید. همچنین می توانید از ویژگی های cols و rows برای تنظیم عرض و ارتفاع منطقه متن استفاده کنید.

<form>

<textarea maxlength="65" rows="4" cols="50">متن را در اینجا بنویسید</textarea>

</form>

برای مشاهده نتیجه اینجا کلیک کنید.

عملکرد فرم

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

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

شما می توانید ویژگی action را به عنصر form اضافه کنید تا یک صفحه عملیاتی بسازید.

<p>برای شروع آموزش زبان اچ تی ام ال نام و نام خانوادگی را وارد کرده و روی دکمه ورود به آموزش کلیک کنید</p>

<form action="http://www.computerquestion.ir/cat/90/HTML.html" method="post" target="_blank">

نام: <input type="text" name="نام-اول" value="" maxlength="30">

نام خانوادگی: <input type="text" name="نام-خانوادگی" value"" maxlength="50">

<input type="submit" value="ورود به آموزش">

</form>

برای مشاهده نتیجه اینجا کلیک کنید.

روش فرم

ممکن است متوجه شده باشید که مثال بالا از ویژگی method استفاده می کند. این ویژگی روش http را برای هنگامی که فرم ارسال می شود مشخص می کند.

مقادیر روش ممکن است به دو شکل زیر باشد:

Get:

داده های فرم هنگامی که ارسال می شوند به URL اضافه می شوند. این بدان معنی است که شما می توانید متغیرهای فرم را در نوار آدرس مرورگر خود مشاهده کنید. این زمانی می تواند مفید باشد که برای داده های غیر حساس مانند صفحه نتایج موتور جستجو به کار گرفته شود. همچنین به شما امکان می دهد که صفحه را نشانه گذاری کنید و حتی از یک صفحه وب به دیگری لینک کنید.

Post:

داده های فرم به URL اضافه نمی شود. ارائه این ویژگی اختیاری است. اگه آن را ارئه نکنید، روش پست خواهد بود.

جلسه قبل | جلسه بعد

تبلیغات در پایین ادامه ی مطلب

نظرات شما


    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی