This is the example of tracking progress form. It basically tracks the form completion. It has a Javascript code which runs while the user completes the form. It displays the message according to the percentage of completion of the form. The HTML consists of a simple form, which wraps the progress bar and progress message. Each FormControl is wrapped by class Field. Each field is marked with required, which makes it mandatory to fill the input field. Note the Select tag with options defined for CardMonth and CardNumber. At last, we have input with the class button. CSS style format is defined from body of HTML to the button at the bottom. In JS file attribute for the progress is checked and accordingly message and progress at a progress bar is set. Once the form is completed we can submit the form using HTTP “post” method.
This is a simple login form for any resort application. This consists of a user name and password to access the application. This form is divided into , and a section. The header section contains the image set using max-width. The form is placed in the div section where two input type is displayed with place holders. Footer contains the button to sign in and a link for sign up form. Styles for different class @media rule are used in media queries to apply different styles for different media types/devices. Here we are applying the clip path ellipse, to the background. This gives us the required eclipse like curve.
This is a simple login form can be used in the internal application. To set the content’s margin dealing with responsive behavior we use the bootstrap container. For better responsive behavior form is placed in a container, action attribute is specified to send the form data to "confirmation.php" page, this would use ‘post’ HTTP method. This form consists of FormGroup, which is used with FormControl, FormArray, and buttons. The snippet uses the clearfix utility class, which creates clear floated content. It can also be used as a mixin. The CSS style sheet for this snippet is simple, contains the style for all the classes mentioned in the snippet.