" Project Form"
Bootstrap 4.1.1 Snippet by adriano3429

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Add Project Form</title> <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> <script src="js/f.js" type="text/javascript"></script> <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script> <script>tinymce.init({selector:'textarea'});</script> </head> <div class="container col-md-12"> <div id="signupbox" style=" margin-top:50px "> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title text-center"><h3>Add Project Form</h3></div> </div> <div class="panel-body" > <form method="post" action="."> <input type='hidden' name='csrfmiddlewaretoken' value='XFe2rTYl9WOpV8U6X5CfbIuOZOELJ97S' /> <form class="form-horizontal" method="post" > <input type='hidden' name='csrfmiddlewaretoken' value='XFe2rTYl9WOpV8U6X5CfbIuOZOELJ97S' /> <div class="col-md-6"> <div id="div_p_name" class="form-group required"> <label for="p_name" class="control-label col-md-4 requiredField">Project Name<span class="asteriskField">*</span> </label> <div class="controls col-md-8 "> <input class="input-md emailinput form-control" id="p_name" name="p_name" placeholder="Enter Project Name" style="margin-bottom: 10px" type="text" /> </div> </div> </div> <div class="col-md-6"> <div id="div_p_id" class="form-group required"> <label for="p_id" class="control-label col-md-4 requiredField">Project Id<span class="asteriskField">*</span> </label> <div class="controls col-md-8 "> <input class="input-md emailinput form-control" id="p_id" name="p_id" placeholder="Enter Project Id" style="margin-bottom: 10px" type="text" /> </div> </div> </div> <div class="col-md-6"> <div id="div_id_category" class="form-group required"> <label for="id_category" class="control-label col-md-4 requiredField">Category<span class="asteriskField">*</span> </label> <div class="controls col-md-8 " style="margin-bottom: 10px"> <label class="radio-inline"> <input type="radio" name="gender" id="id_categry_1" value="F" onchange="hide_price()" style="margin-bottom: 10px">Free Projects</label> <label class="radio-inline"> <input type="radio" name="gender" id="id_category_2" value="P" onchange="show_price()" style="margin-bottom: 10px">Premium Projects </label> <input type="hidden" name="price" id="price" placeholder="Enter Cost of Project "> </div> </div> </div> <div class="col-md-6"> <div id="div_id_status" class="form-group required"> <label for="id_status" class="control-label col-md-4 requiredField">Status<span class="asteriskField">*</span> </label> <div class="controls col-md-8 " style="margin-bottom: 10px"> <label class="radio-inline"> <input type="radio" name="status" id="id_status_1" value="A" style="margin-bottom: 10px">Active</label> <label class="radio-inline"> <input type="radio" name="status" id="id_status_2" value="I" style="margin-bottom: 10px">Inactive</label> </div> </div> </div> <div class="col-md-6"> <div id="div_id_downloads" class="form-group required"> <label for="p_downloads" class="control-label col-md-4 requiredField">No.Of Downloads<span class="asteriskField">*</span> </label> <div class="controls col-md-8 "> <input class="input-md emailinput form-control" id="p_id" name="p_id" style="margin-bottom: 10px" type="number" /> </div> </div> </div> <div class="col-md-6"> <div id="div_id_link" class="form-group required"> <label for="p_link" class="control-label col-md-4 requiredField">Download Link<span class="asteriskField">*</span> </label> <div class="controls col-md-8 "> <input class="input-md emailinput form-control" id="p_id" name="p_id" style="margin-bottom: 10px" type="url" /> </div> </div> </div> <div class="col-md-6"> <div id="div_id_downloads" class="form-group required"> <label for="p_downloads" class="control-label col-md-4 requiredField">Project Language<span class="asteriskField">*</span> </label> <div class="controls col-md-8 "> <select name="cars" style="margin-bottom: 10px" type="number" class="form-control" > <option value="volvo">Java</option> <option value="saab">Python</option> <option value="fiat">Php</option> <option value="audi">Dot Net</option> </select> </div> </div> </div> <div class="col-md-6"> <div id="div_id_downloads" class="form-group required"> <label for="p_downloads" class="control-label col-md-4 requiredField">Project Version<span class="asteriskField">*</span> </label> <div class="controls col-md-8 "> <input class="input-md emailinput form-control" id="p_id" name="p_id" style="margin-bottom: 10px" type="text" /> </div> </div> </div> <div class="col-md-6"> <div id="div_id_image" class="form-group required"> <label for="id_image" class="control-label col-md-4 requiredField">Main Image<span class="asteriskField">*</span> </label> <div class="controls col-md-8 " style="margin-bottom: 10px"> <input class="input-md emailinput form-control" id="p_id" name="p_id" placeholder="Enter Project Id" style="margin-bottom: 10px" type="file" /> </div> </div> </div> <div class="col-md-12"> <div id="div_description" class="form-group required"> <label for="p_name" class="control-label col-md-2 requiredField">Description<span class="asteriskField">*</span> </label> <div class="controls col-md-10 "> <textarea style="margin-bottom: 10px" ></textarea> </div> </div> </div> <br/> <div class="form-group"> <div class="col-md-12 text-center"> <br/> <button class="btn btn-info btn-md" type="submit">Add Project</button> <button class="btn btn-danger btn-md" type="reset">Cancel</button> </div> </div> </form> </div> </div> </div> </div>
function show_price() { document.getElementById('price').type='text'; } function hide_price() { document.getElementById('price').type='hidden'; }

Related: See More

Light Bootstrap Dashboard Angular
login-form
Login Form
Contact Form

Questions / Comments: