article

کار با تگ فرم (form) در HTML

html-form

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

تگ form در html


همان طور که پیش تر گفتیم، تگ فرم با هدف ایجاد قابلیت های تعاملی (دکمه، فیلدهای متنی، امکان آپلود فایل و...) برای صفحات html تعریف شده است، در واقع کنسرسیوم جهانی وب یا w3c این نکته را مد نظر داشته که صفحات وب باید از قابلیت ارتباط دو سویه برخوردار باشند، یعنی همان طور که به فرض مدیران یک سایت می توانند مطالبی در آن منتشر کنند، کاربران نیز باید بتوانند در محتوای آن مشارکت داشته یا از قابلیت های آن به صورت سفارشی استفاده نمایند، به این ترتیب و به تدریج عناصر و ویژگی های تعاملی که شباهت های زیادی با هم داشتند در قالب یک تگ با عنوان فرم (form) و زیرمجموعه های آن معرفی شد.
یک فرم ساده به صورت زیر در html تعریف می شود.
<form>
</form>
تگ form به تنهایی کاربردی ندارد و تنها معرف ایجاد یک امکان تعاملی ار نوع فرم است، لذا این تگ را با موارد زیر تکمیل می کنیم.

خاصیت action در form


از آنجایی که اطلاعات یک فرم html پس از تکمیل شدن باید به یک فایل در سرور ارسال شود، خاصیت action برای تعیین آدرس فایل مقصد مورد استفاده قرار می گیرد، به طور مثال اطلاعات فرم زیر (در صورت ارسال) به یک فایل با نام get.php فرستاده خواهد شد.
<form action="user/comment/get.php">
</form>
مقادیر خاصیت action می تواند به صورت آدرس کامل (با //:http) یا به صورت آدرس دایرکتوری (مانند مثال بالا) در نظر گرفته شود.

خاصیت method در form


در کنار action که مقصد اطلاعات یک فرم را معیین می کند، خاصیت method شیوه ارسال را مشخص می کند، این شیوه می تواند به یکی از دو شکل post یا get (حالت پیش فرض) باشد، در متد post، اطلاعات دور از چشم ما و به صورت پنهانی، در پس زمینه به سرور ارسال می شوند اما در متد get، اطلاعات در نوار آدرس مرورگر قابل مشاهده هستند و به صورت پارامترهایی به همراه مقادیر به سرور ارسال می شوند، متد post برای ارسال مقادیر طولانی، اطلاعات حساس کاربری، آپلود فایل و... کاربرد دارد و متد get بیشتر برای ارسال اطلاعات کوتاه و با حساسیت کمتر به کار می رود.
<form action="user/comment/get.php" method="get">
</form>
نکته: متد get و post هر دو از شیوه های استاندارد HTTP برای نقل و انتقال اطلاعات هستند و در برخی زبان های برنامه نویسی مانند Ajax یا فریم ورک های مربوط به آن (مانند jQuery) ممکن است کارکردی مشابه داشته باشند، لذا تفاوت های عنوان شده در آموزش، حالت معمول و کدنویسی html را مد نظر دارد.

تگ های زیرمجموعه form


همان طور که اشاره شد، تگ form به تنهایی قابلیت خاصی در اختیار کاربران قرار نمی دهد، بلکه با کمک تگ ها و خاصیت های دیگر است که امکانات بالقوه آن قابل استفاده است، این تگ ها به طور کلی شامل input، select و textarea می شوند که در زیر کاربرد آنها توضیح داده شده است.
- تگ input: با خاصیت هایی که می پذیرد برای ایجاد دکمه های رادیویی، فیلدهای متنی (متن کوتاه)، دکمه ارسال، فیلدهای مربوط به کلمه عبور، فیلد آپلود فایل و... کاربرد دارد، تگ input باید به صورت یکتا استفاده شود.
- تگ select: تگ select در کنار تگ option قابلیت ایجاد منوهای بازشونده و انتخاب یک یا چند مورد را فراهم می کند، تگ select باید به صورت جفتی استفاده شود.
- تگ textarea: برای ایجاد فیلدهای ورود متن (متن طولانی) کاربرد دارد، تگ textarea باید به صورت جفتی استفاده شود.

تگ input در form


اصلی ترین تگی که به همراه تگ form در ایجاد قابلیت های تعاملی نقش دارد، input است که با تنظیم type های مختلف برای آن می توان انواع مختلفی از امکانات نظیر فیلد متنی (text)، فیلد کلمه عبور (password)، دکمه معمولی (button)، دکمه ارسال (submit) و ... را ایجاد کرد، در زیر چند نمونه اولیه از نحوه تعریف و به کارگیری تگ input را ملاحظه می کنید.
<form action="user/comment/get.php" method="get">
<input type="button" />
<input type="checkbox" />
<input type="hidden" />
<input type="password" />
<input type="submit" />
<input type="text" />
</form>
مقادیری که تگ input برای خاصیت type می پذیرد و کاربرد آنها به صورت خلاصه در زیر عنوان می شود.

نوع button


برای ایجاد دکمه های ساده به کار می رود، یک دکمه معمولی باید به همراه دستورات جاوا اسکریپت تکمیل شود در غیر این صورت به خودی خود کاربردی ندارد، به طور مثال:
<form action="user/comment/get.php" method="get">
<input type="button" value="دکمه" onclick="javascript:alert('دکمه در تگ فرم باید با دستورات جاوا اسکریپت تکمیل شود')" />
</form>

نوع checkbox


از این مقادیر به همراه تگ input برای ایجاد باکس های قابل تایید (چک باکس) استفاده می شود، مثال:
<form action="user/comment/get.php" method="get">
<input type="checkbox" checked="checked" name="choose" value="1" />
</form>
اگر به مثال های بالا دقت کرده باشید، هر مقادیر زیرمجموعه، می تواند تنظیمات به خصوصی نیز داشته باشد، به فرض وقتی برای چک باکس از پارامتر checked استفاده می شود، یعنی حالت پیش فرض آن را به صورت انتخاب شده تنظیم می کنیم، یا پارامتر name باعث می شود تا اطلاعات فرم پس از ارسال در سرور قابل دریافت باشد (اطلاعات هر تگ با نام آن قابل شناسایی است).
نکته: خاصیت value برای دکمه ها، صرفا حالت نمایشی دارد، اما برای سایر موارد به عنوان مقادیر پیش فرض، به سرور ارسال می شود.

نوع file


برای آپلود یک فایل به سرور استفاده می شود، به طور مثال:
<form action="user/comment/get.php" method="get" enctype="multipart/form-data">
<input type="file" name="file-name" accept="image/gif,image/jpg,application/pdf" />
</form>
برای اینکه نوع file به درستی عمل کند، باید enctype (رمزنگاری) را با مقادیر multipart/form-data به تگ form اضافه کنیم.
نکته: پارامتر اختیاری accept مشخص کننده فرمت های مجازی است که از طریق فیلد، قابل آپلود هستند، این فرمت ها بر اساس استاندارد MIME یا (Multipurpose Internet Mail Extensions) مشخص می شوند، اگرچه MIME در اصل استانداردی برای نقل و انتقال اطلاعات از طریق ایمیل در وب است، اما برای صفحات وب نیز کاربرد دارد، برای کسب اطلاعات بیشتر می توانید در لینک زیر لیست تقریبا کاملی از فرمت ها و معادل آنها در استاندارد MIME را ملاحظه کنید.
لیست فرمت ها و معادل آنها در استاندارد MIME

نوع hidden


برای ایجاد فیلدهای مخفی کاربرد دارد، مقادیر فیلدهای مخفی ثابت است و بدون تغییر کاربر به سرور ارسال می شود، مثال:
<form action="user/comment/get.php" method="get">
<input type="hidden" name="hidden-name" value="1" />
</form>
نوع hidden کاربردهای خاصی دارد، به طور مثال با تنظیم یک فیلد مخفی، می توان از ارسال شدن یک فرم اطمینان حاصل کرد یا برخی بررسی های امنیتی را با آن انجام داد.

نوع image


از نوع image برای ایجاد یک دکمه ارسال فرم (که خود از یک تصویر به عنوان پس زمینه استفاده می کند) استفاده می شود، مثال:
<form action="user/comment/get.php" method="get">
<input type="image" src="image/image.jpg" alt="submit" />
</form>
نکته: نوع image علاوه بر ارسال فرم، مختصات موقعیت خود در صفحه را نیز به سرور ارسال می کند، این مختصات به صورت دو پارامتر X و Y دریافت می شوند که هر کدام با یک مقدار عددی موقعیت افقی و عمودی تصویر را در صفحه مشخص می کنند.

نوع password


از نوع password برای ایجاد فیلدهای کلمه عبور (ستاره ای) استفاده می شود، مثال:
<form action="user/comment/get.php" method="get">
<input type="password" name="pass" maxlength="25" />
</form>
اگر در مثال بالا دقت کرده باشید، یک پارامتر دیگر نیز به فرم خود اضافه کرده ایم، این پارامتر maxlength نام دارد که از آن برای تعیین حداکثر کاراکتر مجاز یک فیلد (معمولا فیلد متنی و پسورد) استفاده می شود.
نکته: استفاده از نوع password در فرم های وب (فیلدهای کلمه عبور) از لحاظ حفظ امنیت کاربران اهمیت زیادی دارد.

نوع radio


از نوع radio برای ایجاد دکمه های رادیویی تایید شونده در فرم های وب استفاده می شود، مثال:
<form action="user/comment/get.php" method="get">
<input type="radio" name="radio-box" value="1" />
</form>

نوع reset


نوع reset برای ایجاد یک دکمه که با کلیک بر روی آن اطلاعات فیلدها به حالت پیش فرض برمی گردد کاربرد دارد، مثال:
<form action="user/comment/get.php" method="get">
<input type="reset" value="نوشتن از نو" />
</form>
نکته: استفاده از این قابلیت باید با دقت انجام شود، چرا که کلیک ناخواسته بر روی دکمه rest باعث از دست رفتن اطلاعات فعلی فیلدها می شود.

نوع submit


نوع submit برای ایجاد دکمه ارسال اطلاعات فرم کاربرد دارد، مثال:
<form action="user/comment/get.php" method="get">
<input type="submit" value="ارسال" />
</form>

نوع text


از نوع text برای ایجاد فیلدهای متنی (متن کوتاه) استفاده می شود، مثال:
<form action="user/comment/get.php" method="get">
<input type="text" name="text-feild" maxlength="255" />
</form>

تگ select در form


در صفحات html برای ایجاد یک منوی کشویی که دارای چند گزینه باشد، از تگی به نام select به همراه تگ زیرمجموعه آن یعنی option استفاده می شود، به طور مثال:
<form action="user/comment/get.php" method="get">
<select name="select-option">
<option value="0" selected="selected">انتخاب کنید</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
نکته: خاصیت selected گزینه پیش فرض یک منو را مشخص می کند.
در حالت عادی هر تگ select مجاز به ارسال تنها یک مقدار است، لذا برای ارسال مقادیر چندگانه، باید خاصیت multiple را به این تگ اضافه کنیم، مثال:
<form action="user/comment/get.php" method="get">
<select name="select-option[]" multiple="multiple">
<option value="0" selected="selected">انتخاب کنید</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
نکته 1: برای انتخاب چند گزینه از یک منوی select، کلید Ctrl را نگهداشته و گزینه های خود را انتخاب کنید.
نکته 2: اطلاعات فرم چندگانه به صورت یک آرایه به سرور ارسال می شود و علامت [] در انتهای نام منو بدین منظور نیاز است (درک مفهوم آرایه هدف این آموزش نیست، اما جهت آشنایی بیشتر و به زبان ساده آرایه در برنامه نویسی زبان های سمت سرور مانند php، asp و... به معنی یک متغیر است که درون خود چند متغیر دیگر دارد).

تگ textarea در form


در کنار دو تگ اصلی input و select عنصر دیگری در صفحات وب جهت ایجاد قابلیت های تعاملی نقش کلیدی دارد، این عنصر تگ textarea است که جهت ایجاد فیلدهای متنی (متن طولانی) به عنوان مثال برای وارد کردن یادداشت، ارسال مطلب، نمایش یک متن کپی رایت و... کاربرد دارد، به طور مثال:
<form action="user/comment/get.php" method="get">
<textarea name="your-text" cols="50" rows="8">
متن خود را اینجا بنویسید
</textarea>
</form>
تنظیم یک فیلد از نوع textarea به وسیله خاصیت های زیرمجموعه آن از جمله cols (ستون ها) و rows (سطرها) صورت می گیرد، از cols برای تعیین عرض و از rows برای ارتفاع استفاده می شود.
نکته 1: اندازه ها برای cols و rows صرفا جهت نمایش دلخواه فیلد کاربرد دارند و مانع ورود کاراکترهای بیشتر نمی شوند، برای محدود کردن تعداد کاراکتر مجاز از خاصیت maxlength استفاده کنید (البته محدودیت کاراکتر می تواند در سرور اعمال گردد یا در صفحات وب از تکنیک های دیگری مانند جاوا اسکریپت برای نمایش حداکثر کاراکتر مجاز به کاربر استفاده شود).
نکته 2: در حالت پیش فرض، هر فیلد متنی از نوع textarea ممکن است با اندکی تفاوت (از لحاظ ارتفاع و عرض) در مرورگرهای مختلف نمایش داده شود، برای تنظیم دقیق و یکسان اندازه باید از CSS استفاده کنیم (که خود مبحثی جدا است).

خاصیت readonly


تگ textarea برای نمایش متن های readonly (صرفا خواندنی) نیز کاربرد دارد، به طور مثال می توان با افزودن خاصیت readonly به آن، یک متن برجسته شده را جهت مطالعه کاربر به او نشان داد (کاربر قادر به تغییر متن نیست)، مثال:
<form action="user/comment/get.php" method="get">
<textarea name="your-text" cols="50" rows="8" readonly="readonly">
متن خود را اینجا بنویسید
</textarea>
</form>

خاصیت های disabled


برای غیر فعال کردن تگ های فرم (به طور کلی) از خاصیتی به نام disabled استفاده می شود، با این کار اگرچه فرم ها به ظاهر نمایش داده می شوند، اما عملا کاربر قادر به وارد کردن اطلاعات یا انتخاب موردی نیست، مثال:
<form action="user/comment/get.php" method="get">
<textarea name="your-text" cols="50" rows="8" disabled="disabled">
متن خود را اینجا بنویسید
</textarea>
</form>
نکته: خاصیت disabled محدود به تگ textarea نیست و عمومیت دارد.

استفاده از label در form


برای ایجاد برچسب های استاندارد در فرم های وب، از تگی (جفتی) به نام label استفاده می شود، label در واقع نقش معرف و برچسب را برای یک تگ فرم ایفا می کند، مثال:
<form action="user/comment/get.php" method="get">
<label for="my-text">یادداشت:</label>
<textarea name="your-text" cols="50" rows="8" id="my-text">
متن خود را اینجا بنویسید
</textarea>
</form>
همان طور که ملاحظه می کنید، label از یک id برای شناسایی فیلد مربوطه استفاده می کند، در واقع برای هر فیلدی که قصد تعریف برچسب داریم، یک id تعریف کرده و با خاصیت for برچسب را به آن نسبت می دهیم.
نکته: در کنار خاصیت های عنوان شده، برخی خواص کلی مانند class، dir، id، lang و... نیز برای تگ های فرم قابل اعمال است.
مثال و پیش نمایش آنلاین
در زیر یک مثال کاربردی از تگ form و پیش نمایش آنلاین آن را ملاحظه می کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | استفاده از فرم در صفحات وب</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
    line-height:20px;    
}
label{
    width:100px;
    height:25px;
    display:inline-block;
    vertical-align:top;
}
</style>
</head>
<body>
<form action="form-get.php" method="post">
<label for="name">نام:</label>
<input type="text" name="name" id="name" maxlength="255" />
<br />
<label for="pass">رمز:</label>
<input type="password" name="pass" id="pass" maxlength="255" />
<br />
<label for="pass">کشور:</label>
<select name="country" id="country">
<option value="" selected="selected">انتخاب کنید</option>
<option value="Iran">ایران</option>
<option value="Japan">ژاپن</option>
<option value="Afghanistan">افغانستان</option>
<option value="Germany">آلمان</option>
<option value="Australia">استرالیا</option>
</select>
<br />
<label for="text">یادداشت:</label>
<textarea name="text" id="text" cols="30" rows="6">
</textarea>
<br />
<input type="submit" value="ارسال" />
</form>
<hr />
اطلاعات فرم بالا پس از ارسال (متد post)، به فایلی با نام فرضی form-get.php فرستاده شده و پردازش می شود.
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» کاربرد تگ img و نمایش تصاویر در HTML
» فرمت بندی و کار با متن و پاراگراف در HTML
» تگ های اصلی و کلیدی HTML
» کار با تگ های ایجاد کننده لیست در HTML
» آشنایی با مفهوم Semantic در HTML
commentنظرات (۱۲۴ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: ansherli
۱۸:۳۲ ۱۳۹۱/۱۰/۱۴
سلام
مطلب خلاصه و بسیار بسیار مفید و کاربردی ای بود . مرسی
فقط یه سوال چرا از دیروز من هر وقت میام وبگو پیغام دسترسی به پایگاه داده امکان پذیر نیست نمایش داده میشه؟!!!
پاسخ: 
سلام
مشکل پیش آمده به اتصال پایگاه داده و سرور سایت ارتباط دارد که گاهی به دلایل مختلف مانند ترافیک سرور یا مشکلات دیگر ممکن است رخ دهد.
نویسنده: شریفی
۱۷:۱۹ ۱۳۹۱/۱۰/۱۶
سلام خیلی عالی بود، من یه فرم طراحی کردم و خواستم پر کردن یکی از فیلدها اجباری باشه و کد زیر رو نوشتم
<input type="file" name="file[]" id="file" dir="ltr" required="required">
حالا کد در مرورگر هایی غیر از ie به صورت کامل کار می کنه یعنی کاربر باید حتما یه فایل رو انتخاب کنه ولی تو ie اصلا کار نمی کنه.
مشکل کد نویسی من از کجاست؟؟؟
ممنون میشم پاسخ منو بدین چون کارم واقعا گیره.
پاسخ: 
سلام
کدنویسی شما مشکلی ندارد، مسئله این است که خاصیت required در html نسخه 5 معرفی شده و مرورگرهای ie نسخه 8 و ماقبل و همچنین سافاری از آن پشتیبانی نمی کنند.
شاید هنوز استفاده از جاوا اسکریپت برای اعتبارسنجی سمت کاربر بهترین گزینه باشد!
نویسنده: شریفی
۱۹:۲۶ ۱۳۹۱/۱۰/۱۶
از پاسخ خیلی خوبتون ممنونم.
میشه آموزش نحوه استفاده از جاوا اسکریپت برای اعتبار سنجی رو در سایت قرار بدین؟
من cms سایتم از کدهای php تشکیل شده و زیاد کد پی اچ پی بلد نیستم. مثلا اگه روشی باشه که یه فایل جاوا برای اعتبار سنجی رو جداگانه درست کرد و توی قسمت هد لینکش رو گذاشت. به نظرتون جواب گو هست؟
با تشکر از سایت فوق العاده تون.
پاسخ: 
اعتبار سنجی جاوا اسکریپت و php هر دو در آموزش های کاربردی سایت وجود دارند، اما اینکه جوابگو است یا خیر، باید بگوییم که خیر، جاوا اسکریپت یا هر اعتبار سنجی سمت کاربر ممکن است که (بنا به دلایل مختلف) نادیده گرفته شود، به طور مثال با غیر فعال بودن جاوا اسکریپت یا پشتیبانی نشدن آن در مرورگر، فرم شما ارسال می شود بدون اینکه محتوایی داشته باشد، لذا برای اطمینان حتما باید از اعتبارسنجی سمت سرور و زبان هایی مانند php و asp در کنار سایر روش ها استفاده کنید.
نویسنده: rahaamirchermahini
۱۶:۰۰ ۱۳۹۲/۰۲/۲۸
با سلام و عرض ادب
این مطلب شاید به این مقاله اموزشی ربطی نداشته اما اگر جابجا شد و جوابی بهش دادین حتما منو با ایمیل با خبر کنین واقعا ممنون میشم چون مطلب مرتبطی نتونستم پیدا کنم با هاش
کدی که در html اینگونه نوشته بشه :
<header id="header" role="banner">
چطور و به چه شکلی باید در css فراخوانی بشه البته قسمت اولش رو تا حدودی میدونم که باید بنویسیم
#header {
}
اما برای فراخوانی role=banner به چه شکلی باید عمل کرد و با چه سلکتوری باید صداش کنیم؟
اگه امکان داره در مورد سلکتورهایی دوتایی مثل مثال بالا و موارد دیگری مثل hfeed , tfoot توضیح مختصری اگه امکان داره بفرمایید یا اگر اموزشی هست که قبلا نوشتید لینک بفرستین
با تشکر وارزوی توفیق
شاد و پیروز باشید
پاسخ: 
سلام
تا آنجا که می دانیم خاصیت role، به صورت آزمایشی از XHTML تعریف و اکنون در نسخه HTML5 به عنوان یک خاصیت استاندارد پذیرفته شده، هدف از آن هم ارتباطی با CSS ندارد و جهت دسته بندی بهتر محتوا و تجزیه راحت تر توسط برنامه های مبتنی بر XML و... است، به طور مثال اگر برنامه ای با تجزیه کد صفحه بخواهد تنها بنرهای تبلیغاتی را استخراج کند، این خاصیت در آنجا کاربرد خواهد داشت، اما در CSS از کلاس و آی دی استفاده می شود که خود مباحث جداگانه دارند.
۱۵:۴۴ ۱۳۹۲/۰۲/۳۰
لازم دیدم ازتون تشکر کنم. آموزش مفید و خوبی بود.
نویسنده: صادق
۱۲:۳۲ ۱۳۹۲/۰۳/۱۰
سلام خیلی وب سایت پر محتویی دارید خیلی ممنون و خسته نباشید من میخوام وقتی که یک مقدار رو انتخاب کردم توی فرم اجازه بده یه مقدار دیگه رو انتخاب کنم در غیر اینصورت نشه انتخاب کرد چه کار باید کرد
پاسخ: 
سلام
سوالتان واضح و مشخص نیست!
نویسنده: صادق
۱۴:۰۲ ۱۳۹۲/۰۳/۱۰
سلام منظورم اینه که مثلا توی فرمی که میسازم برای ورود اطلاعات مثلا اگر شخص از توی drop down list یک گزینه رو انتخاب کرد مثلا ریاضی رو انتخاب کرد یه drop down list جدید باز بشه و توی اون گزینه هایی مثل انتخاب نام استاد و غیره بوجود بیاد
پاسخ: 
سلام
برای این کار باید از جاوا اسکریپت استفاده کنید، به طور مثال در حالت عادی لیست دوم مخفی باشد و پس از انتخاب یک گزینه به نمایش در بیاید، انجام این کار به روش های مختلف ممکن است، یک نمونه:
<style type="text/css">
#sub{
visibility:hidden;
}
</style>
<select name="main" id="main" onchange="ShowSub('sub', this.value);">
<option value="0">- انتخاب کنید -</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="sub" id="sub">
<option value="3">3</option>
<option value="4">4</option>
</select>
<script type="text/javascript">
function ShowSub(id, value){
if(value != 0){
var visible = 'visible';
}
else{
var visible = 'hidden';
}
document.getElementById(id).style.visibility = visible;
}
</script>
نویسنده: صادق
۱۵:۵۷ ۱۳۹۲/۰۳/۱۰
خیلی ممنون از جوابتون
نویسنده: صادق
۱۹:۴۱ ۱۳۹۲/۰۳/۱۳
سلام خسته نباشید یه سوال دیگه داشتم می خواهم دو عدد check box بزارم که هر کدوم انتخاب شد یه drop down list باز بشه و در صورت انتخاب نشدن یعنی تیک آن که برداشته شد drop down list هم نشان داده نشود
پاسخ: 
سلام
می توانید از نمونه کد زیر استفاده کنید:
<style type="text/css">
#sub{
visibility:hidden;
}
</style>
<input type="checkbox" name="checkbox_1" id="checkbox_1" onclick="ShowSub('sub');" >
<input type="checkbox" name="checkbox_2" id="checkbox_2" onclick="ShowSub('sub');" >
<select name="sub" id="sub">
<option value="3">3</option>
<option value="4">4</option>
</select>
<script type="text/javascript">
function ShowSub(id){
var checkbox_1 = document.getElementById('checkbox_1').checked;
var checkbox_2 = document.getElementById('checkbox_2').checked;
if(checkbox_1 == true || checkbox_2 == true){
var visible = 'visible';
}
else{
var visible = 'hidden';
}
document.getElementById(id).style.visibility = visible;
}
</script>
نویسنده: صادق
۰۹:۰۳ ۱۳۹۲/۰۳/۱۴
واقعا کارتون عالیه خیلی متشکر
نویسنده: خاتمی
۱۵:۱۱ ۱۳۹۲/۰۳/۱۴
سلام و با تشکر از خدمات خوبتون
چجوری میشه یه فرم که مثلا user1 و user2 و user3 رو میخواد وقتی دکمه submit رو زدیم بره به آدرس
www.site.com/?esm=user1&esmekamel=user2&esme3=user3
پاسخ: 
سلام
کافی است بخش اصلی آدرس را در قسمت action درج کرده و فرم را با متد get ارسال کنید.
برای پارامترها، از مقادیر name در فیلد ها استفاده کنید، مثال:
<form action="www.site.com/?" method="get">
<input type="text" name="esm"><br>
<input type="text" name="esmekamel"><br>
<input type="text" name="esme3"><br>
<input type="submit" value="ارسال">
</form>
نویسنده: صادق
۱۳:۲۶ ۱۳۹۲/۰۳/۱۵
سلام دو تاسوال داشتم چطور میتونیم عکس رو توی فرم بگیریم و (در بازیابی فرم خود عکس رو نمایش بدیم) و چه طور میشه از یک متغیر که توی فرم دریافت کردیم (مثل مقداری که توی یک textbox دریافت شده) در صفحات دیگه غیر مقصد استفاده کنیم.
پاسخ: 
سلام
برای دریافت یک عکس باید با نحوه آپلود فایل در PHP (یا سایر زبان های سمت سرور) آشنا باشید، سپس فایل را در سرور و دیتابیس ذخیره کرده و در صورت نیاز نمایش دهید، برای مورد دوم نیز راه های مختلفی وجود دارد، متداول ترین شیوه استفاده از سشن آی دی است، یعنی یک نشست را شروع کرده و مواردی که نیاز به اشتراک بین صفحات مختلف دارند را به صورت سشن آی دی تعریف می کنیم (بحث مفصلی است که باید به صورت مستقل مطالعه کنید)، شیوه های دیگری نیز وجود دارد که پیشرفته تر هستند، مانند اشتراک گذاری متغیرها بین کلاس های مختلف، همچنین می توان برنامه را طوری طراحی کرد که فایل ها به شیوه include به هم مرتبط باشند.
نویسنده: صادق
۱۵:۴۴ ۱۳۹۲/۰۳/۱۵
ممنون
نویسنده: فرشید
۱۲:۱۳ ۱۳۹۲/۰۳/۲۷
سلام
اول تشکر میکنم از سایت مفیدتون من اشکالی داشتم ممنون میشم کمکم کنید
لطفا لینک زیر را بعد قبل از تایید نظرات حذف کنین
حذف شد
میخواستم حروفی که در بالا مینویسم با کلیک بر روی یکی از حروف زیر حروف نوشته شده در بالا هم نشان داده شود هم اینکه کد تولید شده در زیرش در داخل textarea برای کاربر نشان داده شود من چی کار باید بکنم ممنون میشم راهنماییم کنید
پاسخ: 
سلام
متاسفانه دقیقا متوجه منظور سوال شما نشدیم، ضمن اینکه اشکال نباید کلی باشد! یعنی انتظار ندارید که بخشی از اسکریپت را برایتان بنویسیم، حل مشکل یعنی در بخش خاصی از کد کمکتان کنیم، در حال حاضر اسکریپت شما جزء خروجی HTML بخش دیگری ندارد (هسته کار نوشته نشده است).
نویسنده: farshid
۱۲:۰۰ ۱۳۹۲/۰۳/۲۸
دوست عزیز من چند تا ابزار (امار گیری و نظر سنجی و فونتهای زیبا سازی که براتون فرستادم) به عنوان ابزار های وبلاگ نویس ها می خوام درست کنم هزینه اش چند میشه؟
ممنون
پاسخ: 
متاسفانه در حال حاضر فرصتی برای انجام پروژه برنامه نویسی در اختیار نداریم.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





