Invoice Simple Menggunakan HTML/CSS

Selamat malam teman-teman kali ini kami akan share invoice simple menggunakan HTML dan CSS. Form invoice sangat dibutuhkan ketika kalian membuat aplikasi penjualan dan pembelian.

Langsung saja berikut source code HTML invoice yang sangat simple.

 <!DOCTYPE html>
<html lang="en" >
<head>
 <meta charset="UTF-8">
 <title>Example Invoice</title>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
 <html lang="en">
 <head>
  <meta charset='UTF-8'>
  <title>Editable Invoice</title>
 </head>
 <body>
  <div id="page-wrap">
   <textarea id="header">INVOICE</textarea>
   <div id="identity">
    <textarea id="address">Personal blogs contain many tutorials that are very useful hehehe ... 
Phone: (+62) 81524737292</textarea>
    <div id="logo">
     <div id="logoctr">
      <a href="javascript:;" id="change-logo" title="Change logo">Change Logo</a>
      <a href="javascript:;" id="save-logo" title="Save changes">Save</a>
      <a href="javascript:;" id="delete-logo" title="Delete logo">Delete Logo</a>
      <a href="javascript:;" id="cancel-logo" title="Cancel changes">Cancel</a>
     </div>
     <div id="logohelp">
      <input id="imageloc" type="text" size="50" value="" /><br />
      (max width: 540px, max height: 100px)
     </div>
     <img id="image" style ="height:50px"src="https://arman.my.id/Portfolio/img/ttd.png" alt="logo" />
    </div>
   </div>
   <div style="clear:both"></div>
   <div id="customer">
    <textarea id="customer-title">TutorialsWB Personal Website</textarea>
    <table id="meta">
     <tr>
      <td class="meta-head">Invoice #</td>
      <td><textarea>1A2CBS</textarea></td>
     </tr>
     <tr>

      <td class="meta-head">Date</td>
      <td><textarea id="date">October 05, 2018</textarea></td>
     </tr>
     <tr>
      <td class="meta-head">Amount Due</td>
      <td><div class="due">$1500000</div></td>
     </tr>

    </table>
   </div>
   <table id="items">

    <tr>
     <th>Item</th>
     <th>Description</th>
     <th>Unit Cost</th>
     <th>Quantity</th>
     <th>Price</th>
    </tr>

    <tr class="item-row">
     <td class="item-name"><textarea>Building Maintenance Management</textarea><a class="delete" href="javascript:;" title="Remove row"></a></td>

     <td class="description"><textarea>Very useful building repair application hehehe tetet...</textarea></td>
     <td><textarea class="cost">$1000.00</textarea></td>
     <td><textarea class="qty">1</textarea></td>
     <td><span class="price">$1000.00</span></td>
    </tr>

    <tr class="item-row">
     <td class="item-name"><textarea>Car rental Application</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></td>

     <td class="description"><textarea>Car rental and rental application that is very useful hehehe ...</textarea></td>
     <td><textarea class="cost">$200.00</textarea></td>
     <td><textarea class="qty">3</textarea></td>
     <td><span class="price">$600.00</span></td>
    </tr>

    <tr class="item-row">
     <td class="item-name"><textarea>AI application building layout plan</textarea><a class="delete" href="javascript:;" title="Remove row"></a></td>

     <td class="description"><textarea>AI application for building arrangement is very useful hehehe .....</textarea></td>
     <td><textarea class="cost">$100.00</textarea></td>
     <td><textarea class="qty">1</textarea></td>
     <td><span class="price">$100.00</span></td>
    </tr>      

    <tr id="hiderow">
     <td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a row</a></td>
    </tr>

    <tr>
     <td colspan="2" class="blank"> </td>
     <td colspan="2" class="total-line">Subtotal</td>
     <td class="total-value"><div id="subtotal">$1700.00</div></td>
    </tr>
    <tr>

     <td colspan="2" class="blank"> </td>
     <td colspan="2" class="total-line">Total</td>
     <td class="total-value"><div id="total">$1700.00</div></td>
    </tr>
    <tr>
     <td colspan="2" class="blank"> </td>
     <td colspan="2" class="total-line">Amount Paid</td>

     <td class="total-value"><textarea id="paid">$100.00</textarea></td>
    </tr>
    <tr>
     <td colspan="2" class="blank"> </td>
     <td colspan="2" class="total-line balance">Balance Due</td>
     <td class="total-value balance"><div class="due">$1600.00</div></td>
    </tr>
   </table>
   <br><br><br><br>
   <div id="terms">
    <h5>TutorialsWB Personal Website</h5>
    <textarea  >Insert Your Description</textarea>
   </div>
  </div>
 </body>
 </html>
 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 <script  src="js/index.js"></script>
</body>
</html>
 

Kedua buat css untuk tampilan form invoice.

 #hiderow,
.delete {
    display: none;
}

* {
    margin: 0;
    padding: 0;
}

body {
    font: 14px/1.4 Georgia, serif;
}

#page-wrap {
    width: 800px;
    margin: 0 auto;
}

textarea {
    border: 0;
    font: 14px Georgia, Serif;
    overflow: hidden;
    resize: none;
}

table {
    border-collapse: collapse;
}

table td,
table th {
    border: 1px solid black;
    padding: 5px;
}

#header {
    height: 15px;
    width: 100%;
    margin: 20px 0;
    background: #222;
    text-align: center;
    color: white;
    font: bold 15px Helvetica, Sans-Serif;
    text-decoration: uppercase;
    letter-spacing: 20px;
    padding: 8px 0px;
}

#address {
    width: 250px;
    height: 150px;
    float: left;
}

#customer {
    overflow: hidden;
}

#logo {
    text-align: right;
    float: right;
    position: relative;
    margin-top: 25px;
    border: 1px solid #fff;
    max-width: 540px;
    max-height: 100px;
    overflow: hidden;
}

#logo:hover,
#logo.edit {
    border: 1px solid #000;
    margin-top: 0px;
    max-height: 125px;
}

#logoctr {
    display: none;
}

#logo:hover #logoctr,
#logo.edit #logoctr {
    display: block;
    text-align: right;
    line-height: 25px;
    background: #eee;
    padding: 0 5px;
}

#logohelp {
    text-align: left;
    display: none;
    font-style: italic;
    padding: 10px 5px;
}

#logohelp input {
    margin-bottom: 5px;
}

.edit #logohelp {
    display: block;
}

.edit #save-logo,
.edit #cancel-logo {
    display: inline;
}

.edit #image,
#save-logo,
#cancel-logo,
.edit #change-logo,
.edit #delete-logo {
    display: none;
}

#customer-title {
    font-size: 20px;
    font-weight: bold;
    float: left;
}

#meta {
    margin-top: 1px;
    width: 300px;
    float: right;
}

#meta td {
    text-align: right;
}

#meta td.meta-head {
    text-align: left;
    background: #eee;
}

#meta td textarea {
    width: 100%;
    height: 20px;
    text-align: right;
}

#items {
    clear: both;
    width: 100%;
    margin: 30px 0 0 0;
    border: 1px solid black;
}

#items th {
    background: #eee;
}

#items textarea {
    width: 80px;
    height: 50px;
}

#items tr.item-row td {
    border: 0;
    vertical-align: top;
}

#items td.description {
    width: 300px;
}

#items td.item-name {
    width: 175px;
}

#items td.description textarea,
#items td.item-name textarea {
    width: 100%;
}

#items td.total-line {
    border-right: 0;
    text-align: right;
}

#items td.total-value {
    border-left: 0;
    padding: 10px;
}

#items td.total-value textarea {
    height: 20px;
    background: none;
}

#items td.balance {
    background: #eee;
}

#items td.blank {
    border: 0;
}

#terms {
    text-align: center;
    margin: 20px 0 0 0;
}

#terms h5 {
    text-transform: uppercase;
    font: 13px Helvetica, Sans-Serif;
    letter-spacing: 10px;
    border-bottom: 1px solid black;
    padding: 0 0 8px 0;
    margin: 0 0 8px 0;
}

#terms textarea {
    width: 100%;
    text-align: center;
}

textarea:hover,
textarea:focus,
#items td.total-value textarea:hover,
#items td.total-value textarea:focus,
.delete:hover {
    background-color: #EEFF88;
}

.delete-wpr {
    position: relative;
}

.delete {
    display: block;
    color: #000;
    text-decoration: none;
    position: absolute;
    background: #EEEEEE;
    font-weight: bold;
    padding: 0px 3px;
    border: 1px solid;
    top: -6px;
    left: -22px;
    font-family: Verdana;
    font-size: 12px;
} 

Berikut adalah tampilan form invoice yang sangat sederhana di atas, Silahkan kembangkan sesuai dengan yang anda perlukan.


Jika kalian tertarik dengan invoice form di atas silahkan download file lengkapnya dibawah ini.


Sekian share kali ini semoga apa yang kami share di atas bermanfaat bagi kalian, Kalian juga bisa request artikel dengan cara tinggalkan komentar dibawah.


SUBSCRIBE TO OUR NEWSLETTER

close