بخش های اصلی

آموزش HTML 5

آموزش HTML - فرم ها

فرم HTML، بخشی از کد است که شامل کنترل های تعاملی (interactive controls) می شود که به کاربر امکان ثبت اطلاعات در مرورگر را می دهند.

فرم HTML چیست؟

فرم های HTML برای جمع آوری انواع مختلف ورودی های کاربران مانند اطلاعات تماس مثل نام، آدرس ایمیل، شماره تلفن ها یا جزئیاتی مانند اطلاعات کارت اعتباری و غیره، مورد نیاز هستند.

فرم ها شامل عناصر خاصی هستند که کنترل (contlol) نامیده می شوند، مانند inputboxها، checkboxها، دکمه های رادیویی (radio-buttons)، دکمه های ثبت (submit buttons) و ... . معمولاً کاربران، فرم را با تغییر کنترل های آن مانند وارد کردن متن، انتخاب آیتم و ... پر می کنند و آن را برای پردازش در مرورگر ثبت می کنند.

تگ <form> برای ایجاد یک فرم HTML استفاده می شود. در ادامه مثالی ساده از یک فرم ورود (login form) را مشاهده می کنید:

مثال

<form>
    <fieldset>
        <legend>Log In</legend>
        <label>نام کاربری: <input type="text"></label>
        <label>رمزعبور: <input type="password"></label>
        <input type="submit" value="ورود">
    </fieldset>
</form>

در ادامه انواع کنترل هایی که می توانید در فرم هایتان از آن ها استفاده کنید،شرح داده شده اند.

عنصر ورودی (input elment)

این عنصر، رایج ترین عنصر مورد استفاده در فرم های HTML است.

این عنصر به شما امکان مشخص کردن انواع مختلف فیلد های ورودی کاربران را بسته به نوع خصیصه می دهد. این عنصر می تواند از نوع فیلد متنی (text field)، checkbox، فیلد گذرواژه (password field)، دکمه رادیویی (radio button)، دکمه ثبت (submit button)،  دکمه تنظیم مجدد (reset button) و ... باشد. تعدادی نوع ورودی جدید نیز در HTML5 معرفی شده اند.

پرکاربردترین انواع ورودی در ادامه شرح داده شده اند:

فیلد های متنی (Text Fields)

فیلد های متنی محدوده ای در یک خط هستند که امکان ورود متن را به کاربر می دهند.

کنترل های ورودی متن یک خطی (Single-line text input) توسط یک عنصر <input> که خصیصه type آن دارای مقدار متنی (text) است، ایجاد می شوند. در ادامه مثالی از Single-line text input را مشاهده می کنید که نام کاربری (username) را از کاربر می گیرد:

مثال

<form>
    <label for="username">نام کاربری:</label>
    <input type="text" name="username" id="username">
</form>

خروجی کد بالا به شکل زیر خواهد بود:

نکته: تگ <label> برای تعریف برچسب های عنصر <input> است. اگر می خواهید کاربرتان چندین خط وارد کند باید از <textarea> استفاده کنید.

فیلد گذرواژه Password))

فیلد های گذرواژه نیز مانند فیلد های متنی هستند. تنها تفاوتشان این است که کاراکترهای فیلد پسورد نامشخص و بصورت ستاره یا نقطه هستند. این امر از خوانده شدن پسورد توسط دیگران از طریق صفحه نمایش ، جلوگیری می کند. همچنین فیلد گذرواژه یک کنترل ورودی متن یک خطیِ (single-line text input controls) ایجاد شده توسط عنصر <input> است که خصیصه type آن دارای مقدار password است.

در ادامه مثالی از یک ورودی گذرواژه تک خطی که پسورد را از کاربر می گیرد مشاهده می کنید:

مثال

<form>
    <label for="user-pwd">رمزعبور:</label>
    <input type="password" name="user-password" id="user-pwd">
</form>

خروجی کد بالا به شکل زیر خواهد بود:

دکمه های رادیویی (Radio Buttons)

دکمه های رادیویی زمانی بکار می روند که بخواهیم کاربر دقیقاً یک گزینه را از بین مجموعه ای از گزینه های از پیش تعریف شده انتخاب کند. این دکمه ها با استفاه از عنصر <input> که خصیصه type آن دارای مقدار radio است، ایجاد می شوند.

مثال

<form>
    <input type="radio" name="sex" id="male">
    <label for="male">مرد</label>
    <input type="radio" name="sex" id="female">
    <label for="female">زن</label>
</form>

خروجی کد بالا به شکل زیر خواهد بود:

نکته: اگر می خواهید به کاربرتان امکان انتخاب بیشتر از یک گزینه را بطور همزمان بدهید باید از check boxها استفاده کنید.

checkbox ها

checkboxها به کاربران امکان انتخاب یک یا تعدادی گزینه را از میان مجموعه ای از گزینه های از پیش تعریف شده می دهند. checkboxها توسط عنصر <input> که خصیصه type آن دارای مقدار checkbox است، ایجاد می شوند.

مثال

<form>
    <input type="checkbox" name="sports" id="soccer">
    <label for="soccer">فوتبال</label>
    <input type="checkbox" name="sports" id="cricket">
    <label for="cricket">کریکت</label>
    <input type="checkbox" name="sports" id="cricket">
    <label for="baseball">بسکتبال</label>
</form>

خروجی کد بالا به شکل زیر خواهد بود:

جعبه انتخاب فایل (File Select box)

فیلد فایل به کاربر امکان جستجوی یک فایل ذخیره شده در سیستم خودش و فرستادن آن و اضافه کردنش به داده های فرم را می دهد. بطور عادی ، این فیلد بصورت یک جعبه متن (text box) به همراه یک دکمه (button) که به کاربر امکان جستجوی فایل را می دهد، ترجمه می شود. با این حال کاربر می تواند مسیر و نام فایل را نیز در جعبه متن وارد کند.

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

مثال

<form>
    <label for="file-select">بارگذاری:</label>
    <input type="file" name="upload" id="file-select">
</form>

خروجی کد بالا به شکل زیر خواهد بود:

Textarea

textarea یک کنترل ورودی متنِ چند خطی (multiple-line text input) است که به کاربر امکان وارد کردن بیش از یک خط متن را می دهد. این کنترل ها با استفاده از عنصر <textarea> ایجاد می شوند.ک

مثال

<form>
    <label for="address">آدرس:</label>
    <textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>

خروجی کد بالا به شکل زیر خواهد بود:

جعبه های انتخاب (Select Boxes)

جعبه انتخاب یک لیست کشویی (dropdown list) از گزینه هایی است که به کاربر امکان انتخاب یک یا چند گزینه را از لیست کشویی می دهد. جعبه انتخاب با استفاده از عنصر <select> و عنصر <option> ایجاد می شود. عنصر option، داخل عنصر <select>، آیتم های لیست را تعریف می کند.

مثال

<form>
    <label for="city">شهر:</label>
    <select name="city" id="city">
        <option value="sydney">سیدنی</option>
        <option value="melbourne">ملبورن</option>
        <option value="cromwell">کرامول</option>
    </select>
</form>

خروجی کد بالا به شکل زیر خواهد بود:

دکمه های ثبت و تنظیم مجدد (Submit and Reset Buttons)

دکمه ثبت برای فرستادن اطلاعات فرم به وب سرور استفاده می شود. زمانیکه روی دکمه ثبت کلیک می شود، اطلاعات فرم به فایلی که در خصیصه اکشنِ فرم برای پردازشِ اطلاعاتِ ثبت شده، مشخص شده، فرستاده می شود. دکمه تنظیم مجدد (reset button) مقدار همه ی کنترل های فرم را به مقدار پیش فرض تغییر می دهد.

مثال

<form action="action.php" method="post" id="users">
    <label for="first-name">نام:</label>
    <input type="text" name="first-name" id="first-name">
    <input type="submit" value="تایید">
    <input type="reset" value="پاک کردن">
</form>

خروجی کد بالا به شکل زیر خواهد بود:

نامِتان را در فیلد متنی بالا وارد کرده و روی دکمه submit کلیک کنید تا طرز کار آن را ببینید.

نکته: می توانید دکمه ها را با استفاده از عنصر <button> نیز ایجاد کنید. دکمه های ایجاد شده با عنصر <button> دقیقا مانند دکمه های ایجاد شده با عنصر input عمل می کنند با این تفاوت که قدرت تفسیر بیشتری دارند.

پرکاربردترین خصیصه های مورد استفاده:

خصیصه

توضیح

Name

نام فرم

Action

آدرس URL برنامه ای که اطلاعات ثبت شده توسط فرم را پردازش می کند

Method

متد HTTPای که مرورگر از آن برای ثبت فرم استفاده می کند. مقادیر این خصیصه می تواند get یا post یاشد

Target

نام یا کلمه کلیدی بسته به مقصد صفحه ای که نتایج اسکریپت را نمایش می دهد. کلمه های کلیدی رزرو شده _blank،_Self و _top هستند.

نکته: خصیصه name برای سازگاریِ ارتباطات می باشد. برای شناسایی عناصر بجای name باید از  خصیصه id استفاده کنید.

مبحث آموزشی

آموزش HTML 5

Learn HTML 5

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد