آموزش فرم ها در HTML

 

  • text : ورود اطلاعات متنی را تعریف میکند
  • radio : دکمه رادیویی برای انتخاب فقط یک گزینه از گزینه های موجود را تعریف میکند
  • submit : یک دکمه ارسال برای ارسال فرم ایجاد میکند

ورود متن

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

 <html>

<body>

<form>

First name:<br>

<input type="text" name="firstname">

<br>

Last name:<br>

<input type="text" name="lastname">

</form>

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of a text field is 20 characters.</p>

</body>

</html>

 

ویژگی name یک نام برای فیلد تعریف میکند.

پهنای پیشفرض فیلد متنی 20 کاراکتر هست.

دکمه رادیویی

<”input type=”radio> دکمه رادیویی تعریف میکند.

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

 <html>

<body>

<form>

<input type="radio" name="gender" value="male" checked>Male

<br>

<input type="radio" name="gender" value="female">Female

</form>

</body>

</html>

 

ویژگی value، مقداری که قرار است به سرور ارسال شود را مشخص میکند و checked گزینه انتخاب شده پیشفرض را مشخص میکند.

دکمه ارسال

<input type=”submit”> یک دکمه برای ارسال فرم به رسیدگی کننده فرم تعریف میکند. رسیدگی کننده فرم معمولا یک صفحه وب سمت سرور برای پردازش داده های وروردی است. رسیدگی کننده فرم در ویژگی action فرم مشخص میگردد.

 <html>

<body>

<form action="action_page.php">

First name:<br>

<input type="text" name="firstname" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</form>

<p>If you click "Submit",
 the form-data will be sent to a page called "action_page.php".</p>

 </body>

</html>

 

 

ویژگی action

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

 <form action="action_page.php">

اگر ویژگی action نوشته نشود، به صورت پیشفرض برای صفحه فعلی تنظیم میشود.

 

ویژگی method

ویژگی method، نحوه ارسال فرم با متد HTTP که GET یا POST باشد را مشخص میکند.

نمونه ای از ارسال فرم با متد GET

 <form action="action_page.php" method="GET">

نمونه ای از ارسال فرم با متد POST

 <form action="action_page.php" method="POST">

چه وقتی از GET استفاده کنیم؟

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

متد GET برای ارسال اطلاعات کم مناسب است. چون در مرورگرها مقدار کاراکتری که در نوار آدرس میتواند وارد شود محدود است.

چه وقتی از POST استفاده کنیم؟

از POST باید در هنگامی که فرم دارای اطلاعات حساس مانند گذرواژه هست استفاده کنیم. متد POST امنیت بیشتری در ارسال اطلاعات دارد چون اطلاعات فرم در آدرس صفحه قابل مشاهده نیست.

 

ویژگی name

برای اینکه فرم به درستی ارسال شود، هر فیلد باید یک ویژگی name داشته باشد.

مثال زیر فقط فیلد lastname را ارسال میکند:

 <html>

<body>

<form action="action_page.php">

First name:<br>

<input type="text" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

 

 

گروه بندی فیلدها با <fieldset>

با عنصر <fieldset> فیلدهای مرتبط را با هم در یک گروه قرار میدهیم.

عنصر ‌‌‌‌‌‌<legend> یک عنوان برای عنصر <fieldset> تعریف میکند.

 <html>

<body>

 <form action="action_page.php">

<fieldset>

<legend>Personal information:</legend>

First name:<br>

<input type="text" name="firstname" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</fieldset>

</form>

</body>

</html>

 


نظرات شما عزیزان:

نام :
آدرس ایمیل:
وب سایت/بلاگ :
متن پیام:
:) :( ;) :D
;)) :X :? :P
:* =(( :O };-
:B /:) =DD :S
-) :-(( :-| :-))
نظر خصوصی

 کد را وارد نمایید:

 

 

 

عکس شما

آپلود عکس دلخواه:






موضوعات مرتبط: آموزش طراحی وبسایت ، ،
برچسب‌ها:

تاريخ : پنج شنبه 19 اسفند 1395برچسب:, | 6:40 | نویسنده : محمد |

.: Weblog Themes By SlideTheme :.


  • سحر دانلود