آموزش HTML - قسمت بیست و سوم(ایجاد فرم)

عضویت در سایت

نام کاربری*

ایمیل*

رمزعبور*

تایید رمز عبور*

نام*

نام خانوادگی*

نام نمایشی*

تصویر پروفایل*

مرور

کشور*

شهر*

جنسیت* آقا

خانم

سایر

سن*

قوانین و مقررات* با تیک زدن این گزینه شما قوانین و مقررات را میپذیرید.

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

آموزش HTML – قسمت بیست و سوم(ایجاد فرم)

سلام

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

کاربرد فرم در طراحی سایت:

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

برای ساخت فرم در HTML از تگ <form> استفاده می کنیم.

نمونه کد فرم

<form>
  نام کاربری<br>
  <input type="text" name="username" value="beporsam">
  <br>
  رمز عبور<br>
  <input type="text" name="password" value="12345">
  <br><br>
  <input type="submit" value="ورود">
</form>

<form>

نام کاربری<br>

<br>

رمز عبور<br>

</form>

پیش نمایش کد بالا:

در یک فرم می توانیم از عناصری مانند فیلدهای متنی،چک باکس،دکمه های رادیویی و… استفاده کنیم.

شناسه <input> در فرم

مطلب پیشنهادی: آموزش حل تمرین ریاضی با مرورگر Edge

عنصر <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>

کد ها

<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="12345">
  <br><br>
  <input type="submit" value="ورود">
</form>

نام کاربری<br>

<br>

رمز عبور<br>

</form>

مطلب پیشنهادی: آموزش گرفتن بیت کوین رایگان

خب آموزش این قسمت نیز به پایان رسید، با ما باشید تا آموزش های بعدی …

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

موفق باشید.

دیدگاه ( 2 )

farhadelyasi کاربر تازه
۹۷/۰۴/۲۹ در ۱۴:۳۳

پاسخ

سلام. وقت بخیر. به سایت زیر سر بزنید. فرمی رو با گرویتی درست کردم که الان کد html این کد رو نیاز دارم. امکانش هست این کد رو بنویسید؟ اگه بتونید در انتهای فرم به درگاه آرین پال متصل کنید هزینش رو پرداخت میکنم

http://onwashapp.ir/%d8%ab%d8%a8%d8%aa-%d8%af%d8%b1%d8%ae%d9%88%d8%a7%d8%b3%d8%aa/
- farhadelyasi کاربر تازه
  ۹۷/۰۴/۲۹ در ۱۴:۳۸
  
  پاسخ
  
  آدرس فرم در زیر نوشتم
  
  http://onwashapp.ir/request/
  - SOLTANE GHALBHA مدیر سایت
    ۹۷/۰۵/۰۴ در ۰۶:۳۲
    
    پاسخ
    
    سلام
    
    سایت شما بر پایه وردپرس هست، و میتونید از افزونه GravityForm یا Contact 7 From استفاده کنید.
    
    افزونه گراویتی فرم این قابلیت رو داره که به درگاه پرداخت متصل بشه(و آرین پال رو هم پشتیبانی میکنه)
    
    آدرس وب سایت پشتیبان فارسی گراویتی فرم: کلیک کنید(مراجعه کنید آموزش ها و افزونه های مربوطه قرار داره)
    
    موفق باشید.

rasol کاربر تازه

۹۷/۰۴/۰۶ در ۱۹:۲۷

پاسخ

سلام میشه منو راهنمایی کنید ممنون میشم خیلی احتیاج دارم مثلا

یک کادر متن ایجاد میکنم

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

SOLTANE GHALBHA مدیر سایت

۹۷/۰۴/۰۷ در ۰۷:۲۷

به کمک جی کوئری یا جاوا اسکریپت، قادر به انجام این کار هستید

یک نمونه کد براتون نوشتم، همین رو داخلش تغییرات ایجاد بدید و به شکل دلخواهتون در بیارید

<html>
<head>
	<title> go To </title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<style>
body
{
    padding: 10px;
    font-family:Calibri;
    font-size:12pt;
}

td
{
    padding:5px;
}
input
{
    font-family:Calibri;
    font-size:12pt;
}

span
{
    font-family:Calibri;
    font-size:9pt;
    color:red;
}
</style>

<script>
$(document).ready(function() {
    $('#btnSubmit').click(function(e) {
        var isValid = true;
        $('input[type="text"]').each(function() {
            if ($.trim($(this).val()) == '') {
                isValid = false;
                $(this).css({
                    "border": "1px solid red",
                    "background": "#FFCECE"
                });
            }
            else {
                $(this).css({
                    "border": "",
                    "background": ""
                });
            }
        });
        if (isValid == false) 
            e.preventDefault();
        else 
           //alert('sdadas')
		window.location = 'https://beporsam.ir';
    });	
});
</script>

<body>

	<table>
	<tr>
		<td>Address: 
		</td>
		<td><input type='text' id='txtFName'/ >
		</td>
	</tr>

	<tr>
		<td colspan="2" style='text-align:center;'>
		<input type="button" id="btnSubmit" value="GoTo ">
		</td>
	</tr>
	</table>

</body>
</html>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

۴۹

۵۰

۵۱

۵۲

۵۳

۵۴

۵۵

۵۶

۵۷

۵۸

۵۹

۶۰

۶۱

۶۲

۶۳

۶۴

۶۵

۶۶

۶۷

۶۸

۶۹

۷۰

۷۱

۷۲

۷۳

۷۴

۷۵

۷۶

۷۷

۷۸

<html>

<head>

</head>

<style>

body

{

padding: ۱۰px;

font-family:Calibri;

font-size:۱۲pt;

}

padding:۵px;

input

span

font-size:۹pt;

color:red;

</style>

$(document).ready(function() {

$('#btnSubmit').click(function(e) {

var isValid = true;

$('input[type="text"]').each(function() {

if ($.trim($(this).val()) == '') {

isValid = false;

$(this).css({

"border": "۱px solid red",

"background": "#FFCECE"

});

else {

"border": "",

"background": ""

if (isValid == false)

e.preventDefault();

else

//alert('sdadas')

window.location = 'https://beporsam.ir';

</script>

<body>

<table>

<tr>

<td>Address:

</td>

</tr>

</table>

</body>

</html>

اگر فیلد خالی باشه و کاربر روی دکمه GoTo کلیک کنه، پس زمینه و حاشیه فیلد قرمز میشه، در غیر اینصورت کاربر به سایت beporsam.ir هدایت میشه.