فرم‌ها یکی از مهم‌ترین عناصر در طراحی و توسعه وبسایت‌ها و نرم‌افزارهای کاربردی هستند. آنها به کاربران اجازه می‌دهند اطلاعات را وارد کرده و با سیستم تعامل داشته باشند. در اینجا یک توضیح کامل و مثال‌های گوناگون ارائه می‌شود:
یک فرم HTML چیست؟
یک فرم یا فرمولار، صفحه‌ای است که اطلاعات ورودی را از کاربر دریافت می‌کند. این اطلاعات می‌توانند متن، اعداد، ایمیل، فایل‌ها، انتخاب‌های چندگانه و … باشند. فرم‌ها می‌توانند برای مقاصد مختلفی مانند ثبت نام، ارسال پیام، پرداخت، جستجو و … استفاده شوند.
اجزای یک فرم:
-
فیلدهای ورودی (Input Fields): این فیلدها برای دریافت اطلاعات از کاربر استفاده می‌شوند. برخی از نوع‌های معمول آنها شامل: متن، عدد، ایمیل، رمز عبور، تاریخ و زمان و …
-
کنترل‌های انتخاب (Selection Controls): این اجزا اجازه انتخاب یک گزینه از بین چندین گزینه را به کاربر می‌دهند. مثال‌هایی از آنها شامل جعبه گزینه‌ها (Checkbox)، دکمه‌های رادیویی (Radio Buttons) و منوهای کشویی (Dropdown Menus) می‌باشد.
-
دکمه‌ها (Buttons): این دکمه‌ها معمولاً برای ارسال اطلاعات یا لغو عملیات استفاده می‌شوند. مثال‌ها شامل دکمه ثبت (Submit)، دکمه بازنشانی (Reset) و دکمه‌های سفارشی دیگر می‌باشد.
-
برچسب‌ها (Labels): این برچسب‌ها توضیحاتی برای فیلدهای ورودی فراهم می‌کنند، که به کاربر اجازه می‌دهند بدانند که هر فیلد چه اطلاعاتی را مورد نیاز دارد.
-
پیغام‌های خطا و تأیید (Error and Confirmation Messages): این پیغام‌ها برای نمایش خطاها یا تأیید ارسال اطلاعات استفاده می‌شوند.
مثال‌های گوناگون:
-
- فیلدهای ورودی برای نام، نام خانوادگی، ایمیل و رمز عبور.
- دکمه ارسال برای ارسال اطلاعات.
-
فرم تماس با ما:
- فیلدهای ورودی برای نام، ایمیل، موضوع و پیام.
- دکمه ارسال برای ارسال پیام.
-
فرم سفارش آنلاین:
- فیلدهای ورودی برای انتخاب محصول، تعداد، آدرس تحویل و شماره تماس.
- دکمه ارسال برای ثبت سفارش.
-
فرم جستجو:
- فیلد ورودی برای وارد کردن متن جستجو.
- دکمه جستجو برای شروع جستجو.
-
فرم بازنشانی رمز عبور:
- فیلد ورودی برای وارد کردن ایمیل.
- دکمه ارسال برای ارسال لینک بازنشانی رمز عبور.
با استفاده از این اجزا و مثال‌های گوناگون، می‌توانید فرم‌هایی را طراحی کنید که نیازهای خاص وبسایت یا نرم‌افزار شما را برآورده کنند و تجربه کاربری بهتری فراهم کنند.
تگ form
این تگ برای ایجاد یک فرم استفاده می‌شود و شامل تمام فیلدها و دکمه‌های مورد نیاز فرم است.
مثال:
<form action="/submit-form" method="post">
<!-- فیلدهای ورودی و سایر اجزا -->
<input type="text" name="username" placeholder="نام کاربری" required>
<!-- دکمه ارسال -->
<button type="submit">ارسال</button>
</form>
تگ input
این تگ برای ایجاد فیلدهای ورودی در فرم استفاده می‌شود.
مثال:
<input type="text" name="username" placeholder="نام کاربری" required>
تگ های select و option
این تگ‌ها برای ایجاد منوی کشویی استفاده می‌شود که به کاربر اجازه انتخاب یکی از گزینه‌ها را می‌دهد.
مثال:
<select name="gender">
<option value="male">مرد</option>
<option value="female">زن</option>
</select>
تگ textarea
این تگ برای ایجاد یک فیلد متنی برای ورودی اطلاعات بلندتر استفاده می‌شود.
مثال:
<textarea name="message" placeholder="پیام"></textarea>
تگ button
این تگ برای ایجاد دکمه‌ها در فرم استفاده می‌شود.
مثال:
<button type="submit">ارسال</button>
تگ label
این تگ برای برچسب‌گذاری فیلدهای ورودی استفاده می‌شود که به کاربر کمک می‌کند تا متوجه شود که هر فیلد چه اطلاعاتی را مورد نیاز دارد.
مثال:
<label for="username">نام کاربری:</label>
<input type="text" id="username" name="username" required>
تگ fieldset و legend
این تگ‌ها برای گروه‌بندی و برچسب‌گذاری چندین فیلد ورودی به صورت یک واحد استفاده می‌شود.
مثال:
<fieldset>
<legend>اطلاعات شخصی</legend>
<!-- فیلدهای ورودی اطلاعات شخصی -->
</fieldset>
با استفاده از این تگ‌های HTML و ساختاردهی مناسب، می‌توانید فرم‌های وبی را بسازید که قابلیت ارتباط با کاربر را بهبود بخشیده و تجربه کاربری بهتری را فراهم کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام