عناصر فرم HTML

این فصل همه‌ی عناصر فرم HTML را توضیح می‌دهد.

عنصر <input>

مهم‌ترین عنصر فرم است <input> عنصر.

عنصر <input> بر اساس type ویژگی‌ها می‌توانند به شکل‌های مختلف تغییر کنند.

توجه:فصل بعد توضیح می‌دهد که همه‌ی انواع ورودی‌های HTML را.

عنصر <select> (لیست‌های پایین)

<select> عنصر تعریف می‌کندلیست‌های پایین:

مثال

<select name="cars">
<option value="volvo">ولوو</option>
<option value="saab">ساب</option>
<option value="fiat">فیات</option>
<option value="audi">آودی</option>
</select>

پرایم کنید

<option> عنصر تعریف گزینه‌های انتخابی است.

لیست‌ها معمولاً اولین گزینه را به عنوان گزینه انتخاب شده نمایش می‌دهند.

شما می‌توانید با اضافه کردن ویژگی selected، گزینه‌های پیش‌تعیین شده را تعریف کنید.

مثال

<option value="fiat" selected>فیات</option>

پرایم کنید

عنصر <textarea>

<textarea> عنصر تعریف یک میدان ورودی چند خطی است (میدان متن):

مثال

<textarea name="message" rows="10" cols="30">
گربه‌ای که در باغ بازی می‌کرد.
</textarea>

پرایم کنید

کد HTML بالا در مرورگر به صورت زیر نمایش داده می‌شود:

گربه‌ای که در باغ بازی می‌کرد.

عنصر <button>

<button> عنصر تعریف می‌کند دکمه‌ای قابل کلیکدکمه:

مثال

<button type="button" onclick="alert('Hello World!')">کلیک کنید!</button>

پرایم کنید

کد HTML بالا در مرورگر به صورت زیر نمایش داده می‌شود:

عناصر فرم HTML5

HTML5 عناصر فرم زیر را اضافه کرده است:

  • <datalist>
  • <keygen>
  • <output>

توجه:به طور پیش‌فرض، مرورگرها عناصر ناشناخته را نمایش نمی‌دهند. عناصر جدید صفحه شما را خراب نمی‌کنند.

عنصر <datalist> HTML5

<datalist> عنصر <datalist> به عناصر پیش‌تعیین شده برای عنصر <input> اشاره دارد.

بعد از ورود داده‌ها توسط کاربر، لیست‌های انتخابی پیش‌تعیین شده نمایش داده می‌شوند.

عناصر <input>; list خصوصیات باید به عنصر <datalist> مراجعه کند: id خصوصیات.

مثال

عناصر <input> پیش‌تعیین شده با استفاده از <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>

پرایم کنید