آموزش طراحی فرم ثبت نام با Html و Css

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

3 آموزش طراحی فرم ثبت نام با Html و Cssبا یکی دیگر از آموزشهای طراحی فرم ثبت نام در خدمت شما هستم . بخشی که دارای آمار بازدید بالایی می باشد و کاربرانی که علاقه زیادی به یادگیری کدهای HTML و CSS دارند همیشه این بخش را مورد بررسی قرار میدهند.  هیچ سایتی را نمی توانید پیدا کنید که دارای فرم ثبت نام یا ورود کاربران نباشد البته سایتهای HTML از این قاعده مستثنی می باشند ولی تقریبا تمام وب سایتهای فعال دارای یک فرم ثبت نام هستند . فرم ثبت نام به صورت پیش فرض باید با Html طراحی شده سپس با Css  شکل ظاهری آن تغییر کند و در پایان با زبان های برنامه نویسی پیشرفته مثل PHP یا ASP باید به یک پایگاه داده متصل شوند.
 برای شروع نیاز به یک ویرایشگر متن مثل نوت پد یا دریم ویور دارید تا به راحتی کدتان را در آن تایپ کرده و نتیجه را مشاهده کنید . قبل از شروع آموزش باید در مورد تگهایی که در فرم مورد استفاده قرار میگرد کمی توضیح بدهم.
