در اين فصل انواع عنصر وروديHTML <input> كه با ويژگي type وجود دارند، تشريح ميشوند.
در زير كليه حالات<input> كه مورد استفاده قرار ميگيرد، آمده وبدنبال شرح ومثال نمونه براي هركدام از آنها مطرح ميگردد.
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">نكته ـ مقدار پيش فرضtype برابر "text"
با<input type="text"> يك فيلد ورودي متني در يك خط تعريف ميشود .
مثال ـ فيلد ورودي متني
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form>
در زير نتيجه نمايش مرورگر از كدهاي فوق نشان داده شده است.
با<input type="password"> يك فيلد براي اعلام span> رمزعبور تعريف ميگردد.
مثال ـ نمونه فيلد رمز عبور
<form> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br> <label for="pwd">Password:</label><br> <input type="password" id="pwd" name="pwd"> </form>
نمايش مرورگر از اسكريپت فوق بصورت زير است.
كراكترهاي وارد شده در فيلد رمزعبور با ستاره يا دايره كوچك نشان داده ميشوند.
با استفاده از<input type="submit"> دكمه براي ارسال داده هاي فرم به كنترلر فرم، تعريف ميشود .فرم كنترلر در ويژگيaction آن عنصر معرفي شده است.
مثال ـ نمونه دكمه ارسال در فرم
<form action="/action_page.php"> <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"><br><br> <input type="submit" value="Submit"> </form>
نمايش مرورگر باتوجه به اسكريپت فوق مطابق زير است.
اگر در تعريف دكمه ارسال ويژگيvalue حذف شود، متني پيش فرض براي آن درنظر گرفته ميشود.
مثال ـ حدف ويژگي مقدار در دكمه ارسال
<form action="/action_page.php"> <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"><br><br> <input type="submit"> </form>
بوسيله<input type="reset"> يكه دكمه reset براي تنظيم مجدد فرم تعريف ميشود . با كليك اين دكمه فرم بمقادير پيش فرض خود برميگردد.
مثال ـ تعريف دكمهreset در فرم
<form action="/action_page.php"> <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"><br><br> <input type="submit" value="Submit"> <input type="reset"> </form>
آنچكه مرورگر براي اسكريپت فوق نمايش ميدهد، مطابق زيراست.
اگر در مقادير ورودي فرم تغييراتي انجام شود، باكليك در دكمهreset فرم به مقادير پيش فرضش برميگردد.
با<input type="radio"> دكمه هاي راديوئي تعريف ميشود .دكمه هاي راديوئي بكاربر اجازه انتخاب يكي از حالات راميدهند.
مثال ـ نمونه دكمه هاي راديوئي
<p Choose your favorite Web language:</p> <form> <input type="radio" id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label> </form>
مرور گر اسكريپت فوق را مطابق زير نمايش ميدهد.
بوسيله<input type="checkbox"> ميتوان جعبه هاي انتخاب تعريف نمود . كاربر اجازه دارد موارد مورد نظرش را انتخاب نمايد .محدوديتي در تعداد انتخاب ندارد.
مثال ـ نمونه تعريف چك باكس
<form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label> </form>
مرورگر اسكريپت فوق را مطابق زير در صفحه نمايش ميدهد.
با<input type="button"> دكمه قابليت كليك تعريف ميشود.
مثال ـ نمونه تعريف دكمه با<input>
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
مرورگر اسكريپت فوق را مطابق نمونه زير نمايش ميدهد.
با كليك دكمه فوق يك اسكريپت جاوااسكريپت باعث نمايش پيغامHello world ميشود.
با<input type="color"> يك فيلد انتخاب رنگ تعريف ميشود .بصورت پيش فرض رنگي درآن ظاهر ميشود .با كليك روي فيلد، منوي مجموعه رنگ ظاهر ميشود .ازآن ميتوان رنگ مورد نظر راانتخاب تا به فيلد رنگ منتقل شود .اصطلاح لاتين منوي رنگColor Picker است .
مثال ـ استفاده از<input> براي رنگ
<form> <label for="favcolor">Select your favorite color:</label> <input type="color" id="favcolor" name="favcolor"> </form>
روش انتخاب رنگ را با اجراي مثال فوق تجربه كنيد .كليدsubmit مثال را كليك كرده تا برنامه كنترلر فرمaction_page.php حاصل فيلد رنگ رانشان دهد .
با<input type="date"> براي تعريف فيلد ورودي تاريخ استفاده ميشود .بستگي به پشتيباني مرورگر ، يك منوي انتخاب تاريخ ياdate picker ظاهر ميشود ، كه ميتوان تاريخ را انتخاب نمود.
مثال ـ نمونه فيلذ ورودي تاريخ
<form> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"> </form>
ميتوان براي تاريخ از ويژگي هاي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"> </form>
با استفاده از<input type="datetime-local"> فيلد ورودي براي تاريخ وزمان بدون منطقه زماني ميتوان تعريف نمود.
بسته به پشتيباني مرورگر، انتخابگر تاريخ مي تواند در قسمت ورودي نمايش داده شود.
<form> <label for="birthdaytime">Birthday (date and time):</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime"> </form>
اين نوع<input type="email"> براي فيلد ورودي كه حاوي ايميل باشد،استفاده ميشود.
بسته به پشتيباني مرورگر، آدرس ايميل ميتواند بطور خودكار هنگام ارسال تائيد شود.
مثال ـ نمونه فيلد ورودي ايميل
<form> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"> </form>
<input type="image">تصوير را بعنوان دكمه ارسال تعريف ميكند . ويژگي srcمسير تصوير را مشخص ميكند .
<form> <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> </form>
<input type="file">فيلدي براي فايل تعريف ميكند .انتخابگر فايل براي انتخاب با كليك دكمهbrows ظاهر ميشود .فايل بايد از طريق انتخابگر انتخاب شود، نميتوان مستقيم نام فايل وارد نمود.
<form> <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile"> </form>
با<input type="hidden"> يك فيلد مخفي تعريف ميشود .بااين فيلدتوسعه دهنده ميتواند داده هائي درفرم قراردهد كه قابل مشاهده واصلاح براي كاربر نميباشد، اما اين داده ها ارسال ميگردد.
يك فيلد مخفي اغلب براي بروز رساني اطلاعات پايگاه داده استفاده ميشود.
توجه ـ درحاليكه محتوي فيلد پنهان براي كاربر در صفحه نمايش داده نميشود، اما با استفاده از امكانات مرورگر ميتوان منبع اصلي را مشاهده ويا ويرايش نمود .هرگز براي موارد امنيتي از فيلد پنهان استفاده نكنيد.
مثال ـ نمونه تعريف فيلد پنهان
<form> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <input type="hidden" id="custId" name="custId" value="3487"> <input type="submit" value="Submit"> </form>
با< input type"month"> يك فيلد ورودي براي ماه و سال تعريف ميگردد .اين بكاربر اجازه ميدهد كه تاريخ بفرم سال وماه را انتخاب نمايد .براي انتخاب مقداربسته بمرورگر انتخابكر مرتبط ظاهر ميشود تا كاربر انتخاب نمايد.
مثال ـ نمونه فيلد ورودي سال وماه
<form> <label for="bdaymonth">Birthday (month and year):</label> <input type="month" id="bdaymonth" name="bdaymonth"> </form>
با<input type="number"> يك فيلد ورودي عددي تعريف ميشود .ميتوان براي آن محدوديتهاي در نظر گرفت كه با ويژگي هايmin , max اعمال ميشود .
مثال ـ در اين مثال فيلد عددي بين 5ـ 1تعريف ميشود.
<form> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </form>
در جدول زير برخي از محدوديت هاي رايج كه براي وروديها ميتواند اعمال شود، آمده است.
| ويژگي | شرح |
|---|---|
| checked | اين ويژگي باعث ميشود ، كه موارد ازقبل انتخابي در هنگام بارگذاري صفحه راعايت شود .اين براي .چك باكس وراديو باتن منظور ميشود |
| disabled | با اين ويژگي ورودي غير فعال ميشود. |
| max | مقدار ماكزيمم را براي فيلد ورودي مشخص مي نمايد. |
| maxlenght | ماكزيمم تعداد كراكتر را براي فيلد ورودي مشخص مي نمايد. |
| min | منيمم مقدار را براي فيلد ورودي مشخص مي نمايد. |
| pattern | اين ويژگي قالب يا عبارت منظمي را براي فيلد ورودي معرفي مي نمايد .داده ها در آن فرم كنترل .ميشود |
| readonly | مشخص ميكند كه فيلد ورودي فقط. خواندني است. |
| reguired | مشخص ميكند كه فيلد ورودي ضروريست وبايد تكميل شود. |
| size | عرض فيلد ورودي را برحسب تعداد كراكتر مشخص ميكند |
| step | واحد افزايش يا كاهش محتواي فيلد. |
| value | مقدار پيش فرض فيلد ورودي را تعريف مي نمايد. |
در فصل بعدي در مورد محدويت هاي فيلد ورودي مطالب بيشتري بيان ميگردد.
مثال ـ در مثال زيريك فيلد ورودي عددي را نشان ميدهد كه در آن ميتوان عدد را10 تا10 تا در فاصله بين 0 تا 100 وارد نمود.
<form> <label for="quantity">Quantity:</label> <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30"> </form>
با<input type="range"> يك فيلد ورودي تقريبي تعريف ميشود كه مقدار آن از طريق نواركنترل مشخص ميگردد .محدوده پيش فرض آن بين 0 تا 100 ميباشد .همچنين ميتوان براي آن min,max,stepمشخص نمود .
مثال ـ نمونه فيلد ورودي با type="range"
<form> <label for="vol">Volume (between 0 and 50):</label> <input type="range" id="vol" name="vol" min="0" max="50"> </form>
با<input type="serch"> يك فيلد جستجو را معرفي مينمايد . اين مشابه با regular text fieldاست .
مثال ـ نمونه استفاده از فيلد جستجو
<form> <label for="gsearch">Search Google:</label> <input type="search" id="gsearch" name="gsearch"> </form>
با<input type="tel"> فيلد ورودي كه محتوي آن شماره تلفن باشد، معرفي ميكند.
<form> <label for="phone">Enter your phone number:</label> <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> </form>
اين<input type="time"> يك فيلد ورودي زمان را معرفي ميكنذ.در اين فيلد اجازه داده ميشود، كه بدون توجه به زمان منطقه اي زمان راانتخاب كند.
بسته به پشتيباتي مرورگر،انتخابگر زمان ميتواند در قسمت ورودي نمايش داده شود.
مثال ـ نمونه فيلد ورودي زمان
<form> <label for="appt">Select a time:</label> <input type="time" id="appt" name="appt">
با<input type="url"> ميتوان يك فيلد ورودي كه محتوي آن آدرسUrl باشد معرفي كرد .بسته به پشتيباني مرورگر دارد، كه اعتبارسنجي آن بعنوان آدرسUrl بعدازsubmit انجام ميشود.
مثال ـ نمونه استفاده ازفيلد وروديUrl
<form> <label for="homepage">Add your homepage:</label> <input type="url" id="homepage" name="homepage"> </form>
با<input type="week"> يك فيلد ورودي كه محتواي هفته داشته باشد ميتوان معرفي كرد .بستگي به پشتيباني مرورگر،انتخابگر تاريخ در قسمت ورودي نمايش داده ميشود.
<form> <label for="week">Select a week:</label> <input type="week" id="week" name="week"> </form>