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
» آشنایی با مفهوم Semantic در 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 لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




1 × 3
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form adel
در:
سلام با تشکر از سایت خوب شما. یه سوال داشتم چگونه تمام این کدها را در جاوا اسکریپت همزمان قرار دهیم. من مثلا دستور این...
۲۱:۲۵:۴۰ ۱۳۹۸/۰۸/۲۴

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

form پرتو
در:
با عرض سلام و خسته نباشید امیدوارم حالتون خوب باشه من دو سه سال پیش وبلاگم رو حذف کردم ایا امکانش هست برگرده؟ ادرس...
۱۴:۵۵:۵۲ ۱۳۹۸/۰۸/۲۰

form علی
در:
سلام من نمی تونم html tag رو چطور در وبلاگم قرار بدم وبلاگم اینه
tagtak.blog.ir
۱۰:۲۳:۳۴ ۱۳۹۸/۰۸/۲۰

form حمید
در:
سلام. خسته نباشید. من میخاستم استایل فیلدهای فرمم رو تغییر بدم منتهی نمیدونم از چه کدهایی باید استفاده کنم. برای اینکه فرمی به شکل...
۱۰:۳۶:۱۹ ۱۳۹۸/۰۸/۱۹

form سمیه
در:
سلام ممنون بابت آموزش مفیدتون توی تگ ها هرچیزی که در تگ head قرار بگیره نمایش داده نمیشه، اما ممنون میشم...
۲۰:۴۹:۲۳ ۱۳۹۸/۰۸/۱۷

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

form mohamad
در:
سلام و خسته نباشید ، توی فرمی که ساختم چند تا drop down دارم که میخوام با php براشون شرط بذارم به طوری...
۱۳:۵۱:۳۴ ۱۳۹۸/۰۸/۱۰

form رضا
در:
خسته نباشید این جلسه آخر html بود؟؟؟؟
۰۱:۱۵:۰۷ ۱۳۹۸/۰۸/۱۰

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

form حجت
در:
خیلی ممنونم از لطف شما. اوکی شد.
۱۰:۲۸:۳۵ ۱۳۹۸/۰۸/۰۶

form میلاد
در:
آشنایی نسبی با css, php و ajax دارم و نمیخام از library های موجود در نت استفاده کنم. خواستم با همین متد که انصافا روان...
۲۳:۲۲:۵۵ ۱۳۹۸/۰۸/۰۵

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

form raha
در:
سلام وقتتون بخیر ببخشید علامت @ در کل به چه معناست ممنون میشم پاسخ دهید
۲۰:۱۲:۵۹ ۱۳۹۸/۰۸/۰۵

form میلاد
در:
باسلام تشکر از مطالب روان و پرکاربردتان. در خصوص آموزش مذکور، نحوه و ترفند نمایش محور عمودی در سمت چپ نمودار (مشابه...
۰۲:۳۸:۴۰ ۱۳۹۸/۰۸/۰۵