فرم های به طور کلی دارای یکسری گزینه ها مثل کادرهای متنی ( 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>

  قسمت بالایی فرم از دو کلید "ثبت نام" و "ورود" تشکیل شده است . ابتدا این دو کلید را با یکی دیویژن ایجاد می کنم . برای ایجاد لینک باید از تک UL به همراه زیر مجموعه آن یعنی LI استفاده شود . 

کد بخش اول

 

<div class="form">     
      <ul class="tab-group">
        <li class="tab active"><a href="#signup">ثبت نام </a></li>
        <li class="tab"><a href="#login">ورود</a></li>
      </ul>   
</div> <!-- /form -->

 کد کلی

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>آموزش طراحی فرم ثبت نام سایت آسارایان</title>
</head>
  <body>
<div class="form">     
      <ul class="tab-group">
        <li class="tab active"><a href="#signup">ثبت نام </a></li>
        <li class="tab"><a href="#login">ورود</a></li>
      </ul>   
</div> <!-- /form -->
  </body>
</html>

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

 

1 آموزش طراحی فرم ثبت نام با Html و Css

 

حالا نوبت میرسه به ایجاد فرم های یا کادرهای مربوط به ثبت نام . برای انجام اینکار از تک form  استفاده می شود . 

 

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

 

من به ترتیب تگ های مورد نظرم را بین این تگ قرار میدهم 

 

        <div id="signup">   
          <h1>به صورت رایگان ثبت نام کنید</h1>          
          <form action="/" method="post">         
          <div class="top-row">
            <div class="field-wrap">
              <label>
                نام <span class="req">*</span>
              </label>
              <input type="text" required autocomplete="off" />
            </div>        
            <div class="field-wrap">
              <label>
                نام خانوادگی<span class="req">*</span>
              </label>
              <input type="text"required autocomplete="off"/>
            </div>
          </div>
          <div class="field-wrap">
            <label>
              ایمیل<span class="req">*</span>
            </label>
            <input type="email"required autocomplete="off"/>
          </div>         
          <div class="field-wrap">
            <label>
              رمز عبور<span class="req">*</span>
            </label>
            <input type="password"required autocomplete="off"/>
          </div>          
          <button type="submit" class="button button-block"/>ثبت نام</button>          
          </form>
        </div>              
      </div><!-- tab-content -->    

 

کد کلی صفحه index شما باید در مرورگر به شکل زیر باشد 

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>آموزش طراحی فرم ثبت نام سایت آسارایان</title>
</head>
  <body>
<div class="form">     
      <ul class="tab-group">
        <li class="tab active"><a href="#signup">ثبت نام </a></li>
        <li class="tab"><a href="#login">ورود</a></li>
      </ul>  
<!--  ایجاد فرم از این قسمت شروع می شود -->   
      <div class="tab-content">
        <div id="signup">  
<!-- عنوان صفحه -->   
          <h1>به صورت رایگان ثبت نام کنید</h1>      
          <form action="/" method="post">         
          <div class="top-row">
            <div class="field-wrap">
<!-- فیلد نام -->    
              <label>
                نام <span class="req">*</span>
              </label>
              <input type="text" required autocomplete="off" />
            </div>        
            <div class="field-wrap">
<!--  فیلد نام خانوادگی -->    
              <label>
                نام خانوادگی<span class="req">*</span>
              </label>
              <input type="text"required autocomplete="off"/>
            </div>
          </div>
<!-- فیلد ایمیل -->   
          <div class="field-wrap">
            <label>
              ایمیل<span class="req">*</span>
            </label>
            <input type="email"required autocomplete="off"/>
          </div>      
<!--  فیلد رمز عبور -->      
          <div class="field-wrap">
            <label>
              رمز عبور<span class="req">*</span>
            </label>
            <input type="password"required autocomplete="off"/>
          </div>   
<!--  کلید ثبت نام -->        
          <button type="submit" class="button button-block"/>ثبت نام</button>          
          </form>
        </div>              
      </div><!-- tab-content -->      
</div> <!-- /form -->
  </body>
</html>

 

 

2 آموزش طراحی فرم ثبت نام با Html و Css

 

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

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

 

ابتدا تگ <style type="text/css"></style> را بین تگ Head  قرار بدهید

 

<style type="text/css"></style>

 سپس کدهای زیر را در بین دو تگ <style type="text/css"></style> قرار بدهید . برای درک بهتر سعی کنید قسمت قسمت کدها را وارد بدنه اصلی کنید تا دقیق متوجه شوید که هر تگ چه نقشی در ظاهر قالب ایفا می کند . 

 

 

/*بدنه اصلی فرم*/
*, *:before, *:after {
  box-sizing: border-box;
}
html {
  overflow-y: scroll;
}
body {
  background: #c1bdba;
  font-family: 'Titillium Web', sans-serif;
}
a {
  text-decoration: none;
  color: #1ab188;
  -webkit-transition: .5s ease;
          transition: .5s ease;
}
a:hover {
  color: #179b77;
}
.form {
  background: rgba(19, 35, 47, 0.9);
  padding: 40px;
  max-width: 600px;
  margin: 40px auto;
  border-radius: 4px;
  box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}
/*تگ های مربوط به ظاهر منویهای ثبت نام و ورود */
.tab-group {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
}
.tab-group:after {
  content: "";
  display: table;
  clear: both;
}
.tab-group li a {
  display: block;
  text-decoration: none;
  padding: 15px;
  background: rgba(160, 179, 176, 0.25);
  color: #a0b3b0;
  font-size: 20px;
  float: left;
  width: 50%;
  text-align: center;
  cursor: pointer;
  -webkit-transition: .5s ease;
          transition: .5s ease;
}
.tab-group li a:hover {
  background: #179b77;
  color: #ffffff;
}
.tab-group .active a {
  background: #1ab188;
  color: #ffffff;
}
/*تگ مربوط به ظاهر عنوان به صورت رایگان ثبت نام کنید */
h1 {
  text-align: center;
  color: #ffffff;
  font-weight: 300;
  margin: 0 0 40px;
}
/*تگ های مربوط به فیلدهای ثبت نام */
label {
  position: absolute;
  -webkit-transform: translateY(6px);
      -ms-transform: translateY(6px);
          transform: translateY(6px);
  left: 13px;
  color: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.25s ease;
          transition: all 0.25s ease;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  font-size: 22px;
}
label .req {
  margin: 2px;
  color: #1ab188;
}
label.active {
  -webkit-transform: translateY(50px);
      -ms-transform: translateY(50px);
          transform: translateY(50px);
  left: 2px;
  font-size: 14px;
}
label.active .req {
  opacity: 0;
}
label.highlight {
  color: #ffffff;
}
input, textarea {
  font-size: 22px;
  display: block;
  width: 100%;
  padding: 5px 10px;
  background: none;
  background-image: none;
  border: 1px solid #a0b3b0;
  color: #ffffff;
  border-radius: 0;
  -webkit-transition: border-color .25s ease, box-shadow .25s ease;
          transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
  outline: 0;
  border-color: #1ab188;
}
textarea {
  border: 2px solid #a0b3b0;
  resize: vertical;
}
.field-wrap {
  position: relative;
  margin-bottom: 40px;
}
.top-row:after {
  content: "";
  display: table;
  clear: both;
}
.top-row > div {
  float: left;
  width: 48%;
  margin-right: 4%;
}
.top-row > div:last-child {
  margin: 0;
}
/*تگ مربوط به ظاهر کلید ثبت نام */
.button {
  border: 0;
  outline: none;
  border-radius: 0;
  padding: 15px 0;
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: #1ab188;
  color: #ffffff;
  -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease;
  -webkit-appearance: none;
}
.button:hover, .button:focus {
  background: #179b77;
}
.button-block {
  display: block;
  width: 100%;
}

 کد کلی قالب فرم به شکل زیر می باشد

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>آموزش طراحی فرم ثبت نام سایت آسارایان</title>
<style type="text/css">
/*بدنه اصلی فرم*/
*, *:before, *:after {
  box-sizing: border-box;
}
html {
  overflow-y: scroll;
}
body {
  background: #c1bdba;
  font-family: 'Titillium Web', sans-serif;
}
a {
  text-decoration: none;
  color: #1ab188;
  -webkit-transition: .5s ease;
          transition: .5s ease;
}
a:hover {
  color: #179b77;
}
.form {
  background: rgba(19, 35, 47, 0.9);
  padding: 40px;
  max-width: 600px;
  margin: 40px auto;
  border-radius: 4px;
  box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}
/*تگ های مربوط به ظاهر منویهای ثبت نام و ورود */
.tab-group {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
}
.tab-group:after {
  content: "";
  display: table;
  clear: both;
}
.tab-group li a {
  display: block;
  text-decoration: none;
  padding: 15px;
  background: rgba(160, 179, 176, 0.25);
  color: #a0b3b0;
  font-size: 20px;
  float: left;
  width: 50%;
  text-align: center;
  cursor: pointer;
  -webkit-transition: .5s ease;
          transition: .5s ease;
}
.tab-group li a:hover {
  background: #179b77;
  color: #ffffff;
}
.tab-group .active a {
  background: #1ab188;
  color: #ffffff;
}
/*تگ مربوط به ظاهر عنوان به صورت رایگان ثبت نام کنید */
h1 {
  text-align: center;
  color: #ffffff;
  font-weight: 300;
  margin: 0 0 40px;
}
/*تگ های مربوط به فیلدهای ثبت نام */
label {
  position: absolute;
  -webkit-transform: translateY(6px);
      -ms-transform: translateY(6px);
          transform: translateY(6px);
  left: 13px;
  color: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.25s ease;
          transition: all 0.25s ease;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  font-size: 22px;
}
label .req {
  margin: 2px;
  color: #1ab188;
}
label.active {
  -webkit-transform: translateY(50px);
      -ms-transform: translateY(50px);
          transform: translateY(50px);
  left: 2px;
  font-size: 14px;
}
label.active .req {
  opacity: 0;
}
label.highlight {
  color: #ffffff;
}
input, textarea {
  font-size: 22px;
  display: block;
  width: 100%;
  padding: 5px 10px;
  background: none;
  background-image: none;
  border: 1px solid #a0b3b0;
  color: #ffffff;
  border-radius: 0;
  -webkit-transition: border-color .25s ease, box-shadow .25s ease;
          transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
  outline: 0;
  border-color: #1ab188;
}
textarea {
  border: 2px solid #a0b3b0;
  resize: vertical;
}
.field-wrap {
  position: relative;
  margin-bottom: 40px;
}
.top-row:after {
  content: "";
  display: table;
  clear: both;
}
.top-row > div {
  float: left;
  width: 48%;
  margin-right: 4%;
}
.top-row > div:last-child {
  margin: 0;
}
/*تگ مربوط به ظاهر کلید ثبت نام */
.button {
  border: 0;
  outline: none;
  border-radius: 0;
  padding: 15px 0;
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: #1ab188;
  color: #ffffff;
  -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease;
  -webkit-appearance: none;
}
.button:hover, .button:focus {
  background: #179b77;
}
.button-block {
  display: block;
  width: 100%;
}
</style>
</head>
  <body>
<div class="form">     
      <ul class="tab-group">
        <li class="tab active"><a href="#signup">ثبت نام </a></li>
        <li class="tab"><a href="#login">ورود</a></li>
      </ul>  
      <div class="tab-content">
        <div id="signup">   
          <h1>به صورت رایگان ثبت نام کنید</h1>          
          <form action="/" method="post">         
          <div class="top-row">
            <div class="field-wrap">
              <label>
                نام <span class="req">*</span>
              </label>
              <input type="text" required autocomplete="off" />
            </div>        
            <div class="field-wrap">
              <label>
                نام خانوادگی<span class="req">*</span>
              </label>
              <input type="text"required autocomplete="off"/>
            </div>
          </div>
          <div class="field-wrap">
            <label>
              ایمیل<span class="req">*</span>
            </label>
            <input type="email"required autocomplete="off"/>
          </div>         
          <div class="field-wrap">
            <label>
              رمز عبور<span class="req">*</span>
            </label>
            <input type="password"required autocomplete="off"/>
          </div>          
          <button type="submit" class="button button-block"/>ثبت نام</button>          
          </form>
        </div>              
      </div><!-- tab-content -->      
</div> <!-- /form -->
  </body>
</html>

 

3 آموزش طراحی فرم ثبت نام با Html و Css

 

 دمو فرم در مرورگر  |  دانلود فایل تمرینی آموزش

آخرین بروز رسانییکشنبه, 10 خرداد 1394 14:03

نوشتن دیدگاه

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

دیدگاه‌ها   

0 #11 عاعهالعها 1397-12-05 19:00
به نقل از sadra:
سلام میخواستم بدونم اطلاعات ورودی کجا میرود

لطفا بگید
نقل قول کردن
+1 #10 sadra 1397-05-15 14:13
سلام میخواستم بدونم اطلاعات ورودی کجا میرود
نقل قول کردن
+1 #9 fahimeh 1397-02-31 00:45
عاااالی بود .ممنون
نقل قول کردن
0 #8 saeed 1397-02-01 00:37
mamnon az amozeshton khily khob bod
نقل قول کردن
0 #7 سعید صبح خیز 1396-11-20 11:18
به نقل از sina:
من نمیتونم اینو در وبلاگم بزارم این ارور رو میده لطفا کمک کنید ...

امکان درج تگ با http-equiv در قالب وجود ندارد

سلام
نمی تونید ازاین کد در وبلاگ استفاده کنید
نقل قول کردن
0 #6 sina 1396-11-19 19:46
من نمیتونم اینو در وبلاگم بزارم این ارور رو میده لطفا کمک کنید ...

امکان درج تگ با http-equiv در قالب وجود ندارد
نقل قول کردن
0 #5 mohammad 1396-05-23 13:35
به نقل از ali:
باسلام و با تشکر از سایت خوبتون.
من در این موضوعی که آموزش دادید مشکل داشتم.
وقتی تمام مراحل را کامل انجام می دم،در نمونه Index.html به جای متن ها مثلا جایی که نوشته ثبت نام فقط علامت سوال دیده میشه.لطفا کمکم کنید.

شما باید از دستور
نقل قول کردن
0 #4 sajjad 1395-12-12 14:08
مرسی عالی بود
تمام مراحل رو انجام دادم ودرست شد
نقل قول کردن
0 #3 سعید صبح خیز 1395-06-08 08:09
به نقل از ali:
باسلام و با تشکر از سایت خوبتون.
من در این موضوعی که آموزش دادید مشکل داشتم.
وقتی تمام مراحل را کامل انجام می دم،در نمونه Index.html به جای متن ها مثلا جایی که نوشته ثبت نام فقط علامت سوال دیده میشه.لطفا کمکم کنید.

سلام
در صورتیکه کدهای UTF8 را در ابتدای دستورات درست تایپ کرده باشید مشکلی نباید وجود داشته باشه
نقل قول کردن
+3 #2 ali 1395-06-08 08:01
چرا وقتی ثبت نام می کنی ،ثبت نمیشه و چرا دکمه ورودش کار نمی کنه؟
نقل قول کردن

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

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