آموزش کامل کار با فرم ها در HTML

آموزش کامل کار با فرم ها در HTML

با جلسه بیست و چهارم آموزش متنی Html در خدمت شما هستیم با آموزش کامل کار با فرم ها در HTML از وب سایت آموزش برنامه نویسی سورس باران.حتما تا به حال به وب‌سایت‌هایی برخورده‌اید که در آن‌ها فرم‌هایی قرار داشته و نیاز داشتید برای انجام عملی آن‌ها را پرکنید. معمولا از این فرم‌ها برای ثبت‌نام یا ثبت مشخصات استفاده می‌شود. شما دوستان عزیز در این مقاله آموزش متنی HTML روش قرار دادن فرم در یک صفحه وب سایت را خواهید آموخت.

آموزش کامل کار با فرم ها در HTML

یک نمونه فرم ساده را در زیر مشاهده می‌کنید :

    نام و نام خانوادگی (الزامی)

    پست الکترونیک (الزامی)

    موضوع

    پیغام

    عنصر <form> در Html

    عنصر <form> در HTML یک فرم تعریف می‌کند که برای جمع‌آوری ورودی‌های کاربر مورد استفاده قرار می‌گیرد:

    <form>
    .
    form elements
    .
    </form>

    فرم در HTML حاوی عناصر form است. عناصر فرم انواع مختلفی از عناصر ورودی مانند فیلدهای متنی، چک باکس، رادیو باتن، دکمه ارسال و سایر موارد است.

    عنصر <input> در Html

    عنصر <input> مهم‌ترین عنصر فرم است که با توجه به خصوصیت type، می‌تواند به روش‌های مختلف نمایش داده شود. در این جا چند نمونه از آن را مشاهده می‌کنید:

    نوعتوضیح
    <“input type=”text>فیلد ورودی متنی یک خطی تعریف می‌کند
    <“input type=”radio>یک رادیو باتن برای انتخاب از میان چند گزینه تعریف می‌کند
    <“input type=”submit>یک دکمه ارسال برای ارسال فرم تعریف می‌کند

    ورودی متنی فرم در HTML

    <“input type=”text> یک فیلد ورودی یک خطی برای ورودی متنی تعریف می‌کند:

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

    کد بالا در مرورگر به این شکل نمایش داده خواهد شد :

    ورودی رادیو باتن فرم در HTML

    <“input type=”radio> یک رادیو باتن (Radio button) تعریف می‌کند. رادیو باتن‌ها به کاربر امکان انتخاب یک گزینه از میان گزینه‌های موجود را می‌دهد:

     <form>
      <input type="radio" id="male" name="gender" value="male">
      <label for="male">Male</label><br>
      <input type="radio" id="female" name="gender" value="female">
      <label for="female">Female</label><br>
      <input type="radio" id="other" name="gender" value="other">
      <label for="other">Other</label>
    </form>



    پیشنمایش

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

    <“input type=”submit> یک دکمه برای ارسال داده‌های فرم به یک 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>

    پیشنمایش

    خصیصه Action در فرم Html

    خصوصیت action عملی که باید هنگام ارسال فرم اجرا شود را تعریف می‌کند. معمولا وقتی کاربر روی دکمه ارسال (submit) کلیک می‌کند، داده‌های فرم به یک صفحه وب موجود روی سرور ارسال می‌شود. در مثال بالا، داده‌های فرم به صفحه‌ای به نام “/action_page.php” ارسال می‌شود. این صفحه حاوی کدهای سمت سرور است که به داده‌های فرم رسیدگی می‌کنند:

     <form action="/action_page.php">

    اگر خصوصیت action حذف شود، action یا عملی که باید انجام شود به صفحه جاری تنظیم خواهد شد.

    حتما بخوانید : فیلم آموزش کامل Html به زبان فارسی

    خصیصه Target در فرم Html

    خصوصیت target مشخص می‌کند که نتایج ارسال شده در یک سربرگ جدید از مرورگر، در یک فریم یا در پنجره جاری باز شود. مقدار پیش‌فرض این خصوصیت به صورت “_self” است که یعنی فرم در پنجره جاری ارسال شود. اگر می‌خواهید نتایج فرم در یک سربرگ جدید باز شود از مقدار “_blank” استفاده کنید:

     <form action="/action_page.php" target="_blank">

    پیشنمایش

    مقادیر دیگری که مجاز به استفاده از آن‌ها هستید شامل “_parent” و “_top” است.

    خصیصه Method در فرم Html

    خصوصیت method مشخص می‌کند که هنگام ارسال داده‌های فرم از کدام متد HTTP (یعنی GET یا POST) استفاده شود :

     <form action="/action_page.php" method="get">

    پیشنمایش

    یا :

     <form action="/action_page.php" method="post">

    پیشنمایش

    چه زمانی از متد GET استفاده کنیم؟

    روش پیش‌فرض در زمان ارسال داده‌های فرم روش GET است. البته وقتی از این روش استفاده می‌شود، داده‌های فرم ارسال شده در فیلد آدرس صفحه قابل رویت خواهند بود:

    /action_page.php?firstname=John&lastname=Doe

    نکاتی در مورد روش GET:

    • داده‌های فرم را در جفت‌های نام/ مقدار (name/value) به url الحاق می‌کند.
    • طول url محدود است (حدود ۳۰۰۰ کاراکتر)
    • هرگز از روش GET برای ارسال داده‌های حساس استفاده نکنید (چون در url قابل رویت خواهند بود)
    • این روش برای ارسال‌هایی مفید است که کاربر بخواهد نتایج را بوک‌مارک کند.
    • روش GET برای داده‌های غیر امنیتی مانند رشته‌های کوئری در گوگل روش بهتری است

    چه زمانی از متد POST استفاده کنیم؟

    اگر داده‌های فرم‌ها حاوی اطلاعات حساس یا شخصی هستند همیشه از روش POST استفاده کنید. این روش داده‌های فرم ارسال شده را در فیلد آدرس صفحه نمایش نخواهد داد.

    نکاتی در مورد روش POST

    • این روش هیچ محدودیتی در اندازه نداشته و می‌تواند برای ارسال حجم عظیمی از داده‌ها مورد استفاده قرار بگیرد
    • ارسال فرم با روش POST را نمی‌توان بوک مارک کرد.

    خصوصیت Name در فرم Html

    هر فیلد ورودی باید دارای یک خصوصیت name باشد تا ارسال شود. اگر این خصوصیت حذف شود، داده‌های آن فیلد ورودی هرگز ارسال نخواهد شد. مثال زیر فقط فیلد ورودی “Last name” را ارسال خواهد کرد:

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

    پیشنمایش

    در جدول زیر فهرستی از خصوصیت‌های <form> آمده است:

    خصوصیتتوصیف
    accept-charsetمجموعه کاراکتر به کار رفته در فرم ارسالی را مشخص می‌کند (پیش‌فرض: charset صفحه)
    actionآدرس url که فرم باید به آن ارسال شود را مشخص می‌کند (پیش‌فرض: صفحه ارسال)
    autocompleteمشخص می‌کند که آیا مرورگر فرم را خودکار پر کند یا خیر (پیش‌فرض: بله)
    enctypeرمزگذاری داده‌های ارسالی را مشخص می‌کند (پیش‌فرض: url رمزگذاری شده)
    methodروش HTTP به کار رفته هنگام ارسال فرم را مشخص می‌کند (پیش‌فرض: GET)
    nameنام به کار رفته برای شناسایی فرم را مشخص می‌کند (برای استفاده از DOM: document.form.name)
    novalidateمشخص می‌کند که مرورگر نباید فرم را تایید کند
    targetهدف آدرس در خصوصیت action را مشخص می‌کند (پیش‌فرض: self_)

    گروه بندی داده‌ های فرم Html با <fieldset>

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

    پیشنمایش

    حتما بخوانید : فیلم آموزش Css و Css3 به زبان فارسی

    عنصر <input> در فرم Html

    مهم‌ترین عنصر فرم عنصر <input> است که با توجه به خصوصیت type می‌تواند به روش‌های مختلفی نمایش داده شود:

     <input type="text" id="firstname" name="firstname">

    پیشنمایش

    اگر خصوصیت type حذف شود، فیلد ورودی نوع پیش‌فرض یعنی “text” را می‌گیرد.

    عنصر <select> در فرم Html

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

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

    پیشنمایش

    عناصر <option> یک گزینه تعریف می‌کنند که می‌تواند انتخاب شود. به صورت پیش‌فرض اولین آیتم در فهرست کشویی در حالت انتخاب قرار دارد. برای تعریف یک گزینه از پیش انتخاب شده، خصوصیت selected را به آن گزینه اضافه کنید:

     <option value="fiat" selected>Fiat</option>

    پیشنمایش

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

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

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

    پیشنمایش

    انتخاب چندتایی در فرم Html

    از خصوصیت multiple استفاده کنید تا کاربر بتواند در عین حال چند مقدار یا گزینه را انتخاب کند:

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

    پیشنمایش

    عنصر <textarea> در فرم Html

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

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

    پیشنمایش

    خصوصیت rows تعداد خطوط قابل رویت در ناحیه متنی را مشخص می‌کند. خصوصیت cols عرض قابل رویت ناحیه متنی را مشخص می‌کند. کد HTML بالا در مرورگر به شکل زیر نمایش می‌یابد.

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

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

    پیشنمایش

    عنصر <button> در فرم Html

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

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

    پیشنمایش

    عناصر فرم در HTML5

    نسخه HTML5 عناصر زیر را به فرم‌های خود افزوده است:

    • <datalist>
    • <output>

    توجه داشته باشید که مرورگرها عناصر ناشناخته را نمایش نمی‌دهند. عناصر جدید در مرورگرهای قدیمی پشتیبانی نشده و صفحه وب سایت شما را نابود خواهند کرد. ما را تا انتها آموزش فرم ها در HTML همراهی نمایید.

    عنصر <output> در HTML5

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

    فرم‌ در HTML یکی از مباحث مهمی است که وب سایت شما را از حالت ایستا به حالت پویا و تعاملی تبدیل می‌کند. کاربر از طریق فرم‌ها با وب‌سایت ارتباط برقرار کرده و به درخواست آن پاسخ می‌هد. هرچه روش‌ها و گزینه‌های خلاقانه‌تری برای طراحی فرم‌های وب‌سایت خود استفاده کنید، کاربر راحت‌تر و سریع‌تر با آن ارتباط برقرار می‌کند.

    منبع : W3schools

    لیست جلسات قبل آموزش Html

    1. آموزش اصول اولیه و عناصر HTML
    2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
    3. آموزش کار با پاراگراف و استایل در Html
    4. آموزش کار با قالب بندی متن در Html
    5. آموزش کار با کامنت در HTML
    6. آموزش کار با کامنت در HTML
    7. آموزش کار با رنگ ها در HTML
    8. آموزش کار با تصاویر در HTML
    9. آموزش کار با لینک در HTML
    10. آموزش کار با جدول در HTML
    11. آموزش کار با لیست ها در HTML
    12. آموزش کار با عناصر Block و Inline در HTML
    13. آموزش کار با عنصر Class در HTML
    14. آموزش Html؛ آموزش iframe در HTML
    15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
    16. آموزش کار با عنصر Head در HTML
    17. آموزش Layout در HTML
    18. آموزش طراحی سایت ریسپانسیو در HTML
    19. آموزش عناصر کد کامپیوتر در HTML
    20. آموزش موجودیت (Entities) در HTML
    21. آموزش نمادها (Symbols) در HTML
    22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
    23. آموزش رمزگذاری URL در HTML
    24. آموزش کامل کار با فرم ها در HTML
    25. آموزش انواع ورودی (Input) در HTML
    26. آموزش خصوصیات ورودی در HTML

    حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

    حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

    5/5 - (2 امتیاز)

    راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

    فیلم آموزشی ساخت سیستم ارسال پیامک با وب سرویس به زبان #C

    دسته بندی موضوعات

    آخرین محصولات فروشگاه

    مشاهده همه

    نظرات

    بازخوردهای خود را برای ما ارسال کنید

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