فرم های ورود اطلاعات در HTML

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

مثال - خودتان امتحان کنید

ایجاد فیلدهای متنی
چگونه یک فیلد متنی ایجاد کنیم. کاربر می تواند داخل فیلد متنی یک متن دلخواه تایپ کند.

ایجاد فیلد کلمه عبور(پسورد)
چگونه یک فیلد برای ورود کلمه عبور ایجاد کنیم.

(در انتهای این صفحه مثال های بیشتری آورده شده است.)

فرم های HTML

Wiki

از فرم های HTML برای ارسال اطاعات به سرور استفاده می شود.

یک فرم می تواند شامل عناصر ورودی(Input) مانند فیلد های متنی، چک باکس ها، رادیو باتن ها، دکمه های ارسال، لیست های انتخاب و ... باشد.

از تگ <form> برای ایجاد یک فرم HTML استفاده می شود:

<form>
.
input elements
.
</form>

فرم های HTML و عناصر ورودی

Wiki

یکی از مهمترین عناصر فرم، عنصر input است.

در این عنصر خصوصیتی به نام type به تعیین نوع اطلاعات ورودی اختصاص دارد و می توان آن را با یکی از مقادیر زیر تنظیم کرد:

text , checkbox , radio , password , hidden , submit , reset , button , file , image

در ادامه به شرح بعضی از typeهای پرکاربرد بالا خواهیم پرداخت:

فیلد input از نوع Text

Wiki

اگر می خواهید که بازدیدکننده، اطلاعاتی از قبیل متن، اعداد و ... را وارد کند، خصوصیت type را با مقدار "text" تنظیم کنید:

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

کد HTML بالا به صورت زیر در مرورگر نشان داده می شود:

توجه: تگ فرم در مرورگر قابل رویت نیست. همچنین توجه داشته باشید که یک فیلد متنی به صورت پیش فرض به اندازه 20 کاراکتر عرض دارد.

نحوه نمایش عناصر ورودی در مروگر نمایش داده نمی شود.

اگر بخواهیم مقداری بیش از 20 کاراکتر را برای عنصر متنی مشخص کنیم چه کار می کنیم.

فیلد input از نوع Password

Wiki

اگر می خواهید که بازدیدکننده، کلمه عبور را وارد کند، خصوصیت type را با مقدار "password" تنظیم کنید:

<form>
Password: <input type="password" name="pwd" />
</form>

توجه: کاراکترها در فیلد پسورد به صورت ماسک شده نمایش داده می شوند.(ستاره ای یا دایره ای)

فیلد input از نوع Radio

Wiki

اگر می خواهید که بازدیدکننده، فقط یک گزینه را از بین چند گزینه محدود انتخاب کند، خصوصیت type را با مقدار "radio" تنظیم کنید:

<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

فیلد input از نوع Checkbox

Wiki

اگر میخواهید که بازدیدکننده، یک یا چند گزینه را از بین چند گزینه محدود انتخاب کند، خصوصیت type را با مقدار "checkbox" تنظیم کنید:

فیلد input از نوع Submit

Wiki

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

برای تعیین مقصد ارسال اطلاعات باید درون تگ form از شناسه ای به نام action استفاده کنید. مقدار شناسه action آدرس یا url فایلی است که به دریافت و سپس پردازش اطلاعات دریافتی خواهد پرداخت.

معمولا فایلهای بخش action برنامه ها و اسکریپت های نوشته شده با زبانهای cgi مانند ASP.NET ، Perl ، PHP و ... بوده و وظیفه آنها دریافت اطلاعات فرمها و سپس پردازش آنها می باشد:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

اگر در فیلد متنی بالا کاراکترهایی را تایپ کنید و روی دکمه "submit" کلیک کنید، مرورگر، ورودی شما را به صفحه ای به نام "html_form_action.php" ارسال خواهد کرد.

مثال - خودتان امتحان کنید

Wiki

Radio button
چگونه یک radio button ایجاد کنیم.

Checkbox
چگونه یک checkbox ایجاد کنیم. کاربر می تواند در انتخاب مختار باشد.

drop-down
چگونه یک لیست کشویی یا drop-down ساده ایجاد کنیم.

Drop-down با آیتم انتخاب شده از قبل
چگونه یک لیست کشویی با مقدار انتخاب شده از قبل ایجاد کنیم.

Textarea
چگونه یک کنترل ورودی متن چند خطه ایجاد کنیم. در یک text-area کاربر می تواند تعداد نامحدودی کاراکتر تایپ کند.

button
چگونه یک دکمه برای کلیک کردن ایجاد کنیم.

