Bagaimana membuat baik tanpa melihat bentuk tabel, Css, Tutorial |

Bagaimana membuat baik tanpa melihat bentuk tabel

Tutorial ini menjelaskan bagaimana merancang yang bagus dengan menggunakan formulir yang bersih dengan CSS desain hanya label dan masukan tag HTML untuk mensimulasikan struktur tabel. Anda dapat menggunakan semua CSS / HTML ke elemen desain bentuk kustom untuk proyek web:

form-17

Langkah 1: Buat struktur dasar HTML


  <form> 
  > <div kelas = "box"> 
  <h1> Form Kontak: </ h1> 
  <label> 
  <span> Nama lengkap </ span> 
  class = "input_text" name = "name" id = "name" / > <input jenis = "text" kelas = "input_text" nama = "name" id = "name" /> 
  </ label> 
  <label> 
  <span> Email </ span> 
  class = "input_text" name = "email" id = "email" / > <input jenis = "text" kelas = "input_text" nama = "email" id = "email" /> 
  </ label> 
  <label> 
  <span> Pelajaran </ span> 
  class = "input_text" name = "subject" id = "subject" / > <input jenis = "text" kelas = "input_text" nama = "subject" id = "subject" /> 
  </ label> 
  <label> 
  <span> Pesan </ span> 
  name = "feedback" id = "feedback" > </textarea> <textarea kelas = nama "message" = "feedback" id = "feedback"> </ textarea> 
  class = "button" value = "Submit Form"  / > <input jenis = "button" kelas = "button" nilai = "Submit Form" /> 
  </ label> 
 
 
  </ div> 
  </ form>

Langkah: 2 Membuat Kode CSS


  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  % normal  Arial, Helvetica, sans-serif ; background : # 161712 ; } body (font: 100% normal Arial, Helvetica, sans-berkait; background: # 161712;) 
  ; padding : 0 ; color : #ffffff ; } formulir, masukan, pilih, textarea (margin: 0; padding: 0; color: # ffffff;) 

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

  div. kotak h1 (  
  ; color: # ffffff; 
  font-size: 18px; 
  text-transform: uppercase; 
  5px 5px ; padding: 5px 0 5px 5px; 
  # 161712 ; border-bottom: 1px solid # 161712; 
  # 161712 ; border-top: 1px solid # 161712;  
  ) 

  div. (label kotak 
  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. kotak label span ( 
  ; display: block; 
  ; color: # bbbbbb; 
  font-size: 12px; 
  float: left; 
  width: 100px; 
  text-align: right; 
  0 0 ; padding: 5px 20px 0 0; 
  ) 

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

  div. box. pesan ( 
  ; padding: 7px 7px; 
  width: 350px; 
  ; latar belakang: # 262626; 
  double # 171717 ; border-bottom: 1px double # 171717; 
  double # 171717 ; border-top: 1px double # 171717; 
  # 333333 ; border-left: 1px double # 333333; 
  # 333333 ; border-right: 1px double # 333333; 
  overflow: hidden; 
  height: 150px; 
  ) 

  div. box. tombol 
  ( 
  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 double # 660000; 
  double # 660000 ; border-top: 1px double # 660000; 
  #FF0033 ; border-left: 1px double # FF0033; 
  #FF0033 ; border-right: 1px double # FF0033; 
  )