آموزش ساخت فرم خبرنامه با استفاده از HTML و CSS

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

2 آموزش ساخت فرم خبرنامه با استفاده از HTML و CSSعضو خبرنامه سایت آسارایان هستید ؟ یک فرم که ایمیل شما را دریافت و در بانک اطلاعات سایت ذخیره می کند و هر روز سر یک ساعت خاص آموزشهای فعال شده تا زمان مشخص شده را به ایمیل شما ارسال می کند .  این فرم از دو بخش تشکیل شده . بخش اول که با HTML و CSS طراحی شده و بخش دوم که مربوط به زبان سمت سرور و پایگاه داده می شود. بنده بخش اول را میخواهم در ادامه برای شما با استفاده از تگ های HTML  و CSS طراحی کنم . کار بسیار ساده و راحتی می باشد که کاربران به راحتی می توانند انجام بدهند . با من همراه باشید تا روش انجام اینکار را توضیح بدهم .  

1. برای شروع یک نرم افزار ویرایشگر متن مثل نوت پد یا دریم ویور را اجرا کنید . نوت پد جزو برنامه های پیش فرض ویندوز می باشد . من از نرم افزار Notepad ++ استفاده میکنم .

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

 

 

<html>
<head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>HTML Form</title>
</head>
            <body>
            </body>
</html>

 



2. تا به اینجا که کار خاصی انجام ندادیم . تگهای ابتدای تشکیل دهنده یک صفحه وب سایت را ایجاد کردیم .  حالا باید تگ Form را بین تگ Body قرار بدهیم . 

 

<form action="" method="post">

 

 3. کد کلی به شکل زیر می شود .

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Form</title>
</head>
  <body>
    <form action="#" method="post" name="sign up for beta form">
     </form>
  </body>
</html>

  

4. داخل فرم 3 قسمت قرار دارد که باید از تک Div استفاده کنیم . این سه قسمت میشه بخش اول که عنوان خبرنامه هست . بخش دوم توضیحات هست . بخش سوم هم مربوط میشه به باکس دریافت ایمیل.

من این کدها را بین تگ Body همانند تصویر زیر قرار میدهم. به سه کلاس class="header" / class="description" / class="input" دقت کنید . این تگها مربوط به ظاهر فرم می باشند .

 

 

<form action="#" method="post" name="sign up for beta form">
      <div class="header">
         <p>Sign up for newsletter AsaRayan</p>
      </div>
      <div class="description">
        <p>Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.</p>
      </div>
      <div class="input">
        <input type="text" class="button" id="email" name="email">
        <input type="submit" class="button" id="submit" value="SIGN UP">
      </div>
    </form>

 



 

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

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Form</title>
</head>
  <body>
    <form action="#" method="post" name="sign up for beta form">
      <div class="header">
         <p>Sign up for newsletter AsaRayan</p>
      </div>
      <div class="description">
        <p>Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.</p>
      </div>
      <div class="input">
        <input type="text" class="button" id="email" name="email" >
        <input type="submit" class="button" id="submit" value="SIGN UP">
      </div>
    </form>
  </body>
</html>

 حالا اگر فایل Index.html را اجرا کنیم صفحه ای باید شبیه تصویر زیر داشته باشید

 1 آموزش ساخت فرم خبرنامه با استفاده از HTML و CSS

 

 تا به اینجا کد اصلی قالب نوشته شد . حالا باید تگ هایی که مربوط به ظاهر قالب می شود را بین تگ <style type="text/css"> قرار بدهیم . این تگ ما بین تک Head نوشته می شود . البته بهتر است که دستورات Css در یک فایل مستقل تایپ و ذخیره شود . ولی در این آموزش هدف فقط ساخت فرم می باشد و اگر قرار بود این قسمت ضمیمه یک قالب می شد حتما فایل Css را در یک فایل جداگانه ذخیره می کردم . 

4. در مرحله 3 به این نکته اشاره کردم که به سه کلاس class="header" / class="description" / class="input" دقت کنید . حالا باید تگهای Css را بین تگ <style type="text/css"> قرار بدهیم .

به کدهای زیر دقت کنید . در تگ Body رنگ پس زمینه ، نوع فونت ، نوع رنگ متن و محل قرار گیری متن قرار گرفته است .
ابعاد با Form مشخص شده است بقیه تنظیمات هم به همین صورت تا پایان . دقت داشته باشید که حتما باید با تگهای Css آشنا داشته باشید تا راحت تر بتوانید از کدهای زیر استفاده کنید .

 

<style type="text/css">
body {
  background: #F8A434;
  font-family: 'Lato', tahoma;
  color: #FDFCFB;
  text-align: center;
}
form {
  width: 450px;
  margin: 17% auto;
}
.header {
  font-size: 35px;
  text-transform: uppercase;
  letter-spacing: 5px;
}
.description {
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1.3em;
  margin: -2px 0 45px;
}
.input {
  display: flex;
  align-items: center;
}
.button {
  height: 44px;
  border: none;
}
#email {
  width: 75%;
  background: #FDFCFB;
  font-family: inherit;
  color: #737373;
  letter-spacing: 1px;
  text-indent: 5%;
  border-radius: 5px 0 0 5px;
}
#submit {
  width: 25%;
  height: 46px;
  background: #E86C8D;
  font-family: inherit;
  font-weight: bold;
  color: inherit;
  letter-spacing: 1px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background .3s ease-in-out;
}
#submit:hover {
  background: #d45d7d;
}
input:focus {
  outline: none;
  outline: 2px solid #E86C8D;
  box-shadow: 0 0 2px #E86C8D;
}
</style>

 

 

کد کلی به شکل زیر می شود و دمو را می توانید در تصویر زیر مشاهده کنید . 

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Form</title>
<style type="text/css">
body {
  background: #F8A434;
  font-family: 'Lato', tahoma;
  color: #FDFCFB;
  text-align: center;
}
form {
  width: 450px;
  margin: 17% auto;
}
.header {
  font-size: 35px;
  text-transform: uppercase;
  letter-spacing: 5px;
}
.description {
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1.3em;
  margin: -2px 0 45px;
}
.input {
  display: flex;
  align-items: center;
}
.button {
  height: 44px;
  border: none;
}
#email {
  width: 75%;
  background: #FDFCFB;
  font-family: inherit;
  color: #737373;
  letter-spacing: 1px;
  text-indent: 5%;
  border-radius: 5px 0 0 5px;
}
#submit {
  width: 25%;
  height: 46px;
  background: #E86C8D;
  font-family: inherit;
  font-weight: bold;
  color: inherit;
  letter-spacing: 1px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background .3s ease-in-out;
}
#submit:hover {
  background: #d45d7d;
}
input:focus {
  outline: none;
  outline: 2px solid #E86C8D;
  box-shadow: 0 0 2px #E86C8D;
}
</style>
</head>
  <body>
    <form action="#" method="post" name="sign up for beta form">
      <div class="header">
         <p>Sign up for newsletter AsaRayan</p>
      </div>
      <div class="description">
        <p>Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.</p>
      </div>
      <div class="input">
        <input type="text" class="button" id="email" name="email" >
        <input type="submit" class="button" id="submit" value="SIGN UP">
      </div>
    </form>
  </body>
</html>

 

 

دانلود فایل نمونه 

 

دمو آموزش در مرورگر

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

نوشتن دیدگاه

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

دیدگاه‌ها   

0 #1 محمد 1396-06-03 18:31
سلام
وب سایت خوب و کاربردی دارید

موفق باشید
نقل قول کردن

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

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