مثال - خودتان امتحان کنید(Form)

Fieldset
چگونه یک لبه یا border، اطراف عناصر داخل یک فرم ایجاد کنیم.

فرمی با دو فیلد متنی و یک دکمه submit
چگونه یک فرم با دو فیلد متنی و یک دکمه submit ایجاد کنیم.

فرمی با دو checkbox
چگونه یک فرم با دو checkbox و یک دکمه submit ایجاد کنیم.

فرمی با دو radio button
چگونه یک فرم با دو radio button و یک دکمه submit ایجاد کنیم.

تگ های فرم HTML

Wiki

تگ	توضیحات
<form>	یک فرم HTML برای ورودی کاربر تعریف می کند.
<input />	یک کنترل ورودی تعریف می کند.
<textarea>	یک کنترل ورودی متن چند خطه تعریف می کند.
<label>	برای یک عنصر ورودی مانند متن یک برچسب یا lable تعریف می کند.
<fieldset>	برای یک فرم HTML یک لبه یا border تعریف می کند.
<legend>	برای یک عنصر fieldset یک عنوان یا caption تعریف می کند.
<select>	یک لیست کشوئی یا (drop-down list) تعریف می کند.
<optgroup>	در لیست کشوئی یا (drop-down list) یک گروه از آیتم های مرتبط به هم را تعریف می کند.
<option>	در لیست کشوئی یا (drop-down list) یک آیتم یا option تعریف می کند.
<button>	یک دکمه برای کلیک کردن تعریف می کند.

: نوشته شده توسط امیر پهلوان صادق; بازدید: 90646

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

دیدگاه‌ها

# saeed

سلام. واقعا ممنون از سایت آموزشی خوبتون.
میشه کدهای موجود در html_form_actio n.php برای این مثال به نمایش بزارید.

+4 # rezajm

سلام.لطفا در مورد تگ hidden توضیح دهید.در پارگراف اول متن بالا از این تگ اسم برده شده ولی در موردش هیچ توضیحی داده نشده؟

# mans

سلام ببخشید من برای اینکه فرمم مرتب و تمیز باشه اونو میخوام بزارم تو جدول اما لیست کشویی تو جدول کار نمیکنه باید چیکار کنم؟ کمکم کیند

+2 # امیر پهلوان صادق

سلام، برای طراحی فرم پیشنهاد می شه از Div و Span استفاده کنید، لطفا به مثال زیر توجه کنید:
beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_form_submit

+1 # بهرام

باسلام و تشکر از سایت پربار شما لطفا نرم افزار دریم ور رو در سایت قرار دهید.

+2 # نفیسه بختیاری

ببخشید من خیلی سوال میپرسم
داخل فیلم آموزش CSS گفتین برای checkbox ویژگی name رو با یک مقدار یکسان تنظیم می کنیم ولی داخل قسمت خودتان امتحان کنید چرا مثل هم نیستن ؟
beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_form_checkbox

+3 # امیر پهلوان صادق

سلام، بله حق با شماست، زمانی که به تعداد بیشتر از یک چک باکس احتیاج داریم، ویژگی name را باید با یک مقدار یکسان بصورت زیر تنظیم کنیم:
<input type="checkbox" name="vehicle[] " value="Bike" />
<input type="checkbox" name="vehicle[] " value="Car" />
به این ترتیب، سمت سرور و یا سمت PHP بصورت زیر می توانیم، چک باکس های انتخاب شده را مشخص نماییم:
if (isset($_GET["vehicle"]))
{
foreach($_GET[" vehicle"] as $report_id){
echo "$report_id was checked! ";
}
}

+3 # نفیسه بختیاری

سلام اگه بخوایم با کلیک روی تگ از نوع button به جایی لبنک بشیم چطوریه؟

+4 # امیر پهلوان صادق

سلام
راه حل اول:
<button onclick="window.location.href='beyamooz.com'">Beyamooz.com</button>
راه حل دوم:
<button onClick="redirect()">Beyamooz.com</button>
<script type="text/javascript">
function redirect()
{
var url = "http://www.beyamooz.com";
window.location(url);
}
</script>

+3 # نفیسه بختیاری

سلان خسته نباشید
داخل قسمت خودتان امتحان کنید آخر برای drop_down چرا داخل تگ form خصوصیت action رو نوشتین ولی مقدار نداره ؟کاراییش چیه ؟
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

+3 # امیر پهلوان صادق

