فرم های html

---

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

---

خودتان امتحان کنید-مثال ها

ایجاد فیلدهای متنی

این مثال طریق ساخت یک فیلد متنی را نشان می دهد. کاربر می تواند اطلاعات خود را

در این فیلد بنویسد.

ایجاد فیلد رمزعبور

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

ورودی ، از فیلد رمز عبور استفاده می کنیم ، این مثال روش ساخت این فیلد را نشان

می دهد

(مثالهای بیشتر، در انتهای این صفحه آمده است)

---

فرم های HTML

یک فرم ، منطقه ای حاوی عناصر فرم است عناصر فرم ، عناصری هستند که به کاربر

اجازه می دهند تا اطلاعات را (مثل فیلدهای متنی ، فیلدهای text area

، دکمه های رادیویی ، چک باکس ها و...) در فرم وارد کند

یک فرم با برچسب <form> معرفی می شود.

<form>

.

input elements

.

<form/>

---

فرم های HTML - عنصر Input

در برچسب <form> برچسب <input>بیشترین استفاده را دارد.نوع ورودی با خواص آن

تعیین می شود ، انواع پر کاربرد ورودی ها در پایین توضیح داده شده اند

---

فیلدهای متنی

فیلد متنی هنگامی استفاده می شود که شما می خواهید کاربر ، حروف ، اعداد و... را

تایپ کند.

<form>

</"First name: <input type="text" name="firstname

</br>

</"Last name: <input type="text" name="lastname

<form/>

کد HTML فوق در مرورگر به صورت زیر نمایش داده می شود

First name:

Last name:

توجه کنید که خود فرم قابل رویت نیست ، همچنین توجه داشته باشید که در بیشتر

مرورگرها طول فیلد متنی بطور پیش فرض 20 کاراکتر است

---

فیلد رمز عبور

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

ورودی ، از فیلد رمز عبور استفاده می کنیم. این مثال روش ساخت این فیلد را نشان

می دهد

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

کد HTML فوق در مرورگر به صورت زیر نمایش داده می شود:

Password:

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

کاراکترها ، ستاره یا دایره نمایش می دهد

---

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

دکمه های رادیویی زمانی استفاده می شوند که شما می خواهید از بین تعداد محدودی

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

<form>

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

input type="radio" name="sex" value="female" /> Female>

<form/>

کد HTML فوق در مرورگر به صورت زیر نمایش داده می شود:

     Male

  Female

---

چک باکس ها (check boxes)

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

انتخاب ، یک یا چند گزینه را انتخاب کند

<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

---

دکمه Submit

هنگامی که کاربر روی دکمه "Submit" کلیک می کند ، محتویات فرم به یک فایل دیگر

فرستاده می شوند. فایل معرفی شده در عنصر 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" را کلیک کنید شما

ورودی خود را به صفحه ای که "action1.asp" نام دارد خواهید فرستاد ، آن صفحه به

شما ورودی های دریافتی را نشان خواهد داد

---

مثالهای بیشتر

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

چگونگی ایجاد دکمه های رادیویی

چک باکس ها

چگونگی ایجاد چکس باکس ها ، کاربر می تواند موارد مورد نظر خود را انتخاب کند

فهرست کشویی ساده

چگونگی ایجاد یک فهرست کشویی ساده

فهرست کشویی ساده با یک مقدار از پیش تعیین شده

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

ناحیه متنی

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

کرد

ایجاد دکمه

چگونگی ایجاد دکمه

---

مثالهای فرم

مجموعه فیلد

چگونگی ایجاد یک حاشیه اطراف عناصر در یک فرم

فرم به همراه دو فیلد متنی و یک دکمه submit

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

فرم به همراه چک باکس ها

چگونگی ایجاد یک فرم به همراه سه چک باکس و یک دکمه submit

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

چگونگی ایجاد یک فرم به همراه دو دکمه رادیو و یک دکمه submit

ارسال نامه الکترونیکی به کمک فرم

در این مثال روش ارسال email به کمک فرم، نشان داده شده است. به موجودیت

action فرم توجه کنید

---

برچسب های فرم

برچسب	توضیحات
<form>	یک فرم برای ورودی کاربران معرفی می کند
<input>	فیلد ورودی معرفی می کند
<textarea>	یک ورودی متن چند خطی  معرفی می کند
<label>	یک برچسب برای ورودی ها معرفی می کند
<fieldset>	یک مجموعه از فیلدها معرفی می کند
<legend>	یک عنوان برای fieldset معرفی می کند
<select>	یک لیست قابل انتخاب معرفی می کند
<optgroup>	یک گروه از گزینه ها معرفی می کند
<option>	یک گزینه در لیست باز شونده معرفی می کند
<button>	یک دکمه را معرفی می کند