چطور یک صفحه دریافت اطلاعات از کاربر بسازیم (فقط Html)

برای اولین پست آموزشی چطور بود؟

  • عالی

    رای: 0 0.0%
  • متوسط

    رای: 0 0.0%
  • ضعیف

    رای: 0 0.0%

  • مجموع رای دهندگان
    2

JAMAL*Graphic

New Member
به نام خدا
سلام دوستان خوب خودم
من جستجو در صفحات فروم نکردم که ببینم کسی همچین آموزشی را قرار داده است یا نه؟ :shock:
اما امیدوارم این آموزش را طوری قرار بدهم که مورد استفاده قرار بگیرد
البته چون دسترسی به اطلاعات خودم نداشتم نتونستم براتون عکسی بگذارم و از این بابت عذرخواهی می کنم

بریم سراغ آموزش :
ابتدا یک صفحه Notepad باز کنید.
و اطلاعات زیر را در آن وارد نمایید. (اطلاعاتی که باید در هر صفحه وب قرار داده شود.)

HTML:
<html>
<head> 
<title> فرم اطلاعات کاربران </title> 
</head>
<body>
 
</body>
</html>

الان شما نیاز به نوشتن تگ form دارید که این تگ دو پروپرتی اصلی دارد
1. action که شما صفحه ای که می خواهید اطلاعات کاربر به آن صفحه برود را وارد می کنید
2. method که دو مقدار Get و Post را می تواند دریافت کند. البته به صورت نرمال مقدار Get را دارد.
حالا این دو مقدار چه کار می کنند؟
اگر شما مقدار Get را انتخاب کنید پس از زدن دکمه دریافت اطلاعات ،اطلاعاتی که کاربر وارد کرده است در آدرس بار نمایش داده می شود ولی اگر Post را انتخاب کنید دیگر همچنین مشکلی نخواهید داشت.

تگ بعدی input می باشد که شما باید در تگ form آنرا بنویسید و مهمترین پروپرتی آن type می باشد و انواع مختلفی دارد که خودش یک آموزش جداگانه می خواهد
ولی ما در این آموزش با 3-4 عدد آن بیشتر کار نداریم. که در طول آموزش متوجه آنها خواهید شد.
پس کد نیمه نهایی ما به صورت زیر تبدیل می شود
HTML:
<html>
<head> 
<title> فرم اطلاعات کاربران </title> 
</head>
<body>
<form action="صفحه اطلاعات" method="Post">
نام شما :<input type="text" name="name"/><br/>
نام مستعار شما :<input type="text" name="Nname"/><br/>
Email: <input type="text" name="Email" value="[email protected]"/><br/>
Password: <input type="password" name="pass1"/><br/>
Re-Password: <input type="password" name="pass2"/><br/>
<input type="submit" value="ارسال اطلاعات" name="Sub"/>
<input type="reset" value="از نو" name="reset"/>
</form>
</body>
</html>

کد بالا کامل است ولی برای زیباتر کردن صفحه از Css کمک می گیریم که پس از انجام اعمال کد ما به صورت زیر در خواهد آمد ولی قبل از آن انواع Type هایی را که به کار بردیم به اجمال توضیح می دهم
:tavajoh: 1. name همانطور که مشاهده کرده اید در صورتی که تایپ خود را روی این حالت قرار دهید نوشته ها به صورت واضح و آشکار نمایش داده می شود.
2. password اگر تایپ خود را در این حالت قرار دهید هر کاراکتر به صورت دایره سیاه در می آید که برای بالا بردن امنیت از آن استفاده میشود.
3. submit یک دکمه برای شما ایجاد میکند که برای ارسال اطلاعات به صفحه ای که در action فرم خود وارد کرده اید استفاده می شود
4. reset دکمه ای برای شما ایجاد میکند که در صورت کلیک کردن بر روی آن اطلاعاتی که کاربر وارد کرده است پاک می شود (فرم شما مثل اول می شود)

:?: value چیست که شما در بعضی از تگ ها به کار برده اید؟
خوب اگر متوجه شده باشید مقادیری که در مقابل value وارد می کتید به صورت دیفالت به کاربر نمایش داده میشود (مثل Email در کد بالا) و یا اینکه بعضی از تگ ها نیاز به value دارند (مثل Submit , reset در کد بالا که در صورتی که برای آن value قرار ندهید مقادیر پیش فرض جایگزین آن خواهد شد)

و اما کد نهایی و فیتال ما به صورت زیر در خواهد آمد:

HTML:
<html>
<head> 
<style>
.in1{background:#6d6d6d ;color:fff;border:0}
.b1{background:#ff3700 ;color:fff;border:1px solid #000000;font-family:tahoma}
</style>
<title> فرم اطلاعات کاربران </title> 
</head>
<body>
<div style="margin-top:200px ; margin-left:550px ; border:1px dashed;background:#ffaf00 ; width:250 px ;font-family:tahoma ;font-size:8 pt ; padding:5px" align=center>
<form action="صفحه اطلاعات" method="Post">
نام شما :<input type="text" name="name" class="in1"/><br/>
نام مستعار شما :<input type="text" name="Nname" class="in1"/><br/>
Email: <input type="text" name="Email" value="[email protected]" class="in1"/><br/>
Password: <input type="password" name="pass1" class="in1"/><br/>
Re-Password: <input type="password" name="pass2" class="in1"/><br/><br/>
<input type="submit" value="ارسال اطلاعات" name="Sub" class="b1"/> &nbsp;
<input type="reset" value=" &nbsp;از نو &nbsp;" name="reset" class="b1"/>
</form>
</div>
</body>
</html>

و در انتها صفحه شما باید به صورت زیر شده باشد.

akhare%20kar.JPG
:) در انتها بازهم از دوستانی که این آموزش به درد آنها نخورد معذرت خواهی می کنم
ولی این رو هم بدونید که من الان با سیستمی این پست را نوشتم که فقط paint را به عنوان نرم افزار گرافیکی خود داشت.​

:tavajoh:اگر در جایی از css ها و یا کل آموزش سوالی داشتید می توانید از طریق ایمیل زیر با من در میان بگذارید . [email protected]

امیدوارم که این آموزش مثمر ثمر واقع شده باشد​
 

mashkook

New Member
مرسی رفیق.
به عنوان یه تازه کار یه سوال داشتم و اونم اینه که حالا ر فرض اینکه اینو ساختیم... چطور باید به سرور وصلش کنیم و سرور اینارو کجا ذخیره سازی می کنه؟
 
آخرین ویرایش:

JAMAL*Graphic

New Member
مرسی رفیق.
به عنوان یه تازه کار یه سوال داشتم و اونم اینه که حالا ر فرض اینکه اینو ساختیم... چطور باید به سرور وصلش کنیم و سرور اینارو کجا ذخیره سازی می کنه؟

سلام دوست عزیز همونطور که در آموزش توضیح دادم شما باید یک صفحه با PHP طراحی کنید که اطلاعات دریافتی رو دخیره کنه
که آموزش اون خیلی طول می کشه ولی فقط این رو برات میگم که در php از تابع $_POST باید استفاده کنی
PHP:
$b=$_ POST ['nami ke dar formeton vared kardid'];

و به همین ترتیب اطلاعات رو می گیرین البته از تابع POST زمانی استفاده می کنی که در method فرم خودت post وارد کرده باشی اگر نه باید از $_GET استفاده کنی.

برای اینکه بهتر بفهمی آدرس سایت انگلیسی رو میدم که مرجع آموزش طراحی صفحات وب هست
برای این موضوع به آدرس زیر برو بهتر توضیخ داده
http://www.w3schools.com/php/php_post.asp

شرمنده اگر بد نوشتم
 

جدیدترین ارسال ها

بالا