Hvordan skabe gode søger form uden tabellen, CSS, Tutorials |

Hvordan skabe gode søger form uden tabellen

Denne guide forklarer, hvordan man udformer en god form ved hjælp af en ren CSS design med kun etiketten og input tags til at simulere en HTML-tabel struktur. Du kan bruge alle CSS / HTML-elementer til at designe din tilpassede form for din web-projekter:

form-17

Trin 1: Opret grundlæggende HTML-struktur


  <form> 
  > <div class = "box"> 
  <h1> Kontakt Form: </ h1> 
  <label> 
  <span> Fulde navn </ span> 
  class = "input_text" name = "name" id = "name" / > <input type = "text" class = "input_text" name = "name" id = "name" /> 
  </ label> 
  <label> 
  <span> Email </ span> 
  class = "input_text" name = "email" id = "email" / > <input type = "text" class = "input_text" name = "email" id = "email" /> 
  </ label> 
  <label> 
  <span> Om </ span> 
  class = "input_text" name = "subject" id = "subject" / > <input type = "text" class = "input_text" name = "subject" id = "subject" /> 
  </ label> 
  <label> 
  <span> Besked </ span> 
  name = "feedback" id = "feedback" > </textarea> <textarea class = "message" name = "feedback" id = "feedback"> </ textarea> 
  class = "button" value = "Submit Form"  / > <input type = "button" class = "button" værdi = "Submit Form" /> 
  </ label> 
 
 
  </ div> 
  </ form>

Trin: 2 Opret CSS koden


  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  % normal  Arial, Helvetica, sans-serif ; background : # 161712 ; } body (font: 100% normal Arial, Helvetica, sans-serif; background: # 161712;) 
  ; padding : 0 ; color : #ffffff ; } form, input, skal du vælge, textarea (margin: 0; padding: 0; color: # ffffff;) 

  div. box ( 
  ; margin: 0 auto; 
  width: 500px; 
  ; background: # 222222; 
  position: relative; 
  top: 50px; 
  # 262626 ; border: 1px solid # 262626; 
  ) 

  div. box h1 (  
  ; color: # ffffff; 
  font-size: 18px; 
  tekst-transform: store bogstaver; 
  5px 5px ; padding: 5px 0 5px 5px; 
  # 161712 ; border-bottom: 1px solid # 161712; 
  # 161712 ; border-top: 1px solid # 161712;  
  ) 

  div. box label ( 
  width: 100%; 
  ; display: block; 
  ; background: # 1C1C1C; 
  # 262626 ; border-top: 1px solid # 262626; 
  # 161712 ; border-bottom: 1px solid # 161712; 
  10px 0 ; padding: 10px 0 10px 0; 
  ) 

  div. box label span ( 
  ; display: block; 
  ; color: # bbbbbb; 
  font-size: 12px; 
  float: left; 
  width: 100px; 
  text-align: right; 
  0 0 ; padding: 5px 20px 0 0; 
  ) 

  div. boks. input_text ( 
  ; padding: 10px 10px; 
  width: 200px; 
  ; background: # 262626; 
  double # 171717 ; border-bottom: 1px dobbelt # 171717; 
  double # 171717 ; border-top: 1px dobbelt # 171717; 
  # 333333 ; border-left: 1px dobbelt # 333333; 
  # 333333 ; border-right: 1px dobbelt # 333333; 
  ) 

  div. boks. besked ( 
  ; padding: 7px 7px; 
  width: 350px; 
  ; background: # 262626; 
  double # 171717 ; border-bottom: 1px dobbelt # 171717; 
  double # 171717 ; border-top: 1px dobbelt # 171717; 
  # 333333 ; border-left: 1px dobbelt # 333333; 
  # 333333 ; border-right: 1px dobbelt # 333333; 
  overflow: skjulte; 
  height: 150px; 
  ) 

  div. boks. knappen 
  ( 
  10px 0 ; margin: 0 0 10px 0; 
  ; padding: 4px 7px; 
  ; background: # cc0000; 
  border: 0px; 
  ; position: relative; 
  top: 10px; 
  left: 382px; 
  width: 100px; 
  double # 660000 ; border-bottom: 1px dobbelt # 660000; 
  double # 660000 ; border-top: 1px dobbelt # 660000; 
  #FF0033 ; border-left: 1px dobbelt # FF0033; 
  #FF0033 ; border-right: 1px dobbelt # FF0033; 
  )