<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>General</legend> <!-- Text input --> <div class="form-group"> <label class="col-md-4 control-label" for="documentid">Document ID</label> <div class="col-md-4"> <input name="documentid" class="form-control input-md" id="documentid" type="text" placeholder="CC/YYYY/0001"> </div> </div> <!-- Text input --> <div class="form-group"> <label class="col-md-4 control-label" for="status">Status</label> <div class="col-md-4"> <input name="status" class="form-control input-md" id="status" type="text" placeholder="Read-only"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="creationdate">Creation Date</label> <div class="col-md-4"> <input name="creationdate" class="form-control input-md" id="creationdate" type="text" placeholder="DD/MM/YYYY"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="requestorname">Requestor Name</label> <div class="col-md-4"> <input name="requestorname" class="form-control input-md" id="requestorname" type="text" placeholder="Read-only"> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="requestordepartment">Requestor's department*</label> <div class="col-md-4"> <select name="requestordepartment" class="form-control" id="requestordepartment"> <option value="readonly">Read-only</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="requestorcompany">Requestor's company*</label> <div class="col-md-4"> <select name="requestorcompany" class="form-control" id="requestorcompany"> <option value="readonly">Read-only</option> </select> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="internalreferencenumber">Internal reference number</label> <div class="col-md-4"> <textarea name="internalreferencenumber" class="form-control" id="internalreferencenumber">Read-only</textarea> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="subject">Subject</label> <div class="col-md-4"> <textarea name="subject" class="form-control" id="subject">Read-only</textarea> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="financialeffect">Financial effect</label> <div class="col-md-4"> <div class="radio"> <label for="financialeffect-0"> <input name="financialeffect" id="financialeffect-0" type="radio" checked="checked" value="With loss of value"> With loss of value </label> </div> <div class="radio"> <label for="financialeffect-1"> <input name="financialeffect" id="financialeffect-1" type="radio" value="Without loss of value"> Without loss of value </label> </div> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="itemtype">Item type*</label> <div class="col-md-4"> <div class="radio"> <label for="itemtype-0"> <input name="itemtype" id="itemtype-0" type="radio" checked="checked" value="Inventory"> Inventory </label> </div> <div class="radio"> <label for="itemtype-1"> <input name="itemtype" id="itemtype-1" type="radio" value="Asset"> Asset </label> </div> </div> </div> </fieldset> </form> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Financial effect</legend> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="fxmenu">FX Menu*</label> <div class="col-md-4"> <select name="fxmenu" class="form-control" id="fxmenu"> <option value="readonly">Read-only</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="grossbookvalue">Gross book value*</label> <div class="col-md-4"> <input name="grossbookvalue" class="form-control input-md" id="grossbookvalue" type="text" placeholder="2 000 000"> <span class="help-block">(calculated) to be scrapped</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="netbookvalue">Net book value*</label> <div class="col-md-4"> <input name="netbookvalue" class="form-control input-md" id="netbookvalue" type="text" placeholder="2 000 000"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="estimatedvaluewaste">Estimated Value of waste</label> <div class="col-md-4"> <input name="estimatedvaluewaste" class="form-control input-md" id="estimatedvaluewaste" required="" type="text" placeholder="2 000 000"> <span class="help-block">recovered materials and/or sellable waste</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="accumulatedbookvaluenet">Accumulated book value (Net)*</label> <div class="col-md-4"> <input name="accumulatedbookvaluenet" class="form-control input-md" id="accumulatedbookvaluenet" type="text" placeholder="2 000 000"> <span class="help-block">scrapped inventories in actual year</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="grossbookvalue">Gross book value (EUR)</label> <div class="col-md-4"> <input name="grossbookvalue" class="form-control input-md" id="grossbookvalue" type="text" placeholder="Read-only"> <span class="help-block">(calculated) to be scrapped</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="netbookvalue">Net book value (EUR)</label> <div class="col-md-4"> <input name="netbookvalue" class="form-control input-md" id="netbookvalue" type="text" placeholder="Read-only"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="estimatedvaluewaste">Estimated Value of waste (EUR)</label> <div class="col-md-4"> <input name="estimatedvaluewaste" class="form-control input-md" id="estimatedvaluewaste"type="text" placeholder="Read-only"> <span class="help-block">recovered materials and/or sellable waste</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="accumulatedbookvaluenet">Accumulated book value (Net) (EUR)</label> <div class="col-md-4"> <input name="accumulatedbookvaluenet" class="form-control input-md" id="accumulatedbookvaluenet" type="text" placeholder="Read-only"> <span class="help-block">scrapped inventories in actual year</span> </div> </div> </fieldset> </form> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Scrapping details</legend> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="scrappingexecution">Scrapping execution*</label> <div class="col-md-4"> <select name="scrappingexecution" class="form-control" id="scrappingexecution"> <option value="readonly">Read-only</option> </select> </div> </div> <!-- Select Multiple --> <div class="form-group"> <label class="col-md-4 control-label" for="reasonforscrapping">Reason for scrapping*</label> <div class="col-md-4"> <select name="reasonforscrapping" class="form-control" id="reasonforscrapping" multiple="multiple"> <option value="readonly">Read-only</option> </select> </div> </div> <!-- Select Multiple --> <div class="form-group"> <label class="col-md-4 control-label" for="utilizationrecoveredmaterials">Utilization of recovered materials*</label> <div class="col-md-4"> <select name="utilizationrecoveredmaterials" class="form-control" id="utilizationrecoveredmaterials" multiple="multiple"> <option value="readonly">Read-only</option> </select> </div> </div> <!-- Select Multiple --> <div class="form-group"> <label class="col-md-4 control-label" for="wastemanagementinformation">Waste management information*</label> <div class="col-md-4"> <select name="wastemanagementinformation" class="form-control" id="wastemanagementinformation" multiple="multiple"> <option value="readonly">Read-only</option> </select> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="commentsdetaileddescriptions">Comments, Detailed descriptions*</label> <div class="col-md-4"> <textarea name="commentsdetaileddescriptions" class="form-control" id="commentsdetaileddescriptions">Read-only</textarea> </div> </div> </fieldset> </form> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Attachments</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">File name</label> <div class="col-md-2"> <input name="textinput" class="form-control input-md" id="textinput" type="text" placeholder="filename001"> </div> </div> <!-- File Button --> <div class="form-group"> <label class="col-md-4 control-label" for="accountingdata">Accounting data*</label> <div class="col-md-4"> <input name="accountingdata" class="input-file" id="accountingdata" type="file"> <span class="help-block">Detailed accounting data of the inventories or assets to be scrapped</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">File name</label> <div class="col-md-2"> <input name="textinput" class="form-control input-md" id="textinput" type="text" placeholder="filename002"> </div> </div> <!-- File Button --> <div class="form-group"> <label class="col-md-4 control-label" for="picturesaboutassets">Pictures about assets to be scrapped</label> <div class="col-md-4"> <input name="picturesaboutassets" class="input-file" id="picturesaboutassets" type="file"> </div> </div> </fieldset> </form> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Approvers</legend> <!-- Search input--> <div class="form-group"> <label class="col-md-4 control-label" for="additionalreadersname">Additional readers name</label> <div class="col-md-4"> <input name="additionalreadersname" class="form-control input-md" id="additionalreadersname" type="search" placeholder="Read-only"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="ldacategory">LDA category of approval</label> <div class="col-md-4"> <input name="ldacategory" class="form-control input-md" id="ldacategory" type="text" placeholder="Read-only"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="approvertitle">Approver title</label> <div class="col-md-4"> <input name="approvertitle" class="form-control input-md" id="approvertitle" type="text" placeholder="Read-only"> </div> </div> <!-- Search input--> <div class="form-group"> <label class="col-md-4 control-label" for="approvername">Approver name*</label> <div class="col-md-4"> <input name="approvername" class="form-control input-md" id="approvername" required="" type="text" placeholder="Read-only"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="decisiondate">Decision date</label> <div class="col-md-4"> <input name="decisiondate" class="form-control input-md" id="decisiondate" type="text" placeholder="DD/MM/YYYY hh:mm"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="statusoftask">Status of task</label> <div class="col-md-4"> <input name="statusoftask" class="form-control input-md" id="statusoftask" type="text" placeholder="Read-only"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="actualnotestobehandled">Actual notes to be handled</label> <div class="col-md-4"> <input name="actualnotestobehandled" class="form-control input-md" id="actualnotestobehandled" type="text" placeholder="Read-only"> </div> </div> </fieldset> </form> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Notes</legend> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="notes">Notes</label> <div class="col-md-4"> <textarea name="notes" class="form-control" id="notes">Optional/Mandatory</textarea> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="historyofnotes">History of notes</label> <div class="col-md-4"> <textarea name="historyofnotes" class="form-control" id="historyofnotes">Automatic</textarea> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="approvereject"></label> <div class="col-md-8"> <button name="approve" class="btn btn-success" id="approve">Approve</button> <button name="reject" class="btn btn-danger" id="cancel">Reject</button> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="notify"></label> <div class="col-md-4"> <button name="notify" class="btn btn-info" id="notify">Notify readers</button> </div> </div> </fieldset> </form>