1. Type this following HTML source code in your web editor:
<!DOCTYPE HTML public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://"><html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Add Expense</title></head>
<body><div class="content-wrapper">
<!-- Main content -->
<form id="frm-add-expense">
<h3 class="card-title"><b>Add category</b></h3>
<label for="sel-year">Expense date</label>
<select name="sel-year" id="sel-year">
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
</select>
<select name="sel-month" id="sel-month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="sel-day" id="sel-day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<br />
<label for="txt-expense-for">Expense for *</label>
<input type="text" id="txt-expense-for" name="txt-expense-for" placeholder="Expense for">
<br />
<label for="sel-expense-category">Expense category</label>
<select name="sel-expense-category" id="sel-expense-category">
<option value="category1">Operating Expenses (OPEX)</option>
<option value="category2">Non Operating Expenses (NON-OPEX)</option>
</select>
<br />
<label for="sel-expense-sub-category">Expense Sub Category</label>
<select name="sel-expense-sub-category" id="sel-expense-sub-category">
<option value="subcategory1">Advertising And Marketing</option>
<option value="subcategory2">Bank Fees</option>
<option value="subcategory3">Charitable Contributions</option>
<option value="subcategory4">Client Gifts</option>
<option value="subcategory5">Credit Fees</option>
<option value="subcategory6">Contributions</option>
<option value="subcategory7">Depreciation</option>
<option value="subcategory8">Education And Training</option>
<option value="subcategory9">Employee Loans</option>
<option value="subcategory10">Employee Benefits</option>
<option value="subcategory11">Insurance</option>
<option value="subcategory12">Inventory</option>
<option value="subcategory13">Legal And Professional Services</option>
<option value="subcategory14">Licenses And Permits</option>
<option value="subcategory15">Maintenance And Repairs</option>
<option value="subcategory16">Manufacturing Or Raw Materials</option>
<option value="subcategory17">Meals And Entertainment</option>
<option value="subcategory18">Medical And Health Care Expenses</option>
<option value="subcategory19">Mortgage Interest</option>
<option value="subcategory20">Moving Expenses</option>
<option value="subcategory21">Ocategoryffice Supplies</option>
<option value="subcategory22">Postage And Shipping</option>
<option value="subcategory23">Printing</option>
<option value="subcategory24">Real Estate </option>
<option value="subcategory25">Rent</option>
<option value="subcategory26">Research And Development (R&D)</option>
<option value="subcategory27">Retirement And Pension Contributions</option>
<option value="subcategory28">Security And Parking</option>
<option value="subcategory29">Software</option>
<option value="subcategory30">Subcription</option>
<option value="subcategory31">Taxes</option>
<option value="subcategory32">Telecommunication</option>
<option value="subcategory33">Travel And Transportation</option>
<option value="subcategory34">Utilities</option>
</select>
<br />
<input type="checkbox" value="SupervisorApproval" name="chk-supervisor-approval" id="chk-supervisor-approval"><label for="chk-supervisor-approval">Supervisor Approval</label>
<input type="checkbox" value="AccountingApproval" name="chk-accounting-approval" id="chk-accounting-approval"><label for="chk-accounting-approval">Accounting Approval</label>
<br />
<label for="txt-expense_amount">Expense amount *</label>
<input type="number" id="txt-expense-amount" name="txt-expense-amount" placeholder="Expense amount">
<br />
<label for="txa-exp-descrip">Description </label>
<textarea rows="3" id="txa-exp-descrip" name="txa-exp-descrip"></textarea>
<br />
<button type="submit" class="btn">Add</button>
</form>
</div>
<!-- /.content-wrapper--></body></html>
2. Save as ExpenseFormSample1.htm
3. Open the file in your browser.
Notes
- Type <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> in same line.
- Type <input type="text" id="txt-expense-for" name="txt-expense-for" placeholder="Expense for"> in same line.
- Type <select name="sel-expense-sub-category" id="sel-expense-sub-category"> in same line.
- Type <input type="checkbox" value="AccountingApproval" name="chk-accounting-approval" id="chk-accounting-approval"><label for="chk-accounting-approval">Accounting Approval</label> in same line.
- Type <input type="checkbox" value="SupervisorApproval" name="chk-supervisor-approval" id="chk-supervisor-approval"><label for="chk-supervisor-approval">Supervisor Approval</label> in same line.
- Type <input type="number" id="txt-expense-amount" name="txt-expense-amount" placeholder="Expense amount"> in same line.
Output
< back to Learn HTML
Tidak ada komentar:
Posting Komentar