parsgreen.com
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>
<!-- http://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 مطالب بیشتر:
» کار با تگ های ایجاد کننده لیست در HTML
» بررسی تگ های اصلی و کلیدی HTML در صفحات وب
» فرمت بندی و کار با پاراگراف و متن در HTML
» نحوه ایجاد لینک در HTML
» ایجاد جدول با تگ table در html
commentنظرات (۱۰۴ یادداشت برای این مطلب ارسال شده است)
نویسنده: 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
زمان: ۱۲:۰۰:۳۲ - تاریخ: ۱۳۹۲/۰۳/۲۸
دوست عزیز من چند تا ابزار (امار گیری و نظر سنجی و فونتهای زیبا سازی که براتون فرستادم) به عنوان ابزار های وبلاگ نویس ها می خوام درست کنم هزینه اش چند میشه؟
ممنون
پاسخ: 
متاسفانه در حال حاضر فرصتی برای انجام پروژه برنامه نویسی در اختیار نداریم.
paged صفحه 1 از 7




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

7 × 2
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...