سرخط خبرها

تگ فرم form در HTML

تگ form در HTML
تگ form در HTML

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

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

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

تقریبا در هر سایت یا وبلاگی و به طور کل در هر صفحه وبی عناصری تعاملی وجود دارد که کاربر می تواند نسبت به آنها عکس العمل داشته باشد، به طور مثال بر روی دکمه ای کلیک کند یا از بین گزینه های مربوط به نظرسنجی یک مورد را انتخاب نماید، شکل برجسته این عناصر تعاملی فیلد ها و فرم هایی هستند که کاربران با تکمیل اطلاعات آنها و با کلیک بر روی دکمه ارسال، مقادیری را به سرور و پایگاه داده سایت یا وبلاگ مورد نظر ارسال می کنند، از آنجایی که این نوع امکانات در صفحات وب، وابسته به تگ form و عناصر زیرمجموعه آن است، لذا فراگیری دقیق این مبحث می تواند در آینده نزدیک دید شما را نسبت به تکنولوژی وب عمیق تر و چه بسا یک قدم به سمت برنامه نویسی حرفه ای نزدیک تر کند.

در این قسمت ابتدا به سراغ ساختار اساسی فرم ها و سپس به بررسی دقیق هر یک از عناصر آن با ذکر جزئیات و کاربردهایشان خواهیم پرداخت.

ساختار اساسی فرم

هر فرم با تگ <form> شروع و به تگ </form> نیز ختم می شود. تگ فرم می تواند شامل سایر تگ های HTML همچون پاراگراف ها، تیتر ها و مانند آن ها باشد. اما نمی توان از تگ <form> دیگری در داخل آن استفاده کرد. هر صفحه می تواند شامل چندین فرم که هر یک وظایف مجزایی از یکدیگر دارند باشد. به عنوان مثال شما ممکن است یک فرم ورود، یک فرم جستجو و فرمی برای مشترک کردن کاربرانتان در خبرنامه سایتتان داشته باشید.

یک فرم شامل سه بخش مهم می باشد:

  • تگ form که شامل URL صفحه ای که اطلاعات فرم را پردازش می کند.
  • عناصر فرم، مانند کادرهای متنی، کادرهای علامت، لیست ها و …
  • دکمه Submit که داده هایی را که از کابر گرفته را برای صفحه پردازشگر رویداد سرور میفرستد.

مثال زیر ساختار اصلی یک فرم را نشان می دهد:

 

در تگ فرم از ویژگی ها ی action و method استفاده می شود.

ویژگی action  :

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

یعنی زمانی که کاربر اطلاعات مورد نظر را کامل کرد و دکمه ی ارسال را انتخاب کرد ،صفحه ای که در مقابل action نوشته شده است برای پردازش کردن اطلاعات باز شود.در واقع این فرم ها باید برای یک برنامه ی پردازشگر ، که معمولا به یکی از زبان های  تحت سرور هستند(php ,asp.net) فرستاده شوند.پس در مقابل این ویژگی آدرس صفحه ی پردازشگری که قرار است فرم به آنجا فرستاده شود می آید.

ویژگی method:

این ویژگی مشخص می کند که به چه روشی اطلاعات برای صفحه ای که در مقابل ویژگی action مشخص کردیم فرستاده شود. که شامل مقادیر get و post می باشد.

Get: اگر از این مقدار در مقابل ویژگی method استفاده شود، اطلاعاتی که کاربر در صفحه پر کرده است از طریق نوار آدرس انتقال می یابد.

Post: اگر از این مقدار در مقابل ویژگی method استفاده شود، برای ارسال کردن اطلاعات از نوار آدرس استفاده نمی شود وامنیت بالاتری نسبت به زمانی که از get استفاده می کنیم خواهد داشت.

 

تفاوت های بین فرستادن اطلاعات با استفاده از get و استفاده از post  در زیر آمده است:

اگر ازمتدget استفاده شود این متد برای فرستادن اطلاعات از url (نوار آدرس صفحه) استفاده می کند، در نتیجه امکان نمایش فیلد هایی که اطلاعات آنها مهم می باشد در  در نوار آدرس وجود دارد ،یعنی اطلاعات وارد شده در فرم پس از یک علامت سؤال و  بعد از آدرس صفحه ای که در مقابل ویژگی action وجود دارد، قرار می گیرند و ارسال می شوند.

واطلاعاتی که در این روش ارسال می شوند محدود می باشد.اما سرعت این روش از روش post بیشتر می باشد.

