همانگونه که در مبحث فرم‌ها اشاره شد یک فرم به تنهایی نمی‌تواند کارایی خاصی داشته باشد و فقط وظیفه ارسال اطلاعات را دارد. اینکه چه اطلاعاتی به سرور ارسال گردد توسط تگ‌های فیلد و دکمه تعریف می‌شوند. فیلدها کادرهای متنی کوچکی هستند که کاربر می‌تواند درون آنها اطلاعاتی را چه با تایپ کردن و چه با انتخاب کردن درج کند. دکمه‌ها نیز باعث اجرای دستورات اسکریپتی و ایجاد تعامل بین کاربر و سرور می‌شوند. مهم‌ترین برچسبی که برای ایجاد فیلدها می‌توان نام برد تگ input است. اما غیر از این تگ از تگ‌هایی مانند label، textarea، button، select و … نیز می‌توان استفاده کرد.
برای مطالعه از نحوه عملکرد فرم، این مقاله را بخوانید.
الف) تگ label
این برچسب که به صورت تگ زوج است برای عبارت عنوان فیلدها به کار می‌رود. چرا که باید کاربر بداند در فیلد مربوطه قرار است چه چیزی وارد نماید.
<label>نام</label> <input type="text" /> <label>نام خانوادگی</label> <input type="text" />
مثلا در کد بالا، کاربر متوجه می‌شود که در فیلد اول نام و در فیلد دوم نام خانوادگی درج کند.
صفت for
به غیر از صفتهای Global، مهم‌ترین صفت تگ label، صفت for است. این صفت تعیین می‌کند که با کلیک روی هر لیبل، چه فیلدی فعال شده و مکان‌نما روی آن قرار گیرد. در تعریف این صفت باید شناسه (id) تگ فیلد لحاظ شود.
<label for="fname">نام</label> <input type="text" id="fname" /> <label for="lname">نام خانوادگی</label> <input type="text" id="lname" />
ب) تگ input
این برچسب طیف وسیعی از انواع فیلد و دکمه، گزینه‌های انتخابی و سایر عناصر صفحات وب را ایجاد می‌کند. برای اینکه بتوانیم انواع این فیلدها را ایجاد کنیم از طریق صفتی به نام type اقدام می‌کنیم. تگ input یک برچسب مفرد است و برچسب پایانی ندارد.
این تگ به غیر از صفت type، تعدادی صفت مهم نیز دارد که بسته به نوع فیلدی که ایجاد می‌کنیم باید تعریف و مقداردهی شوند. لذا در زیر، علاوه بر فهرست انواع این فیلد، صفتهای مهم سفارشی هر نوع نیز عنوان می‌شود :
1) فیلد متنی
اگر بخواهیم یک کادر متنی با قابلیت درج هر محتوا ایجاد کنیم باید مقدار صفت type برابر text باشد. از طرفی text مقدار پیش‌فرض صفت type نیز می‌باشد. پس هر دو گزینه زیر این فیلد متنی را ایجاد می‌کند :
<input type="text" /> <input />
صفت value
معمولا در فیلدهای متنی صفتی به نام value نیز تعریف می‌شود که مقدار پیش‌فرض درون کادر متنی یا سایر انواع فیلدها را تعریف می‌کند. با تغییر مقدار درون کادر توسط کاربر، از این مقدار پیش‌فرض صرف نظر خواهد شد و در صورتی که این صفت خالی باشد یا تعریف نشود نیز مقدار درون فیلد خالی خواهد بود.
نکته : مقداری که کاربر وارد می‌کند یا مقداری که به صفت value اختصاص پیدا می‌کند مقداری است که به سرور ارسال می‌شود.
<input type="text" value="hello world!" />
صفت name
از این صفت معمولا در تمامی فیلدها می‌توان استفاده کرد. این صفت اکثرا در فرم‌ها کارایی دارد و تعیین می‌کند مقداری که درون فیلد درج می‌شود با چه نامی به سمت سرور ارسال می‌گردد. مقدار این صفت به دلخواه خواهد بود ولی بهتر است با مقداری که فیلد دریافت می‌کند همخوانی داشته باشد.
مثلا برای اینکه فیلدی داشته باشیم که کاربر نام خود را وارد کند، مقدار این صفت firstname باشد. یا برای فیلد تاریخ تولد، مقدار این صفت birthdate ثبت شود.
<input type="text" value="" name="lastname" />
به چند روش می‌توان مقدار این صفت را تعریف کرد. مثلا برای فیلد نام خانوادگی تمامی مقادیر زیر صحیح می‌باشد :
<input type="text" value="" name="lastname" /> <input type="text" value="" name="lastName" /> <input type="text" value="" name="LastName" /> <input type="text" value="" name="last_name" /> <input type="text" value="" name="last-name" />
صفتهای minlength و maxlength
هر دو صفت، باعث ایجاد محدودیت کاربر در درج محتویات کادرهای متنی می‌شوند. این دو صفت مقادیر عددی دریافت می‌کنند و مشخص می‌نمایند که حداقل و حداکثر تعداد کاراکترهای قابل قبول برای فیلد مربوطه چه مقدار باشد.
مثلا برای کد ملی چون همواره ده رقمی است هر دو صفت 10 خواهد بود.
<input type="text" name="nationalcode" minlength="10" maxlength="10" />
مثال دیگر برای فیلد نام است. ما در اسامی فارسی، هرگز یک نام تک حرفی نداریم. کوچک‌ترین نام می‌تواند دو حرفی باشد. مثل “رز” و “طه”. پس مقدار minlength باید برابر 2 باشد.
<input type="text" name="firstname" minlength="2" />
صفت size
این صفت مقداری عددی دریافت می‌کند و مشخص می‌کند عرض یک فیلد متنی به اندازه چند کاراکتر باز شود. امروزه با دستورات CSS کمتر به کارایی این صفت پرداخته می‌شود. عرض فیلد زیر، به اندازه 15 کاراکتر خواهد بود.
<input type="text" name="firstname" size="15" />
صفت placeholder
این صفت یک عبارت متنی را درون فیلد خالی نمایش می‌دهد که عموما به صورت خاکستری کم‌رنگ نمایش داده می‌شود. با کلیک کردن روی هر فیلد، این متن مخفی شده و فیلد آماده درج اطلاعات توسط کاربر می‌شود.
<input type="text" value="" placeholder="نام" />
نکته : اگر فیلد دارای مقدار پیش‌فرض در صفت value باشد، چون فیلد خالی نیست مقدار صفت placeholder نمایش داده نمی‌شود.
از این صفت معمولا برای راهنمایی کاربران در خصوص نحوه ورود اطلاعات استفاده می‌شود. مثلا در قطعه کد زیر فیلد مربوطه به کاربر اینگونه القا می‌کند که شماره تلفن را با پیش‌شماره وارد نماید. همچنین در برخی فرم‌ها به جای تگ label برای عنوان فیلد نیز استفاده می‌شود.
<input type="text" name="telephone" value="" placeholder="+989121234567" />
صفت disabled
اگر بخواهیم یک فیلد غیر فعال باشد یعنی کاربر نتواند درون آن مقداری درج کند یا آن را انتخاب نماید از این صفت بدون مقدار استفاده می‌شود.
در این حالت، شکل نمایش فیلد به صورت کم‌رنگ خواهد بود و همچنین هنگام ارسال اطلاعات (Submit) مقادیر درون اینگونه از فیلدها ارسال نخواهند شد.
<input type="text" disabled />
صفت readonly
مانند صفت disabled قابلیت انتخاب یا درج مقدار درون فیلد را غیر فعال می‌کند اما تفاوت این صفت بدون مقدار با disabled در این است که هنگام ارسال اطلاعات مقدار درون این فیلد نیز ارسال خواهد شد.
<input type="text" readonly />
صفت required
در هنگام ارسال اطلاعات توسط فرم‌ها، لازم است برخی از فیلدها حتما مقداردهی شوند. چرا که هنگام دریافت این اطلاعات توسط سرور اگر مقدار خالی باشد، ممکن است خطایی رخ دهد. در این صورت اینگونه فیلدها را با صفت بدون مقدار required تعریف می‌کنیم که اگر خالی بود خطایی به کاربر ارائه شود.
<input type="text" required />
صفت autofocus
یک صفت بدون مقدار است که تعیین می‌کند پس از بارگیری (Load) صفحه وب، به صورت پیش‌فرض مکان‌نما روی کدام فیلد از مجموعه‌ای از فیلدها قرار گیرد. معمولا فیلدی که از همه مهم‌تر است دارای این قابلیت خواهد بود و باید حتما روی یک فیلد اعمال شود.
<input type="text" id="fname" name="first_name" autofocus /> <input type="text" id="lname" name="last_name" /> <input type="text" id="father" name="father_name" />
2) فیلد رقمی
مانند فیلدهای متنی است با این تفاوت که مقادیر عددی دریافت می‌کند. برای ایجاد این نوع فیلدها، از مقدار number برای صفت type استفاده می‌شود.
معمولا در انتهای این فیلدها دو فلش کوچک بالا و پایین ظاهر می‌شود که می‌توان رقم درون کادر را تغییر داد.
<input type="number" />
صفت‌هایی مانند value و name را برای این فیلد نیز می‌توان تعریف کرد.
صفت max و min
این دو صفت مقادیر عددی دریافت می‌کنند و حداقل و حداکثر عددی که فیلد مربوطه دریافت می‌کند را محدود می‌کنند.
مثلا برای سن دانش‌آموزان حداقل سن 6 و حداکثر سن 19 باشد داریم :
<input type="number" name="age" min="6" max="19" />
صفت step
این صفت گام افزایش یا کاهش فیلدهای رقمی را تعیین می‌کند و یک مقدار عددی دریافت می‌کند. به صورت پیش‌فرض این گام برابر 1 است و به این منظور است که با هر بار کلیک روی فلش‌های فیلدهای رقمی عدد درون فیلد چند رقم کم یا زیاد شود.
در مثال زیر هر کلیک روی فلش‌ها باعث افزایش یا کاهش 5 پله‌ای عدد فیلد می‌شود.
<input type="number" name="age" step="5" />
3) فیلد رمز
در فرم‌ها برای درج گذرواژه و رمز ورود کاربرد دارد و مانند فیلدهای متنی است با این تفاوت که با کاراکترها به صورت ستاره یا توپ‌های کوچک نمایش داده می‌شوند. برای این کار باید مقدار صفت type را password قرار دهیم.
<input type="password" />
تمامی صفت‌هایی که برای فیلد متنی عنوان شد، برای این فیلد نیز کاربرد دارند.
4) جعبه‌های انتخابی
اگر صفت type را برابر با checkbox در نظر بگیریم، فیلد مربوطه تبدیل به جعبه‌های انتخابی (قابل تیک زدن) خواهند شد. می‌توان چند جعبه انتخابی در نظر گرفت که کاربر همه یا چند مورد از آنها را تیک بزند.
صفتهای value و name
این نوع از فیلدها باید دارای یک صفت value و مقدار باشند. چرا که کاربر نمی‌تواند اطلاعاتی درون این نوع فیلد درج کند و فقط می‌تواند آن را انتخاب کند. همچنین باید هر فیلد دارای نام خاصی باشند که با مقدار صفت name مشخص می‌شود. وقتی اطلاعات فرم ارسال (Submit) شد مقداری که به صفت value اختصاص یافته به همراه نام هر فیلد ارسال خواهد شد.
<label>انتخاب خودرو</label> <br /> <label>بی‌ام‌و</label> <input type="checkbox" name="car1" value="BMW" /> <label>لکسوس</label> <input type="checkbox" name="car2" value="Lexus" /> <label>هیوندای</label> <input type="checkbox" name="car3" value="Hyundai" />
صفت checked
اگر بخواهیم یک یا چند تا از گزینه‌ها به صورت پیش‌فرض تیک داشته باشند، عبارت checked را به عنوان صفت درون تگ تعریف می‌کنیم. این صفت به صورت بدون مقدار خواهد بود.
<label>انتخاب خودرو</label> <br /> <label>بی‌ام‌و</label> <input type="checkbox" name="car1" value="BMW" checked /> <label>لکسوس</label> <input type="checkbox" name="car2" value="Lexus" /> <label>هیوندای</label> <input type="checkbox" name="car3" value="Hyundai" />
5) دکمه‌های رادیویی
این نوع از فیلدها فقط قابلیت انتخاب یکی از گزینه‌ها را دارا هستند. برای تعریف فیلد به صورت دکمه رادیویی صفت type باید radio لحاظ شود.
<label>جنسیت</label> <br /> <label>مرد</label> <input type="radio" name="sex" value="مرد" /> <label>زن</label> <input type="radio" name="sex" value="زن" />
همانگونه که گفته شد، دکمه‌های رادیویی فقط قابلیت انتخاب یکی از گزینه‌ها را دارا هستند. اما گاهی لازم است چند گروه دکمه رادیویی تعریف کنیم به صورتی که هر گروه مستقل از دیگری عمل نمایند. یعنی هر گروه قابلیت انتخاب یکی از گزینه‌های خود را داشته باشند. در این صورت برای گروه‌بندی آنها name هر دسته را یکسان در نظر می‌گیریم.
در مثال زیر دو گروه دکمه رادیویی داریم.
گروه اول برای جنسیت با صفت name برابر sex و گروه دوم برای مدرک تحصیلی است که صفت name آنها برابر grade تعریف شده است.
<label>جنسیت</label> <br /> <label>مرد</label> <input type="radio" name="sex" value="مرد" /> <label>زن</label> <input type="radio" name="sex" value="زن" /> <label>مدرک تحصیلی</label> <br /> <label>فوق دیپلم</label> <input type="radio" name="grade" value="فوق دیپلم" /> <label>لیسانس</label> <input type="radio" name="grade" value="لیسانس" /> <label>فوق لیسانس</label> <input type="radio" name="grade" value="فوق لیسانس" /> <label>دکترا</label> <input type="radio" name="grade" value="دکترا" />
تمامی صفت‌هایی که برای Checkbox استفاده می‌شوند برای دکمه‌های رادیویی نیز قابل تعریف است.
6) پالت رنگ
نوع دیگری از شکل نمایش تگ input پالت رنگ است. حالت نمایش این نوع از فیلدها بستگی به نوع مرورگر دارند. برای این کار باید از مقدار color برای صفت type استفاده شود.
<input type="color" name="favcolor" value="#000" />
مقداری که توسط این فیلدها ارسال می‌شوند به صورت رنگ‌های هگزادسیمال است. رنگ پیش‌فرض این فیلد نیز با صفت value و به صورت hex تعریف می‌شود. در مثال فوق، 000# بیانگر رنگ سیاه است.
نکته : برای مشاهده و درک بیشتر رنگ‌های RGB، Hexadecimal و … اینجا کلیک کنید.
7) فیلد تاریخ و ساعت
مقدار date برای صفت type باعث نمایش تقویم (میلادی) می‌گردد و می‌توان تاریخ مورد نظر را بر مبنای سال، ماه و روز انتخاب کرد. همچنین اگر این مقدار time باشد، می‌توان برای انتخاب ساعت استفاده کرد که قابلیت انتخاب ساعت و دقیقه و نیز صبح و بعد از ظهر را دارد.
<label>تاریخ ملاقات</label> <input type="date" name="visit_date" /> <label>ساعت ملاقات</label> <input type="time" name="visit_time" />
نکته : حالت نمایش و عملکرد این نوع فیلدها وابسته به نوع مرورگر است.
همچنین می‌توان از مقدار datetime-local برای انتخاب تاریخ و ساعت به صورت هم‌زمان در یک فیلد بهره برد.
<label>تاریخ ملاقات</label> <input type="datetime-local" name="visit_date" />
8) فیلدهای آدرس‌های اینترنتی و پست الکترونیک
بسته به قابلیت مرورگری که استفاده می‌کنیم، می‌توانیم فیلدهایی که فقط URL یا EMail دریافت می‌کنند را تعریف کنیم. در این صورت اگر ساختار مقدار فیلد، مطابق ساختار یک آدرس اینترنتی (URL) یا آدرس ایمیل (EMail) نباشد خطایی هنگام Submit فرم به کاربر نمایش می‌دهد.
<label for="url_field">آدرس وب‌سایت</label> <input type="url" name="my_url" id="url_field" /> <label for="email_field">آدرس پست الکترونیک</label> <input type="email" name="my_email" id="email_field" />
9) فیلد شماره تلفن
این فیلد نیز قابلیت دریافت مقادیر رقمی با ساختار یک شماره تلفن را دارد. در صورتی که از کاراکترهای غیر مجاز برای شماره تلفن استفاده شود، هنگام Submit خطایی به کاربر نمایش می‌دهد. برای ایجاد چنین فیلدی از مقدار tel برای type استفاده می‌کنیم.
<label for="tel_field">شماره تلفن</label> <input type="tel" name="my_tel" id="tel_field" />
صفت pattern
این صفت می‌تواند الگوی تعریف و قالب‌بندی فیلد را تعیین کند. مثلا برای شماره موبایل می‌توان از الگوی زیر استفاده کرد :
<label for="mobile">شماره موبایل</label>
<input type="tel" name="mobile_number" id="mobile" pattern="[0][9][0-9]{2}-[0-9]{7}" />در قطعه کد بالا، الگوی شماره تلفن به صورت یک رقم صفر در ابتدا، 3 رقم کد اوپراتور با رقم 9 در آغاز، یک خط تیره و 7 رقم شماره موبایل است.
نکته : برای اینکه به کاربر اطلاع دهیم که با چه الگویی می‌بایست شماره موبایل را وارد نماید، بهتر است نمونه آن را با صفت placeholder نمایش دهیم.
<label for="mobile">شماره موبایل</label>
<input type="tel" name="mobile_number" id="mobile" pattern="[0][9][0-9]{2}-[0-9]{7}" placeholder="0912-1234567" />سایر صفت‌هایی که می‌توان برای این نوع فیلد تعریف کرد مانند فیلدهای متنی است.
10) ریل کشویی
اگر type="range" باشد در این صورت حالت نمایش فیلد به صورت یک ریل کشویی خواهد بود. این فیلد یک مقدار عددی در خود نگهداری می‌کند.
صفت‌هایی که معمولا در این فیلد لازم داریم min و max است که مشخص می‌کند حداقل و حداکثر رقمی که این فیلد می‌پذیرد چه هستند. اگر این دو صفت تعریف نشوند، رقم حداقل 0 و رقم حداکثر 100 خواهد بود.
همچنین مقدار پیش‌فرض نیز با صفت value تعریف می‌شود.
فیلد زیر، ریل کشویی سن افراد را بین اعداد 6 تا 19 تنظیم می‌کند و مقدار پیش‌فرض 15 است.
<label for="age">سن</label> <input type="range" name="age" id="age" min="6" max="19" value="15" />
نکته : یکی از معایب این فیلد این است که کاربر مقدار جاری فیلد را نمی‌بیند. بنابراین باید از طریق دستورات اسکریپتی و رویداد oninput، در کنار برچسبی مانند output مقدار جاری فیلد نمایش داده شود.
<label for="age">سن</label> <input type="range" name="age" id="age" min="6" max="19" oninput="out.value=this.value" /> <output id="out"></output>
11) فیلد مخفی
از این نوع فیلدها برای نگهداری مقادیری استفاده می‌شود که نمی‌خواهیم کاربر به صورت عادی آنها را ببیند. معمولا چنین فیلدهایی توسط دستورات اسکریپتی یا داده‌هایی که از سرور دریافت می‌شوند مقداردهی می‌شوند.
این نوع از فیلدها تمامی صفتهای یک فیلد متنی را دارا هستند با این تفاوت که از دید پنهان هستند. برای ایجاد چنین فیلدی از مقدار hidden برای صفت type استفاده می‌شود.
<input type="hidden" value="hello world!" />
12) دکمه
یکی از قابلیت‌های تگ input ایجاد انواع دکمه‌هاست. برای ایجاد یک دکمه با این تگ باید صفت type برابر button باشد. این نوع از دکمه‌ها قابلیت‌های گوناگونی دارند که می‌توان درون فرم استفاده کرد ولی معمولا برای اجرای دستورات اسکریپتی کاربرد دارند.
صفت value
این صفت عبارت قابل نمایش روی دکمه را تعیین می‌کند.
رویدادها
از این صفت‌ها برای تعریف رفتارهای دکمه استفاده می‌شود. مهم‌ترین رویداد روی دکمه‌ها کلیک روی آنهاست که با صفت onclick تعریف می‌شود.
<input type="button" value="کلیک کن" onclick="alert('سلام دنیا');" />13) دکمه ریست
از این دکمه برای بازتنظیم فرم استفاده می‌شود. به این معنی که با فشردن این کلید، تمامی فیلدها به مقادیر پیش‌فرض که با صفتهای value یا checked و … تعریف شده‌اند تنظیم مجدد می‌شوند.
<form> <input type="reset" value="تنظیمات پیش‌فرض" /> </form>
14) دکمه ارسال اطلاعات
وقتی یک فرم تکمیل شد، نوبت ارسال اطلاعات آن به سرور است. باید در هر فرم حداقل یک دکمه Submit وجود داشته باشد که این کار را انجام دهد.
<form> <input type="submit" value="ارسال اطلاعات" /> </form>
15) دکمه انتخاب فایل
حتما برای شما هم پیش آمده است که در کنار تکمیل اطلاعات یک فرم، یک فایل نیز به آن ضمیمه کرده و ارسال نمایید. مانند ارسال فایل عکس در فرم‌های ثبت نام. برای این کار از type="file" استفاده می‌شود.
<input type="file" name="my_file" />
در این حالت، با فشردن دکمه انتخاب فایل، پنجره‌ای باز می‌شود که می‌توان از بین فایل‌ها و پوشه‌های موجود فایل مورد نظر را جستجو و انتخاب کرده و آن را ضمیمه فرم کرد.
صفت name
این صفت مانند همه فیلدها تعیین می‌کند که فایل ضمیمه شده با چه نامی به سرور ارسال شده و در سرور شناسایی می‌گردد.
نکته : دقت داشته باشید که این نام با نام فایلی که روی کامپیوتر کاربر ذخیره شده است متفاوت است. در مثال بالا، اگر کاربر فایلی مثل my_image.jpg را انتخاب کرده باشد، این فایل با نام my_file توسط سرور شناسایی می‌شود.
صفت accept
اگر این صفت تعریف نشود، کاربر هنگام جستجوی فایل‌ها می‌تواند همه انواع فایل را مشاهده کند. این صفت برای محدود کردن فایل‌های قابل جستجو توسط کاربر است. فرض کنید می‌خواهید به کاربر فقط اجازه دهید عکس‌هایی با فرمت jpg را انتخاب کند. در این صورت مقدار صفت accept را .jpg تعریف کنید. یا اگر می‌خواهید تمامی انواع عکس‌ها مثل jpg، png، jpeg، gif و … انتخاب شوند از image/* استفاده شود.
برای تمامی فایل‌های ویدئویی video/* و برای تمامی فایل‌های صوتی audio/* تعریف می‌شود.
برای فایل‌های خاص نیز هر فایل را با علامت ویرگول ( , ) از دیگری جدا می‌کنیم.
کد زیر توانایی انتخاب همه نوع فایل تصویری را داراست.
<input type="file" name="my_file" accept="image/*" />
همچنین کد زیر توانایی انتخاب همه نوع فایل صوتی، فایل‌های pdf و png را فراهم می‌کند.
<input type="file" name="my_file" accept="audio/*, .pdf, .png" />
پ) تگ textarea
از این تگ برای درج اطلاعات متنی چندخطی و بلند استفاده می‌شود. چرا که فیلدهای متنی قابلیت چندخطی بودن را ندارند. این فیلد به صورت تگ آغاز و پایان است و محتویات بین این دو تگ نوشته می‌شود.
<label>آدرس</label> <textarea name="address"></textarea>
به غیر از صفتهای Global، می‌توان صفتهای زیر را برای این نوع فیلد تعریف کرد.
placeholder, disabled, required, readonly, name, autofocus
دو صفت مهم نیز برای این نوع فیلد در نظر گرفته می‌شود.
صفتهای cols و rows
صفت rows ارتفاع کادر متنی و صفت cols عرض آن را را بر اساس رقمی که دریافت می‌کنند معین می‌کنند. هر چند با استفاده از دستورات CSS می‌توان مدیریت بیشتری روی ابعاد و عملکرد این نوع کادر متنی داشت.
ت) تگ button
علاوه بر فیلدهایی که می‌توانند قابلیت نمایش دکمه داشته باشند، برای ایجاد عنصر دکمه تگ button نیز استفاده می‌شود. این تگ قابلیت‌های محتوایی بیشتری را ایجاد می‌کند. مثلا برای فیلدهای دکمه‌ای نمی‌توان از آیکون‌ها استفاده کرد ولی درون تگ button می‌توان از سایر تگ‌ها، تصاویر، آیکون‌ها و … استفاده کرد.
<button> <img src="images/icon.png" class="icon" /> <b>کلیک کنید</b> </button>
برای غیر فعال کردن این نوع از دکمه‌ها از صفت disabled می‌توان استفاده کرد.
ث) تگ select
این نوع فیلد، یک کادر افتادنی (آبشاری) ایجاد می‌کند که قابلیت انتخاب یک یا چند مورد از گزینه‌های زیرمجموعه را داراست. نام دیگر آن (معمولا در ویندوز) ComboBox است.
تگ select یک برچسب زوج است و هر زیرمجموعه آن با تگ option تعریف می‌شود.
<label for="cars_list">یک خودرو را انتخاب کنید</label> <select id="cars_list" name="car"> <option>بی‌ام‌و</option> <option>لکسوس</option> <option>هیوندای</option> </select>
تگ option دو مقدار می‌تواند داشته باشد که الزاما با هم برابر نیستند ولی می‌توانند برابر هم باشند.
مقدار اول همانی است که کاربر مشاهده می‌کند و بین تگ آغاز و پایان option نوشته می‌شود. دومی آن است با صفت value تعریف می‌شود و تگ select را مقداردهی کرده و به سمت سرور ارسال می‌شود.
<label for="cars_list">یک خودرو را انتخاب کنید</label> <select id="cars_list" name="car"> <option value="BMW">بی‌ام‌و</option> <option value="Lexus">لکسوس</option> <option value="Hyundai">هیوندای</option> </select>
نکته : اگر صفت value در تگ‌های option مقداردهی نشود، مقداری که به سرور ارسال می‌شود همان مقداری است که درون تگ مربوطه تعریف شده است.
صفت multiple
به صورت عادی تگ select قابلیت انتخاب یک گزینه از لیست افتادنی را دارد. با تعریف این صفت بدون مقدار، کاربر می‌تواند چند گزینه را با نگه داشتن کلید Ctrl انتخاب نماید.
<label for="cars_list">یک خودرو را انتخاب کنید</label> <select id="cars_list" name="car" multiple> <option value="BMW">بی‌ام‌و</option> <option value="Lexus">لکسوس</option> <option value="Hyundai">هیوندای</option> </select>
صفت size
بر خلاف صفت size در فیلدهای متنی، این صفت در تگ select تعریف می‌کند که چه تعداد گزینه قابل نمایش است. سایر گزینه‌ها به صورت پیمایش (Scroll) در دسترس خواهند بود. این صفت یک مقدار عددی دریافت می‌کند.
<label for="cars_list">یک خودرو را انتخاب کنید</label> <select id="cars_list" name="car" size="2"> <option value="BMW">بی‌ام‌و</option> <option value="Lexus">لکسوس</option> <option value="Hyundai">هیوندای</option> </select>
صفت selected
پس از اینکه صفحه وب بارگیری (Load) شد به طور پیش‌فرض مقدار اولین گزینه (option) از تگ select درون این کادر افتادنی نمایش داده شده و آن را مقداردهی می‌کند. با تعریف این صفت بدون مقدار روی هر گزینه option، مقدار مربوط به آن گزینه تگ select را مقداردهی خواهد کرد.
در کد زیر، گزینه “لکسوس” گزینه پیش‌فرض نمایش تگ select خواهد بود.
<label for="cars_list">یک خودرو را انتخاب کنید</label> <select id="cars_list" name="car"> <option value="BMW">بی‌ام‌و</option> <option value="Lexus" selected>لکسوس</option> <option value="Hyundai">هیوندای</option> </select>
صفت disabled
علاوه بر اینکه می‌توان از این صفت برای تگ select استفاده کرد، می‌توان از آن برای تگ‌های option نیز بهره برد. در این حالت کاربر نمی‌تواند گزینه‌ای که غیر فعال شده را انتخاب نماید.
<label for="cars_list">یک خودرو را انتخاب کنید</label> <select id="cars_list" name="car"> <option value="BMW">بی‌ام‌و</option> <option value="Lexus" disabled>لکسوس</option> <option value="Hyundai">هیوندای</option> </select>
تگ optgroup
می‌توان گزینه‌های یک تگ select را دسته‌بندی کرد. از این کار برای فیلدهای آبشاری استفاده می‌شود که دارای تعداد گزینه‌های زیادی هستند و یافتن گزینه مطلوب برای کاربر سخت است. برای این کار از تگ optgroup که یک تگ زوج است استفاده می‌کنیم.
این تگ دارای یک صفت به نام label است (با تگ label اشتباه نشود) که عنوان دسته را در آن می‌نویسیم و تگ‌های option را طبق روال درون تگ آغاز و پایان optgroup قرار می‌دهیم.
کد زیر یک کادر آبشاری با دو گروه خودروهای داخلی و خارجی را ایجاد کرده است.
<label for="cars_list">یک خودرو را انتخاب کنید</label> <select id="cars_list" name="car"> <optgroup label="خودروهای داخلی"> <option value="Pride">پراید</option> <option value="Pars">پارس</option> <option value="Dena">دنا</option> </optgroup> <optgroup label="خودروهای خارجی"> <option value="BMW">بی‌ام‌و</option> <option value="Lexus">لکسوس</option> <option value="Hyundai">هیوندای</option> </optgroup> </select>
به طور کلی تگ‌های مربوط به ایجاد فیلد و دکمه می‌توانند کاربردهای وسیعی نه تنها در فرم‌ها بلکه در هر قسمت از صفحات وب داشته باشند. از طرفی غیر از فیلد و دکمه، سایر عناصر نیز می‌توانند درون فرم‌ها قرار گیرند.
