آگهی
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 مطالب بیشتر:
» نحوه ایجاد لینک در HTML
» کاربرد تگ img و نمایش تصاویر در HTML
» تگ های اصلی و کلیدی HTML
» فرمت بندی و کار با متن و پاراگراف در HTML
» متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
commentنظرات (۱۲۴ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: مجتبی
زمان: ۲۱:۲۰:۱۵ - تاریخ: ۱۳۹۲/۰۹/۲۳
سلام
توی فایل خروجی که بعد از تکمیل فرم باید به آن جا برود، چه چیز هایی باید نوشت؟
من هر وقت دکمه ی ارسال رو میزنم مرورگر فایل php رو
دانلود میکنه اجرا نمی کنه
پاسخ: 
سلام
فایل های PHP برای اجرا یا باید در سرور فراخوانی و پردازش شوند یا اینکه در لوکال هاست، ظاهرا شما با برنامه نویسی سمت سرور آشنایی ندارید (کدهای HTML صرفا اطلاعات را ارسال می کنند، پردازش آنها باید در سرور و توسط یک زبان سمت سرور مانند PHP انجام شود)، لطفا به آموزش های مقدماتی PHP مراجعه کنید.
نویسنده: مرتضی
زمان: ۲۱:۲۱:۰۹ - تاریخ: ۱۳۹۲/۱۰/۰۵
سلام و ممنون به خاطر آموزش های خوبتان
من چند تا گزینه رادیویی دارم و می خوام با انتخاب هر کدوم از اونها یه متن یا لینکی نمایش داده بشه.
ممنون می شم کمکم کنید.
پاسخ: 
سلام
به روش های مختلف انجام این کار امکانپذیر است، منتها باید تا حدودی با جاوا اسکریپت آشنا باشید، به طور مثال می توانید یک بلاک بسازید و آن را با CSS مخفی کنید، اگر دکمه رادیویی انتخاب شد، وضعیت display آن را از none به block تغییر دهید، مثال:
<style type="text/css">
.hidden{
display:none;
}
</style>
<script type="text/javascript">
function showHidden(id){
document.getElementById(id).style.display = 'block';
}
</script>
<input type="radio" onclick="showHidden('hidden');">
<div class="hidden" id="hidden">
این یک متن آزمایشی است.
</div>
نویسنده: مجتبی
زمان: ۱۴:۵۸:۱۹ - تاریخ: ۱۳۹۲/۱۰/۰۷
سلام
چطوری میشه اگه یک دکمه رادیویی رو روش کلیک می کردیم یک منوی بازشونده ی دیگر به منو ها اضافه می شد؟
پاسخ: 
سلام
می توانید به دکمه رادیویی یک رویداد از نوع onclick نسبت دهید که یک تابع را فراخوانی کند، این تابع نیز یک بلاک div را نمایش دهد (dispaly block) که در حالت عادی به صورت display none است و داخل آن یک منو از نوع select option باشد.
برای کسب اطلاعات بیشتر لطفا به آموزش های مقدماتی جاوا اسکریپت مراجعه کنید.
نویسنده: آریا خدادادی
زمان: ۱۳:۵۴:۲۳ - تاریخ: ۱۳۹۲/۱۰/۰۸
با تشکر از آموزش های مفید و خلاصه و البته پربار
میخواستم بگم اگر امکان داره برای تحت اختیار گرفتن اطلاعات ارسالی سمت فایل php چه باید کرد.
ممنون
پاسخ: 
باید روش کار با متدهای POST یا GET را فرا بگیرید که جزء مباحث مقدماتی PHP محسوب می شوند.
نویسنده: مهدیه
زمان: ۲۲:۰۶:۴۸ - تاریخ: ۱۳۹۲/۱۰/۰۹
با سلام
من یک قالب با html زدم حال می خوام فرم های جدا با php بنویسم و از این قالب استفاده کنم بدون اینکه مجدداً در هر فرمی بنویسم فقط صداش بزنم میشه من را راهنمایی کنید؟
با تشکر
پاسخ: 
سلام
PHP یک زبان HTML Embed است یعنی می توانید قالب HTML را با خروجی PHP ترکیب کنید، به طور مثال در قسمتی که فرم باید چاپ شود، کدهای PHP را درج کنید که خروجی آنها (متناسب با پارامتر درخواستی کاربر) فرم HTML باشد، مثال ساده:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>فرم</title>
</head>
<body>
<?php
@$user_param = $_GET['param'];
if($user_param = 1){
echo '<form name="form-1"></form>';
}
elseif($user_param = 2){
echo '<form name="form-2"></form>';
}
?>
</body>
</html>
همچنین به جای درج مستقیم می توانید از include استفاده کنید.
روش حرفه ای تر در این خصوص نوشتن یک به اصطلاح موتور مترجم است که قالب HTML را به همراه تگ های اختصاصی (چیزی شبیه سیستم سرویس های وبلاگی) بگیرد و پس از تجزیه تحلیل خروجی نهایی را برگرداند (نیاز به تجربه و مهارت بالا در PHP است).
نویسنده: نسرین رفعتی
زمان: ۱۵:۰۸:۳۳ - تاریخ: ۱۳۹۲/۱۱/۱۵
شما خاصیت نامبر رو معرفی نکردین من از این صفت استفاده کردم ولی هم میشه داخلش عدد وارد کرد هم رشته چرا اینطوریه ؟ مگه نباید فقط مقدار عددی بگیرد؟
پاسخ: 
نوع number مربوط به HTML نسخه 5 است و در حال حاضر در اکثر مرورگرها پشتیبانی نمی شود!
نویسنده: محمد رضا
زمان: ۰۱:۴۵:۵۳ - تاریخ: ۱۳۹۲/۱۱/۱۸
با سلام
ميخواستم بدونم براي تنظيم و تعيين حداقل كاراكتر در يك فيلد بايد چه چيزي قرار بدهيم در تگ input در form مثلا ميخواهم حداقل 4 كاركتر وارد كنند و مورد بعدي اينكه در فيلد فقط اعداد وارد كنند و اينكه چه جوري ميشه تنظيم كرد كه مثلا در يك فيلد عددي ، عدد وارد شده نبايد كمتر از 10000 باشد
با تشكر
پاسخ: 
سلام
با تگ های ساده HTML و خاصیت های آن نمی توانید به اهداف مورد نظر دست پیدا کنید! باید از اعتبارسنجی سمت کاربر (با استفاده از JavaScript و برای حالت نمایشی) و اعتبار سنجی سمت سرور (با استفاده از PHP و برای اطمینان نهایی) استفاده کنید.
- اعتبارسنجی حداقل چهار کاراکتر
مثال جاوا اسکریپت:
<script type="text/javascript">
function checkLeng(){
elm = document.getElementById('test');
if(elm.value.length < 4){
alert('تعداد کاراکترها نباید از 4 کمتر باشد');
}
else{
return true;
}
return false;
}
</script>
<form name="form" action="index.php" onsubmit="return checkLeng()">
<input type="text" size="20" name="test" id="test">
<input type="submit" value="ارسال">
</form>
تابع برای PHP:
<?php
function validStrLen($str, $min){
$len = strlen($str);
if($len < $min){
return FALSE;
}
return TRUE;
}
?>
برای مورد دوم آموزش جداگانه در سایت و در وب وجود دارد، در قسمت جستجو عبارت "اعتبارسجی" را وارد کنید، برای مورد آخر هم کافی است مقادیر را با عملگرهای <> (در جاوا اسکریپت و PHP) به کمک دستورات شرطی بررسی کنید.
نویسنده: محمد رضا
زمان: ۲۳:۱۳:۳۰ - تاریخ: ۱۳۹۲/۱۱/۲۴
با سلام
در نوع file برای آپلود یک فایل به سرور كه فايل جهت آپلود در هاست فراخوانی و پردازش مي شود
كد php زير را نوشته ، اما ميخواهم محدوديت فرمت ها و حجم حداكثر 1000 كيلو بايت تعيين كنم
لذا مي خواستم كمكي كنيد كه در كد چه تغييري بايد ايجاد كنم و اينكه بصورت نمونه چند فرمت و تعيين حجم را به فرم اضافه مي نماييد
<?php
$file_name = $_FILES['UploadedFile']['name'];
$target_path = "uploads/".$file_name;
if(move_uploaded_file($_FILES['UploadedFile']['tmp_name'], $target_path)) {
echo " فایل ". $file_name ." با موفقیت آپلود و ارسال شد ";}
else {
echo " متاسفانه مشکلی در حین عملیات آپلود و ذخيره فايل رخ داد ، لطفا مجددا امتحان کنید
<br> jpeg , gif , png , pdf , html , doc , ppt & pps , zip , swf , mp3 , txt ,
<br>

";}
?>
با تشكر
پاسخ: 
سلام
لطفا عبارت "آپلود" را در قسمت جستجوی سایت وارد کنید، در آموزشی جداگانه در این خصوص به همراه نمونه کد صحبت کرده ایم.
نویسنده: مجتبی
زمان: ۱۸:۱۴:۴۶ - تاریخ: ۱۳۹۲/۱۱/۲۹
سلام
فقط همین رو یاد دادین خیلی چیز دیگه هست که یاد
ندادین مثل:
مقدار number در input, مقدار range در input,
مقدار url در input, مقدار email در input,
و....
من دوست دارم از سایتی چیز یاد بگیرم که کامل
باشه سایت شما فقط توی آموزش تگ form چیز کم یاد نداده توی همه ی آموزش هاش کم یاد داده.
همه ی آموزش ها رو زیادترکنید. تگ frame رو هم اصلا یاد ندادین! اونم یاد بدین!!
با تشکر
پاسخ: 
سلام
مواردی که اشاره کرده اید جزء HTML نسخه 5 هستند که هنوز بسیاری از آنها در خیلی از مرورگرها پشتیبانی نمی شوند.
امکان پوشش صددرصدی مباحث وجود ندارد، مطئنا در هیچ سایتی نیز به صورت صددرصد تمام مباحث ارائه نمی شود، حتی مطالب سایت های خیلی قدیمی و معتبر نیز از دید برخی کاربران کافی نیستند!
نویسنده: Hossein
زمان: ۱۷:۵۵:۱۰ - تاریخ: ۱۳۹۲/۱۲/۰۴
با درود
اطلاعات مفيد شما مورد استفاده قرار مي گيرد و سپاسگزاريم
در مورد
<form>
Action
Input
Textarea
من هر كارى مي كنم كه مثلا مطلب ( اين يك پيام ازمايشى است) را كه در Textarea نوشته ام ، را در فايل به ادرس زير ببينم،
Http:///www.khorsand.org/fa/01userpeyam.php
موفق نميشوم و ظاهر نمي گردد، ميشه كد هاى انرا كامل برايم بنويسيد؟ و اينكه در چه قسمت از صفحه فايل بايد ظاهر گردد (بالا - يا - وسط صفحه -يا پايين صفحه ) ؟
نميدانم چرا گاهى در دنباله لينك يا ادرس فايل ظاهر ميشود
ممنون
پاسخ: 
سلام
دوست گرامی لطفا آموزش های مقدماتی PHP را گام به گام مطالعه کنید، کاری که می خواهید انجام دهید نیازمند آشنایی با مفاهیم اولیه از جمله روش دریافت مقادیر از طریق متدهای GET و POST و... است، به نظر آشنایی شما با این مباحث و در کل PHP خیلی زیاد نیست!
نویسنده: مریم
زمان: ۱۳:۳۰:۱۸ - تاریخ: ۱۳۹۲/۱۲/۲۰
با سلام و تشکر از سایت خوبتون
میخوام چند تا دکمه رادیویی داشته باشم که بر اساس مقادیری که از دیتابیس میگره، یکی از اوناها انتخاب شده باشه. چه طور می تونم این کار رو بکنم؟
ممنون
پاسخ: 
سلام
لطفا از طرح سوالات کلی خودداری کنید!
پیش از هر چیز باید یک ستون در دیتابیس داشته باشید که به فرض حالت checked دکمه رادیویی را با مقادیر 0 و 1 مشخص کند، سپس در هنگام گرفتن خروجی از اطلاعات دیتابیس و ساخت کدهای HTML، در حلقه while مقادیر ستون مربوطه را بررسی کنید، اگر 1 بود قسمت input را با پارامتر
checked="checked"
چاپ کنید.
نویسنده: الیاس
زمان: ۲۰:۳۱:۰۰ - تاریخ: ۱۳۹۳/۰۱/۰۹
با سلام
می خواستم یه سوال بکنم
<select name="select-option">
<option></option>
</select>
چطوری می شه با جاوااسکریپت به این کد <option></option> اضافه کرد.
ممنون
پاسخ: 
سلام
به تگ select یک id اختصاص و از نمونه کد زیر استفاده کنید:
<select id="selectElementId"></select>
<script type="text/javascript">
var min = 1;
max = 10;
select = document.getElementById('selectElementId');
for(var i = min; i<=max; i++){
var opt = document.createElement('option');
opt.value = i;
opt.innerHTML = i;
select.appendChild(opt);
}
</script>
نکته: قسمت opt.value پارامتر value و قسمت opt.innerHTML مقدار نمایشی تگ option را ست می کند.
نویسنده: امیر
زمان: ۱۴:۱۹:۵۸ - تاریخ: ۱۳۹۳/۰۱/۱۲
سلام من یک برنامه دارم مینویسم که 15 تا سوال داره و باید به صورت دستی یک عدد بهش بدم و به اندازه اون عدد از اون سوالات به صورت تصادفی نمایش داده بشه. این کار رو تا اینجا کردم ولی وقتی میخوام تعداد جواب های درست رو بشمارم به مشکل برمیخورم . این برنامه که اینجا میزارم بعد از خواندن شرط ها یکی از خط ها رو نمیخونه. اگه امکان داره کمک کنید ممنون میشم.
حذف شد
پاسخ: 
سلام
حل مشکل نیاز به بررسی های بیشتر دارد، لطفا این نوع موارد را با ارسال فایل ها به آدرس ایمیل ما (در بخش تماس موجود است) مطرح کنید.
نویسنده: ثریا
زمان: ۱۳:۰۶:۳۲ - تاریخ: ۱۳۹۳/۰۲/۱۰
سلام . واسه این که مثلا مشخصات 10 دانشجو رو بگیریم از جمله نام نام خانوادگی و معدل چجور برنامه نویسی میشه ؟
پاسخ: 
سلام
برای این کار باید علاوه بر HTML به یک زبان سمت سرور مانند PHP مسلط باشید.
نویسنده: محمد
زمان: ۱۷:۳۱:۱۱ - تاریخ: ۱۳۹۳/۰۲/۲۹
با سلام
وقتی با کلیک روی submit فرم را ارسال کردیم با هر بار رفرش در صفحه دوباره اطلاعات دوباره ارسال می شود و رکوردهای تکراری ذخیره می کند
برای جلوگیری از این کار چی باید کرد؟ :)
پاسخ: 
سلام
این رفتار طبیعی مرورگرها است که در صورت رفرش یک صفحه، در صورتی که مقادیری از طریق متد POST ارسال شده باشد را مجددا submit می کنند، اما برای جلوگیری از آن باید پس از ارسال فرم با یک دستور header در PHP کاربر را به صفحه اولیه یا هر صفحه دیگر مد نظر هدایت کنید!
مثال:
header('Location: http://www.example.com/');
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





7 × 1
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form اریا
در:
سلام و درود بزرگوار چه دستوری باید بنویسیم تا فقط مقدارهای خاصی از ارایه بتونیم نمایش بدیم. مثلا یک ارایه 6 خونه ای...
۱۶:۴۷:۳۱ ۱۳۹۹/۰۴/۲۰

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

form سجاد
در:
دمتون گرم. خیلی زحمت کشیدید
۱۳:۴۳:۱۱ ۱۳۹۹/۰۴/۲۰

form KhashayarPrk
در:
سلام. میخوام الگو تمام کلمات داخل پرانتز رو بدون پرانتز بریزه ارایه با این کد فقط یک پرانتز رو جواب میده.
۱۳:۱۳:۴۷ ۱۳۹۹/۰۴/۲۰

form Oliver
در:
چطوری دستور background رو برای جدلمون عکسش رو تنظیم کنیم و بهش طول و عرض بدیم
۱۶:۰۷:۱۷ ۱۳۹۹/۰۴/۱۸

form محمد
در:
با عرض سلام ببخشید چطوری میتونم واسه اشتراک کاربر انقضا بزارم مثلا یک ماه داخل دیتابیس ردیف تایم رو درست کردم البته تاریخ رو تبدیل...
۱۹:۱۴:۵۹ ۱۳۹۹/۰۴/۱۵

form آیدا
در:
سلام من در حال طراحی با html هستم اما طبق فیلم آموزشی پیش میرم از یه جایی به بعد هم تغییرات اعمال نمیشه...
۲۲:۴۷:۴۴ ۱۳۹۹/۰۴/۱۴

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

form sina2000
در:
با سلام و خسته نباشید طبق کد زیر استفاده میگه متغیر Pdc برای PDO است لطفا نمونه کد برای لایبرری...
۱۵:۰۳:۵۱ ۱۳۹۹/۰۴/۱۳

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

form ترنم
در:
سلام وقتتون بخیر ببخشید من کدهای مربوط منو و زیر منو رو نوشتم ولی موقع اجرا منوی اصلی رو میاره ولی زیر منوها رو...
۱۱:۰۶:۲۹ ۱۳۹۹/۰۴/۱۱

form ا
در:
سلام چرا وقتی مطالب مربوط که تو وبلاگم هست رو جستجو میکنم نمیاره ؟؟؟
۲۰:۳۱:۰۸ ۱۳۹۹/۰۴/۰۷

form amir
در:
سلام من اگه بخوام با وارد کردن یه id داخل یک text کل اون ردیف پاک بشن باید چه کنم مثلا یک text دریافت میکنم...
۰۱:۴۸:۰۵ ۱۳۹۹/۰۴/۰۷

form محمدباقر حسیبیان
در:
من این مشکل برام پیش اومده که موقع ورود به پروژه م توی لوکال هاست wamp صفحه سفیده و هیچی رو نشون نمیده و کد...
۱۶:۴۲:۳۸ ۱۳۹۹/۰۴/۰۶

form ...
در:
سلام دو سایت نوشته ای مربوط به من رو چند سال قبل لینک دانلود قرار دادن من ازشون خواستم بردارنش ولی اینکارو نکردن سایت...
۱۷:۲۶:۴۲ ۱۳۹۹/۰۴/۰۵
form مجتبی
در:
سلام میشه یک کد جاوا رو به php تبدیل کرد تا لود سایت سریع تر بشه؟
۱۳:۰۴:۲۳ ۱۳۹۹/۰۴/۰۴
form متین
در:
سلام ؛ من تازه شروع به یادگیری کردم ؛ مطلب بسیار کاربردی بود ؛ ممنون از شما دوست عزیز.
۰۱:۵۰:۰۵ ۱۳۹۹/۰۴/۰۴
form mahdi
در:
سلام استاد عزیز و گرامی امیدوارم که حالتون خوب باشه ، اگه براتون ممکنه لطفا یه آموزش خوب در زمینه وردپرس بهم معرفی کنید ،...
۲۱:۴۸:۱۳ ۱۳۹۹/۰۴/۰۳
form امید
در:
در برنامه نویسی کاربر با چه دستوری میتواند به صفحه اصلی برگردد
۱۹:۰۶:۵۶ ۱۳۹۹/۰۴/۰۳
form ali
در:
با سلام من یک پروژه طراحی کردم میخوام که وقتی کاربر روی ادامه مطلب کلیک کرد در خود صفحه بقیه مطالب را ببینه...
۱۸:۴۷:۲۲ ۱۳۹۹/۰۴/۰۳
form علی
در:
سلام و تشکر از زحمات ارزشمند شما احتراما بنده امروز از یک شماره تلفن ثابت از طریق یک رایانه و یک موبایل به طور...
۱۸:۰۱:۱۰ ۱۳۹۹/۰۴/۰۳
form oscar
در:
درود. اگر بخوایم در نمایش تاریخ و زمان که به صورت لحظه ای خودش در صفحه رفرش میشه، فقط عبارت " Mon Jun 22 2020...
۱۵:۵۹:۳۲ ۱۳۹۹/۰۴/۰۲
form علی
در:
با سلام چطور میشه فقط یک صفحه مورد نظرمون رفرش بشه نه همه صفحات سایت
۰۰:۰۳:۴۱ ۱۳۹۹/۰۳/۳۱
form Farzad
در:
الان وقتی فایل رو میخواد دانلود بکنه از خودش فایل میسازه ، به این صورت یعنی بعد از پوشه file هر پوشه ای باشه...
۱۸:۵۶:۲۱ ۱۳۹۹/۰۳/۳۰
form Farzad
در:
سلام ، خسته نباشید من فایل هایی که در هاست میزارم به این شکل هست: یعنی مشخص نیست فایل ها تو چه پوشه...
۱۳:۳۳:۴۰ ۱۳۹۹/۰۳/۳۰
form شیما طیبی
در:
سلام خیلی مطلب مفیدی بود . همیشه به وبلاگ نویسی به چشم یه کار خسته کننده نگاه میکردم ولی خب یه مقدار نظرم تغییر کرد....
۲۳:۵۲:۳۲ ۱۳۹۹/۰۳/۲۹
form احسان
در:
سلام من یک کد اسکریپت دارم که به صورت عددی تبدیل شده است. میخواستم بپرسم چطوری میتونم اسکریپت به حالت اولیه نوشته شده برگردانم و...
۲۱:۰۲:۱۳ ۱۳۹۹/۰۳/۲۷
form علی
در:
ممنون از پاسختون اما روش بالا جهت دانلود فایل کاربرد داره . من میخواستم به صورت استریم ویدئو پخش بشه اما آدرس مستقیم ویدئو...
۰۰:۳۷:۴۶ ۱۳۹۹/۰۳/۲۷
form محمد
در:
سلام مجدد ببخشید طبق فرمایش شما من در دیتابیس جدولی ساخته بودم فقط مشکلم اینجاست چطوری میتونم توسط کوکی یا سیشن با تابع دیت انقضا...
۲۲:۳۸:۰۳ ۱۳۹۹/۰۳/۲۵
form محمد
در:
با عرض سلام ببخشید چطوری میشه واسه اشتراک خریدن زمان ۱ ماهه گذاشت که بعد از گذشت ۱ ماه پیام بده دوباره اشتراک تهیه کنید...
۱۳:۱۳:۵۵ ۱۳۹۹/۰۳/۲۵
form ehsan
در:
سلام و خسته نباشید. من قالب جدید تهیه کردم ولی ایکن هاش کار نمیکنن. اگه وبلاگم نگا کنین متوجه میشین. ایکن شبکه های اجتماعی...
۱۷:۱۹:۴۰ ۱۳۹۹/۰۳/۲۴
در انتظار بررسی: ۰