Login to your account

Username *
Password *
Remember Me

Create an account

Fields marked with an asterisk (*) are required.
Name *
Username *
Password *
Verify password *
Email *
Verify email *
Captcha *
Reload Captcha

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

By اسفند 23, 1393 28661 0

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

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

 

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

این مورد را ارزیابی کنید
(7 رای‌ها)
آخرین ویرایش در یکشنبه, 10 خرداد 1394 ساعت 14:03
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz

Please publish modules in offcanvas position.

تک وب دیزاین-قالب فارسی جوملا