با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش html را دنبال می کنند. فرم ها یکی از اصلی ترین بخش ها در ساختار صفحات وب اغلب وب سایت ها می باشند چرا که شما برای دریافت ورودی های مختلف از کاربران ناچار به استفاده از فرم ها هستید، فرم ها خود از عناصر مختلفی برای دریافت ورودی های مختلف از کاربران تشکیل می شوند که نوع عناصر فرم در HTML بستگی به نوع ورودی کاربران دارد. در ادامه ی این مباحث ما شما را با مهمترین عناصر فرم در HTML آشنا خواهیم کرد.
در ادامه ی این مبحث به معرفی تعدادی از پرکاربردترین عناصر فرم در HTML پرداخته ایم.
مهمترین عنصر در هر فرم ، عنصر <input>
است.
عنصر <input>
را می توان در قالب ها و فرمت های مختلفی نمایش داد که بستگی به صفت type
دارد.
اگر ویژگی type را مشخص نکنید، فیلد input نوع پیش فرض را که “text” است،در نظر می گیرد.
عنصر <select>
یک لیست کشویی را ایجاد می کند.
1 2 3 4 5 6 | <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>
آیتم های <select> را که قابل انتخاب هستند را تعریف می کند.
در حالت پیش فرض اولین آیتم لیست <select> در حالت انتخاب شده است.
برای مشخص کردن یک عنصر به عنوان انتخاب شده، باید صفت selected را در عنصر <option>
مربوطه تعریف کرد:
از صفت size
می توانید برای مشخص کردن تعداد ارزش های قابل مشاهده استفاده کنید.
1 2 3 4 5 6 | <select name="cars" size="3"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> |
استفاده از صفت multiple
در لیست به کاربر اجازه می دهد تا بیش از یک انتخاب بتواند انجام دهد:
1 2 3 4 5 6 | <select name="cars" size="4" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> |
عنصر <textarea>
یک فیلد ورودی چند خطی را تعریف می کند.
1 2 3 | <textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea> |
صفت rows
تعداد قابل مشاهده خطوط را در یک منطقه متن مشخص می کند.
خصیصه cols
عرض یک ناحیه از متن را مشخص می کند.
فیلد ورودی زیر، چگونگی نمایش کد HTML بالا را در مرورگر نشان می دهد:
شما همچنین می توانید با استفاده از CSS اندازه ی عنصر text area را مشخص کنید.
1 2 3 | <textarea name="message" style="width:200px; height:600px"> The cat was playing in the garden. </textarea> |
عنصر <button>
یک button قابل کلیک را تعریف می کند.
1 | <button type="button" onclick="alert('Hello World!')">Click Me!</button> |
دکمه زیر عملکرد عنصر <button>
را با کلیک روی آن نشان می دهد:
HTML 5 عناصر فرم زیر را ارائه کرده است:
<datalist>
<output>
نکته : مرورگرها عناصر ناشناخته را نمایش نمی دهند، عناصر جدید نیز در برخی مرورگرهای قدیمی پشتیبانی نشده و در نتیجه نمایش داده نمی شود.
عنصر <datalist>
یک لیست از گزینه های از پیش تعریف شده برای یک عنصر <input> را مشخص می کند.
کاربران یک لیست کشویی از گزینه های از پیش تعیین شده را مشاهده می کنند.
صفت list از عنصر <input>
باید به صفت id از عنصر <datalist>
اشاره کند:
1 2 3 4 5 6 7 8 9 10 | <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>
نتیجه یک محاسبه است (مثل یک محاسبه انجام شده توسط یک اسکریپت):
1 2 3 4 5 6 7 8 9 10 11 | <form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input type="range" id="a" name="a" value="50"> 100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form> |
تگ | توضیحات |
---|---|
<form> | یک فرم HTML را برای ورودی کاربر تعریف می کند. |
<input> | یک کنترل ورودی را تعریف می کند. |
<textarea> | کنترل ورودی چند خطی را تعریف می کند (text area) |
<label> | یک برچسب برای عنصر <input> تعریف می کند. |
<fieldset> | عناصر گروه در یک فرم |
<legend> | یک عنوان را برای عنصر <fieldset> تعریف می کند. |
<select> | یک لیست کشویی را تعریف می کند. |
<optgroup> | یک گروه از گزینه های مرتبط را در لیست کشویی تعریف می کند. |
<option> | یک گزینه را در لیست کشویی تعریف می کند. |
<button> | یک دکمه قابل کلیک را تعریف می کند. |
<datalist> | لیستی از گزینه های از پیش تعیین شده برای کنترل های ورودی را مشخص می کند. |
<output> | نتیجه محاسبات را تعریف می کند. |
یکی از اصلی ترین بخش های تشکیل دهنده ی اغلب وب سایت ها کنترل ها و عناصر فرم می باشند که کار دریافت انواع ورودی از کاربران را انجام می دهند، از این رو برای طراحی یک وب سایت آشنایی با عناصر فرم در HTML از اهمیت ویژه ای برخوردار می باشد.
در بخش بعدی به انواع ورودی در HTML می پردازیم.