اگر ازمتد  post استفاده شود، این متد اطلاعات را به صورت مخفی از طریق,http request ها انجام می دهد، و امنیت آن از روش get بیشتر بوده و محدودیتی در حجم اطلاعاتی که فرستاده می شود وجود ندارد. 

تگ Form

تگ <form> برای ایجاد فرم ها استفاده می شود. در واقع هر فرمی به وسیله تگ باز <form> شروع می شود و با تگ بسته </form> پایان می یابد. عناصر فرم باید حتما داخل این عنصر با کار روند.

 

تگ Input

مهمترین تگ موجود در FORM تگ Input می باشد.تگ Input یک فیلد ورودی تعیین می کند.این تگ می تواند قابلیت های متفاوتی داشته باشد.شامل:text field,password,checkbox,radio button,submit button می باشد.

اصلی ترین تگی که به همراه تگ form در ایجاد قابلیت های تعاملی نقش دارد، input است که با تنظیم type های مختلف برای آن می توان انواع مختلفی از امکانات نظیر فیلد متنی (text)، فیلد کلمه عبور (password)، دکمه معمولی (button)، دکمه ارسال (submit) و … را ایجاد کرد

در زیر چند نمونه اولیه از نحوه تعریف و به کارگیری تگ input را ملاحظه می کنید.

<form action="user/comment/get.php" method="get">
<input type="button" />
<input type="checkbox" />
<input type="hidden" />
<input type="password" />
<input type="submit" />
<input type="text" />
</form>

مثال زیر کاربرد تگ input را در بخش آموزش html نشان می دهد.

<form action=”demo_form.asp”>
First name: <input type=”text” name=”fname”><br>
Last name: <input type=”text” name=”lname”><br>
<input type=”submit” value=”Submit”>
</form>

تگ form یک فرم ورودی برای کاربر تعیین می کند.تگ form شامل چند تگ input می باشد.شامل:
text fields (فیلدهای متنی)

textarea(ناحیه متنی)
radio-buttons (دکمه های رادیویی)
checkboxes
submit buttons
,…
همچنین فرم می تواند شامل عناصری از قبیل select lists,fieldset,legend,lable,textarea,…باشد.

مثال زیر کاربرد تگ form را در بخش آموزش html نشان می دهد.

 

<form>
.
input elements
.
</form>

 

Text Fields

بیشترین و رایج ترین نوع مورد استفاده  “type=”text میباشد.
<input type=”text”> یک فیلد یک خطی ، که کاربر میتواند داخل آن اطلاعات وارد کند را تعریف میکند.

 

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

 

textarea

در کنار دو تگ اصلی input و select عنصر دیگری در صفحات وب جهت ایجاد قابلیت های تعاملی نقش کلیدی دارد، این عنصر تگ textarea است که جهت ایجاد فیلدهای متنی (متن طولانی) به عنوان مثال برای وارد کردن یادداشت، ارسال مطلب، نمایش یک متن کپی رایت و… کاربرد دارد، به طور مثال:

<form action="user/comment/get.php" method="get">
<textarea name="your-text" cols="50" rows="8">
متن خود را اینجا بنویسید
</textarea>
</form>

تنظیم یک فیلد از نوع textarea به وسیله خاصیت های زیرمجموعه آن از جمله cols (ستون ها) و rows (سطرها) صورت می گیرد، از cols برای تعیین عرض و از rows برای ارتفاع استفاده می شود.
نکته ۱: اندازه ها برای cols و rows صرفا جهت نمایش دلخواه فیلد کاربرد دارند و مانع ورود کاراکترهای بیشتر نمی شوند، برای محدود کردن تعداد کاراکتر مجاز از خاصیت maxlength استفاده کنید (البته محدودیت کاراکتر می تواند در سرور اعمال گردد یا در صفحات وب از تکنیک های دیگری مانند جاوا اسکریپت برای نمایش حداکثر کاراکتر مجاز به کاربر استفاده شود).
نکته ۲: در حالت پیش فرض، هر فیلد متنی از نوع textarea ممکن است با اندکی تفاوت (از لحاظ ارتفاع و عرض) در مرورگرهای مختلف نمایش داده شود، برای تنظیم دقیق و یکسان اندازه باید از CSS استفاده کنیم (که خود مبحثی جدا است).

Radio Buttons

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

<input type=”radio”> برای کاربران مشخص میکند که تنها یک گزینه را میتوانند انتخاب کنند.

<form>
<input type=”radio” name=”sex” value=”male”>Male<br>
<input type=”radio” name=”sex” value=”female”>Female
</form>

 

Checkboxes

<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>

 

Checkbox می تواند ویژگی های زیر را بپذیرد

Name

