در آموزش امروز از مجموعه آموزش های طراحی سایت در آموزشگاه کامپیوتر پرتو ، به سراغ آموزش تگ form HTML رفته ایم تا بدین وسیله یکی از بهترین ، مهم ترین و پرطرفدار ترین تگ های html را با هم بیاموزیم.
با ما در بهترین آموزشگاه طراحی سایت همراه باشید ، ما در کنار شما هستیم.
آموزش تگ from در HTML
در موضوع آموزش تگ form در html باید دقت کنید که فرم ها در صفحات html برای ارسال اطلاعات ورودی توسط کاربر به سمت مقصد استفاده می شود .به طور کلی اگر در صفحه بخواهیم از کاربر اظلاعاتی را دریافت کنیم باید از فرم برای این کار استفاده نماییم.فرم برای انتقال اطلاعات که توسط کاربر وارد شده است به یک آدرس مشخص استفاده می شود.برای ایجا فرم ها از تگی به همین نام استفاده می شود.این تگ دارای شناسه های فراوانی می باشد.
<form action = “ method = “ “ name = “ “ target = “ “ > </form>
Action مشخص کننده صفحه ای است که اطلاعات فرم باید به آن ارسال شود.آدرس صفحه مورد نظر باید به عنوان مقدار این شناسه قرار گیرد. پس از اینکه کاربر اطلاعات را وارد و دکمه ارسال را کلیک کرد، صفحه action برای پردازش اطلاعات باز می شود.
Mettod طریقه ارسال اطلاعات به فایل action را مشخص می کند. این روش ها 2 حالت دارد : get,post
در روش method get اطلاعات از طریق آدرس صفحه ارسال می شود. به این صورت که اطلاعات وارد شده در فرم پس از یک علامت سوال و بعد از آدرس صفحه action قرار می گیرند و ارسال می شوند.
از این روش نمی توان برای اطلاعات طولانی یا کاراکتر های خاص استفاده کرد. همچنین بهتر است برای نام کاربری و کلمه عبور هم از این روش استفاده نشود چون در این صورت این اطلاعات در نوار آدرس مرورگر داده می شوند.
method get برای ارسال اطلاعات از آدرس صفحه استفاده نمی کند. مزیت این روش امنیت بیشتر و ارسال اطلاعات طولانی تر می باشد.
از شناسه name برای تعریف کردن یک نام منحصر به فرد برای فرم استفاده می شود.
Target روش باز شدن صفحه پردازشگر اطلاعات را مشخص می کند. این شناسه مقادیر زیر را می پذیرد :
Blank – بیان می کند که صفحه پردازش action در یک جدید باز شود.
Self – بیان می کند که صفحه action در فریمی که فرم قرار دارد باز می شود.
Top – بیان می کند که صفحه action در تمام پنجره باز می شود.
آموزش تگ input درون تگ form
در آموزشگاه کامپیوتر پرتو ، همیشه به شاگردان و دانشجویان خود می گوییم برای اینکه امکانی را فراهم کنیم تا کاربران اطلاعاتی را در صفحه html وارد کنند از تگ input استفاده می کنیم. این تگ قسمت پایانی ندارد . از این تگ می توانیم کادرهایی برای وارد کردن متن ، کادر کلمه عبور ، cheekbox ،دکمه ارسال فرم ، دکمه پاک کردن فرم و انواع دیگر دکمه اسفاده کرد.دقت کنید که یکی از مهم ترین صفات در form ها در مبحث آموزش تگ form در html استفاده از input ها در فرم است
<input type = “ text “>
آموزش صفت نوع text درون تگ input
این ورودی یک کادر یک سطری برای ورود متن فراهم می کند برای ساختن این کادر باید به شناسه type تگ input مقدار text را بدهیم.
:مثال
<body>
<form>
<input type = “ text “ >
</form> </body>
برای اختصاص یک نام برای ورودی مربوطه استفاده می شود .
<input name = “ “ >
برای مشخص کردن حداکثر کاراکترهای ورودی.
<input maxlength = “ “ >
طول کادر را بر حسب تعداد کاراکتر مشخص می کند.
<input size = “ “ >
باعث می شود تا کاربر نتواند تغییری در متن وارد شده ایجاد کند.
مقدار آن را برابر با readonly قرار می دهیم ،اگر چه تغییر نمی کند ولی با ارسال فرم به سرور منتقل می شود.
<input readonly = “ “ >
برای غیر فعال کردن کادر متن استفاده می شود و کاربر نمی تواند متنی درون کادر بنویسد.مقدار آن را باید برابر با disabled قرار دهیم.
<ikput disabled = “ “ >
متنی را که به صورت پیش فرض در آن نمایش داده میشود ،مشخص می کند.
<input value = “ “ >
: مثال
<body>
<form>
first name :
<input type = “ text “ name = “ first name “ >
Value = “ first name “ > < br >
Last name :
<input type = “ text “ name = “ last name “ >
Value = “ last name “ >
</form>
</body>
آموزش صفت نوع password درون تگ input
برای ایجاد این کادر باید مقدار شناسه type در input را برابر با password قرار دهیم.
<input type = “ password “ >
اگر در این کادر کاراکتری تایپ شود به صورت نقطه یا ستاره مشخص می شود.
:مثال
<body>
<form>
Username :
<input type = “ text “ name = “ user “ ><br>
Password :
<input type = “ password “ name = “ password “ >
</form > </body>
آموزش صفت نوع radio درون تگ input
این ابزار شبیه checkbox است و برای انتخاب گزینه ها به کار می رود با این تفاوت که از بین گزینه های موجود تنها یکی را می توانیم انتخاب کنیم .
برای ساختن radio button ها در تگ input شناسه type را با مقدار radio مقدار دهی می کنیم .
<input typa = “ radio “ name = “ button “ >
اگر بخواهیم تعدادی radio button مرتبط به هم بسازیم به طوری که تنها امکان انتخاب یکی از آنها باشد ،باید برای همه آنها یک نام در نظر بگیریم ،اما مقدار value های مختلف بدهیم.
: مثال
<input type = “ radio “ name = “ test “ value = “ one “ >
<br>
<input type = “ radio “ name = “ test “ value = “ two “ >
شناسه های radio button مانند check box هاست و شناسه value حتما باید مقدار دهی شود
آموزش صفت نوع checkbox درون تگinput
نوعی دیگر از ابزارهایی که اطلاعاتی را از کاربران دریافت می کند check box ها هستند و بیشتر در مواردی که امکان انتخاب شدن یا نشدن برای یک گزینه وجود داشته باشد به کار می رود.برای ساختن آنها هم باید از تگ input استفاده کنیم.
<body>
<form>
<input type = “check box “ name = “ test “ >
</form> </body>
انواع شناسه ها در این مدل ،type که رفتاری مانند این شناسه در tex box دارد.
Name که برای اختصاص دادن یک نام برای ورودی مربوط استفاده می شود . شناسه value که در صورت انتخاب شدن این دکمه مقداری است که باید به صفحه action انتقال داده شود.
استفاده از این شناسه در مورد check box ها ضروری است .
شناسه بعد از check box می باشد این شناسه باعث می شود تا در هنگام باز شدن صفحه این دکمه ها به صورت انتخاب شده نمایش داده شوند.
<input checked = “checked “ >
:مثال
<body >
<form action = “ result . asp “ >
One :
<input type = “checkbox “ value = “ one “ ><br>
Two :
<input type = “checkbox “ value = “ two “ >
</form></body>
آموزش صفت نوع submit درون تگ input
برای ارسال اطلاعات وارد شده در فرم به صفحه action استفاده می شود.برای ساختن این دکمه باید در تگ input مقدار شناسه type را برابر با submit قرار دهیم.
: مثال
<body>
<form action = “ result . asp “ >
Type your first name :
<input type = “ text “ name = “ firstname “ size = “ 20 “ >
<br>
Type . your last name :
<input type = “ text “ name =” lastname “ size = “ 20 “ > <br>
<input type = “ submit “ value = “ submit “ >
</form> عبارتی که روی دکمه نوشته می شود
</body>
آموزش صفت نوع reset درون تگ input
نوع دیگری از دکمه ها ،دکمه reset هستند که برای پاک کردن اطلاعات فرم به کار می رود.
نحوه استفاده از آن مانند submit است.هرگاه که روی این دکمه کلیک کنیم ،کل نوشته های فرم پاک می شود.
<input type = “ reset “ value = “ reset “>
آموزش صفت نوع textarea درون تگ Input
می خواهیم text box هایی با قابلیت دریافت بیش از یک سطر اطلاعات را ایجاد کنیم.برای این منظور از تگ text area استفاده می کینم . بااین روش کاربران می توانند تعداد نا محدودی کاراکتر را در سطرهای مختلف وارد کنند.بهتر است برای متن های طولانی از text area استفاده کنیم تا کاربران کل متن خود را ببینند و بتوانند در صورت نیاز آن را ویرایش کنند.
این تگ دارای دو بخش است و تگ پایانی هم دارد .
<text area name = “ text “ > this is a test </textarea>
< text area cols = “ “ >عرض کادر را برحسب تعداد کاراکتر تعیین می کند
< text area rows = “ “ >تعداد سطرهای قابل مشاهده در کادر بدون استفاده از نوار اسکرول
< text area name = “ “ >برای اختصاص دادن یک نام مشخص به آن
: مثال
<body>
<form>
< text area name = “ test “ close = “ 20 “ rows = “ 5 “ >
This is a test
</ text area >
</form> </body>
آموزش تگ legend درون تگ form
این تگ همیشه داخل تگ fieldset استفاده می شود و عنوان آن را مشخص می کند و از صفت زیر پشتیبانی می کند :
Align : موقعیت عنوان را مشخص می کند .و یکی از مقادیر زیر را می پذیرد :
Left : عنوان را در بالا سمت چپ قرار می دهد
Center : عنوان را در بالا وسط قرار می دهد
Right : عنوان را در بالا سمت راست قرار می دهد
آموزش تگ option در HTML
تگ option دارای شناسه های زیر است.
| مشخص کردن گزینه پیش فرض در لیست مقدار این شناسه select است. |
< option value= “ “ >می توانیم در اطلاعات ارسال شده گزینه انتخاب شده توسط کاربر را تشخیص دهیم
select = “ “ >< option
اگر به html و css و به صورت کلی طراحی سایت علاقمند هستید ، پیشنهاد می کنیم که در کلاس آموزش طراحی سایت و یا کلاس آموزش html – css در آموزشگاه کامپیوتر پرتو شرکت نمایید. امیدوارم که از آموزش آموزش تگ form در html استفاده لازم را برده باشید.