سلام
action: اگر کاربر روی دکمه ذخیره کلیک کرد و یا submit فرم اتفاق افتاد، اطلاعات فرم HTML به صفحه ای که در این خصوصیت مشخص شده ارسال می شود.(به صورت پیش فرض صفحه جاری در نظر گرفته می شود)
با ویژگی action در لینک زیر بیشتر آشنا شوید:
beyamooz.com/php/80-basic/71-%D9%81%D8%B1%D9%85-%D9%87%D8%A7%DB%8C-html-%D8%AF%D8%B1-php

+1 # نفیسه بختیاری

اگه در تگ Option ویژگی value را مقداردهی نکنیم، اشکالی داره ؟ کاراییش چیه ؟

+1 # امیر پهلوان صادق

توجه داشته باشید که از تگ select برای نمایش یک لیست کشویی (دراپ دان لیست) استفاده می شود که برای نمایس آیتم های آن مجبوریم از تگ Option استفاده نماییم.
برای تنظیم ویژگی value اجباری در کار نیست. اما اگر تصور فرمایید که لیست کشویی ما "استان" باشد و قرار باشد، بعد از انتخاب یکی از گزینه ها، در پایگاه داده ذخیره شود، آن موقع شما می خواهید عنوان گزینه انتخاب شده یا Value را در پایگاه داده ذخیره کنید...!
مسلما برای مثال استان، ویژگی Value با شناسه استان ها تنظیم شده است. و در این صورت ما بجای ذخیره عنوان Optionها، Value ها را ذخیره خواهیم کرد.
بنابراین اگر می خواهید اصولی پیش بروید، حتما ویژگی Value را مقدار دهی نمایید.

+4 # shadmehr

به نقل از احسان عباسی:

سلام.
در خصوصیت action، آدرس فایلی در سرور که قرار است اطلاعات به آن ارسال شوند قرار می گیره.
برای داینامیک کردن سایت باید از PHP یا ASP.net استفاده کنید.

می شه لطفا یه مثال هم بزنید که مثلا ویژگی action با چه چیزی تنظیم می شه؟ می دونم واسه چه کاریه، فقط می خواهم ببینم مثلا باید آدرس چه چیزی و باید اون جا بنویسم.

+3 # امیر پهلوان صادق

لطفا به مثال زیر توجه کنید:
<form name="input" action="html_form_action.php" method="get">
نام: <input type="text" name="FirstName " value="Amir"/><br/>
فامیل: <input type="text" name="LastName" value="PahlevanSadegh"/><br/>
<input type="submit" value="Submit"/>
</form>
توجه داشته باشید، بعد از اینکه کاربر اطلاعات فرم را تنظیم می کند و روی دکمه "Submit" کلیک می کند، اطلاعات وارد شده به فایلی که در ویژگی action مشخص کرده اید بعنی "html_form_acti on.php" ارسال می شود. در واقع داخل فایل "html_form_acti on.php" بنحوی برنامه نویسی کرده ایم که مقادیر فیلدهای "نام" و "فامیل" را گرفته و عملیات مورد نظرمان مثل درج در جدول کاربران را انجام می دهیم.

+2 # shadmehr

سلام ببخشید خصوصیت action در فرم ورود اطلاعات واسه چه کاریه؟ ......و بعد چجوری وبسایت رو باید داینامیک کرد؟

+2 # احسان عباسی

سلام.
در خصوصیت action، آدرس فایلی در سرور که قرار است اطلاعات به آن ارسال شوند قرار می گیره.
برای داینامیک کردن سایت باید از PHP یا ASP.net استفاده کنید.

+2 # مهدی آریا

سلام و خسته نباشید
۱-بنده یک دوره html از شرکت دیگری خریداری و استفاده کردم. البته نواقصی داره بخصوص در بخش مربوط به فرمها « ورودی اطلاعات تاریخ تولد کاربر » آیا در دوره آموزشی شما این قسمت آموزش بصورت کامل وجود داره ؟
۲-برای کار با html5 به چه ابزارهایی نیاز داریم

+2 # امیر پهلوان صادق

عرض سلام و ادب
یکی از مهمترین مزیت های دوره های آموزشی بیاموز، این است که آموزش های داخل فیلم بر اساس مطالب رایگان بیاموز ارائه شده است و می توان این اطمینان را داد که به تمام موارد مقدماتی تا پیشرفته پرداخته شده است.
اما برای آموزش کامل HTML دو محصول زیر پیشنهاد می شود.
1- فیلم آموزش HTML:
beyamooz.com/product/web-design/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-html
2- فیلم آموزش HTML5:
beyamooz.com/product/web-design/%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-html5

+3 # دماوند

