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

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

طراحی فرم ثبت نام با HTML و CSS مطلب ویژه

توسط 13 مهر, 1393 7879 0

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

تماس با ماطراحی فرم تماس با ما نیاز به تگهای HTML . Css همراه با یک پایگاه داده برای ذخیره و ارسال اطلاعات دارد . به امید خدا از هفته آینده آموزش زبان برنامه نویسی PHP توسط آقای علی شکاری آغاز می شود. مبحثی که از مقدماتی آغاز و تا سطح پیشرفته به امید خدا ادامه خواهد داشت . 
اما در این مطلب میخواهم یک صفحه تماس با ما برای شما طراحی کنم تا بیشتر با تگ های این بخش آشنا شوید . قبل از شروع آموزش باید در مورد تگهایی که در فرم مورد استفاده قرار میگرد کمی توضیح بدهم. فرم های به طور کلی دارای یکسری گزینه ها مثل کادرهای متنی ( TextBox ) ، ليست های بازشو ( Drop-Down Lists ) ، دکمه های گزينشی ( CheckBox ) و ...  هستند .

تگ input در form

اصلی ترین تگی که به همراه تگ form در ایجاد قابلیت های تعاملی نقش دارد، input است که با تنظیم type های مختلف برای آن می توان انواع مختلفی از امکانات نظیر فیلد متنی (text)، فیلد کلمه عبور (password)، دکمه معمولی (button)، دکمه ارسال (submit) و ... را ایجاد کرد، در زیر چند نمونه اولیه از نحوه تعریف و به کارگیری تگ input را ملاحظه می کنید.

 

<input type='button' />
<input type='checkbox' />
<input type='hidden' />
<input type='password' />
<input type='submit' />
<input type='text' />

 



با توجه به توضیحات بالا اگر بخواهید فرمی ایجادکنید که بازدید کننده در آن متنی را تایپ کند باید از tex استفاده کنید یا اگر بخواهید چند گزینه برای انتخاب بازدید کننده قرار بدهید باید از Radio استفاده کنید. 

بسیار خوب ، در ادامه روش ایجاد یک فرم را با استفاده از Html  و Css آموزش میدهم.
1. ابتدا نرم افزار دریم ویور را باز کنید شما می توانید از نوت پد خود ویندوز هم استفاده کنید .  من از نرم افزار Note ++ استفاده میکنم .

1.1. کدهای ابتدایی و تشکیل دهنده یک صفحه Html  را ابتدا تایپ کرده و فایل را با نام Index.html ذخیره میکنم .

 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>آموزش طراحی فرم تماس با ما</title>
</head>
     <body>
     </body>
</html>

 



2. فرم تماس با ما من تشکیل شده از نام و نام خانوادگی ، ایمیل ، موضوع پیغام و توضیحات اضافی .  این 4 گزینه همانند زیر باید در بین تگهای body قرار بگیرد . 
2.1.برای ایجاد فرم باید از تگ form داخل تگ body استفاده شود .

 

<form class='name'  action=''  method='post'  name='name'> </form>

 



کد این قسمت

 

     <form >
          <div class="box">
            <h1>Contact Form</h1>
            <label>
               <span>Full name *</span>
               <input type="text" class="input_text" name="name" id="name"/>
            </label>
             <label>
               <span>Email *</span>
               <input type="text" class="input_text" name="email" id="email"/>
            </label>
             <label>
                <span>Subject *</span>
                <input type="text" class="input_text" name="subject" id="subject"/>
            </label>
            <label>
                <span>Message *</span>
                <textarea class="message" name="feedback" id="feedback"></textarea>
                 <input type="submit" class="button" value="Submit Form" />
            </label>
        </div>
    </form>

 



بعد از نوشتن کدهای بالا صفحه شما به این شکل باید نمایش داده شود . 

فرم 

حالا نوبت میرسه به تغییرات ظاهری که با ایجاد یک استایل در بین تگ head  ظاهر صفحه به صورت کامل نمایش داده می شود . شما برای درک بهتر تگها بتر است هر قسمت را به صورت مجزا تایپ و یکبار صفحه را ذخیره کنید تا بهتر متوجه تعییرات هر قسمت شوید . 

 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>طراحی فرم</title>
<style>
*{ margin:0; padding:0;}
body{ font:100% normal Arial, Helvetica, sans-serif; background:#161712;}
form,input,select,textarea{margin:0; padding:0; color:#fff;}
div.box{
margin:0 auto;
width:500px;
background:#222;
position:relative;
top:50px;
border:1px solid #262626;
}
div.box h1{ 
color:#FFF5CC;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712; 
}
div.box label{
width:100%;
display: block;
background:#1C1C1C;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}
div.box label span{
display: block;
color:#bbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}
div.box .input_text{
padding:10px 10px;
width:200px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333;
border-right:1px double #333;
}
div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333;
border-right:1px double #333;
overflow:hidden;
height:150px;
}
div.box .button
{
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}
</style>
</head>
<body>
     <form >
          <div class="box">
            <h1>Contact Form</h1>
            <label>
               <span>Full name *</span>
               <input type="text" class="input_text" name="name" id="name"/>
            </label>
             <label>
               <span>Email *</span>
               <input type="text" class="input_text" name="email" id="email"/>
            </label>
             <label>
                <span>Subject *</span>
                <input type="text" class="input_text" name="subject" id="subject"/>
            </label>
            <label>
                <span>Message *</span>
                <textarea class="message" name="feedback" id="feedback"></textarea>
                 <input type="submit" class="button" value="Submit Form" />
            </label>
        </div>
    </form>
</body>
</html> 

 

مشاهده دمو

این مورد را ارزیابی کنید
(1 رای)
آخرین ویرایش در چهارشنبه, 18 شهریور 1394 ساعت 10:02
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا