طراحی فرم ثبت نام در HTML - مجموعه آموزشی پژوهشی فرکیان تک

در این مقاله به طراحی فرم ثبت نام در HTML می‌پردازیم و انواع فیلدها و نحوه پیاده‌سازی آن‌ها را توضیح می‌دهیم.

مقدمه:

خب، پس تا الان ما دربارۀ تگ‌های پایه HTML صحبت کردیم و بیشتر محتوایی که نوشته می‌شود، ترکیبی از این برچسب‌ها خواهد بود. می‌توان گفت که شما ۸۰ یا ۹۰ درصد در راه تبدیل شدن به یک توسعه‌دهنده فرانت‌اند هستید. شما حالا خیلی از تگ‌های پایه HTML را یاد گرفته‌اید و می‌خواهیم به بخش مهم دیگری از HTML که طراحی فرم ثبت نام در HTML هستند بپردازیم.

توضیحات:

ما از فرم‌های وب برای جمع‌آوری اطلاعات کاربر استفاده می‌کنیم و این اطلاعات می‌تواند برای اهداف مختلفی باشد. به عنوان مثال، ما ممکن است بخواهیم کاربری را به وب‌سایت وارد کنیم و برای این کار، یک فرم ورود ایجاد می‌کنیم که اعتبارنامه‌های ورود کاربر، مانند ایمیل و رمز عبور را جمع‌آوری می‌کند. همچنین می‌توانیم فرم تماس داشته باشیم که نام، پیام و شماره تماس را جمع‌آوری می‌کند و این پیام را به مدیر سایت ارسال می‌کند. یا می‌توانیم فرم ثبت‌نام یا فرم بازخورد داشته باشیم. همانطور که میدانید در Airbnb یک فرم برای جستجوی املاک دارند. بنابراین، وقتی که به فرم‌های وب نگاه می‌کنیم، معمولاً از ترکیبی از فیلدهای ورودی مختلف تشکیل شده‌اند و این فیلدها بسیار مهم هستند زیرا کاربر اطلاعات را در آن‌ها وارد می‌کند.

به عنوان مثال، اینجا یک فیلد ورودی وجود دارد و این‌ها فیلدهای ورودی هستند زیرا کاربر در آن‌ها اطلاعات را وارد می‌کند. من می‌توانم نام کاربری ایمیل ادرس وکد پستی را در اینجا تایپ کنم و در پایین می‌توانم اطلاعات را ثبت کنم که یک نوع از فیلد ورودی است .

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

فیلدهای ورودی:
- از فیلدهای ورودی برای جمع‌آوری داده‌ها از کاربران استفاده می‌شود. این فیلدها شامل نوع‌های مختلفی هستند:
  - text: برای دریافت متن ساده.
  - email: برای دریافت ایمیل که به صورت خودکار اعتبارسنجی می‌شود.
  - password: برای دریافت پسورد که کاراکترهای آن مخفی می‌شود.

استفاده از تگ‌های <label>:
- برای هر فیلد ورودی، می‌توان تگ <label> استفاده کرد تا کاربر بداند چه نوع داده‌ای باید وارد کند. تگ label با استفاده از ویژگی for به فیلد ورودی متصل می‌شود.
ویژگی‌های نام (name) و شناسه (id):
- ویژگی name به فیلدهای ورودی کمک می‌کند تا در پردازش‌های سمت سرور شناسایی شوند. معمولاً شناسه و نام فیلد یکسان انتخاب می‌شوند.
گروه‌بندی با دکمه‌های رادیویی:
- برای انتخاب تنها یک گزینه از میان چند گزینه، می‌توان از دکمه‌های رادیویی استفاده کرد. این دکمه‌ها باید ویژگی name یکسانی داشته باشند تا به‌عنوان یک گروه شناخته شوند.
ایجاد فیلد انتخاب (Drop-down):
- برای انتخاب از میان چندین گزینه، از تگ <select> استفاده می‌شود که گزینه‌ها داخل تگ <option> قرار می‌گیرند.
فیلد متنی بزرگ (Text Area):
- برای دریافت متن طولانی، می‌توان از تگ <textarea> استفاده کرد که ارتفاع و عرض آن با ویژگی‌های rows و cols تنظیم می‌شود.
دکمه ارسال:
- دکمه‌ای که کاربر برای ارسال فرم بر روی آن کلیک می‌کند با نوع submit تعریف می‌شود.
اعتبارسنجی فرم:
- HTML5 قابلیت اعتبارسنجی داخلی را برای فیلدهای ورودی فراهم می‌کند. برای مثال، اگر فیلد ایمیل خالی یا نادرست باشد، مرورگر کاربر را مطلع خواهد کرد.
- می‌توان از ویژگی required برای اجباری کردن پر کردن فیلدها استفاده کرد.

کدها:

برای یادگیری بیشتر کدهای زیر را تمرین کنید.

<body>

<h1>

فرم ها در HTML

</h1>

<form>

<label for=”usename”>نام کاربری را وارد کنید</label>

<label for=”email”>ایمیل خود را وارد کنید</label>

<p>select your age:</p>

<label for=”question”>چگونه با ما اشنا شده اید؟</label>

<option value=”q1″>اینستا</option>

<optionvalue=”q1″>دوستان واشنایان</option>

<optionvalue=”q1″>سایت</option>

<option value=”q1″>تلگرام</option>

</select>

</form>

</body>

</html>

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

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

Post Views: 26