1 × 6
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form کوثر رحیمی
در:
سلام ا ز راهنماییتون ممنونم من تازه وبلاگم رو درست کردم ۱۲ سالمه هر کاری می کنم فیلم در اون قرار نمیگیره همش این خطا...
۱۳۹۹/۱۰/۲۹

form متین
در:
سلام و خسته نباشید من بخوام داده ای که از قبل موجوده رو با متد پست به یک فایل ارسال کنم چجور میشه؟ یعنی...
۱۳۹۹/۱۰/۲۷

form روشنا
در:
سلام ما یه وبلاگ گروهی داریم مختص املاک فایل های جدید و حتی قالب جدید اصلا اعمال نمیشه . حتی راهنمایی که کرده...
۱۳۹۹/۱۰/۲۷

form علی
در:
من در یک سایت سازی سایت ساختم یه بخش داره به نام اسکریپت دلخواه می خوام یه اسکریپتی بذارم که مثلا یه موسیقی وقتی کاربر...
۱۳۹۹/۱۰/۲۷

form امیرحسین
در:
بله استاد خیلی ممنون، نمیدونستم خودش Optimize رو انجام میده در کل من بعد از ایندکس گذاری ها همیشه سعی کردم جوری که با...
۱۳۹۹/۱۰/۲۶

