طراحی فرم ثبت نام

در ادامه آموزش قبل که مربوط به آموزش کلی Html بود با ساختار کلی Html آشنا شدید در این آموزش با چند تگ مهم و پرکاربرد html جهت ساخت فرم آشنا خواهید شد و ساخت یک اشتراک خبرنامه یا طراحی فرم ثبت نام را یاد خواهید گرفت.

فیلم آموزشی طراحی فرم ثبت نام

---

تگ div

تگ div یک تگ دارای محتوی می‌باشد که جهت تقسیم بندی تگ‌های Html از این تگ استفاده می‌شود.

تگ img

تگ img یک تگ بدون محتوی می‌باشد که برای قرار دادن تصاویر از این تگ استفاده می‌شود.

<img  src=”آدرس تصویر” alt=”متن جایگزین درصورت عدم نمایش تصویر”>

طراحی فرم ثبت نام در Html

در این آموزش با استفاده از تگ input، img و button یک فرم اشتراک خبرنامه طراحی خواهد شد.

آدرس دهی در Html

در Html دو نوع آدرس‌دهی وجود دارد:

• آدرس مطلق: آدرس مستقیم و کامل فایل می‌باشد بطور مثال G:\images\pic.jpg
• آدرس نسبی: این نوع آدرس‌دهی از همان جایی که فایل نسبت به فایل Html وجود دارد آدرس‌دهی می‌شود. بطور مثال images\pic.jpg

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

تگ input

یک تگ بدون محتوی می‌باشد و برای ساخت انواع کنترل‌ها مانند کادرهای متنی، دکمه و … استفاده می‌شود. نوع کنترل توسط خاصیت Type در درون تگ مشخص می‌شود.

<input  type=”نوع کنترل”  name=”نام منحصر به فرد”>

نوع کنترل می‌تواند Text، Password، Email، Date، Number، Button  و … باشد.

تگ button

یک تگ با محتوی می‌باشد که یک دکمه قابل کلیک کردن را به وجود می‌آورد.

تفاوت دکمه ایجاد شده با تگ button و input در این است که داخل تگ button می‌توان محتوایی شامل متن و تصویر گذاشت. در مواقعی که بخواهید از متن و تصویر (آیکون) برای دکمه استفاده کنید تگ button کاربرد دارد.
تگ button نیز دارای سه نوع button، submit، reset می‌باشد.

<button type=”button” >  Click me! </button> 

کاربرد تگ ‌ها در طراحی فرم ثبت نام

سرفصل های آموزش طراحی UI