This is an example of an input boxes layout, designed using HTML, CSS, and Bootstrap framework 4. The values and colors are predefined as variables. The body of the form is given the styles of font-family as "Lato", sans-serif, and font-size as 16px. The section header is given the styles of text-transform as uppercase to automatically convert the text to uppercase, font-weight as bold, color as #9FAAB7, font-size as 16px/1.4, and margin-bottom as 1.4. The input fields are given the styles of border as 1px solid #C0CCDA, margin-bottom as 16px, and border-radius as 4px. The input fields take a border-color of #270D7C, in a checked event. The input text is given the styles of opacity as 1, font-size as 8px* 1.4, background-color as white, color as #9FAAB7, padding as 4px/2 4px, and margin as -58px 0 0 8px*1.4. Source:
This is an example of a web form with input types and pseudo-elements, designed using HTML, CSS, and Bootstrap framework 4. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the icons and elements in an orderly manner. There are eight types of inputs and elements displayed on the form, which are text¸ radio, checkbox, range, color, button, text area, and Select. The wrapper class is given the styles of max-width as 600px, margin as 2rem auto 1rem. The header of the form is given a text-align style as center. The list items are displayed in a grid, and the number of columns for the grid is defined as 2. The grid-gap is set as 1rem, with the font-style for the list items is set as 16px/1.4 Arial, sans-serif. An outline style of 1px solid #DDD is set for the list item box, with a padding value as .5rem. Source:
For an input field, this is one of the best styles one can have using the 2D vector math library of javascript. This style appears on the box while the user is typing in the input field. This can be achieved using HTML, script math library and CSS styles on your login forms, contact forms, websites, and even on your landing pages. In the HTML, a span element is added in the document. The input keys are added in the javascript for which the animation will be displayed. Next, you need to create a few math functions to create the spray along with the words which are typed in the input field. You can increase the burst of a spray of stimulated particles along the span on input field from left to right and top to bottom. You can see the math for particle stimulation along with the 2D vector class. Source:
With google guidelines for the material design, you can have clean, smooth and sleek designs for your web pages. Material designs can be used in all supported versions of Android devices. Further, it will be extended gradually throughout Google’s web ance mobile products. This will provide a consistent UI/UX experience across all the platforms. This is one of the designs following the google guidelines. This snippet is of the form with two inputs. Once you have an input field focused you would experience a transition of the label to the top corner. You can set the position to bottom or top of the labels when the input field is an inactive state. By following the Material Design of Google you would not have to worry about the user experience of the forms on various platforms. This is specially design for Android devices and hence you can check out the responsive behavior. Source:
This is an example of the input box which is subtle and can be used in any site with the animation used for the input text. Once you select the input field the label glides smoothly towards the top of the field and allows you to type the text, along with it the color of the text and border of the input field is also changed. The HTML is very simple with the class centered and group applied to the input and labels. All the animation and styling is taken care by CSS3. Once you click the label is transformed along the axis to glide upwards. The style also has the code to stop the chrome’s hideous pale yellow background color to be displayed while you do an auto fill. You can use this as an example to create contact forms. Source: