فرم های HTML


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

نمونه

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

ایجاد فیلد رمز عبور
چگونگی ایجاد یک فیلد رمز عبور .

(شما می توانید مثالهای بیشتری در انتهای این صفحه پیدا کنید).

فرم های HTML

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

<form>
input elements
</form>

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

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

فیلد متنی

تعریف یک خط فیلد ورودی است که یک کاربر می تواند متن را وارد کند:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

کد HTML فوق در مرورگر اینگونه مشاهده می شود:
First name:
Last name:

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

فیلد رمز عبور

تعریف یک فیلد رمز عبور:
<"input type="password>
<form>
Password : <input type="password" name="pwd">
</form>
کد HTML فوق در مرورگر اینگونه مشاهده می شود:
Password:


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

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

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

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
کد HTML فوق در مرورگر اینگونه مشاهده می شود:

Male
Female



چک باکس

<"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>
کد HTML فوق در مرورگر اینگونه مشاهده می شود:
I have a bike
I have a car

دکمه ارسال

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

<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
کد HTML فوق در مرورگر اینگونه مشاهده می شود:
Username:


اگر شما تعدادی کاراکتر در فیلد متنی بالا تایپ کنید، و "submit" را فشار دهید، مرورگر ورودی شما را به صفحهای به نام "html_form_action.asp" خواهد فرستاد. این صفحه ورودی های دریافتی را به شما نشان می دهد.

نمونه های بیشتری از ورودی

دکمه های رادیویی
چگونگی ایجاد دکمه های رادیویی
چک باکس
چگونگی ایجاد نمایش به صورت گزینه انتخابی. کاربر می تواند یک گزینه را انتخاب کند و یا از انتخاب خارج کند
لیست کشویی ساده
چگونگی ایجاد یک لیست کشویی ساده
لیست کشویی با ارزش از پیش انتخاب شده
چگونگی ایجاد یک لیست کشویی با ارزش از پیش انتخاب شده
ناحیه متنی
چگونگی ایجاد یک کنترل ورودی متن چند خطی. در یک ناحیه متنی ، کاربر می تواند تعداد نامحدودی از کاراکترها را وارد کند
ایجاد یک دکمه
چگونگی ایجاد یک دکمه



فرم های نمونه

مجموعه فیلد در اطراف فرم- داده
چگونگی ایجاد حاشیه در اطراف عناصر در یک فرم
فرم با فیلدهای متنی و یک دکمه ارسال
چگونگی ایجاد یک فرم با دو فیلد متنی و یک دکمه ارسال
فرم بهمراه checkbox
چگونگی ایجاد یک فرم با دو checkbox و یک دکمه ارسال
فرم بهمراه دکمه های رادیویی
چگونگی ایجاد یک فرم با دو دکمه رادیویی و یک دکمه ارسال
ارسال ایمیل از یک فرم
چگونگی ارسال ایمیل از یک فرم


برچسب های فرم HTML

:تگ های جدید در HTML5 New

برچسب توضیحات
<form> فرم های HTML برای ورودی های کاربر تعریف می کند
<input> کنترل های ورودی را تعریف می کند
<textarea> یک کنترل چند ورودی را تعریف می کند (ناحیه متن)
<button> یک کلید قابل کلیک را تعریف می کند
<select> یک لیست کشویی تعریف می کند
<optgroup> یک گروه از انتخاب های مرتبط را در یک لیست کشویی تعریف می کند
<option> یک انتخاب را در یک لیست کشویی تعریف می کند
<label> یک برچسب برای عنصر <input> را تعریف می کند
<fieldset> عناصر مرتبط را در یک لیست گروه بندی می کند
<legend> یک عنوان برای یک عنصر <fieldset>, < figure> یا <details>تعریف می کند
New<datalist> جزئیات اضافه که کاربر بتواند آن را ببیند یا پنهان کند را تعریف می کند
New<keygen> یک فیلد مولد جفت کلید را تعریف می کند
New<output> نتیجه یک محاسبه را تعریف می کند