form امیرحسین
در:
ُسلام وقت بخیر این کووری هم چون اول قسمت WHERE انجام میشه بعد قسمت ON پس این کووری هم با حالت کووری قبلی برابره
۱۳۹۹/۱۰/۲۶

form امیرحسین
در:
سلام استاد وقت بخیر ممنون از پاسخ گویی های قبلی یه سوال دیگه داشتم: این هم هیچ مشکلی نداره و کار میکنه، ایا...
۱۳۹۹/۱۰/۲۵

form محمد بیدل بازه
در:
سلام خسته نباشید ببخشید من توی یک قسمت سایتم تصویری دارم و میخوام سمت راست اون تصویر متن بنویسم ولی نمیشه تا متن رو...
۱۳۹۹/۱۰/۲۵

form سلام
در:
و اینکه یه تگ خوب برای فونت معرفی کنید و یه تگ دیگه که متن رو (تیتر مطلب (تست)) در ادامش بنویسه نه اینکه...
۱۳۹۹/۱۰/۲۴

form سلام
در:
سلام وبسایتم را نگاه کنید از چه تگی استفاده کنم تا فاصله بین تیتر مطلب جدید را کاهش دهم؟ (از خطی به خط...
۱۳۹۹/۱۰/۲۴

form وطن
در:
سلام. خسته نباشید. خیلی گشتم درباره یک خطا یا ایراد فنی که چند روز هست در سایت نوشته شده با پی اچ پی (اسکریپت اولوشن)...
۱۳۹۹/۱۰/۲۴

form حورارمی
در:
سلام. من هنوز نمیدونم تو تنظیمات باید کجا رو بگردم تا قالب وبلاگم رو با عکس مورد علاقه ام تغییر بدم. یا نمیتونم...
۱۳۹۹/۱۰/۲۳

form راشد
در:
این روش خیلی طولانیه در فروشگاه من یک برنامه گرفتم که یه عکس توش اپلود کن بهت یک لینک میده در ظرف چند ثانیه و...
۱۳۹۹/۱۰/۲۱

form باسلام
در:
باسلام خدمت شما عزیز زحمت کش، من مطلب را تا آخر مطالعه کردم. من وبلاگم بازدیدای زیادی داره چون تمام مطالبش رو خودم مینویسم و...
۱۳۹۹/۱۰/۲۱

form محمود
در:
سلام و عرض ادب من در سایتم یک قسمت تب ایجاد کردم، متن ها را که در تب می نویسم پاراگراف بندی نمی شوند....
۱۳۹۹/۱۰/۲۱
form علی آقابیگی
در:
سلام خسته نباشید ببخشید من می خواستم کد جدید در وبلاگم بزارم بعد اشتباهی رفتم در قسمت ویرایش کدها و بعد بیشتر کدها را پاک...
۱۳۹۹/۱۰/۲۰
form محمد
در:
سلام. من میخوام با جاوا اسکریپت یک کدی بنویسم که وقتی کاربر روی یک دکمه ‏ای کلیک کرد، یک کد تصادفی برای شمارش ارسال...
۱۳۹۹/۱۰/۲۰
form پوریا
در:
سلام خسته نباشید، ممنونم بابت توضیحات خوبتون، یه مشکلی داشتم میخواستم ببینم امکانش هست راهنمایی کنید؟ فرض کنید یه اینطور متنی داریم: ...
۱۳۹۹/۱۰/۱۹
form seyedsobhanmansouri
در:
سلام خسته نباشید من سایتمو طراحی کردم اما به این مشکلات بر میخورم اول اینکه هدر سایتم نمایش داده نمیشه اصلا و بعد...
۱۳۹۹/۱۰/۱۹
form رضا
در:
سلام. ممنون بابت مطالب مفیدتون. این نوع جستجو به سئو سایت لطمه نمیزنه؟؟؟ چون در این مدل جستجو، مقدار impression میره بالا ولی...
۱۳۹۹/۱۰/۱۹
form mahdi
در:
سلام استاد عزیز ، پس بنظرتون بجای وقت گذاشتن برای یادگیری لاراول و وردپرس ، وقت بزارم که عمیق تر php و ساختار mvc...
۱۳۹۹/۱۰/۱۹
form علی
در:
سلام و ممنون بابت وبسایت عالیتون داخل بعضی سایت ها دیدید مثلا یه متنی شروع به تایپ شدن می کنه و وقتی کامل شد...
۱۳۹۹/۱۰/۱۸
form محمد
در:
سلام خدمت شما دوست عزیز سوالم این بود میخاستم چندتا مثال از این تابع و چند تابع دیگه از خودتون رو برام مثال بزنید...
۱۳۹۹/۱۰/۱۸
form محمود رنجبر
در:
سلام برادر مشکل من تو همین سایتی هست که فرستادم وقتی گزینه خانه رو کلیک میکنم و بعد دکمه بک گوشی رو میزنم بالای صفحه...
۱۳۹۹/۱۰/۱۷
form mahdi
در:
سلام استاد عزیز ، بعد از آموزس php با لاراول کار کنیم بهتره ؟
۱۳۹۹/۱۰/۱۶
form رضا
در:
آدرس رو براتون گذاشتم دامنه قبلا روی یه وبلاگ میهن بلاگ بود چند ماه میشه که از میهن بلاگ خداحافظی کردم ولی هنوز که هنوزه...
۱۳۹۹/۱۰/۱۴
form نیلو
در:
سلام... ببخشید بعد طراحی قالب قالب شیشه ایم هست یا نه؟؟؟
۱۳۹۹/۱۰/۱۳
form مجتهدزاده
در:
سلام من یه فرمی طراحی کردم که توش قراره تعداد زیاد (حدود 10 الی 50) فیلد رو تو دیتابیس اینسرت کنم. آیا باید...
۱۳۹۹/۱۰/۰۸
form مجتهدزاده
در:
سلام لطفا راهنمایی بفرمایید که چه زمانی قبل از متغیر @ استفاده می شه و کاربردش چیه؟ با تشکر
۱۳۹۹/۱۰/۰۶
form ali
در:
سلام چجوری میشه با php بازی هوب رو طراحی کرد
۱۳۹۹/۱۰/۰۶
form رضا
در:
سلام ممنون از سایت خوبتون ایکون سایتم رو توی دسکتاپ درست نشون میده ولی تو گوشی مشکل داره طبق اموزش شما هم انجام دادم...
۱۳۹۹/۱۰/۰۶
form فرانک دستان
در:
سلام من خیلی دوست دارم روی وبلاگم کد اهنگ بزارم ولی هیچ کدوم نمی یاد بهم گفتن از این کدها دیگه پشتیبانی نمی شه شما...
۱۳۹۹/۱۰/۰۵
form مصطفی
در:
سلام. عملگر @ چه زمانی قبل از یک متغییر میاد؟
۱۳۹۹/۱۰/۰۵
form سما
در:
سلام من وقتی میزنم روی مشاهده وبلاگ صفحه فیلتر برام میاد و نمیتونم وبلاگمو ببینم
۱۳۹۹/۱۰/۰۵
form مجتبی
در:
سلام من وبلاگ بلاگفا دارم کدها و جاوا استیکرها رو میزارم تو قسمتشون ولی همه ی کدها رو یکطرف وبلاگ نشون میده چطوری سمت...
۱۳۹۹/۱۰/۰۵
form matin asadi
در:
سلام ممنون بابت سایت خوبتو من یه مشکلی دارم می خواستم کدی برای این مثال زیر بنویسم ولی بلد نیستم ممنون میشم کمک کنید. ...
۱۳۹۹/۱۰/۰۲
form sahar1999
در:
سلام وقت بخیر چطور میتونم در برنامه نویسی سی شارپ هنگام ایجاد پایگاه داده ی MySql نام پایگاه داده رو از txetbox دریافت کنم؟
۱۳۹۹/۱۰/۰۱
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.