به نام خدا ، با سلام و احترام ، سایت بسیار مفیدی دارید
دو تا سوال دارم ممنون میشم اگر که راهنمایی کنید
سوال اول: در تگ input فرق میان خاصیت id و name چیست و هر کدام چه کاربردهایی دارند؟
سوال دوم: در جاوا اسکریپت چطور میتوان روی انتخاب شدن یا نشدن checkboxها و دکمه های رادیوی کنترل داشت؟

باسپاس از مدیریت خوب سایت

+3 # احسان عباسی

سلام ممنون از شما.
پاسخ سوال اول: کاربرد id که معلوم هست و برای استایل دادن css استفاده میشه. اما کاربرد name این هست که مثلا شما اگه یک input که در داخل یک فرم قرار داره رو بخواهید اطلاعاتش رو با متد های post یا get به سرور ارسال کنید، حالا در سمت سرور وقتی می خواهید این اطلاعات رو بگیرید، به یک نام احتیاج دارید، این name این نقش رو بازی میکنه.

پاسخ سوال دوم: برای چک باکس ها می تونید از خصوصیت checked استفاده کنید که دو مقدار true و false رو میگیره. به مثال زیر توجه کنید:
www.w3schools.com/jsref/tryit.asp?filename=tryjsref_checkbox_checked2

برای دکمه های رادیویی هم میتونید از خصوصیت checked استفاده کنید. به مثال زیر توجه کنید:
www.w3schools.com/jsref/tryit.asp?filename=tryjsref_radio_checked2

+4 # King03

چه کدی بزنیم تا مشخصات فرم طرف برای ما ارسال شه؟ از راهنمایی شما متشکریم

+4 # مهرداد صلاحی

با سلام.
سؤالتون کمی ایراد مفهومی داره. برای ارسال فرم شما باید از تگ form و همینطور از کنترل‌های مربوطه استفاده کنید. در نهایت برای ارسال فرم باید از تگ input‌ با نوع submit استفاده کنید. کد زیر رو ببینید:
<form method="post" action="">
<input type="text" name="firstname " >
<input type="text" name="lastname" >
<input type="submit" name="save" value="send" >
</form>

+2 # پوریا

سلام . خسته نباشید

راجع به ایجاد یک فیلد Attach برای بارگزاری یک فایل یا عکس در صورت امکان توضیح دهید .

با تشکر

+2 # مهرداد صلاحی

با سلام.
برای اپلود یک فایل از هر نوعی شما باید از کنترل file استفاده کنید. همچنین برای این کار باید خاصیت enctype فرم رو با مقدار multipart/form- data پر کنید.

بعد از ارسال فرم می‌تونید با توجه به نوع زبان سمت سرور مقدار این کنترل رو خونده و فایل رو آپلود کنید.

+3 # مانی

سلام.خسته نباشید
Name و Value که در فیلدهای متنی و پسورد و ردیو باتن و چک باکس و ... استفاده میشه چه کاربردی داره؟

+4 # امیر پهلوان صادق

سلام، ممنون دوست عزیز شما هم خسته نابشید.
ویژگی Name: تصور بفرمایید در یک جمعی شما جضور داشته باشید و بنده بخوام شما رو صدا بزنم، خوب خیلی راحت از فاصله 5 متری بلند می گم، "آقا مانی" و شما سریع برمیگردید تا ببینید کی باهاتون کار داره ...! با استفاده از ویژگی Name می توانیم به کلیه فیلدهایی که توسط کاربر تنظیم شده و به سرور ارسال شده دسترسی داشته باشیم، بعنوان مثال کاربر فیلد "نام خانوادگی" رو با مقدار دلخواهش تنظیم می کنه و روی دکمه "ذخیره" کلیک می کنه، ما با استفاده از ویژگی Name هست که می تونیم سمت سرور مقدار فیلد "نام خانوادگی" رو دریافت کنیم و داخل دیتابیس ذخیره کنیم.
ویژگی Value: این ویژگی مخصوص فیلدهای اطلاعاتی مثل "چک باکس" یا "رادیو باتن" هست. هر گزینه یا Option از فیلدهای مذکور یک متن دلخواه دارد (مثلا رادیو باتن جنسیت دو گزینه "مرد" و "زن" دارد) حالا سوالی که مطرح هست اینه که سمت سرور چطوری بفهمیم که کاربر کدام گزینه را انتخاب کرده است. در اینجاست که با کاربرد وِیژگی Value آشنا می شوید. در واقع هنگام تعریف کد HTML رادیوباتن یا چک باکس، ویژگی Value را با یک مقدار کاملا دلخواه تنظیم می کنیم(مثلا در فیلد جنسیت، برای گزینه "مرد" وِیژگی Value را با مقدار "0" و برای گزینه "زن" ویژگی Value را با "1" تنظیم می کنیم.) در ادامه زمانی که کاربر سایت تان اطلاعات Form را به سرور ارسال می کند، ما از طریق ویژگی Value متوجه می شویم که کدام گزینه را انتخاب کرده و همان طور که قبلا عرض کردم با استفاده از ویژگی Name به فیلد مورد نظر دسترسی پیدا می کنیم و مقدار Value آنرا واکشی می کنیم.

