بستن منو
۵۸
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با HTML
24
نمایش متن، در HTML
5
نمایش عکس، در HTML
5
لینک ها (Link)، در HTML
1
لیست ها (List)، در HTML
1
جدول ها (Table)، در HTML
2
فرم ها (Form)، در HTML
10
مباحث عمومی، در HTML
10
×

دانلود فروشگاه اندروید کلیدستان

511

نویسنده

علیرضا گلمکانی ( admin )

شماره کلید
دسته کلید - دسته بندی

فرم ها در html

حتما تابحال صفحات مربوط به پر کردن فرم در سایت ها را دیده اید . در اکثر مباحث آموزش html ، مواردی را معرفی کردیم که با آنها می توانستید اطلاعاتی را به کاربر نمایش بدهید اما فرم ها برای دریافت اطلاعات از کاربر و ذخیره این اطلاعات به کار می روند .

در یک فرم باید شخص کاربر برخی موارد را پر کرده و برخی را نیز انتخاب کند و سپس با فشار دادن یک دکمه ، اطلاعات به سرور (server) حاوی سایت ارسال خواهد شد .

تگ <form> برای ساخت یک فرم در html :

شروع یک فرم را با تگ شروع <form> و پایان فرم را با تگ پایانی <form/> اعلام می کنیم . محتویات فرم در بین این دو تگ قرار خواهند گرفت .

اطلاعات دریافتی از کاربر باید توسط صفحه ای دیگر مورد پردازش قرار گیرد . درون تگ شروع <form> باید مشخصه action را برابر آدرس صفحه ای قرار بدهیم که می خواهد بر روی اطلاعات دریافت شده از کاربر پردازش انجام دهد . معمولا صفحه پردازش با استفاده از php نوشته می شود . php زبانی است که برای نوشتن صفحات اینترنتی دینامیک به کار می رود (برخلاف html که برای نوشتن صفحات اینترنتی استاتیک به کار می رود ) .

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

تگ <input> :

با استفاده از تگ <input> می توانیم شیوه های مختلفی از انواع دریافت اطلاعات از کاربر را به کار ببریم . برای این منظور باید تگ <input> را درون زوج تگ <form> و <form/> بنویسیم . درون تگ <input> باید مشخصه type را تعیین کنیم تا مشخص شود که نوع دریافت اطلاعات از کاربر به چه صورت می باشد . انواع دریافت اطلاعات از کاربر با استفاده از تگ <input> را در زیر شرح می دهیم :

جعبه متن :

فرض کنید بخواهیم یک جعبه متن را طراحی کنیم که در آن کاربر متن دلخواه خود را نوشته و سپس این متن به سرور (server) حاوی سایت ارسال شود . برای این منظور باید درون تگ <input> ، مشخصه type را برابر text قرار بدهیم . به مثال زیر توجه کنید :

مثال

<html>
<head>
</head>
 
<body>
 
<form method="post" action="script.php">
<input type="text">
</form>
 
</body>
</html>

نتیجه :

Result
نکته

کاربر ابتدا باید درون جعبه متن ، متن دلخواه خود را نوشته و سپس کلید enter را فشار بدهد تا متن نوشته شده توسط صفحه script.php مورد پردازش قرار بگیرد . البته روش بهتر این است که یک دکمه برای ارسال متن ، طراحی شود زیرا معمولا یک فرم شامل چندین بخش برای پر کردن و انتخاب می باشد و بنابراین ابتدا کاربر باید تمامی بخش ها را پر کرده و انتخاب کند و در انتها نیز دکمه ای برای ارسال اطلاعات در نظر گرفته شده باشد . بنابراین قبل از اینکه شیوه های دیگر دریافت اطلاعات برای فرم را توضیح بدهیم ، ابتدا نحوه ساخت دکمه ارسال اطلاعات (دکمه submit) را شرح خواهیم داد .

طراحی دکمه ارسال اطلاعات (دکمه submit) :

برای طراحی دکمه ارسال اطلاعات (دکمه submit) ، باید در انتهای فرم و قبل از تگ پایانی <form/> ، عبارت زیر را بنویسیم :


<input type="submit" value="submit message">

عبارتی که برای مشخصه value تعیین می کنیم ، بر روی دکمه ارسال اطلاعات (دکمه submit) نمایش داده می شود .

مثال

<html>
<head>
</head>
 
<body>
 
<form method="post" action="script.php">
<input type="text">
<input type="submit" value="submit message">
</form>
 
</body>
</html>

نتیجه :

Result

دکمه های رادیویی :

حتما تاکنون دکمه های رادیویی را در فرم های اینترنتی دیده اید . این دکمه ها به صورت دایره های توخالی می باشند که اگر بر روی آنها کلیک کنید به صورت توپر در می آیند . توپر شدن یک دکمه رادیویی نشان دهنده انتخاب عبارت نوشته شده برای آن دکمه رادیویی می باشد . برای ساخت دکمه های رادیویی ، باید درون تگ <input> ، مشخصه type را برابر radio قرار بدهیم . به مثال زیر توجه کنید :

مثال

<html>
<head>
</head>
 
<body>
 
<form method="post" action="script.php">
yes<input type="radio" value="yes"><br />
no<input type="radio" value="no">
</form>
 
</body>
</html>

نتیجه :

Result

مشاهده می کنید که دو گزینه yes و no به کاربر نمایش داده شده است که کاربر باید یکی از آنها را انتخاب کند .

نکته

در مثال قبل ، ممکن است کاربر به اشتباه ، ابتدا گزینه غلط را انتخاب کند و پس از متوجه شدن اشتباه بودن انتخاب خود ، گزینه صحیح را انتخاب کند ، در این زمان هر دو دکمه رادیویی به صورت توپر نمایش داده می شوند و دیگر کاربر نمی تواند گزینه غلط را به صورت توخالی در آورد . برای پیشگیری از وقوع این مشکل باید برای هر دو دکمه رادیویی یک نام را انتخاب کنیم ، یعنی اینکه برای تگ <input> ، مشخصه name را برای هر دو دکمه رادیویی به صورت یک نام واحد انتخاب کنیم . به مثال زیر توجه کنید :

مثال

<html>
<head>
</head>
 
<body>
 
<form method="post" action="script.php">
yes<input name="yes_or_no" type="radio" value="yes"><br />
no<input name="yes_or_no" type="radio" value="no">
</form>
 
</body>
</html>

نتیجه :

Result

جعبه انتخاب :

جعبه انتخاب ، جعبه ای می باشد که در جلوی یک عبارت (گزینه) قرار می گیرد و چنانچه بخواهیم آن گزینه را انتخاب کنیم باید درون آن جعبه کلیک کنیم ، آنگاه درون جعبه یک علامت ((تیک)) نمایش داده خواهد شد . چنانچه برای بار دوم درون جعبه کلیک کنیم ، آنگاه علامت ((تیک)) برداشته می شود .

برای ساخت یک جعبه انتخاب ، باید درون تگ <input> ، مشخصه type را برابر checkbox قرار دهیم . به مثال زیر توجه کنید :

مثال

<html>
<head>
</head>
 
<body>
 
<form method="post" action="script.php">
yes<input type="checkbox"><br>
no<input type="checkbox">
</form>
 
</body>
</html>

نتیجه :

Result

جعبه کلمه عبور (پسورد) :

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

برای ساخت یک جعبه کلمه عبور باید درون تگ <input> ، مشخصه type را برابر password قرار دهیم . به مثال زیر توجه کنید :

مثال

<html>
<head>
</head>
 
<body>
 
<form method="post" action="script.php">
<input type="password">
</form>

</body>
</html>

نتیجه :

Result

چنانچه در جعبه نمایش داده شده ، کلماتی را بنویسید ، به جای حروف آن کلمات ، علامت * نمایش داده می شود .

تا این مبحث سعی شد که با HTML به صورت مقدماتی آشنا شوید . اکنون می توانید سایر مباحث دلخواه را از منوی سمت راست سایت انتخاب کرده و بخوانید و دیگر نیازی به ارائه سایر مباحث به صورت متوالی نمی باشد .

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

خوانده شد
مبحث بالا، مفید بود و سایت کلیدستان را دوست داشتم :
محبوب کردن این مبحث در گوگل :
اون چیزی که میخواستم نبود :
سوال دارم :
ارسال نظر :
نظرات 0 0 0

*** نظر بدهید

دسترسی سریع

×

شماره کلید


کلید
×

شماره دسته کلید


دسته کلید
×

جستجو


جستجو

راهنمای تگ های HTML

راهنمای تگ های HTML بر اساس حرف اول تگ :

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

بستن منو
۱۹۷
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مجموعه ویدئوهای آموزشی HTML5 - مجموعه HTML5 Tutorial - از thenewboston.com
53
مجموعه ویدئوهای آموزشی XHTML و CSS - مجموعه XHTML and CSS Tutorials - از thenewboston.com
46
مجموعه ویدئوهای آموزشی HTML - مجموعه HTML Tutorials
28
مجموعه ویدئوهای آموزشی HTML و CSS - مجموعه Learn HTML/CSS
19
مجموعه ویدئوهای آموزشی HTML5 و CSS3 برای مبتدیان - مجموعه HTML5 and CSS3 beginners tutorials
51
بستن منو
۴۲
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با CSS
7
نمایش متن در CSS
7
ساخت حاشیه (border) در CSS
4
عکس ها در CSS
2
ساخت انیمیشن در CSS
6
لینک ها (links) در CSS
5
رنگ ها در CSS
1
مباحث عمومی در CSS
10
بستن منو
۱۵
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مفاهیم اولیه در طراحی وب سایت
2
توسعه وب سایت (ساخت بخش ها و امکانات جدید برای وب سایت)
3
کار با کنترل پنل سایت
1
معرفی سایت های مفید در زمینه طراحی سایت
1
یافتن کد رنگ ها برای طراحی سایت
2
نرم افزار FileZilla
1
ارسال ایمیل، در طراحی سایت
1
مباحث عمومی در طراحی سایت
4

آخرین کلیدهای غیررایگان

شما هم می توانید کلیدهای غیررایگان منتشر کنید (بیشتر بدانید)