با استفاده کردن از ویژگی name برای checkbox  مورد نظر اسمی در نظر گرفته می شود.

Checked

اگر این ویژگی را برابر با checked قرار گیرد (checked=”checked”)در این صورت وقتی که صفحه ی مورد نظر باز می شود checkbox به صورت انتخاب شده می باشد.

disabled

از این ویژگی زمانی استفاده می شود که دکمه ی checkbox به حالت غیر فعال باشد.و کاربرنتواند آن را انتخاب کند.

باید به این نکته توجه داشت که مقادیر مربوط به فیلدهایی که به صورت disabled هستند با ارسال فرم به سرور ارسال نمی شوند.

Submit Button

نوع submit برای ایجاد دکمه ارسال اطلاعات فرم کاربرد دارد
<input type=”submit”> برای فرستادن اطلاعات فرم به سرور به کار میرود.

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

 

دکمه ی reset در html

در html با ایجاد کردن دکمه ی reset می توان این امکان را ایجاد کرد، تا بتوان متنی را که به هر دلیلی در فرم اشتباه تایپ شده است ،پاک کرد.

برای ایجاد کردن دکمه ی reset  در html باید ویژگی type را برابر با reset قرار داد.

 

file در html

با استفاده کردن از ویژگیfile در تگ <input> می توان  یک کادر متنی به همراه دکمه ای با عنوان browse ایجاد کرد که این امکان را به کاربر می دهد که بتواند فایلی را از کامپیوتر خود برای آپلود کردن انتخاب کند.

 

 

تگ گروه بندی Fieldset , Legend

 تگ Fieldset

تگ Fieldset برای گروه بندی در فرم ها بسیار کاربرد دارد. برای تعیین عنوان یک گروه از تگ Legend در ابتدای تگ Fieldset استفاده می گردد.

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

 

تگ Legend

در این تگ برای اضافه کردن عنوان برای کادر Fieldset استفاده می شود.متنی که داخل تگ Legend قرار می گیرد تعیین کننده عنوان کادر است.

مثال زیر کاربرد تگ Fieldset و تگ Legend را نشان می دهد.

 <fieldset>

      <legend align=”left”>عنوان گروه</legend>

      <p>متن مورد نظر.</p>

</fieldset>

                                                                   
خصوصیت اصلی :

خصوصیت اصلی تگ Legend خصیصه ی Align یا تراز می باشد که محل قرار گیری عنوان را در این تگ تعیین میکند.

مقدار هایی که این خصوصیت می پذیرد عبارتند از :  Top , Bottom , Left , Right

مثالی در این زمینه :

 <fieldset>      <legend align=”left”>عنوان گروه</legend>

      <p>این متن تست است.</p>

       <p>این متن تست شماره ۲ است.</p>

</fieldset>

label

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

های کوتاهی هستند که کاری را که یک عنصر می کند به کاربر نشان میدهند.

برای ایجاد برچسب های استاندارد در فرم های وب، از تگی (جفتی) به نام label استفاده می شود، label در واقع نقش معرف و برچسب را برای یک تگ فرم ایفا می کند، مثال:

<form action="user/comment/get.php" method="get">
<label for="my-text">یادداشت:</label>
<textarea name="your-text" cols="50" rows="8" id="my-text">
متن خود را اینجا بنویسید
</textarea>
</form>

autofocus

اگر این خصیصه برای تگ input فعال شود بعد از رفرش صفحه فیلد به صورت خودکار فعال میشود و مکان نمای موس در ان فیلد قرار میگیرد

 

<input autofocus=”autofocus” />

<form action=”demo_form.asp”>
    First name:<  input type=”text” name=”fname” >
    Last name: <  input type=”text” name=”lname”autofocus=”autofocus”>
<input type=”submit”>
</form>

 

 

disabled 

برای غیر فعال کردن تگ های فرم (به طور کلی) از خاصیتی به نام disabled استفاده می شود، با این کار اگرچه فرم ها به ظاهر نمایش داده می شوند، اما عملا کاربر قادر به وارد کردن اطلاعات یا انتخاب موردی نیست،

چنانچه مقدار این خاصیت بر روی disabled تنظیم شده باشد ، آن کنترل غیر فعال بوده و کاربر عملا امکان استفاده از آن را نخواهد داشت

نکته: خاصیت disabled محدود به تگ textarea نیست و عمومیت دارد.

 

<input disabled=”disabled” />

<form action=”demo_form.asp”>
First name: <  input type=”text” name=”fname”>
Last name: <  input type=”text” name=”lname” disabled=”disabled”>
<input type=”submit” value=”Submit”>
</form>

 

