عناصر فرم
| Main Page Tutorial | |
|---|---|
 | |
| موارد آموزشی | |
| فرم‌های HTML | |
| ۱ | فرم‌ها |
| ۲ | عناصر فرم |
| ۳ | انواع ورودی |
| ۴ | ویژگی‌های ورودی |
| ۵ | ویژگی ورودی Form |
| گرافیک در HTML | |
| رسانه در HTML | |
| APIها در HTML | |
| مثال‌ها | |
| مرجع HTML | |
این بخش همهٔ عنصرهای فرم در HTML را توصیف می‌کند.[۱]
عنصر <input>
مهمترین عنصر فرم، عنصر <input> است.
عنصر <input> را می‌توان براساس ویژگی type به روش‌های مختلفی نمایش داد.
مثال
<input type="text" id="firstname" name="firstname">
type حذف شود، فیلد ورودی نوع پیش فرض را می‌پذیرد:”text” (متن).عنصر <select>
عنصر <select> یک لیست کرکره‌ای (به انگلیسی: drop-down) را مشخص می‌کند:
مثال
1 <select id="cars" name="cars">
2 <option value="volvo">Volvo</option>
3 <option value="saab">Saab</option>
4 <option value="fiat">Fiat</option>
5 <option value="audi">Audi</option>
6 </select>
عنصر <option> گزینه ای را مشخص می‌کند که می‌تواند انتخاب شود.
بطور پیش فرض، اولین گزینهٔ لیست کرکره ای انتخاب شده‌است.
برای تعیین گزینه از پیش انتخاب شده، ویژگی selected را به آن گزینه اضافه کنید:
مثال
<option value="fiat" selected>Fiat</option>
مقدارهای قابل رویت
از ویژگی size برای تعیین تعداد مقادیر قابل رویت استفاده کنید:
مثال
1 <select name="cars" size="3">
2 <option value="volvo">Volvo</option>
3 <option value="saab">Saab</option>
4 <option value="fiat">Fiat</option>
5 <option value="audi">Audi</option>
6 </select>
امکان انتخاب چند گزینه:
از ویژگی multiple برای ایجاد امکان انتخاب بیش از یک گزینه استفاده می‌شود:
مثال
1 <select name="cars" size="4" multiple>
2 <option value="volvo">Volvo</option>
3 <option value="saab">Saab</option>
4 <option value="fiat">Fiat</option>
5 <option value="audi">Audi</option>
6 </select>
عنصر <textarea>
عنصر <textarea> فیلد ورودی چند خطی را مشخص می‌کند (یک حوزه متنی):
مثال
1 <textarea name="message" rows="10" cols="30">
2 The cat was playing in the garden.
3 </textarea>
ویژگی rows تعداد خطوط قابل رویت در حوزه متن را تعیین می‌کند.
ویژگی cols عرض یک حوزه متن را تعیین می‌کند.
کد HTML بالا در مرورگر به شکل زیر نمایش داده می‌شود:
ساخت نمونه مثال این بخش در دست اقدام است.
همچنین می‌توان با استفاده از CSS اندازه حوزه متن را نیز تعیین کرد:
مثال
1 <textarea name="message" style="width:200px; height:600px;">
2 The cat was playing in the garden.
3 </textarea>
عنصر <button>
عنصر <button> یک کلید قابل کلیک را مشخص می‌کند:
مثال
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
کد HTML بالا در مرورگر به شکل زیر نمایش داده خواهد شد:
ساخت نمونه مثال این بخش در دست اقدام است.
عناصر <fieldset> و <legend>
عنصر <fieldset> برای گروه‌بندی داده‌های مرتبط در یک فرم استفاده می‌شود.
عنصر <legend> یک زیرنویس برای عنصر <fieldset> تعریف می‌کند.
مثال
1 <form action="/action_page.php">
2 <fieldset>
3 <legend>Personalia:</legend>
4 <label for="fname">First name:</label><br>
5 <input type="text" id="fname" name="fname" value="John"><br>
6 <label for="lname">Last name:</label><br>
7 <input type="text" id="lname" name="lname" value="Doe"><br><br>
8 <input type="submit" value="Submit">
9 </fieldset>
10 </form>
کد HTML بالا به این شکل در مرورگر نمایش داده می‌شود: ساخت نمونه مثال این بخش در دست اقدام است.
عنصر <datalist>
عنصر <datalist> لیستی از گزینه‌های از پیش تعیین شده برای عنصر <input> را مشخص می‌کند.
کاربران یک لیست کرکره ای از گزینه‌های از پیش تعیین شده بعنوان ورودی خود خواهند دید.
ویژگی list عنصر <input> باید به ویژگی id مربوط به عنصر <datalist> ارجاع دهد.
مثال
1 <form action="/action_page.php">
2 <input list="browsers">
3 <datalist id="browsers">
4 <option value="Internet Explorer">
5 <option value="Firefox">
6 <option value="Chrome">
7 <option value="Opera">
8 <option value="Safari">
9 </datalist>
10 </form>
عنصر <output>
عنصر <output> نتایج یک محاسبه را نشان می‌دهد (مانند محاسباتی که توسط یک اسکریپت انجام شده باشد).
مثال
یک محاسبه انجام داده و نتایج را در عنصر <output> نشان می‌دهد:
1 <form action="/action_page.php"
2 oninput="x.value=parseInt(a.value)+parseInt(b.value)">
3 0
4 <input type="range" id="a" name="a" value="50">
5 100 +
6 <input type="number" id="b" name="b" value="50">
7 =
8 <output name="x" for="a b"></output>
9 <br><br>
10 <input type="submit">
11 </form>
تمرین های HTML
عنصرهای فرم HTML
| تگ | تعریف |
|---|---|
| <form> | یک فرم HTML برای ورودی کاربر تعریف می‌کند |
| <input> | یک کنترل ورودی تعریف می‌کند |
| <textarea> | یک کنترل ورودی چند خطی تعریف می‌کند (حوزه متنی) |
| <label> | یک برچسب برای عنصر <input> مشخص می‌کند |
| <fieldset> | عنصرهای مرتبط در یک فرم را دسته‌بندی می‌کند |
| <legend> | یک زیرنویس برای عنصر <fieldset> مشخص می‌کند |
| <select> | یک لیست کرکره ای تعریف می‌کند |
| <optgroup> | گروهی از گزینه‌های مرتبط بهم در یک لیست کرکره ای را مشخص می‌کند |
| <option> | گزینه ای را در لیست کرکره ای تعریف می‌کند |
| <button> | یک کلید قابل کلیک کردن را تعریف می‌کند |
| <datalist> | لیستی از گزینه‌های از پیش تعیین شده برای کنترل‌های ورودی تعریف می‌کند |
| <output> | نتیجه یک محاسبه را مشخص می‌کند |
منابع آموزشی