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

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

تماس با ماطراحی فرم تماس با ما نیاز به تگهای 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> 

 

مشاهده دمو

آخرین بروز رسانیچهارشنبه, 18 شهریور 1394 10:02

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا