"User Form for registration"
Bootstrap 3.1.0 Snippet by thavaselvam

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <br><br> <div class="M1" > <div class="container-fluid" ><br><br> <div class="col-xs-1 col-md-1" style=" padding-left:10px"> <br> <div style="text-align: left; "> <div class="container"> <div class="btn-group btn-group-vertical"> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-user"></span> <p>Profile</p> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-calendar"></span> <p>Calendar</p> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-globe"></span> <p>Network</p> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-picture"></span> <p>Upload </p> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-time"></span> <p>Statistics</p> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-bell"></span> <p>Events</p> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-th"></span> <p>ALL</p> </button> </div> </div> </div> </div> </div> <div class="col-xs-4 col-md-6"> <form role="form" class="form-inline col-md-9 go-right" style="color: Green;background-color:#FAFAFF;border-radius:0px 22px 22px 22px;"> <h2>Profile</h2> <p>Please update your profile for more security.</p> <div class="form-group"> <input id="Firstname" name="Firstname" type="text" class="form-control" required> <label for="Firstname">First Name <span class="glyphicon glyphicon-user"> </span></label> </div> <div class="form-group"> <input id="Lastname" name="Lastname" type="text" class="form-control" required> <label for="Lastname">Last Name <span class="glyphicon glyphicon-user"> </label> </div> <div class="form-group"> <input id="Middlename" name="Middlename" type="text" class="form-control" placeholder="Middle Name"> <label for="Middlename">Middle Name <span class="glyphicon glyphicon-user"> </label> </div> <br> <br> <div class="form-group"> <input id="phone" name="phone" type="tel" class="form-control" required> <label for="fphone">Primary Phone <span class="glyphicon glyphicon-phone"></label> </div> <div class="form-group"> <input id="password" name="phone" type="tel" class="form-control" placeholder="secondary phone"> <label for="sphone">Secondary Phone <span class="glyphicon glyphicon-phone"></label> </div> <br><br> <div class="form-group"> <select class="form-control"> <option id="Male" Value="M" style="color:red" selected>Male</option> <option id="FeMale" Value="FM" style="color:green">Female</option> <option id="NotInterested" Value="NI" style="color:blue">Not interested</option> </select> </div> <div class="form-group"> <input id="date" name="date" type="date" class="form-control"> <label for="date">DOB<span class="glyphicon glyphicon-calendar"></label> </div> <br><br> <div class="form-group"> <textarea id="message" name="phone" class="form-control" style="width:400px;height:100px" placeholder="Short Description" ></textarea> <label for="message">Short Description <span class="glyphicon glyphicon-align-justify"></label> </div> <br><br> <div class="form-group"> <input id="Email1" name="phone" class="form-control" style="width:400px;" placeholder="Registered email" ></textarea> <label for="Email1">Registered email <span class="glyphicon glyphicon-align-envelope"></label> </div> <br><br> <div class="form-group"> <input id="Email2" name="phone" class="form-control" style="width:400px;" placeholder="Alternate email" ></textarea> <label for="Email2">Alternate email <span class="glyphicon glyphicon-align-envelope"></label> </div> <br><br> <div class="form-group"> <input id="Vweb" name="phone" class="form-control" style="width:400px;" placeholder="Website" ></textarea> <label for="Vweb">WebSite <span class="glyphicon glyphicon-align-envelope"></label> </div> <br> <br> <p1>Address</p1> <br> <div class="form-group"> <input id="Address" name="Address" type="tel" class="form-control" required> <label for="Address">Flat NO/House No</label> </div> <div class="form-group"> <input id="LandMark" name="LandMark" type="text" class="form-control" placeHolder="Land Mark"> <label for="LandMark">Land Mark</label> </div> <br><br> <p3>(Enter Pincode/Area to pick your nearest location)<span class="glyphicon glyphicon-map-marker"></p3> <br><br> <div class="form-group" style="width: 600px" > <input input id="autocomplete" name="LocationPicker" type="text" onFocus="geolocate()" style=" moz-border-radius: 22px;border-radius: 7px;" > <label for="LocationPicker">Location Picker</label> </div> <br><br> <div class="form-group"> <input id="route" name="route" type="tel" class="form-control" required disabled="true"> <label for="route">Route/Locality</label> </div> <div class="form-group"> <input id="locality" name="locality" type="tel" class="form-control" required disabled="true"> <label for="locality">City/Town</label> </div> <br> <div class="form-group"> <input id="administrative_area_level_2" name="administrative_area_level_2" type="tel" class="form-control" required disabled="true"> <label for="administrative_area_level_2">District</label> </div> <div class="form-group"> <input id="administrative_area_level_1" name="administrative_area_level_1" type="tel" class="form-control" required disabled="true"> <label for="administrative_area_level_1">State</label> </div> <br> <div class="form-group"> <input id="country" name="country" type="text" class="form-control" required disabled="true"> <label for="country">Country</label> </div> <div class="form-group"> <input id="postal_code" name="postal_code" type="tel" class="form-control" required disabled="true"> <label for="postal_code">Pin Code</label> </div> <br><br> <button> Save </button> <br> <br> </form> </div> <div class="col-xs-1 col-md-1" id="Customer feed"> </div> </div></div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600); .M1{ width: 160%; height: 100px; position: absolute; align:center; } .form-control{ background: transparent; } form { width: 320px; margin: 20px; } form > div { position: relative; overflow: hidden; } form input, form textarea { width: 100%; border: 2px solid gray; background: none; position: relative; top: 0; left: 0; z-index: 1; padding: 8px 12px; outline: 0; } form input:valid, form textarea:valid { background: #F0F7F7; } form input:focus, form textarea:focus { border-color: #357EBD; } form input:focus + label, form textarea:focus + label { background: #FA0; color: white; font-size: 70%; padding: 1px 6px; z-index: 2; text-transform: uppercase; } form label { -webkit-transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s; transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s; position: absolute; color: #999; padding: 7px 6px; font-weight: normal; } form textarea { display: block; resize: vertical; } form.go-bottom input, form.go-bottom textarea { padding: 12px 12px 12px 12px; } form.go-bottom label { top: 0; bottom: 0; left: 0; width: 100%; } form.go-bottom input:focus, form.go-bottom textarea:focus { padding: 4px 6px 20px 6px; } form.go-bottom input:focus + label, form.go-bottom textarea:focus + label { top: 100%; margin-top: -16px; } form.go-right label { border-radius: 0 5px 5px 0; height: 100%; top: 0; right: 100%; width: 100%; margin-right: -100%; } form.go-right input:focus + label, form.go-right textarea:focus + label { right: 0; margin-right: 0; width: 40%; padding-top: 5px; } html, body { /*css for full size background image http://p1.pichost.me/i/66/1910857.jpg*/ background: url() no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; background-color: #FA0; color: #fff; text-align: left; text-shadow: 0 2px 6px rgba(0,0,0,.5); } /* Extra markup and styles for table-esque vertical and horizontal centering */ .site-wrapper { display: table; width: 100%; height: 100%; /* For at least Firefox */ min-height: 100%; -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5); box-shadow: inset 0 0 100px rgba(0,0,0,.5); } .site-wrapper-inner { display: table-cell; vertical-align: top; } .cover-container { margin-right: auto; margin-left: auto; } /* Related to SIde MENU Text */ box-sizing: border-box; } body { background: url(http://habrastorage.org/files/90a/010/3e8/90a0103e8ec749c4843ffdd8697b10e2.jpg); text-align: right; padding-top: 40px; padding-left: 20px; } .btn-nav { color: Green; background-color: #fff; border: 1px solid #e0e1db; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .btn-nav:hover { color: #e92d00; cursor: pointer; -webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */ transition: color 1s; } .btn-nav.active { color: #e92d00; padding: 2px; border-top: 6px solid #e92d00; border-bottom: 6px solid #e92d00; border-left: 0; border-right: 0; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -webkit-transition: border 0.3s ease-out, color 0.3s ease 0.5s; -moz-transition: border 0.3s ease-out, color 0.3s ease 0.5s; -ms-transition: border 0.3s ease-out, color 0.3s ease 0.5s; /* IE10 is actually unprefixed */ -o-transition: border 0.3s ease-out, color 0.3s ease 0.5s; transition: border 0.3s ease-out, color 0.3s ease 0.5s; -webkit-animation: pulsate 1.2s linear infinite; animation: pulsate 1.2s linear infinite; } .btn-nav.active:before { content: ''; position: absolute; border-style: solid; border-width: 6px 6px 0; border-color: #e92d00 transparent; display: block; width: 0; z-index: 1; margin-left: -6px; top: 0; left: 50%; } .btn-nav .glyphicon { padding-top: 16px; font-size: 40px; } .btn-nav.active p { margin-bottom: 8px; } @-webkit-keyframes pulsate { 50% { color: #000; } } @keyframes pulsate { 50% { color: #000; } } @media (max-width: 480px) { .btn-group { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; } } @media (max-width: 600px) { .btn-nav .glyphicon { padding-top: 12px; font-size: 26px; } }
var placeSearch, autocomplete; var componentForm = { route: 'long_name', locality: 'long_name', administrative_area_level_2:'long_name', administrative_area_level_1: 'short_name', country: 'long_name', postal_code: 'short_name' }; function initAutocomplete() { // Create the autocomplete object, restricting the search to geographical // location types. autocomplete = new google.maps.places.Autocomplete( /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')), {types: ['geocode']}); // When the user selects an address from the dropdown, populate the address // fields in the form. autocomplete.addListener('place_changed', fillInAddress); } // [START region_fillform] function fillInAddress() { // Get the place details from the autocomplete object. var place = autocomplete.getPlace(); for (var component in componentForm) { document.getElementById(component).value = ''; document.getElementById(component).disabled = false; } // Get each component of the address from the place details // and fill the corresponding field on the form. for (var i = 0; i < place.address_components.length; i++) { var addressType = place.address_components[i].types[0]; if (componentForm[addressType]) { var val = place.address_components[i][componentForm[addressType]]; document.getElementById(addressType).value = val; } } } // [END region_fillform] // [START region_geolocation] // Bias the autocomplete object to the user's geographical location, // as supplied by the browser's 'navigator.geolocation' object. function geolocate() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var geolocation = { lat: position.coords.latitude, lng: position.coords.longitude }; var circle = new google.maps.Circle({ center: geolocation, radius: position.coords.accuracy }); autocomplete.setBounds(circle.getBounds()); }); } } $(function () { $('body').on('click', '.list-group .list-group-item', function () { $(this).toggleClass('active'); }); $('.list-arrows button').click(function () { var $button = $(this), actives = ''; if ($button.hasClass('move-left')) { actives = $('.list-right ul li.active'); actives.clone().appendTo('.list-left ul'); actives.remove(); } else if ($button.hasClass('move-right')) { actives = $('.list-left ul li.active'); actives.clone().appendTo('.list-right ul'); actives.remove(); } }); $('.dual-list .selector').click(function () { var $checkBox = $(this); if (!$checkBox.hasClass('selected')) { $checkBox.addClass('selected').closest('.well').find('ul li:not(.active)').addClass('active'); $checkBox.children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check'); } else { $checkBox.removeClass('selected').closest('.well').find('ul li.active').removeClass('active'); $checkBox.children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked'); } }); $('[name="SearchDualList"]').keyup(function (e) { var code = e.keyCode || e.which; if (code == '9') return; if (code == '27') $(this).val(null); var $rows = $(this).closest('.dual-list').find('.list-group li'); var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); $rows.show().filter(function () { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(val); }).hide(); }); }); </script> <script src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=places&callback=initAutocomplete" async defer></script> <script type="text/javascript"> var activeEl = 2; $(function() { var items = $('.btn-nav'); $( items[activeEl] ).addClass('active'); $( ".btn-nav" ).click(function() { $( items[activeEl] ).removeClass('active'); $( this ).addClass('active'); activeEl = $( ".btn-nav" ).index( this ); }); }); </script>

Related: See More


Questions / Comments: