Test HTTP Requests Tools Blog Learn Quizzes Smile API Log In / Sign Up
Test HTTP Requests Tools Blog Learn Quizzes Smile API Log In / Sign Up
« Return to the tutorials list
We have updated the website and our policies to make sure your privacy rights and security are respected.
Click here to learn more about the way our website handles your data.

Remove this message.

Forms Redesigned - Natural Language Form Using Only CSS 3 and HTML 5

Difficulty: 25 / 50 Tweet
natural language form layout

At some point in time, every web developer is going to get bored with creating the same old contact form over and over for every website he works on. That's why in today's tutorial I'm going to show you how to create a natural language form using only HTML 5 and CSS 3. It only has a few fields, meant to demonstrate concept, but you can extend it if you want.

Natural Language Forms in web design are replacements for the classical forms we all know. With this approach sentences are constructed by user input forming a block of text that actually has meaning when read by a human being - close enough to "fill in the blanks" quizzes that you used to solve in school.

Going back to the code, I will not go through each CSS rule I've written because most of them are self-explanatory. Below are the ones that are a little tricky:

  1. Our text inputs need to have custom placeholder colors so we need to use browser specific rules to alter their aspect:
            
                  ::-webkit-input-placeholder { /* WebKit browsers */
                    color:    #B5E655;
                  }
                  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                    color:    #B5E655;
                    opacity:  1;
                  }
                  ::-moz-placeholder { /* Mozilla Firefox 19+ */
                    color:    #B5E655;
                    opacity:  1;
                  }
                  :-ms-input-placeholder { /* Internet Explorer 10+ */
                    color:    #B5E655;
                  }
            
          
  2. Also, we're going to need to change the default drop-down appearance so that they blend nicely with our design:
            
              select.dropdown {
                font-size: 1em;
                color: #B5E655;
                border: none;
                border-bottom: 1px dashed #EFEFEF;
                -webkit-appearance: none;
                -moz-appearance: none;
                background: none;
                width: auto;
                text-indent: 0.01px;
                text-overflow: "";
                box-shadow: none;
                font: inherit;
              }
              select.dropdown:focus {
                outline: none;
                border-bottom: 1px dashed #DD0000;
              }
            
          

Here's a demo of how the final result should look like. Hope you like it. »

comments powered by Disqus