Hai everyone today i will show how to create forms using Bootstrap. Twitter Bootstrap is a best front-end framework for developing and designing web applications. Using bootstrap we can easily design the web pages without any designing knowledge, it makes developing css much faster, it is less weight and very helpfull to web designers. I used bootstrap for creating stylish forms, buttons, grids and everything according to your need. First of all download the twitter bootstrap form the official website :[ http://getbootstrap.com/ ] and go to dist folder it will contains js, css, fonts folder.
In this tutorial i have included the bootstrap v.3.0.3 and i have designed textbox, textarea, select,
checkbox, button and added characters to form fields everything using bootstrap.
Screenshot
Copy the below code in notepad and save it as .html file or .jsp file (server side technology) and include the exact path of bootstrap.min.css file. If any doubt leave a comment.
Source code
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Twitter Bootstrap Forms</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="container"> <div class="row"> <div class="span12"> <form> <fieldset> <legend>Registration Form</legend> <label>Your Name</label> <input type="text" name="name" class="span4" placeholder="name please!"> <label>UserName</label> <div class="input-prepend"> <span class="add-on">@</span><input type="text" name="twitter" class="span3"> </div> <label>Click Your Favourite Subject</label> <label class="radio"><input type="radio" name="subject" value="html5">jQuery </label> <label class="radio"><input type="radio" name="subject" value="css3">Html5 </label> <label class="radio"><input type="radio" name="subject" value="jQuery">Xenserver </label> <label class="radio"><input type="radio" name="subject" value="javascript"> Vmware</label> <label>did you attend the demo class</label> <label class="radio inline"> <input type="radio" name="studywithdemo" value="yes">yes </label> <label class="radio inline"> <input type="radio" name="studywithdemo" value="no">no </label> <label>select</label> <select name="continent" size="1" class="span4"> <option selected>selected</option> <option value="a">Hyderabad</option> <option value="b">Vijayawada</option> <option value="c">Bangalore</option> <option value="d">Bhimavaram</option> </select> <label>comments</label> <textarea name="comments" class="span4"></textarea> <label class="checkbox"><input type="checkbox" name="subscribe" value="html5"> subscribe by email</label> <label>email</label> <input type="text" name="email" class="span4"> <p><button type="submit" class="btn btn-primary">submit</button></p> </fieldset> </form> </div> </div> </div> </body> </html>
Education is the primary agent of transformation towards sustainable development, increasing people's capacities to transform their visions for society into reality. Education not only provides scientific and technical skills, it also provides the motivation, and social support for pursuing and applying them. For this reason, society must be deeply concerned that much of current education falls far short of what is required.http://www.careerpanth.xyz/
ReplyDeleteit is very excellent blog and useful article thank you for sharing with us , keep posting Ruby on Rails Online Course
ReplyDelete