تالار گفتگوی میکرو رایانه - مشاهده موضوع - طراحی فرم کامل با کدهای HTML و CSS
مشاهده پست های بی پاسخ | مشاهده موضوعهای فعال تاریخ امروز یکشنبه 19 آگوست, 2018 1:52 am



پاسخ به موضوع  [ 2 پست ] 
 طراحی فرم کامل با کدهای HTML و CSS 
نویسنده پیام

عضو: یکشنبه 05 اکتبر, 2008 11:42 am
پست ها: 36
پست طراحی فرم کامل با کدهای HTML و CSS
مثال
کد یک فرم کامل که شامل انواع مختلف فرمهاست در زیر آمده که با توجه به نوع طراحی فرم می توان از بخشهای خاصی از آن استفاده کرد. این فرم برای طراحی فرم دعوت به همکاری درست شده است:

ابتدا کدهای CSS فرم:

کد:
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.microrayaneh.com/ */

.feedbackform{
padding: 5px;
}

div.fieldwrapper{ /*field row DIV (includes two columns- Styled label column and 'thefield' column)*/
width: 550px; /*width of form rows*/
overflow: hidden;
padding: 5px 0;
}

div.fieldwrapper label.styled{ /* label elements that should be styled (left column within fieldwrapper DIV) */
float: left;
width: 150px; /*width of label (left column)*/
text-transform: uppercase;
border-bottom: 1px solid red;
margin-right: 15px; /*spacing with right column*/
}

div.fieldwrapper div.thefield{ /* DIV that wraps around the actual form fields (right column within fieldwrapper DIV) */
float: left;
margin-bottom: 10px; /* space following the field */
}

div.fieldwrapper div.thefield input[type="text"]{ /* style for INPUT type="text" fields. Has no effect in IE7 or below! */
width: 250px;
}

div.fieldwrapper div.thefield textarea{ /* style for TEXTAREA fields. */
width: 300px;
height: 150px;
}

div.buttonsdiv{ /*div that wraps around the submit/reset buttons*/
margin-top: 5px; /*space above buttonsdiv*/
}

div.buttonsdiv input{ /* style for INPUT fields within 'buttonsdiv'. Assumed to be form buttons. */
width: 80px;
background: #e1dfe0;
}

</style>


و کدهای HTML فرم

کد:
<form class="feedbackform">

<div class="fieldwrapper">
   <label for="username" class="styled">Your Name:</label>
   <div class="thefield">
      <input type="text" id="username" value="" size="30" />
   </div>
</div>

<div class="fieldwrapper">
   <label for="email" class="styled">Email address:</label>
   <div class="thefield">
      <input type="text" id="email" value="" size="30" /><br />
      <span style="font-size: 80%">*Note: Please make sure it's correctly entered!</span>
   </div>
</div>

<div class="fieldwrapper">
   <label for="somehighschool" class="styled">education:</label>
   <div class="thefield">
      <ul style="margin-top:0;">
      <li><input type="radio" id="somehighschool" name="education" value=""/> <label for="somehighschool">Some Highschool</label></li>
      <li><input type="radio" id="highschool" name="education" value="" /> <label for="highschool">Highschool graduate</label></li>
      <li><input type="radio" id="somecollege" name="education" value="" /> <label for="somecollege">Some college</label></li>
      <li><input type="radio" id="vocation" name="education" value="" /> <label for="vocation">Vocation school</label></li>
      <li><input type="radio" id="college" name="education" value="" /> <label for="college">College graduate or higher</label></li>
      </ul>
   </div>
</div>

<div class="fieldwrapper">
   <label for="html" class="styled">Skills:</label>
   <div class="thefield">
      <ul style="margin-top:0;">
      <li><input type="checkbox" id="html" name="skills" value="" /> <label for="html">HTML/ CSS</label></li>
      <li><input type="checkbox" id="javascript" name="skills" value=""/> <label for="javascript">JavaScript</label></li>
      <li><input type="checkbox" id="ajax" name="skills" value="" /> <label for="ajax">Ajax and XML</label></li>
      <li><input type="checkbox" id="php" name="skills" value="" /> <label for="php">PHP and Database</label></li>
      </ul>
      <span style="font-size: 80%">* Please check all that apply.</span>
   </div>
</div>

<div class="fieldwrapper">
   <label for="agegroup" class="styled">Department:</label>
   <div class="thefield">
      <select id="agegroup">
      <option value="2.1">HR department</option>
      <option value="3">Sales</option>
      <option value="4.1">Customer Service/ Support</option>
      <option value="5.2">Accounting</option>
      </select>
   </div>
</div>

<div class="fieldwrapper">
   <label for="about" class="styled">About yourself:</label>
   <div class="thefield">
      <textarea id="about"></textarea>
</div>
</div>

<div class="buttonsdiv">
   <input type="submit" value="Submit" style="margin-left: 150px;" /> <input type="reset" value="Reset" />
</div>

</form>


یکشنبه 02 می, 2010 7:25 pm
مشخصات شخصی

عضو: دوشنبه 19 آگوست, 2013 6:11 pm
پست ها: 1
پست Re: طراحی فرم کامل با کدهای HTML و CSS
سلام یه سوال حالا چطوری به نتایج این فرم ها نگاه کنیم مثلا اطلاع ثبت شده کجا میرن من یه فرم طراحی کردم اما الان نمیدونم باید چیکار کنم ضروریه لطفا اگه میتونید ایمیل کنید ثواب اره موردش خیره


دوشنبه 19 آگوست, 2013 6:40 pm
مشخصات شخصی
مشاهده پست های قبلی:  نمایش بر اساس  
پاسخ به موضوع   [ 2 پست ] 

افراد آنلاین

کاربران حاضر در این تالار: - و 4 مهمان


شما نمی توانید در این تالار موضوع جدید باز کنید
شما نمی توانید در این تالار به موضوع ها پاسخ دهید
شما نمی توانید در این تالار پست های خود را ویرایش کنید
شما نمی توانید در این تالار پست های خود را حذف کنید
شما نمی توانید در این تالار ضمیمه ارسال کنید

جستجو برای:
پرش به:  
cron
استفاده و نقل از مباحث سایت، فقط با ذکر منبع و لینک سایت میکرورایانه مجاز است.
Copyright © 2006 - 2010 MicroRayaneh - Powered by phpBB © phpBB Group
Valid CSS2 Valid XHTML 1.0
طراحی سایت : میکرو رایانه