<form action="user/comment/get.php" method="get">
<textarea name="your-text" cols="50" rows="8" disabled="disabled">
متن خود را اینجا بنویسید
</textarea>
</form>

 

placeholder 

placeholder : توسط این خاصیت می توان یک متن راهنما در خود textarea قرار داد که وقتی کاربر درون textarea کلیک کند سریعا محو میشود

خاصیت placeholder یک متن راهنما را برای کمک به کاربر جهت پر کردن کادر متن تعیین می کند . برای مثال یک کادر متن دارید که کاربر بایستی نام خود را در آن وارد کند . می توانید یک متن مثل “Name” را توسط این خاصیت تعیین کرده و کاربر با مشاهده آن راهنمایی شود . با شروع تایپ کردن کاربر در کادر متن ، متن راهنما به صورت خودکار پاک می شود :
نکته : خاصیت placeholder با کنترل های زیر به کار می رود
• text • search • url • email • password

<input placeholder=”text” />

<form action=”demo_form.asp”>
<input type=”text” name=”fname” placeholder=”First name”>
<input type=”text” name=”lname” placeholder=”Last name”>
<input type=”submit” value=”Submit”>
</form>

 

required

خاصیت required یک مقدار Boolean است و اگر آن را در تگ یک کنترل <  input> قرار دهید ، تعیین می کند که کاربر حتما باید در کنترل مقداری وارد کرده و آن را خالی رها نکند . اگر کاربر مقداری در کنترل وارد نکند و بخواهد فرم را ارسال نماید برنامه error داده و مانع ارسال آن می شود .
نکته : خاصیت required با کنترل های زیر به کار می رود .
text , search , url , email, password, date pickers , number , checkbox , radio , file .

 

<input required=”required” />

<form action=”demo_form.asp”>
Username: <  input type=”text” name=”usrname” required>

<input type=”submit”>
</form>

 

size

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

 

<input size=”number” />

<form action=”demo_form.asp”>
Email: <  input type=”text” name=”email” size=”50″>
PIN: <  input type=”text” name=”pin” size=”4″>

<input type=”submit” value=”Submit”>
</form>

 

value 

این خاصیت برای کنترل های مختلف ، حالت های زیر را دارد :
•در دکمه فرمان ها ( button , reset buttons , submit buttons ) :
متن روی دکمه فرمان را تعیین می کند .

•در تصاویر ( images ) :
مقداری که در هنگام ارسال اطلاعات فرم به جای مقدار عکس می نشیند .

•در دکمه های انتخابی ( radio buttons , checkbox ) :
مقداری است که در صورت انتخاب کردن ( تیک زدن ) دکمه انتخابی در هنگام ارسال اطلاعات فرم به عنوان مقدار آن کنترل ارسال می شود .

•در کادرهای متن یا کنترل های مخفی( textbox , password , hidden ) :
مقدار پیش فرض کنترل را تعیین می کند .
نکته : این خاصیت با کنترل file به کار نمی رود .

 

<  input value=”text” />

<  form action=”demo_form.asp”>
First name: <  input type=”text” name=”fname” value=”John”>
Last name: <  input type=”text” name=”lname” value=”Doe”>

<  input type=”submit” value=”Submit form”>
<  /form>

 

maxlength 

حداکثر تعداد کاراکترهایی که می توان در textarea کنترل وارد کرد را تعیین می کند .

 

تگ <  select>

صفحات html برای ایجاد یک منوی کشویی که دارای چند گزینه باشد، از تگی به نام select به همراه تگ زیرمجموعه آن یعنی option استفاده می شود

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

multiple : در صورتی که مقدار این خاصیت برابر multiple تنظیم شود ، می توان در هر لحظه بیش از یک مورد را از لیست انتخاب کرد . در حالت پیش فرض ، در هر لحظه حداکثر می توان یک مورد را از لیست انتخاب کرد .

size : توسط این خاصیت می توان تعداد آیتم های قابل مشاهده در لیست را در حال عادی ( بسته بودن لیست ) تعیین کرد . به طور پیش فرض فقط یک آیتم از لیست قابل مشاهده است .

 

<  select>
            <  option value=”volvo”>Volvo<  /option>
            <  option value=”saab”>Saab<  /option>
            <  option value=”mercedes”>Mercedes<  /option>
            <  option value=”audi”>Audi<  /option>
<  /select>

 

 به طور مثال:

<form action="user/comment/get.php" method="get">
<select name="select-option">
<option value="0" selected="selected">انتخاب کنید</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>

 

QR Code For: تگ فرم form در HTML

درباره ی jizjiz

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.