jQuery Forms and Bootstrap 3

Learn how to create great looking, responsive forms using Bootstrap 3. Make the most out of your forms by using jQuery form selectors, events and methods.
Course info
Rating
(517)
Level
Intermediate
Updated
Jan 9, 2014
Duration
3h 34m
Table of contents
jQuery Forms and Bootstrap 3
Bootstrap 3 Form Layout and Styling
jQuery Forms
The jQuery Validation Plugin
Data Binding with Forms
Third Party Form Controls for Bootstrap
Autocomplete with Typeahead.js
Processing Forms
Description
Course info
Rating
(517)
Level
Intermediate
Updated
Jan 9, 2014
Duration
3h 34m
Description

Learn how to create great looking, responsive forms using Bootstrap 3. Make the most out of your forms by using jQuery form selectors, events and methods. This course covers Bootstrap form styling, jQuery validation, data binding to forms, third party form controls, autocomplete and touches upon server side processing of forms.

About the author
About the author

Mark started in the developer world over 25 years ago. He began his career with a Bachelor of Science in Computer Science from St. Johns University. After spending 10 years on Wall Street working for Goldman Sachs, Lehman Brothers and other major investment banks, Mark became interested in animation and video game software.

More from the author
Angular Forms
Beginner
2h 3m
Apr 2, 2019
JavaScript Fundamentals
Intermediate
3h 0m
Jul 26, 2018
JavaScript: Getting Started
Beginner
2h 46m
Jan 19, 2018
More courses by Mark Zamoyta
Section Introduction Transcripts
Section Introduction Transcripts

Bootstrap 3 Form Layout and Styling
Welcome to this module titled Bootstrap 3 Form Layout and Styling. Bootstrap 3 makes building great-looking and responsive forms very easy. In this module, we're going to use Bootstrap's 12-colum grid to lay out several different types of forms. First we'll take a standard HTML form and apply Bootstrap 3 to it. We'll see how to lay out labels horizontally next to their associated fields. We'll place a form in a single column of a website and get a form to show up in a Bootstrap modal window. We'll create an inline form, which is usually used to sign into a website, and we'll add field sets to our form, and have it display within two columns. The module wraps up by showing other styling features for Bootstrap 3 forms, such as showing indicators for form validation states using using different sized text boxes and controls, and disabling form controls and field sets. Along the way, we'll make sure each type of form is responsive. We'll make sure our forms fit well on any device, from a small smart phone, to a larger tablet, to a full-size monitor.

Processing Forms
Welcome to this module titled Processing Forms. Now that we know how to make really great forms with Bootstrap 3 and jQuery, let's post all the entered data back to the web server. We most likely would need to validate the form data on the server, store the data in a database or on a file, and return any success or failure codes to the client. There's already a Pluralsight module on processing forms. If you search for the HTML Forms course by Matt Milner, you'll see the last module is titled HTML Form Server Processing. His module will walk you through several server-side technologies for processing forms, including MVC, ASP. NET, Ruby, and PHP. I'm not going to duplicate that information in this module, but I will focus on using jQuery's post method to post forms asynchronously. In this module, we'll set a simple responsive form using Bootstrap 3. We'll take a look at how posting the form to the server can be done automatically by the browser, or we can use jQuery's post method to take full control over posting the form asynchronously. I'll use ASP. NET on the server side to verify all form data is transferred properly. Sometimes our forms or web pages have complex input controls, such as Google maps or some other nonstandard JavaScript control. We'll see how to serialize a form, and then manually add data from those complex input controls into the serialized form. Finally we'll look at using the promise returned by jQuery's post method to handle any success or error code returned by our server after posting a form.