0 اسپیناس وب اسپیناس وب

افتخار طراحی سایت بیش از ۱۷۰۰ کسب و کار ایرانی و خارجی

نمونه کارها

آموزش HTML (قسمت دوازدهم) – کار با فرم ها در HTML

نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

در این جلسه در طراحی سایت با ادامه کار با فرم ها در HTML پیش می رویم:

يادآوري :

در جلسه اول کار با فرم ھا با طریقه ایجاد یک فرم و ارسال آن به صفحه پردازشگر از طریق دو متد post و get و تفاوت این دو روش آشنا شدیم.
گفتیم که با اسفاده از تگ <form> میتوان یک فرم را ساخت. و با استفاده از صفت method و یکی از دو مقدار post یا get آن را به صفحه پردازشگر فرستاد.گفتیم که برای آدرس دھی صفحه پردازشگر از صفت action استفاده میکنیم و مقدار آن برابر با آدرس صفحه پردازشگرمان خواھد بود. حال میخواھیم که با تگ <input> و صفت ھای آن برای ایجاد تکست باکس ھا و دکمه ھا برای گرفتن اطلاعات از کاربر آشنا شویم.

تگ <input> :

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

این تگ صفت ھای زیر را پشتیبانی می کند:
name: برای نام گذاری عناصر استفاده می شود و می بایست در کل صفحه یکتا باشد
type : این صفت چندین مقدار می گیرد که ھر کدام وظیفه ی خاصی دارند که در ادامه بررسی می کنیم.
text : برای ایجاد یک textfield ساده متنی به کار می رود.

 <label for="email">Email : </label>
 <input type="text" name="email" />

password: برای ایجاد یک textfield رمزی به کار می رود.

 <label for="email">Password : </label>
 <input type="password" name="pass" />

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

 
 <input type="radio"  value="male" /> Male
 <br />
 <input type="radio"  value="female" /> Female

checkbox : از این مقدار برای ایجاد checkbox ھا استفاده می شود.

 <input type="checkbox" name="vehicle" value="Bike" /> I have a Bike
 <br />
 <input type="checkbox" name="vehicle" value="Car" /> I have a Car
 <br />
 <input type="checkbox" name="vehicle" value="Airplane" /> I have an Airplane

submit : برای ایجاد دکمه ھای از نوع submit (ارسال) استفاده می شود. در واقع این نوع دکمه ھا وظیفه ارسال فرم به صفحه پردازشگر را دارند.

 <input type="submit" value="Send Form" />

reset : برای ایجاد دکمه ھای پاک کننده ی form به کار می روند.

این نوع دکمه ھا محتویات فرم را به مقدار اولیه (پیشفرض) بر می گردانند.
button :از این مقدار برای ایجاد دکمه ھایی که رفتار پیشفرضی ندارند، استفاده می شود.

یعنی اینکه این دکمه ھا کاری انجام نمی دھند. و باید خودمان برای آن ھا رفتاری را کدنویسی کنیم.
file : از این مقدار برای ایجاد امکان آپلود فایل برای کاربران استفاده می شود. در صورت استفاده از این مقدار یک کادر متنی به ھمراه دکمه ای با عنوان Browse و یا در مرورگر chrome با عنوان File Choose ایجاد خواھد شد که کاربر خواھد توانست با استفاده از آن فایلی را از کامپیوتر خود انتخاب کند.

 <input type="file" />

hidden : گاھی اوقات طراح فرم می خواھد مقداری را به دور از چشم کاربر و بدون دخالت آن برای صفحه پردازگر ارسال کند. در این صورت می توان از مقدار hidden استفاده کرد. می توانیم از تمامی صفت ھای تگ img برای کنترل خصوصیات تصویر استفاده کنیم.
image : از این مقدار برای ایجاد دکمه ھای تصویری از نوع submit استفاده می شود. در واقع با این مقدار می توان تصویری ایجاد کرد که کاربر با کلیک بر روی آن می تواند form را ارسال کند. باید به این نکته توجه که زمانی که از مقدار image| برای صفت type استفاده می توانیم از تمامی صفت ھای تگ img برای کنترل خصوصیات تصویر استفاده کنیم.

 <input type="image" src="images/submit. png" alt="Submit">

 

در جلسه بعدی آموزش  طراحی سایت با ما همراه باشید.

درگ کنید مشاهده بستن پخش
0%