+2 # سجاد خلیلی

با عرض سلام
من یک چیز رو متوجه نشدم:برای چی مثلا در خودتان امتحان کنید برای radio button در قسمت form یک اکشن می‌نویسید و خالی میگذارید:<form action="">
</form>

+2 # امیر پهلوان صادق

سلام
البته حق با شماست و بدون وجود ویژگی action مثال ها بدرستی کار خواهد داد. اما هدف ما این بوده که به شما اهمیت وجود این ویژگی را نشان دهیم.

+1 # حسین

باعرض سلام و خسته نباشید
من چک باکسم را که میسازم جلوش فارسی مینویسم
ولی چک باکس اولم سمت چپ نوشته هام هست بقیه چک باکسام سمت راست نوشته
باید چکار کنم؟

+1 # مهرداد صلاحی

با سلام.
بهتره هر چک باکس رو به همراه لیبل مربوطه داخل تگ p قرار بدید، تا هر چک باکس در یک خط قرار بگیره. بعد به تگ P استایل خاص بدید تا همه فرمت خاصی بگیرن و به یک شکل نمایش داده بشن.

+1 # Guest

سلام
در مثال فرمی با دو فیلد متنی و یک ساب میت
خصوصیت" method:"get چه کاربردی دارد؟اگه این خصوصیتو حذف کنم هیچ فرقی نمیکنه!
ممنون از آموزش های خوبتون

+1 # مهرداد صلاحی

با سلام. ارسال فرم از دو طریق get و post صورت می‌گیرد. وقتی ارسال فرم از طریق get صورت بگیرد، مقدادیر به همراه نام فیلدها در آدرس بار خواهند آمد. این روش علاوه بر اینکه ناامن هست، محدودیت هم دارد...
برای همین معمولا در هنگام ارسال فرم از روش post استفاده می‌شود که هم امن هست و هم اینکه محدودیت ندارد.
اگر در فرم خصوصیت method ذکر نشه، پیشفرض get خواهد بود.

+1 # Guest

سلام خسته نباشین
در مثال text-area قطعه کد زیر رو متوجه نشدم ممنون میشم اگر توضیح بدین
با تشکر<textarea rows="1" cols="2">آن مرد آمد</textare a>

+1 # امیر پهلوان صادق

سلام
ویژگی Rows: با استفاده از این ویژگی تعداد ردیف ها یا همان ارتفاع textarea را می توان تنظیم نمود.
ویژگی cols: با استفاده از این ویژگی تعداد ستون ها یا همان عرض textarea را می توان تنظیم نمود.

+2 # yaser

سلام خسته نباشید
تابع های زیر رو حذف کردم تا ببنیم تغییر خاصی اعمال میشه ولی هیچ تغییری نکردی ممنون میشم یه توضیح مختصری دربارهش بدین تشکر
name="vehicle" value="Bike"

+1 # مهرداد صلاحی

با سلام و تشکر.
تابعی توی متن نیومده. فقط دو خصوصیت از html هست که نام اون و مقدار یه کنترل هست!!!

# masood68

سلام
خسته نباشید
تواون قسمتsubmit من میخام آدرس ایمیلم رو بذارم تا باواردکردن اطلاعات وقتی دکمه submit رو بزنم اطلاعات واسم ایمیل شه.باید چیکارکنم؟
ممنون از سایت خوبتون

# مهرداد صلاحی

با سلام و تشکر.
با زدن دکمه‌ی Submit به طور مستقیم نمیشه ایمیل ارسال کرد. باید بعد از اینکه مقادیر کنترل‌ها رو گرفته و اعتبارسنجی کردید، باید توسط توابع ارسال ایمیل متن اون کنترل‌ها رو برای ایمیل شخص موردنظر ارسال کنید. می‌توانید از تابع mail(); //comment که درون خود PHP هست استفاده کنید،‌ یا از کلاسهای مخصوص ارسال ایمیل.
یکی از این کلاسهای به نام PHPMailer معروف هست و خیلی هم کار با اون راحت هست.

# یاشار

سلام و خسته نباشید خدمت مدیریت
میخاستم یه پیشنهادی بدم
ممکنه مطلب باشه ولی من گشتم نبود
در مورده اسپری ها که باعث محدود کردن ورود عناصر توی فرم میشه
اگه میشه توضیح بدین
با تشکر

# مهرداد صلاحی

با سلام.
اسپری ها با استفاده از زبان سمت کلاینت (جاوااسکریپت یا jQuery) ورودی کنترل موردنظر رو خونده و با توجه به فرمتی که براشون تعریف شده، مقادیر اون رو چک میکنن. اگه درست نبود، با پیغام خطا کاربر رو متوجه میکنن.

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

# amin.

چگونه چک باکس از قبل انتخاب شده بسازیم؟

# شهربانو دوستی

با سلام
برای این کار میتوانید هنگام ایجاد یک چک باس شناسه ""checked="chec ked " را برای آن تنظیم کنید.

# پدرام

با سلام و تشکر بابت سایت خوبتون.
میخواستم ببینم چطوری میشه یک دکمه رو هایپرلینک کرد.

یعنی در واقع وقتی روی یک دکمه کلیک میکنیم یه صفحه ای باز شه یا یه عکسی باز شه یا یه اسکریپی اجرا شه.

+1 # شهربانو دوستی

با سلام
سپاس از شما
به آموزش "تگ button در HTML " مراجعه کنید.
برای این کار میتوانید از لینک زیر استفاده نمایید.
www.beyamooz.com/tags/312-html-tag/2210-%D8%AA%DA%AF-button

+2 # پدرام

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

خیلیا میان میگن شما از رو سایت W3School کپی می کنین ولی بنظر من خیلیم خوبه.
من خودم قبل از اینجا تو اون تمرین میکردم ولی یه مباحث مثل SQL یا چیزایی که تئوریش بیشتره آدم واقعاً باید از یه سایت فارسی کمک بگیره که راحت بفهمه چی به چیه.

بازم ممنون از پاسخگوییتون

+3 # شهربانو دوستی

باسلام
ممنون از نگاه مهربانتان
در بیاموز سعی بر آن است علاوه بر پوشش مطالب سایت W3School به زبان فارسی مطالب جدیدی نیز ارائه شود.

# zmgl

باسلام
در موردnameوvalue منظورتون اینه که با name اطلاعات سمت سروردریافت میشه وباvalueهمان اطلاعات سمت سرور در پایگاه داده ذخیره میشه؟؟؟

# شهربانو دوستی

با سلام
با سلام
name زمانی ارسال می شود که بخواهید اطلاعات یک فرم را به سرور ارسال کنید.

خصوصیت value مقدار اولیه یک فیلد ورودی را در فرم HTML مشخص می کند. تمام فیلدهایی که در خروجی نمایش داده می شوند و می خواهند به سرور ارسال شوند به این تگ مربوط هستند. اگر این فیلد توسط کاربر پر نشود مقدار پیش فرض آن نمایش داده می شود.
در مثال بالا مقدار دکمه ارسال برابر submit قرار داده شده و چیزی که شما هنگام مشاهده صفحه مشاهده میکنید متن submit بر روی دکمه است. می توانید در مثال بالا به جای submit کلمه "ارسال" را تایپ کنید تا بهتر با نحوه کار این خصوصیت اشنا شوید.

# مهدی111

سلام
چجوری میشه برای مثال لیست کشویی submit گذاشت؟

# احسان عباسی

سلام به آدرس زیر که در سایت w3schools قرار داره بروید .نمونه ی مورد نظر شما اونجا قرار داره:
www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_datalist

# MAHDIMAHDVI313

با سلام و تشکر از مطالب خوبتون.
در بخش مثال های Textarea تگ بستن فراموش نشده؟
نقل قول:

آن مرد آمد

# احسان عباسی

سلام
منظورتون رو متوجه نمیشم ، کدوم قسمت مد نظرتون هست؟

# Guest

به نقل از 1 احسان عباسی:

سلام
منظورتون رو متوجه نمیشم ، کدوم قسمت مد نظرتون هست؟

سلام
منظورم اینه که در پایان فراموش نشده؟
در مثال فقط تگ شروع وجود دارد و تگ پایان قرار داده نشده.

+1 # احسان عباسی

بله بهتر هست که تگ پایان را برای عنصر textarea اضافه کنیم .

# shadi

با سلام
این دیدگاه هایی که کاربران می نویسند خودش یک نوع فرم نیست که شما درست کردید یک درست ؟؟؟؟دکمه ارسال هم همون submit درست؟ حالا اینکه این متن ها جه طوری وارد بانک اظلاعاتی میشند را نمی دونم تصویر امنیتی که پایین صفحه هست هم یک فرم؟اگر هست از چه نوعی ؟ببخشید اگر سوالات بی ربطی بودند؟

# امیر پهلوان صادق

سلام
بله حق با شماست، برای طراحی قسمت دیدگاه ها از یک تگ form استفاده شده است. توجه داشته باشید که تصویر امنیتی و فیلدهای "نام" و "ایمیل" و "دیدگاه" همه داخل یک تگ form هستند.
روش کار بسیار بسیار ساده است، و این را زمانی که شروع به مطالعه PHP کردید، متوجه خواهید شد.

+1 # shadi

با سلام
1- تفاوت name , value در چیست؟
2- در مثال
Male
Female<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
مقدار name با مقدار sex تنظیم شده است، یعنی چه؟ دلخواه ؟
3-در مثال
I have a bike
I have a car
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
مقدار name یعنی vehicle به چه معناست میشود هر مقدار دلخواه دیگری گذاشت؟

4 در مثال
Username: <form name="input" action="html_form_actio n.php" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
صفحه html_form_actio n.php را چطوری بسازیم باید صبر کنیم تا php یاد بگیریم چه بد
لطفا پاسخ دهید ممنون

+1 # امیر پهلوان صادق

سلام
به نقل از shadi:

1- تفاوت name , value در چیست؟

name: با استفاده از name می توان سمت سرور محتوای عناصر را دریافت کرد. این ویژگی باید با یک نام منحصر به فرد تنظیم شود، یعنی در یک صفحه HTML فقط یک عنصر می تواند با name مورد نظر وجود داشته باشد.
value: در توضیح بالا، گفتیم که با استفاده از name می توان محتوا یا مقدار عناصر را سمت سرور دریافت کرد، حالا این مقدار همان value است و در واقع چیزی که در پایگاه داده ذخیره می شود، همین مقدار value خواهد بود.
به نقل از shadi:

2- مقدار name با مقدار sex تنظیم شده است، یعنی چه؟ دلخواه ؟

اولاً مقدار تنظیم شده برای name کاملاً دلخواه هست و اما اگر برای تان سوال شده که چرا با توجه به توضیح قبل که گفتیم، باید منحصر به فرد باشد اما اینجا برای دو عنصر رادیو یک مقدار مشابه تنظیم شده ...!؟ باید گفت تنها جایی که استثنا وجود دارد در Radio Button و Check Box است. دلیلش را در آینده حتماً متوجه خواهید شد.

به نقل از shadi:

3- مقدار name یعنی vehicle به چه معناست میشود هر مقدار دلخواه دیگری گذاشت؟

بله می توانید هر مقدار دلخواه دیگری بکار ببرید. vehicle به معنای "وسیله نقلیه" است. شما می توانید بجای vehicle از "Mashin" یا "car" و یا هر چیز دیگری که دوست دارید استفاده کنید.
به نقل از shadi:

4- صفحه html_form_actio n.php را چطوری بسازیم باید صبر کنیم تا php یاد بگیریم چه بد

در واقع زمانی که روی دکمه submit کلیک می کنید، تمام اطلاعات وارد شده یا انتخاب شده توسط کاربر به فایل html_form_actio n.php ارسال خواهد شد و مسلماً باید PHP را فراگرفته باشید، تا بتوانید اطلاعات را دریافت کرده و مثلاً در پایگاه داده ذخیره نمایید.
برای کسب اطلاعات بیشتر در مورد PHP به لینک زیر مراجعه فرمایید:
www.beyamooz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-php

# shadi

سلام
از پاسخ شما بسیار متشکرم
اینکه دو عنصر رادیو یک مقدار مشابه تنظیم شده در Radio Button و Check Box . دلیلش را فهمیدم. باز هم تشکر

+2 # karim

با سلام در بالا در قسمت name:
<form>
First name: <input type="text" name="firstname" />
Last name: <input type="text" name="lastname" />
</form>
اصلا برای چیست اگر در name هم چیزی بنویسیم و چه ننویسیم فرقی نمی کند
پس برای چه می نویسیم؟

+2 # امیر پهلوان صادق

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

+4 # مرجان نوشین فر

در مثال fieldset چرا برای فیلدها سایز مشخص کردین؟ میشه توضیح بدین

+4 # امیر پهلوان صادق

با استفاده از ویژگی size می توانید تعداد کاراکترهای قابل رویت در تکس باکس را مشخص کنید.
توجه داشته باشید که این ویژگی تنها در عنصر input که یکی از انواع زیر باشد، کاربرد دارد:
text, search, tel, url, email, password

+4 # مرجان نوشین فر

در ابتدای مطلب بالا تو مثال password تو تگ form چرا از action استفاده شد؟ چرا مقداری نداره؟
ممنون

+4 # امیر پهلوان صادق

همان طور که می دانید بعد از submit شدن فرم و یا بعبارتی، زمانی که کاربر روی دکمه "ورود" کلیک می کند، اطلاعات فرم که شامل "شناسه کاربری" و "کلمه عبور" است به سمت سرور ارسال می شود.
یه سوال ...! اطلاعات به کجا ارسال می شود ...؟
جواب در ویژگی action است، در واقع اطلاعات به جایی که شما در این ویژگی گفته اید ارسال می شود. حالا اگر این ویژگی تنظیم نشود و یا همان طور که شما گفتید، بدون مقدار باشد، اطلاعات فرم به صفحه جاری ارسال خواهد شد، و فراموش نکنید که صفحه مذکور، وظیفه پردازش اطلاعات ارسال شده را دارد.
حالا شاید سوال کنید چطوری طلاعات ارسال شده، پردازش می شود، برای این مورد باید یکی از زبان های سمت سروی مانند PHP و یا asp.NET را فرابگیرید.

+3 # مرجان نوشین فر

اگر بخواهیم مقداری بیش از 20 کاراکتر را برای عنصر متنی مشخص کنیم چه کار می کنیم؟؟

+3 # امیر پهلوان صادق

چندتا راه وجود دارد:
1: ویژگی pattern: بعنوان مثال اگر می خواهید در فیلد متنی تان حتماً از 20 کاراکتر به بالا وارد شود، اولاً برای تگ input باید ویژگی required را تنظیم کنید و سپس ویژگی pattern را با مقدار "{20,}." تنظیم نمایید.
2- ویژگی های min و max، حداقل و حداکثر مقدار برای یک عنصر که یکی از انواع زیر باشد را مشخص می کند: number, range, date, datetime, datetime-local, month, time ,week
برای اطلاعات بیشتر به لینک روبرو مراجعه نمایید: www.beyamooz.com/html5/623

+5 # hossein007

فیلد user و pass ساختم میخوام داخل فیلد نوشته شه مثلا نام کاربری یا پسورد بعد با کلیک روی فیلد نوشته از بین بره.متل user و pass سایتتون

+6 # امیر پهلوان صادق

باید از JavaScript استفاده کنید. مانند زیر:
با استفاده از رویداد onfocus زمانی که تمرکز روی عنصر قرار می گیرد، نوشته داخل تکس باکس حذف می شود.
با استفاده از رویداد onblur زمانی که تمرکز از روی عنصر خارج می شود، متن مورد نظر داخل تکس باکس تنظیم می شود.
www.beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_form_change_content_by_onblure

+4 # sara

سلام منون از پاسخ های خوبتون
در قسمت لیست کشویی اگر name حذف شود چه تفاوتی میکند؟
همچنین اگر در تگ رادیو یا چک باکس value حذف شود چه تفاوتی میکند؟
من امتحان کردم عملا در خروجی تفاوتی دیده نمیشه نظر شما چیه؟

+6 # امیر پهلوان صادق

سلام
1- ویژگی name: با استفاده از ویژگی name می توان توسط ASP.Net یا PHP، سمت سرور به عنصر یا تگ مورد نظر دسترسی پیدا کرد و مثلاً محتوای آنرا خواند. در نتیجه این ویژگی در ظاهر عنصر هیچ تأثیر ندارد. البته قابل ذکر است که ویژگی id نیز برای دسترسی به عنصر از طریق جاوااسکریبت کاربرد دارد.
2- ویژگی value: این ویژگی با یک مقدار دلخواه پر می شود. می دانید که در چک باکس یا رادیو باتن، امکان بیش از یک انتخاب برای کاربر وجود دارد (مثلاً رادیو باتن جنسیت)، حالا یه سوال ...! اگر بخواهیم آیتم انتخاب شده توسط کاربر را در پایگاه داده ذخیره کنیم، چه مقداری باید ذخیره شود؟ خوب راه حل در مقدار دهی ویژگی Value است ...! توضیح اینکه، برای هر کدام از آیتم های چک باکس و یا رادیو باتن یک value متفاوت تنظیم می کنیم و در ادامه می توان با استفاده از این مقدار، متوجه شد که کدام آیتم انتخاب شده است. (مثلاً برای رادیو باتن جنسیت، اگر value دریافت شده سمت سرور، 1 بود یعنی کاربر، آیتم "مرد" را انتخاب کرده و اگر 0 بود یعنی آیتم "زن" را انتخاب کرده است و نهایتاً در پایگاه داده 0 یا 1 ذخیره می شود)