• آموزش html
  • تهران کد

فرم ها در HTML

اکتبر 23, 2017adminskآموزش htmlبدون دیدگاه

یک فرم توسط تگ <form> در html تعربف می‌گردد.

عناصر فرم بین تگ باز و بسته <form> قرار می گیرند.

عناصر فرم شامل ورودی متن، دکمه های رادیو، چک باکس ها، لیست های چند انتخابی ، آپلود فایل، و دکمه submit می باشد.

تگ <input>

مهم ترین تگ فرم این تگ می باشد که با مقدار دهی به اتریبیوت type در این تگ می توانیم مدل های مختلفی را در فرم ایجاد نماییم:

<input type="text">

یک ورودی یک خطی در متن را ایجاد می کند.

<input type="radio">

یک دکمه رادیویی را در فرم ایجاد می نماید.

<input type="submit">

یک دکمه ارسال را در فرم ایجاد می نماید.

<input type="upload">

یک فرم آپلود ایجاد می نماید.

ایجاد ورودی متنی در فرم

<!DOCTYPE html>
<html>
<body>
<form>
  First name:<br>
  <input type="text" name="firstname">
  <br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
</body>
</html>

خروجی:

فرم ها در html

ایجاد رادیویی در فرم

<!DOCTYPE html>
<html>
<body>
<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other  
</form> 
</body>
</html>

خروجی:

دکمه رادیویی در فرم html

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

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <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>

خروجی:

دکمه submit در فرم html

اتریبیوت action در تگ <form>

درون این اتریبیوت ادرس صفحه ای را که قرار است اطلاعات فرم را پردازش کند را می نویسیم. این صفحه به کمک یک زبان سمت سرور php یا c# معمولا نوشته می شود که اطلاعات فرم را پردازش کرده و کاری که باید به کمک این اطلاعات انجام شود را انجام میدهد. مانندذ ثبت نام در سایت یا ورود به سایت.

<form action="/action_page.php">

اتریبیوت method در تگ <form>

این اتریبیوت نحوه ارسال اطلاعات را هنگام فشردن دکمه submit مشخص می کند که به دو صورت می تواند باشد:

<form action="/action_page.php"method="post">
یا
<form action="/action_page.php"method="get">
بصورت پیشفرض متد get در html تعریف شده است که از این متد برای ارسال اطلاعات کم و غیر حساس و کم اهمیت استفاده می شود. این مدل اطلاعات فرم را در نوار مرورگر نمایش می دهد.
از متد post  همواره بهتر است استفاده گردد چرا که امنیت بیشتری را داشته و محدودیتی برای تعداد کاراکتر ها ندارد همچنین اطلاعات فرم را در نوار مرورگر نمایش نمی دهد.

اتریبیوت name

تمامی input ها حتما باید اتریبیوت name  با نام مشخص را داشته باشند وگرنه اطلاعات فرم پردازش نخواهند شد برای مثال در فرم زیر فقط اطلاعات فرم نام خانوادگی می تواند هنگام submit در سمت سرور پردازش شود.

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  First name:<br>
  <input type="text" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <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>

تگ های <fieldset> و <legend>

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

همچنین تگ <legend> یک عنوان برای فرم در نظر می گیرد. کد زیر و خروجی آنرا مشاهده نمایید:

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
</body>
</html>

خروجی:

تگ های legend و fieldset در فرم

دیدگاهتان را بنویسید لغو پاسخ

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

بخش بندی آموزش HTML

  • آموزش html مقدمه
  • شروع کار با HTML در رایانه شخصی
  • مفاهیم پایه‌ای HTML
  • المان های HTML
  • صفت یا اتریبیوت ها در HTML
  • تگ های عنوان در HTML
  • پاراگراف ها در HTML
  • استایل دهی مستقیم به تگ ها
  • فرمت دهی به متن در HTML
  • نقل قول و عناصر استنادی در HTML
  • رنگ ها در html
  • css در HTML
  • لینک ها در HTML
  • عکس ها در HTML
  • جدول ها در HTML
  • لیست ها در html
  • المان های block و inline
  • تگ iframe در html
  • تگ script در HTML
  • تگ head در html
  • صفحه چینی در html
  • HTML واکنشگرا
  • کاراکتر های رزرو شده
  • فرم ها در HTML
  • سایر تگ ها در فرم
  • input type های مختلف در فرم
  • اتریبیوت های فرم
  • ویدیو در HTML
  • پخش صدا در html