"Requestor form"
Bootstrap 3.3.0 Snippet by Mudiganti

<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/A/00001"> </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="Automatic"> </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="Automatic"> </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" required=""> <option value="Select">Select</option> <option value="Downstream">Downstream</option> <option value="Upstream">Upstream</option> <option value="Information Services">Information Services</option> <option value="Corporate Services">Corporate Services</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" required=""> <option value="Select">Select</option> <option value="MOL Plc.">MOL Plc.</option> <option value="SLOVNAFT, a.s.">SLOVNAFT, a.s.</option> <option value="IES S.p.A.">IES S.p.A.</option> <option value="Geoinform Ltd.">Geoinform Ltd.</option> <option value="Hawasina G.m.b.H. (Oman Branch)">Hawasina G.m.b.H. (Oman Branch)</option> <option value="Hexan Ltd.">Hexan Ltd.</option> <option value="Kalegran">Kalegran</option> <option value="MOL Caspian Ltd.">MOL Caspian Ltd.</option> <option value="MOL-LUB Ltd.">MOL-LUB Ltd.</option> <option value="MOL Pakistan">MOL Pakistan</option> <option value="MOL Romania">MOL Romania</option> <option value="MOL-Russ">MOL-Russ</option> <option value="MOL-Trans Ltd.">MOL-Trans Ltd.</option> <option value="Panta Distribuzione S.p.A.">Panta Distribuzione S.p.A.</option> <option value="Petrolszolg Ltd.">Petrolszolg Ltd.</option> <option value="Slovnaft Montaze a opravy a.s.">Slovnaft Montaze a opravy a.s.</option> <option value="Slovnaft Trans a.s.">Slovnaft Trans a.s.</option> <option value="TVK Plc.">TVK Plc.</option> <option value="VÚRUP a.s.">VÚRUP a.s.</option> <option value="Baitex">Baitex</option> <option value="Matjushkinskaya Vertical">Matjushkinskaya Vertical</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" required=""></textarea> <span class="help-block">Use ";" as separators between reference numbers!</span> </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" required=""></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" 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" 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="Select">Select currency</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="Automatic"> <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="Automatic"> </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="Automatic"> <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="Automatic"> <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" required=""> <option value="Select">Select</option> <option value="scrapping will be performed after approval">scrapping will be performed after approval</option> <option value="scrapping has been performed before approval (detailed description below)">scrapping has been performed before approval (detailed description below)</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" required=""> <option value="incurrent, obsolete inventories">incurrent, obsolete inventories</option> <option value="damaged inventories">damaged inventories</option> <option value="scrapping due to reconstruction">scrapping due to reconstruction</option> <option value="safety stock revision">safety stock revision</option> <option value="out-of use material type assets">out-of use material type assets</option> <option value="incurrent, obsolete, or out-of-date assets">incurrent, obsolete, or out-of-date assets</option> <option value="damaged assets">damaged assets</option> <option value="scrapping due to reconstruction or renewal">scrapping due to reconstruction or renewal</option> <option value="other (detailed description below)">other (detailed description below)</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" required=""> <option value="proper use (e.g. as spare part)">proper use (e.g. as spare part)</option> <option value="as valuable waste">as valuable waste</option> <option value="no utilization is possible">no utilization is possible</option> <option value="no recovered material is produced">no recovered material is produced</option> <option value="other (detailed description below)">other (detailed description below)</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" required=""> <option value="sellable waste is produced">sellable waste is produced</option> <option value="hazardous waste is produced">hazardous waste is produced</option> <option value="sellable hazardous waste (e.g. contaminated steel) is produced">sellable hazardous waste (e.g. contaminated steel) is produced</option> <option value="no waste is produced">no waste is produced</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" required=""></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"> </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"> </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="Search"> + </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="Automatic"> </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="Automatic"> </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="Search"> + </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="Automatic"> </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="Automatic"> </div> </div> </fieldset> </form> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Notes</legend> <!-- Text input --> <div class="form-group"> <label class="col-md-4 control-label" for="comment">Comment*</label> <div class="col-md-4"> <input name="comment" class="form-control" id="comment" type="text"> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label for="deatailedcomment">Detailed comment</label> <div class="col-md-4"> <textarea name="detailedcomment" class="form-control" id="detailedcomment"></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="savecancel"></label> <div class="col-md-8"> <button name="save" class="btn btn-info" id="save">Save</button> <button name="cancel" class="btn btn-danger" id="cancel">Cancel</button> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="submit"></label> <div class="col-md-4"> <button name="submit" class="btn btn-success" id="submit">Submit for approval</button> </div> </div> </fieldset> </form>

Related: See More


Questions / Comments: