آموزش جامع ساخت فرم های HTML

شروع موضوع توسط plus2 ‏5 نوامبر 2011 در انجمن آموزش HTML

  1. plus2

    plus2 کاربر جدید

    تاریخ عضویت:
    ‏30 سپتامبر 2011
    ارسال ها:
    78
    تشکر شده:
    0
    بدون شک تمام افرادی که از اینترنت استفاده می کنند روزانه چند باری از فرم ها استفاده می کنند و با آن ها سر و کار دارند از فرم ساده ای مثل جستجوی گوگل گرفته تا فرم های پیچیده ی ثبت نام در سایت ها و …

    حال با هم بررسی می کنیم این فرم ها چگونه ایجاد می شود و چه تگ ها و خصوصیت هایی در آنها بکار گرفته می شوند تا ما آنها را در صفحات وب اینگونه مشاهده می کنیم!؟

    ایجاد یک فرم

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

    مشخصه ی action : توسط این مشخصه می توانیم اطلاعات یک فرم را به صفحه ی پردازشی مانند یک صفحه ی php و یا asp ارسال نماییم تا اطلاعات تکمیل شده بررسی شود و کارهای لازم بر روی آن ها اعمال شود.

    مشخصه ی method : توسط این مشخصه می توانید نحوه ی ارسال اطلاعات را مشخص نمایید که دو مقدار post و get را دریافت می کند. تفاوت این دو مقدار در این است که مقدار post به صورت امن ارسال می شود و توسط کاربر دیده نمی شود و اطلاعات طولانی را در بر می گیرد ولی مقدار get علاوه بر اینکه توسط کاربر قابل مشاهده است از نظر اندازه ی اطلاعات نیز محدود می باشد برای مثال هنگامی که از مقدار get استفاده کنید آدرس به صورت زیر خواهد بود:

    http://Sitename.com/form.php?email=myemail@mysite.com

    در مثال فوق مقدار متغیر email توسط get ارسال شده است و کاربران قادر می باشند ایمیل (یا مقدار متغیر) را مشاهده نمایند!

    خوب با این وجود تگ شروع یک فرم به این صورت خواهد بود :

    <form action=”page.php” method=”post”>

    البته مشخصه های دیگری نظیر name,id و class و … هم در فرم استفاده می شود که کاربرد های خاصی دارند.

    فیلد ها

    هر فرم دارای بخشی است که توسط آن میتوان اطلاعاتی را وارد کرد ، یکی از این بخش ها می تواند به صورت فیلدهای متنی باشد که می توانیم داخل آنها مطالبی را بنویسیم مانند فیلدهای نام و نام خوانوادگی و ایمیل و یا به صورت دکمه های رادیویی یا دکمه های انتخاب و منو های باز شونده و…

    برای ایجاد این چنین فیلد هایی از تگ هایی استفاده می کنیم که با هم بررسی خواهیم کرد ولی برخی خصوصیات مهم در همه ی آنها مشترک می باشند که عبارتند از:

    مشخصه ی name : توسط این مشخصه نام فیلد را مشخص می کنیم تا توسط این نام بتوانیم در صفحه ی پردازش آن را از سایر فیلدهای یک فرم مجزا کنیم.

    مشخصه ی type : توسط این مشخصه نوع فیلد را مشخص می کنیم که مثلا این فیلد به صورت متن قابل مشاهده باشد و یا به صورت رمزعبور یا دکمه ی رادیویی و …مقادیری که توسط این مشخصه دریافت می گردند شامل text,password,radio,hidden,submit,reset,button,checkbox,file و image می باشند.

    مشخصه ی value : می توان توسط این مشخصه میزان پیشفرضی برای اطلاعات یک فرم تعریف کرد.

    و برخی مشخصه های دیگر که بنا به کاربرد ذکر خواهد شد.

    فیلدهای متنی

    برای ورود اطلاعات به صورت متنی از تگ <input> استفاده می کنیم و مشخصه ها را بر حسب نوع فیلد وارد می کنیم به عنوان مثال می خواهیم یک فیلد برای وارد کردن نام کاربر ایجاد کنیم :

    <input name=”naam” type=”text” size=”۳۰” />

    توجه کنید در تگ فوق مقدار مشخصه ی type برابر text قرار داده شده است چرا که می خواهیم یک متن را دریافت کنیم.همچنین می توانیم از متغیر size برای تعیین اندازه ی این فیلد استفاده کنیم که یک مقدار عددی را دریافت می کند.

    نکته ی دیگر در مورد مقدار دریافت شده توسط مشخصه ی name می باشد که می توانید آن را به هر نام دلخواهی اختصاص دهید که ما در اینجا آن را naam قرار دادیم ، شما می توانید آن را برابر esm , name و یا هرچیز دیگری قرار دهید ولی توجه کنید این نام نباید با نام فیلد های دیگر یکسان باشد.برای دریافت ایمیل ، وبسایت ، و هرگونه متنی می توانید از این تگ استفاده کنید.

    فیلدهای پسورد

    فیلدهای رمزعبور نیز دقیقا مانند فیلدهای متنی می باشند با این تفاوت که متن تایپ شده در آن ها به صورت ستاره و یا دایره های توپر مشاهده می شود. تنها کافی است در تگ فوق میزان مشخصه ی type را برابر password قرار دهید. برای مثال :

    <input name=”pass” type=”password” size=”۳۰” />

    فیلدهای مخفی

    این گونه فیلد ها در واقع انتخاب یا دکمه ای برای کاربر نمایش نمی دهند و برای ارسال اطلاعات ثابت استفاده می شود بدون اینکه کاربر از آنها اطلاعی داشته باشد.مثلا شما یک فرم با موضوع “فرم وام” در سایت خود قرار داده اید و نمی خواهید که کاربر موضوع را مشاهده کند در این هنگام از این نوع فیلد ها استفاده می کنیم.برای مثال :

    <input name=”makhfi” type=”hidden” value=”فرم وام” />

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

    دکمه های رادیویی به دکمه های اطلاق می شود که تنها یکی از گزینه ها را می توانید انتخاب کنید و نه بیشتر!این دکمه ها به صورت دایره های کوچکی در صفحه مشاهده می شوند.این نوع فیلد ها فرق کوچکی با نمونه های متنی دارند که با مشاهده ی مثال زیر به آن ها پی خواهید برد :

    در مثال زیر به از کاربر می خواهیم رنگ مورد علاقه اش را انتخاب کند و گزینه های زیر را در اختیار وی قرار می دهیم:

    <input name=”color” type=”radio” value=”zard” /> زرد

    <input name=”color” type=”radio” value=”sabz” /> سبز

    <input name=”color” type=”radio” value=”meshki” />مشکی

    در واقع ما سه رنگ زرد ، سبز و مشکی را برای کاربر قابل انتخاب کردیم ولی تنها یک رنگ قابلیت انتخاب شدن را دارد!

    حتما متوجه این نکته شده اید که در تمام تگ های فوق مقداری که متغیر name دریافت کرده است یکسان و برابر با هم می باشند و این نکته برای درست کار کردن دکمه های رادیویی ضروری است.
    دکمه های انتخاب چندتایی

    برخلاف دکمه های رادیویی که تنها یک گزینه قابلیت انتخاب شدن را دارد در دکمه های انتخاب چندتایی که کاربر آنها را به شکل مربع های کوچک توخالی مشاهده می کند چند گزینه قابلیت انتخاب شدن را دارا می باشند.این دکمه ها مقدار checkbox را دریافت می نمایند.در مثال زیر از کاربر می خواهیم زبان هایی که به آنها آشنایی دارد را انتخاب نماید:

    فارسی<input name=”language” value=”farsi” type=”checkbox” />

    فرانسوی <input name=”language” value=”french” type=”checkbox” />

    انگلیسی <input name=”language” value=”english” type=”checkbox” />

    همچنین می توانید یک چک باکس را به طور پیشفرض در حالت انتخاب قرار دهید:

    فارسی<input type=”checkbox” name=”language” value=”farsi” checked=”checked” />

    منوهای بازشونده

    منوهای باز شونده یا DropDown menus همان منو هایی هستند که لیستی از موارد را برای شما نمایش می دهند و شما می توانید یک گزینه و در برخی موارد بیش از یک گزینه را انتخاب نمایید.به عنوان مثال در لیست عضویت سایت خود می خواهید لیست شهرستان های ایران را قرار دهید تا کاربر یکی از آنها را انتخاب نماید. به مثال زیر توجه فرمایید:

    نکته : برای منوهای باز شونده برعکس سایر موارد از تگ <select> استفاده می کنیم.

    <select name=”ostan” >

    <option value=”Tehran” > تهران </option>

    <option value=”Esfehan” > اصفهان </option>

    <option value=”Shiraz” > شیراز </option>

    </select>

    در منوی بالا کاربر تنها مجاز است یکی از استان ها را انتخاب نماید و در صورتی که بخواهیم یک استان مثلا شیراز را استان پیشفرض قرار دهیم مشخصه ای مانند زیر به آن اضافه می کنیم:

    <option value=”Shiraz” selected=”selected” > شیراز </option>

    حال اگر بخواهیم لیستی داشته باشیم که کاربر بتواند بیش از یک مورد را انتخاب کند کافی است مشخصه ای به تگ select اضافه کنیم ، مانند نمونه زیر :

    <select name=”ostan” multiple=”multiple” >

    <option value=”Tehran” > تهران </option>

    <option value=”Esfehan” > اصفهان </option>

    <option value=”Shiraz” > شیراز </option>

    </select>

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

    فیلد های متن طولانی

    اگر فرم های ارسال نظر را مشاهده کرده باشید بخشی وجود دارد که می توانید نظر خود را در آن وارد کنید و اندازه ی آن از سایر فیلد ها بزرگتر می باشد. به این نوع فیلد ها textarea یا محیط متن گفته می شود . این نوع فیلد ها نیز دارای تگ اختصاصی خود می باشند و مشخصه های ویژه ی خود را دارند.

    <textarea name=”nazar” cols=”۳۰” rows=”۶” > </textarea>

    اگر در مثال فوق دقت کرده باشید دو مشخصه ی cols و rows جدید می باشند.این دو مشخصه مقادیر عددی را دریافت می کنند و برای تعیین اندازه ی فیلد مورد استفاده قرار می گیرند.cols مقدار پهنای فیلد را کنترل می کند و rows مقدار ارتفاع آن را.

    دکمه های ثبت و ازنو کردن فرم ها

    در انتهای هر فرم دکمه هایی وجود دارد که با فشردن آنها یا فرم پاکسازی می شود و یا اینکه اطلاعات فرم برای سرور و صفحه ی پردازش ارسال می شود.نحوه ی قرار دادن این دکمه ها نیز مانند مثال های فوق می باشد با این تفاوت که مقدار مشخصه ی type برابر با reset و یا submit قرار داده می شود:

    <input type=”submit” value=”ارسال” />

    <input type=”reset” value=”از نو” />

    دقت کنید در تگ های فوق از مشخصه ی name استفاده نکرده ایم!

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

    در انتها فراموش نکنید تگ فرم را ببندید!

    </form>

    منبع : سایت علمی آموزشی عصرعلم

    http://www.AsreElm.com
     
  2. Gemsoft

    Gemsoft کاربر جدید

    تاریخ عضویت:
    ‏9 مارس 2013
    ارسال ها:
    19
    تشکر شده:
    0
    ای کاش یه نمونه آماده قرار میدادین تا با ویرایش ازش استفاده میکردیم

    مرسی