فرمها یکی از مهمترین اجزای تعاملی صفحات وب هستند. با استفاده از آنها میتوان اطلاعات کاربر را دریافت و به سرور ارسال کرد. در این درس یاد گرفتیم چطور یک فرم ساده بسازیم و آمادهی استفاده کنیم.
🧱 مرحله اول: ایجاد فرم
تمام اجزای فرم داخل تگ <form> قرار میگیرند:
<form>
<input type="text">
</form>
📌 این کد یک فیلد ورودی متنی ساده ایجاد میکند.
🏷️ اضافهکردن برچسب (Label)
برای مشخص کردن کاربرد هر فیلد از <label> استفاده میکنیم.
<label for="firstName">نام:</label>
<input type="text" id="firstName">
- ویژگی for در label باید با ویژگی id در input یکسان باشد.
- این کار باعث میشود کلیک روی برچسب، مکاننما داخل فیلد قرار گیرد.
🧪 تمرین: فیلد دوم برای نام خانوادگی
<label for="lastName">نام خانوادگی:</label>
<input type="text" id="lastName">
🔄 روش دوم: قراردادن input داخل label
<label>نام: <input type="text"></label>
📌 این روش هم کار میکند، اما برای دسترسپذیری بهتر، روش اول (for و id) توصیه میشود.
✅ اضافهکردن دکمه ارسال (Submit)
<input type="submit" value="ارسال">
- ویژگی value متن دکمه را مشخص میکند.
🧩 ویژگی name برای ارتباط با سرور
برای آمادهسازی فرم جهت ارسال دادهها، باید به فیلدها ویژگی name بدهیم:
<input type="text" id="firstName" name="firstName">
<input type="text" id="lastName" name="lastName">
📌 مقدار name همان کلیدی است که سرور دادهها را با آن دریافت میکند.
🎯 جمعبندی
- فرمها با
<form>ساخته میشوند. - ورودیها با
<input>ایجاد میشوند. - برچسبها با
<label>تجربه کاربری را بهتر میکنند. - دکمه ارسال با
<input type="submit">اضافه میشود. - ویژگی name برای ارتباط با سرور ضروری است.