100% کامل شده تا

عناصر فرم در اچ‌تی‌ام‌ال (HTML Form Elements)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< HTML:Forms(تغییرمسیر از عناصر فرم HTML)
پرش به ناوبری پرش به جستجو


این بخش همهٔ عناصر فرم در HTML را توصیف می‌کند.


عناصر <form> در HTML

عنصر <form> در HTML می‌تواند شامل یک یا چند عنصر فرم زیر باشد:[۱]



عنصر <input>

یکی از پر استفاده‌ترین عناصر فرم، عنصر <input> است.

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

مثال
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

مثال
<!DOCTYPE html>
<html>
<body>

<h2>The input Element</h2>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Responsive demo.svg


همهٔ مقادیر مختلف ویژگی type در فصل بعدی آورده شده‌است: انواع ورودی در HTML


عنصر <label>

عنصر <label> یک برچسب برای چندین عنصر فرم تعریف می‌کند.

عنصر <label> برای کاربران صفحه خوان مفید است، زیرا هنگامی که کاربر روی عنصر ورودی تمرکز می‌کند، صفحه خوان برچسب را با صدای بلند می‌خواند.

عنصر <label> همچنین به کاربرانی که در کلیک کردن روی مناطق بسیار کوچک (مانند دکمه‌های رادیویی یا کادرهای تأیید) مشکل دارند کمک می‌کند - زیرا هنگامی که کاربر متن را در عنصر <label> کلیک می‌کند، دکمه/چک‌باکس رادیویی را تغییر می‌دهد.

ویژگی for در برچسب <label> باید با ویژگی id عنصر <input> برابر باشد تا آنها را به هم متصل کند.



عنصر <select>

عنصر <select> یک لیست کرکره‌ای (drop-down) را تعریف می‌کند:

مثال
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

مثال
<!DOCTYPE html>
<html>
<body>

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select id="cars" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <input type="submit">
</form>

</body>
</html>

Responsive demo.svg


عنصر <option> گزینه ای را مشخص می‌کند که می‌تواند انتخاب شود.

به‌طور پیش‌فرض، اولین گزینهٔ لیست کرکره‌ای انتخاب شده‌است.

برای تعیین گزینه از پیش انتخاب شده، ویژگی selected را به آن گزینه اضافه کنید:

مثال
<option value="fiat" selected>Fiat</option>

مثال
<!DOCTYPE html>
<html>
<body>

<h2>Pre-selected Option</h2>

<p>You can preselect an option with the selected attribute:</p>

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select id="cars" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat" selected>Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <input type="submit">
</form>

</body>
</html>

Responsive demo.svg



مقادیر قابل رویت

از ویژگی size برای تعیین تعداد مقادیر قابل رویت استفاده کنید:

مثال
<label for="cars">Choose a car:</label>
<select id="cars" 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>

مثال
<!DOCTYPE html>
<html>
<body>

<h2>Visible Option Values</h2>

<p>Use the size attribute to specify the number of visible values.</p>

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select id="cars" 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><br><br>
  <input type="submit">
</form>

</body>
</html>

Responsive demo.svg



امکان انتخاب چندتایی

از ویژگی multiple برای ایجاد امکان انتخاب بیش از یک گزینه استفاده می‌شود:

مثال
<label for="cars">Choose a car:</label>
<select id="cars" 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>

مثال
<!DOCTYPE html>
<html>
<body>

<h2>Allow Multiple Selections</h2>

<p>Use the multiple attribute to allow the user to select more than one value.</p>

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select id="cars" 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><br><br>
  <input type="submit">
</form>

<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>

</body>
</html>

Responsive demo.svg



عنصر <textarea>

عنصر <textarea> فیلد ورودی چند خطی را مشخص می‌کند (یک حوزه متنی):

مثال
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

مثال
<!DOCTYPE html>
<html>
<body>

<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>

<form action="/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

</body>
</html>

Responsive demo.svg


ویژگی rows تعداد خطوط قابل رویت در حوزه متن را تعیین می‌کند.

ویژگی cols عرض یک حوزه متن را تعیین می‌کند.

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

Responsive demo.svg


همچنین می‌توانید با استفاده از CSS، اندازهٔ حوزه متن را نیز تعیین کنید:

مثال
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

مثال
<!DOCTYPE html>
<html>
<body>

<h2>Styling Textarea</h2>

<p>Use CSS to change the size of the textarea:</p>

<form action="/action_page.php">
  <textarea name="message" style="width:200px; height:600px;">The cat was playing in the garden.</textarea>
  <br>
  <input type="submit">
</form>

</body>
</html>

Responsive demo.svg





عنصر <button>

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

مثال
<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Responsive demo.svg


توجه: همیشه ویژگی type برای عنصر دکمه مشخص کنید. مرورگرهای مختلف ممکن است typeهای پیش‌فرض متفاوتی برای عنصر button داشته باشند.


عناصر <fieldset> و <legend>

عنصر <fieldset> برای گروه‌بندی داده‌های مرتبط در یک فرم استفاده می‌شود.

عنصر <legend> یک زیرنویس برای عنصر <fieldset> تعریف می‌کند.

مثال
<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>


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

Responsive demo.svg


عنصر <datalist>

عنصر <datalist> لیستی از گزینه‌های از پیش تعیین شده برای عنصر <input> را مشخص می‌کند.

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

ویژگی list عنصر <input> باید به ویژگی id مربوط به عنصر <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>

مثال
<!DOCTYPE html>
<html>
<body>

<h2>The datalist Element</h2>

<p>The datalist element specifies a list of pre-defined options for an input element.</p>

<form action="/action_page.php">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

<p><b>Note:</b> The datalist tag is not supported in Safari prior version 12.1.</p>

</body>
</html>

Responsive demo.svg



عنصر <output>

عنصر <output> نتایج یک محاسبه را نشان می‌دهد (مانند محاسباتی که توسط یک اسکریپت انجام شده باشد).

مثال

محاسبه را انجام دهید و نتیجه را در یک عنصر <output> نشان دهید:

<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>

مثال
<!DOCTYPE html>
<html>
<body>

<h2>The output Element</h2>
<p>The output element represents the result of a calculation.</p>

<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>

<p><strong>Note:</strong> The output element is not supported in Edge prior version 13.</p>

</body>
</html>

Responsive demo.svg



عناصر فرم در HTML


منابع آموزشی




به‌روزرسانی شده: ۲ روز پیش