در اين فصل ويژگي هاي مختلفHTML <input> بيان وتشريح ميشوند.
ويژگيinput value مقداري را براي فيلد ورودي مشخص مي نمايد .مرورگر هنگام نمايش فيلد ورودي اين مقدار را درآن قرار ميدهد.
مثال ـ فيلد ورودي با مقدار اوليه يا پيش فرض
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form>
نكته ـ مقدار در ويژگيvalue مقدار اوليه يا پيش فرض فيلد وروديست .در هنگام بارگذاري ياreset نمودن مقدار در فيلد ورودي نمايش داده ميشود .
ويژگيinput readonly فيلد ورودي كه بصورت فقط خواني است ، مشخص مي نمايد . كاربر نميتواند محتوي فيلد را تغيير دهد، بااين حال ميتواند آنرا برجسته ويا آنرا كپي نمايد.
مقدار فيلد فقط خواندني هنگامsubmit ارسال ميشود .
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John" readonly><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form>
با ويژگيinput disabled فيلدي غير فعال تعريف ميشود .اگر اين ويژگي در <input>بكار گرفته شود عنصر غيرفعال نمايش داده ميشود .اين عنصر غيرقابل استفاده وقابليت كليك را ندارد .داده هاي فيلد هم ارسال نميگردد.
مثال ـ نمونه يك فيلد ورودي غيرفعال
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John" disabled><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form>
با ويژگيinput size عرض قابل مشاهده براي فيلد مشخص ميشود .مقدار ويژگي تعداد كراكتراست .پيش فرض آن20 كراكتر ميباشد .اين ويژگي براي انواع ورودي جستجو، تلفن، آدرس اينترنتي، ايميل، رمزعبور ومتن كارميكند.
مثال ـ تنظيم عرض يك فيلد ورودي
form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" size="50"><br> <label for="pin">PIN:</label><br> <input type="text" id="pin" name="pin" size="4"> </form>
با ويژگيinput maxlength تعداد حداكثر كراكتري كه ميتواند در فيلد ورودي وارد شود، مشخص مي ميگردد.
توجه ـ هنگاميكه ويژگيmaxlength براي ورودي تنظيم ميشود، نبايد تعداد كتراكتر ازمقدار مشخص شده بالاتر برود .اجازه وارد نمودن بيشتر به كاربر داده نميشود، اما پيغام يا آلارمي داده نميشود .بهتراست مورد ازطريق جاوااسكريپت تنظيم گردد.
مثال ـ تنظيم ويژگي ماكزيمم طول براي فيلد ورودي
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" size="50"><br> <label for="pin">PIN:</label><br> <input type="text" id="pin" name="pin" maxlength="4" size="4"> </form>
ويژگي هايinput min , max براي مقدار فيلد ورودي حداكثر وحداقل مجاز آنرا مشخص ميكنند.
ويژگي هاي فوق براي نوع وروديnumber,range,date,datetime-local,month,time و week كار ميكنند.
نكته ـ استفاده از ويژگي هايmin , max باهم براي ايجاد محدوده قانوني مقادير است.
<form> <label for="datemax">Enter a date before 1980-01-01:</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br> <label for="datemin">Enter a date after 2000-01-01:</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </form>
ويژگيinput multiple براي فيلد ورودي اجازه وارد نمودن چند مقدار را مشخص ميكند .اين ويژگي براي نوع وروديemail و file كارميگند .
مثال ـ يك فيلد برايupload چندفايل
<form> <label for="files">Select files:</label> <input type="file" id="files" name="files" multiple> </form>
با ويژگيinput pattren يك عبارت منظم براي تظبيق مقدار ورودي باآن مشخص ميكند. در هنگام ارسال فيلد ورودي مقدار آن با الگو بررسي ميشود.
اين ويژگي باانواع ورودي جستجو،آدرس اينترنتي، تلفن، ايميل ورمزعبور كارميكند.
نكته ـ مطلب فوق را در آموزش جاوااسكريپت بيشتر بياموزيد
مثال ـ يك فيلد ورودي كه فقط ميتواند شامل سه حرف باشد، بدون عدد وكراكترهاي خاص
<form> <label for="country_code">Country code:</label> <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> </form>
با ويژگيinput placeholder براي فيلد ورودي نكته كوتاهي مشخص ميكند . اين نكته توصيف كننده انتظار ازمقدار واقعي فيلداست .يا نكته مقدار نمونه ايست براي بيان انتظار واقعي محتوي ورودي .قبل ازاينكه كاربرمقداري را وارد نمايد آن نكته در محل فليد نمايش داده ميشود.
مثال ـ يك فيلد ورودي با متن مكان دار
<form> <label for="phone">Enter a phone number:</label> <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> </form>
باويژگيinput required يك فيلد ورودي ضروري را مشخص مي نمايد .فيلد ضروري بايد قبل از عملsubmit تكميل شده باشد .
ويژگيrequierd با نوع وروديهاي text,serch,url,tel,enail,password,data picker number,checkbox,radioو ,file كار ميكند .
مثال ـ يك فليد ورودي ضروري
<form> <label for="username">Username:</label> <input type="text" id="username" name="username" required> </form>
باويژگيinput step براي مقادير فيلد ورودي فاصله منظم تغير مشخص ميشود. بعنوان مثال باstep="3" فيلد ورودي مقادير0،3،6،9،12و ادامه آن نظم را ميتواند داشته باشد.
نكته ـ اين ويژگي ميتواند با ويژگي هايmin , max استفاده شود .در اين حالت مقدار فيلد در يك فاصله بصورت پله اي تغير ميكند.
مثال ـ نمونه استفادهsetp براي فيلد ورودي
<form> <label for="points">Points:</label> <input type="number" id="points" name="points" step="3"> </form>
نكته ـ محدويت هاي ورودي بدون حطا نيستندو جاوااسكريپت راههاي زيادي براي افزودن كنترل آنها ارائه ميكند.اين موارد هم براي جلوگيري از ناامني داده ها سمت سرور ررسي شود.
باinput autofocus مشخص ميشود كه هنگام بارگذاري صفحه فيلد ورودي بطور اتوماتيك انتخاب شود.
مثال ـ در مثال زير اجازه ميدهد كه "First name" بصورت اتوماتيك انتخاب شود.
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" autofocus><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form>
دو ويژگيinput height , width ابعاد يك فيلد تصوري را مشخص مي نمايند .اين ويژگي ها براي<input type="image"> كاربرد دارد .ويژگيwidth عرض تصويروheight ارتفاع آنرا مشخص ميكنند .
،نكته ـ هميشه براي تصاوير دو ويژگي عرض وارتفاع را مشخص نمائيد .اگر اين دو تنظيم شده باشد هنگام بارگذاري مرورگر فضاي لازم را براي تصوير رزرو ميكند .بدون آنها مرورگر فضاي لازم را نمي داند، وبا بارگذاري دچار تغيير طرح بندي ميشود.
مثال ـ يك تصوير بعنوان دكمه ارسال تعريف ميشود.
<form> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> </form>
با ويژگيinput list براي فيلد ورودي فهرست انتخاب معرفي ميگردد .فهرست انتخاب در عنصرHTML <datalist> معرفي ميگردد .دراين عنصر ويژگي id معرف مشخصه ليست ميباشد .تساوي مقادير ويژگيlist وid امكان ارتباط بين دو عنصر فوق برقرار مينمايد.
مثال ـ نمونه ارتباط فيلد ورودي با عنصر<datalist>
<form> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form>
ويژگيinput autocomplete براي فيلد ورودي مشخص ميكند، كه براي وارد كردن اطلاعات از كمك استفاده شود يا خير .در صورتيكه مقدار آن"on" باشد، كمك به تكميل اطلاعات است .اگر مقدارآن"off" باشد، كمك غيرفعال است.
مثال ـ در اين مثال دوحالت ويژگي فوق وجود دارد.
<form action="/action_page.php" autocomplete="on"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email" autocomplete="off"><br><br> <input type="submit" value="Submit"> </form>
نكته ـ در برخي از مرورگر ممكن است لازم باشد، يك عملكرد تكميل خود آنها فعال شود .به preferencesآنها مراجعه كنيد .