הדרכה זו מסבירה כיצד לתכנן טוב טופס באמצעות CSS עיצוב נקי רק עם תווית ו קלט תגי ה-HTML כדי לדמות מבנה הטבלה. אתה יכול להשתמש בכל CSS / html אלמנטים לעצב אישית שלך טופס האינטרנט שלך פרויקטים:

שלב 1: יצירת מבנה HTML בסיסי

  <form> 
  > <div בכיתה = "box"> 
  <h1> טופס יצירת קשר: </ h1> 
  <label> 
  <span> שם מלא </ span> 
  class = "input_text" name = "name" id = "name" / > <input סוג = "text" בכיתה = "input_text" שם = "name" id = "name" /> 
  </ תווית> 
  <label> 
  <span> דוא"ל </ span> 
  class = "input_text" name = "email" id = "email" / > <input סוג = "text" בכיתה = "input_text" שם = "email" id = "email" /> 
  </ תווית> 
  <label> 
  <span> נושא </ span> 
  class = "input_text" name = "subject" id = "subject" / > <input סוג = "text" בכיתה = "input_text" שם = "subject" id = "subject" /> 
  </ תווית> 
  <label> 
  <span> הודעה </ span> 
  name = "feedback" id = "feedback" > </textarea> <textarea בכיתה "message" = שם = "feedback" id = "feedback"> </ textarea> 
  class = "button" value = "Submit Form"  / > <input סוג = "button" בכיתה = "button" ערך = "Submit Form" /> 
  </ תווית> 
 
 
  </ div> 
  </ form> 

שלב: 2 יצירת קוד CSS

  ; padding : 0 ; } * (Margin: 0; הריפוד: 0;) 
  % normal  Arial, Helvetica, sans-serif ; background : # 161712 ; } גוף (font: 100% בדרך כלל Arial, Helvetica, sans-serif; רקע: # 161712;) 
  ; padding : 0 ; color : #ffffff ; } טופס קלט, בחר, textarea (margin: 0; הריפוד: 0; צבע: # FFFFFF;) 

  div. התיבה ( 
  ; margin: 0 auto; 
  רוחב: 500px; 
  ; רקע: # 222222; 
  מיקום: קרוב משפחה; 
  העליון: 50px; 
  # 262626 ; גבול: 1px solid # 262626; 
  ) 

  div. התיבה h1 (  
  ; צבע: # FFFFFF; 
  גופן, גודל: 18px; 
  טקסט המרה: באותיות רישיות; 
  5px 5px ; הריפוד: 5px 0 5px 5px; 
  # 161712 ; -הגבול התחתון: 1px solid # 161712; 
  # 161712 ; הגבול-top: 1px solid # 161712;  
  ) 

  div. בתיבה תווית ( 
  רוחב: 100%; 
  ; תצוגה: block; 
  ; רקע: # 1C1C1C; 
  # 262626 ; הגבול-top: 1px solid # 262626; 
  # 161712 ; -הגבול התחתון: 1px solid # 161712; 
  10px 0 ; הריפוד: 10px 0 10px 0; 
  ) 

  div. בתיבה תווית span ( 
  ; תצוגה: block; 
  ; צבע: # bbbbbb; 
  גופן, גודל: 12px; 
  גלגל הצלה: עזבו; 
  רוחב: 100px; 
  יישור טקסט: הזכות; 
  0 0 ; הריפוד: 5px 20px 0 0; 
  ) 

  div. התיבה. input_text ( 
  ; הריפוד: 10px 10px; 
  רוחב: 200px; 
  ; רקע: # 262626; 
  double # 171717 ; -הגבול התחתון: כפולה 1px # 171717; 
  double # 171717 ; הגבול-top: 1px כפול # 171717; 
  # 333333 ; הגבול-שמאל: כפולה 1px # 333333; 
  # 333333 ; הגבול הימני: כפולה 1px # 333333; 
  ) 

  div. התיבה. הודעה ( 
  ; הריפוד: 7px 7px; 
  רוחב: -350; 
  ; רקע: # 262626; 
  double # 171717 ; -הגבול התחתון: כפולה 1px # 171717; 
  double # 171717 ; הגבול-top: 1px כפול # 171717; 
  # 333333 ; הגבול-שמאל: כפולה 1px # 333333; 
  # 333333 ; הגבול הימני: כפולה 1px # 333333; 
  לדבוא: נסתר; 
  גובה: 150px; 
  ) 

  div. התיבה. הלחצן 
  ( 
  10px 0 ; margin: 0 0 10px 0; 
  ; הריפוד: 4px 7px; 
  ; רקע: # CC0000; 
  גבול: 0px; 
  ; מיקום: קרוב משפחה; 
  העליון: 10px; 
  עזבו: 382px; 
  רוחב: 100px; 
  double # 660000 ; -הגבול התחתון: כפולה 1px # 660000; 
  double # 660000 ; הגבול-top: 1px כפול # 660000; 
  #FF0033 ; הגבול-שמאל: 1px כפול # FF0033; 
  #FF0033 ; הגבול הימני: 1px כפול # FF0033; 
  ) 

סוף סוף אנחנו נעשה. יצרנו טוב בלי להסתכל טופס הטבלה. הצג דוגמה

מתויק תחת: CSS, הדרכות על ידי Admin