Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Approver form"
Bootstrap 3.3.0 Snippet by
Mudiganti
3.3.0
Preview
HTML
View Full Screen
Forked from
Fork
Fork this
Parent
800
 
0 Fav
Post to Facebook
Tweet this
<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>
Related:
See More
Free Template
Full Calendar
462.0K
45
login-form
170.4K
18
Login Form
141.8K
51
Contact Form
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76