عناصر فرم HTML

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

عنصر <input>

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

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

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

عنصر <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> عنصر تعریف گزینه‌های انتخابی است.

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

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

مثال

<option value="fiat" selected>فiat</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> عنصر

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

عنصر <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>

آزمایش کنید