100% کامل شده تا

فرم‌ها در اچ‌تی‌ام‌ال (HTML Forms)

از موتو کد، دانشنامهٔ برنامه‌نویسی


یک فرم HTML برای جمع‌آوری ورودی کاربر استفاده می‌شود. ورودی کاربر اغلب برای پردازش به سرور ارسال می‌شود.


مشاهدهٔ نتیجه



عنصر <form>

عنصر <form> در html، برای ایجاد یک فرم HTML برای ورودی کاربر استفاده می‌شود:[۱]

نحوهٔ نگارش:
<form>
.
form elements
.
</form>


عناصر فرم، انواع مختلفی از عنصرهای ورودی هستند مانند فیلدهای متن، چک باکس‌ها، radio buttonها، کلیدهای submit و غیره.

همه عناصر مختلف فرم، در این فصل پوشش داده شده‌است: عناصر فرم HTML.



عنصر <input>

عنصر <input> در HTML، پرکاربردترین عنصر فرم است.

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

در اینجا چند مثال بیان شده‌است:

نوع تعریف
<input type="text"> فیلد ورودی متن تک خطی را مشخص می‌کند
<input type="radio"> یک radio button تعریف می‌کند (برای انتخاب یک مورد از میان چند مورد)
<input type="checkbox"> یک کادر تأیید (برای انتخاب صفر یا گزینه‌های بیشتر)
<input type="submit"> یک کلید submit تعریف می‌کند (برای ثبت فرم)
<input type="button"> یک دکمه قابل کلیک را نمایش می‌دهد
همهٔ انواع مختلف ورودی در این فصل پوشش داده شده‌است: انواع ورودی HTML.




ورودی متن

<input type="text"> یک ورودی متن تک خطی را مشخص می‌کند:

مثال

یک فرم با فیلدهای ورودی برای متن:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

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

<h2>Text input fields</h2>

<form>
  <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">
</form>

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of text input fields is 20 characters.</p>

</body>
</html>

Responsive demo.svg


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




توجه: خود فرم قابل رویت نیست. همچنین دقت کنید که عرض پیش‌فرض فیلد متن ۲۰ کاراکتر است.


عنصر <label>

با توجه به مثال بالا، به نحوهٔ استفاده از عنصر <label> دقت کنید.

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

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

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



ورودی Radio Button

<input type="radio"> یک radio button تعریف می‌کند

Radio buttonها به کاربر این امکان را می‌دهند که از بین گزینه‌های محدود یک مورد را انتخاب کند:

مثال

فرم با دکمه‌های رادیویی:

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

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

<h2>Radio Buttons</h2>

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form> 

</body>
</html>

Responsive demo.svg


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

   
   
   



ورودی Checkboxes

<input type="checkbox"> یک چک باکس تعریف می‌کند.

کادرهای تأیید به کاربر اجازه می‌دهد گزینه‌های هیچ‌کدام یا بیشتر را از تعداد محدودی انتخاب کند.

مثال

یک فرم با چک باکس:

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

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

<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

<form action="/action_page.php">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

Responsive demo.svg


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







کلید Submit (ثبت یا ارسال)

<input type="submit"> یک کلید برای ارسال داده‌های فرم به مدیر فرم (form-Handler) استفاده می‌شود.

form-handler معمولاً یک صفحه سرور با اسکریپتی برای پردازش داده‌های ورودی است.

form-handler در ویژگی action فرم مشخص می‌شود:

مثال

فرم با دکمه ارسال:

<form action="/action_page.php">
  <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">
</form>

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

<h2>HTML Forms</h2>

<form action="/action_page.php">
  <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">
</form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>

Responsive demo.svg


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








ویژگی name برای <input>

توجه داشته باشید که هر فیلد ورودی باید یک ویژگی name برای ارسال داشته باشد.

اگر ویژگی name حذف شود، مقدار فیلد ورودی اصلاً ارسال نخواهند شد.

مثال

این مثال مقدار فیلد ورودی "First name" را submit نمی‌کند:

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

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

<h2>The name Attribute</h2>

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

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

<p>Notice that the value of the "First name" field will not be submitted, because the input element does not have a name attribute.</p>

</body>
</html>

Responsive demo.svg



منابع آموزشی




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