عناصر فرم های html
عناصر فرم های html چیست ؟ و چه ویژگی هایی دارند؟
آموزش فرم های html درس دوم
در این درس همه عناصر فرم های html توضیح داده شده است.
عنصر <input>
مهم ترین عنصر فرم عنصر <input> است. عنصر <input> بسته به نوع ویژگی خود، می تواند به چندین روش نمایش داده شود.
مثال :
[php]
<input name="firstname" type="text">
[/php]
اگر نوع ویژگی حذف شود، فیلد ورودی نوع پیش فرض را “text” در نظر می گیرد. همه انواع ورودی مختلف در درس بعدی گنجانده شده است.
عنصر <select>
عنصر <select> یک لیست drop-down را تعریف می کند.
مثال :
[php]
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
[/php]
عنصر <option> گزینه ای را تعریف می کند که می تواند انتخاب شود. در حالت پیش فرض، اولین مورد در لیست drop-down انتخاب می شود.
برای تعریف یک گزینه از پیش انتخاب شده، ویژگی selected را به option یا گزینه اضافه کنید:
مثال :
[php]
<option value="fiat" selected>Fiat</option>
[/php]
مقادیر قابل مشاهده :
از ویژگی size استفاده کنید تا اعداد مقادیر قابل مشاهده را مشخص کنید :
مثال :
[php]
<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>
[/php]
اجازه انتخاب چند گانه :
از انتخاب چند گانه استفاده کنید تا به کاربر اجازه دهید که بیشتر از یک مقدار را انتخاب کند.
مثال :
[php]
<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>
[/php]
عنصر <textarea>
عنصر <textarea> یک فیلد ورودی چند خطی را تعریف می کند (a text area) :
مثال :
[php]
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
[/php]
ویژگی rows تعداد قابل مشاهده خطوط را در یک منطقه متن مشخص می کند. ویژگی cols عرض قابل مشاهده یک ناحیه متن را مشخص می کند.
شما همچنین می توانید با استفاده از CSS اندازه منطقه متن را تعریف کنید:
مثال :
[php]
<textarea name="message" style="width:200px; height:600px">
The cat was playing in the garden.
</textarea>
[/php]
عنصر <button>
عنصر <button> یک دکمه قابل چک را تعریف می کند:
مثال :
[php]
<button type="button" onclick="alert(‘Hello World!’)">Click Me!</button>
[/php]
عناصر فرم html 5
در html 5 عناصر زیر اضافه شده است :
- <datalist>
- <output>
نکته : مرورگرها عناصر ناشناخته را نمایش نمی دهند. عناصر جدید که در مرورگرهای قدیمی پشتیبانی نمی شوند به صفحه وب شما صدمه نخواهند زد.
عنصر <datalist> در html 5
عنصر <datalist> یک لیست از گزینه های از پیش تعریف شده برای یک عنصر <input> را مشخص می کند.
کاربران یک لیست کشویی از گزینه های از پیش تعیین شده را به عنوان داده های ورودی مشاهده می کنند.
ویژگی لیست عنصر <input> باید به , ویژگی id عنصر <datalist> اشاره کند.
مثال :
[php]
<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>
[/php]
عنصر <output> در html 5
عنصر <output> نتیجه یک محاسبه را بیان می کند ( مثل یک چیزی که توسط یک اسکریپت انجام می شود)
مثال :
انجام یک محاسبه و نمایش نتیجه در یک عنصر <output>
[php]
<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>
[/php]
دیدگاهتان را بنویسید