| قدم قبلی > | < قدم بعدی |
در این آموزش html به معرفی عناصر فرم HTML می پردازیم.
در این فصل تمام عناصر فرم HTML را معرفی میکنیم.
عنصر input
مهمترین عنصر فرم، عنصر <input> است.
عنصر <input> می تواند به روش های مختلف نمایش داده شود، بسته به نوع ویژگی.
۱ | <input name="firstname" type="text"> |
اگر نوع ویژگی حذف شود، فیلد ورودی نوع پیش فرض را می گیرد: “text”.
تمام انواع ورودی های مختلف در فصل بعدی پوشش داده می شود.
عنصر select
عنصر <select> یک لیست کشویی را تعریف می کند:
۱ ۲ ۳ ۴ ۵ ۶ | <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> |
عناصر <option> گزینه ای را انتخاب می کنند که می تواند انتخاب شود.
به طور پیش فرض، اولین مورد در لیست کشویی انتخاب شده است.
برای تعریف یک گزینه پیش انتخاب شده، ویژگی انتخاب شده را به گزینه اضافه کنید:
۱ | <option value="fiat" selected>Fiat</option> |
ارزش قابل مشاهده:
از مقدار اندازه برای مشخص کردن تعداد مقادیر قابل مشاهده استفاده کنید:
۱ ۲ ۳ ۴ ۵ ۶ | <select name="cars" size="۳"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> |
اجازه انتخاب چندگانه:
از ویژگی چند استفاده کنید تا کاربر بتواند بیش از یک مقدار را انتخاب کند:
۱ ۲ ۳ ۴ ۵ ۶ | <select name="cars" size="۴" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> |
عنصر textarea
عنصر <textarea> یک فیلد ورودی چند خط (یک منطقه متن) را تعریف می کند:
۱ ۲ ۳ | <textarea name="message" rows="۱۰" cols="۳۰"> The cat was playing in the garden. </textarea> |
مقدار ردیف تعداد قابل مشاهده خطوط را در یک منطقه متن مشخص می کند.
خصیصه cols مشخص عرض عرض یک ناحیه متن را مشخص می کند.
این چگونگی کد HTML بالا در مرورگر نمایش داده می شود.
شما همچنین می توانید با استفاده از CSS اندازه منطقه متن را تعریف کنید:
۱ ۲ ۳ | <textarea name="message" style="width:200px; height:600px"> The cat was playing in the garden. </textarea> |
عنصر button
عنصر <button> یک دکمه قابل کلیک را تعریف می کند:
۱ | <button type="button" onclick="alert('Hello World!')">Click Me!</button> |
این چگونگی کد HTML بالا در مرورگر نمایش داده می شود:
توجه: همیشه مشخصه نوع برای عنصر دکمه را مشخص کنید. مرورگرهای مختلف ممکن است از انواع مختلف پیش فرض برای عنصر دکمه استفاده کنند.
عناصر فرم HTML5
HTML5 عناصر فرم زیر را اضافه کرد:
- <datalist>
- <output>
توجه: مرورگرها عناصر ناشناخته را نمایش نمی دهند. عناصر جدید که در مرورگرهای قدیمی پشتیبانی نمی شوند صفحه وب شما را نابود خواهند کرد.
عنصر datalist
عنصر <datalist> یک لیست از گزینه های از پیش تعریف شده برای یک عنصر <input> را مشخص می کند.
کاربران یک لیست کشویی از گزینه های از پیش تعیین شده را به عنوان آنها داده های ورودی را مشاهده کنید.
خصیصه لیست عنصر <input> باید به عنصر id عنصر <datalist> اشاره کند.
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ | <form action="/action_page.php"> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form> |
عنصر output
عنصر <output> نتیجه نتیجه یک محاسبه است (مثل یک انجام شده توسط یک اسکریپت).
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ | <form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> ۰ <input type="range" id="a" name="a" value="۵۰"> ۱۰۰ + <input type="number" id="b" name="b" value="۵۰"> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form> |
| گام قبلی > | < گام بعدی |
هنوز دیدگاهی برای این مطلب ثبت نشده است.