فرم های ورود اطلاعات در HTML

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


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

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

ایجاد فیلد کلمه عبور(پسورد)
چگونه یک فیلد برای ورود کلمه عبور ایجاد کنیم.

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


فرم های HTML

Wiki

از فرم های HTML برای ارسال اطاعات به سرور استفاده می شود.

یک فرم می تواند شامل عناصر ورودی(Input) مانند فیلد های متنی، چک باکس ها، رادیو باتن ها، دکمه های ارسال، لیست های انتخاب و ... باشد.

از تگ <form> برای ایجاد یک فرم HTML استفاده می شود:

<form>
.
input elements
.
</form>

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

Wiki

یکی از مهمترین عناصر فرم، عنصر input است.

در این عنصر خصوصیتی به نام type به تعیین نوع اطلاعات ورودی اختصاص دارد و می توان آن را با یکی از مقادیر زیر تنظیم کرد:

text , checkbox , radio , password , hidden , submit , reset , button , file , image

در ادامه به شرح بعضی از typeهای پرکاربرد بالا خواهیم پرداخت:


فیلد input از نوع Text

Wiki

اگر می خواهید که بازدیدکننده، اطلاعاتی از قبیل متن، اعداد و ... را وارد کند، خصوصیت type را با مقدار "text" تنظیم کنید:

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

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

First name:
Last name:

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

نحوه نمایش عناصر ورودی در مروگر نمایش داده نمی شود.

اگر بخواهیم مقداری بیش از 20 کاراکتر را برای عنصر متنی مشخص کنیم چه کار می کنیم.


فیلد input از نوع Password

Wiki

اگر می خواهید که بازدیدکننده، کلمه عبور را وارد کند، خصوصیت type را با مقدار "password" تنظیم کنید:

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

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

Password:

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


فیلد input از نوع Radio

Wiki

اگر می خواهید که بازدیدکننده، فقط یک گزینه را از بین چند گزینه محدود انتخاب کند، خصوصیت 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 از نوع Checkbox

Wiki

اگر میخواهید که بازدیدکننده، یک یا چند گزینه را از بین چند گزینه محدود انتخاب کند، خصوصیت 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 از نوع Submit

Wiki

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

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

معمولا فایلهای بخش action برنامه ها و اسکریپت های نوشته شده با زبانهای cgi مانند ASP.NET ، Perl ، PHP و ... بوده و وظیفه آنها دریافت اطلاعات فرمها و سپس پردازش آنها می باشد:

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

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

Username:

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


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

Wiki

Radio button
چگونه یک radio button ایجاد کنیم.

Checkbox
چگونه یک checkbox ایجاد کنیم. کاربر می تواند در انتخاب مختار باشد.

drop-down
چگونه یک لیست کشویی یا drop-down ساده ایجاد کنیم.

Drop-down با آیتم انتخاب شده از قبل
چگونه یک لیست کشویی با مقدار انتخاب شده از قبل ایجاد کنیم.

Textarea
چگونه یک کنترل ورودی متن چند خطه ایجاد کنیم. در یک text-area کاربر می تواند تعداد نامحدودی کاراکتر تایپ کند.

button
چگونه یک دکمه برای کلیک کردن ایجاد کنیم.

مثال - خودتان امتحان کنید(Form)

Fieldset
چگونه یک لبه یا border، اطراف عناصر داخل یک فرم ایجاد کنیم.

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

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

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


تگ های فرم HTML

Wiki

تگتوضیحات
<form>

یک فرم HTML برای ورودی کاربر تعریف می کند.

<input />

یک کنترل ورودی تعریف می کند.

<textarea>

یک کنترل ورودی متن چند خطه تعریف می کند.

<label>

برای یک عنصر ورودی مانند متن یک برچسب یا lable تعریف می کند.

<fieldset>

برای یک فرم HTML یک لبه یا border تعریف می کند.

<legend>

برای یک عنصر fieldset یک عنوان یا caption تعریف می کند.

<select>

یک لیست کشوئی یا (drop-down list) تعریف می کند.

<optgroup>

در لیست کشوئی یا (drop-down list) یک گروه از آیتم های مرتبط به هم را تعریف می کند.

<option>

در لیست کشوئی یا (drop-down list) یک آیتم یا option تعریف می کند.

<button>

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

آموزش های مرتبط


آموزش صوتی HTML

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تبلیغات اینترنتی
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان