آموزش HTML – قسمت بیست و سوم(ایجاد فرم)
سلام
با بیست و سومین قسمت از آموزش HTML در خدمتتون هستیم(اگر تا کنون موفق به مطالعه آموزش ها نشدید، کلیک کنید)، در این قسمت خواهیم پرداخت به مبحث فرم در طراحی سایت و اینکه فرم ها چه کاربردی دارند، پس در ادامه با با بپرسم، همراه باشید.
کاربرد فرم در طراحی سایت:
از فرم ها برای ارسال اطلاعات توسط کاربر استفاده می شود، برای مثال یک فرم ثبت نام را در نظر بگیرید وقتی کاربر فیلدهایی که ما برای فرم قرار دادیم را پر میکند و روی دکمه ثبت نام کلیک میکند، در واقع دارد اطلاعاتی که در فرم وارد کرده را برای ما ارسال میکند و ما این اطلاعات را دریافت و پردازش می کنیم.
برای ساخت فرم در HTML از تگ <form> استفاده می کنیم.
- نمونه کد فرم
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ |
<form> نام کاربری<br> <input type="text" name="username" value="beporsam"> <br> رمز عبور<br> <input type="text" name="password" value="۱۲۳۴۵"> <br><br> <input type="submit" value="ورود"> </form> |
پیش نمایش کد بالا:
در یک فرم می توانیم از عناصری مانند فیلدهای متنی،چک باکس،دکمه های رادیویی و… استفاده کنیم.
- شناسه <input> در فرم
عنصر <input> یکی از مهمترین عناصر فرم است.
در این عنصر خصوصیتی به نام <type> قرار دارد که برای تعیین نوع اطلاعات ورودی استفاده می شود.
مقادیری که خصوصیت <type> میگیرد:
مقدار | مثال | توضیح |
<input type=”text”> | یک کادر متن ایجاد میکند | |
<input type=”checkbox”> | مرد | کادر یا دکمه چند انتخابی ایجاد میکند |
<input type=”radio”> | مرد | دکمه تک انتخابی |
<input type=”password”> | یک کادر متن است مخصوص رمز عبور که به جای نمایش خود کاراکتر، کاراکتر ها به شکل دایره یا ستاره نمایش میدهد | |
<input type=”hidden”> | یک کنترل مخفی دلخواه روی صفحه ایجاد میکند | |
<input type=”submit”> | دکمه ثبت اطلاعات | |
<input type=”reset”> | یک دکمه ایجاد میکنم، که با کلیک روی دکمه اطلاعات فرم را خالی میکند | |
<input type=”button”> | متن |
- خصوصیت action در فرم
از خصوصیت action برای ارسال اطلاعات فرم استفاده می کنیم.
وقتی فرمی را پر میکنیم و روی دکمه ارسال کلیک میکنیم داده های درون فرم را باید به سمت سرور ارسال کنیم، که اینکار از طریق آدرسی که به
- نمونه مثال از آدرس دهی action
۱ ۲ ۳ |
<form action="beporsam.php"> کد ها <form> |
در قطعه کد بالا وقتی کاربر فیلدهای فرم را پرکند و دکمه ارسال را بزند اطلاعات پردازش شده و به صفحه ای با نام action.php ارسال میشود.
در واقع خصوصیت action مقصد اطلاعات یک فرم را تعیین میکند.
- خصوصیت method
خصوصیت method در هنگام ارسال داده های فرم مورد که استفاده قرار میگیرد، و دارای دو نوع Get و Post می باشد.
۱ ۲ ۳ |
<form action="beporsam.php" method="get"> یا <form action="beporsam.php" method="post"> |
در متد post، اطلاعات دور از چشم ما و به صورت پنهانی، در پس زمینه به سرور ارسال می شوند اما در متد get، اطلاعات در نوار آدرس مرورگر قابل مشاهده هستند و به صورت پارامترهایی به همراه مقادیر به سرور ارسال می شوند، متد post برای ارسال مقادیر طولانی، اطلاعات حساس کاربری، آپلود فایل و… کاربرد دارد و متد get بیشتر برای ارسال اطلاعات کوتاه و با حساسیت کمتر به کار می رود.
- خصوصیت name
برای هر فیلد ورودی باید نامی در نظر بگیریم.
توسط این مشخصه نام فیلد را مشخص می کنیم تا توسط این نام بتوانیم در صفحه ی پردازش، آن را از سایر فیلد های یک فرم مجزا کنیم و اطلاعات وارد شده در فیلد را دریافت کنیم.
مثالی از خصوصیت Name در فرم:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ |
<form action="beporsam.php" method="post"> نام کاربری<br> <input type="text" name="username" value="beporsam"> <br> رمز عبور<br> <input type="text" name="password" value="۱۲۳۴۵"> <br><br> <input type="submit" value="ورود"> </form> |
خب آموزش این قسمت نیز به پایان رسید، با ما باشید تا آموزش های بعدی …
مشکلی یا سوالی در رابطه با این مطلب داشتید، در سایت بپرسید ، پاسخگوی سوالات شما هستیم.
موفق باشید.
دیدگاه ( 2 )
سلام. وقت بخیر. به سایت زیر سر بزنید. فرمی رو با گرویتی درست کردم که الان کد html این کد رو نیاز دارم. امکانش هست این کد رو بنویسید؟ اگه بتونید در انتهای فرم به درگاه آرین پال متصل کنید هزینش رو پرداخت میکنم
http://onwashapp.ir/%d8%ab%d8%a8%d8%aa-%d8%af%d8%b1%d8%ae%d9%88%d8%a7%d8%b3%d8%aa/
آدرس فرم در زیر نوشتم
http://onwashapp.ir/request/
سلام
سایت شما بر پایه وردپرس هست، و میتونید از افزونه GravityForm یا Contact 7 From استفاده کنید.
افزونه گراویتی فرم این قابلیت رو داره که به درگاه پرداخت متصل بشه(و آرین پال رو هم پشتیبانی میکنه)
آدرس وب سایت پشتیبان فارسی گراویتی فرم: کلیک کنید(مراجعه کنید آموزش ها و افزونه های مربوطه قرار داره)
موفق باشید.
سلام میشه منو راهنمایی کنید ممنون میشم خیلی احتیاج دارم مثلا
<input type=”text”>
یک کادر متن ایجاد میکنم
این کادر متن میخوام طولش به اندازی که میخوام انجام بدم بعد میخوام یه دکمه پیشش بزارم مثلا وقتی روی کادر متن رسول نوشتم و روی دکمه کلیک کنم بره سایت که من واسش تعریف میکنم هر سایتی باشه و وقتی کادر خالی باشه و روی دکه کلیک کنم خطا بده بگه مثلا متن را وارد کنید ممنون میشم کمک کنید منتظر پاسخ هستم تشکر
سلام
به کمک جی کوئری یا جاوا اسکریپت، قادر به انجام این کار هستید
یک نمونه کد براتون نوشتم، همین رو داخلش تغییرات ایجاد بدید و به شکل دلخواهتون در بیارید
اگر فیلد خالی باشه و کاربر روی دکمه GoTo کلیک کنه، پس زمینه و حاشیه فیلد قرمز میشه، در غیر اینصورت کاربر به سایت beporsam.ir هدایت میشه.
موفق باشید.