Android Mobile Type CSS Form

CSS Form we will create in this article, we will use HTML and CSS for designing the Android design form.

CSS is a web  language, we use CSS for styling the HTML tags. In this today article i will show you how to create android mobile type form using CSS and HTML. CSS Form you can google it you will find so beautiful design but in this article we will create more beautiful form using  CSS and HTML language. First we need to download required  tools for the this CSS Form design.
css form

1- First download HD quality image from internet, the best way to download HD quality image from pixabay.com website from pixabay you download HD quality image free of cost.
2- Second we need to download font-awesome library, font-awesome is the icons library so we need to download font-awsome for lock icon.
here is the demo
Now copy the below code and paste in your editor

[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <style>
        .container {
            margin:50px 0px;
        }
      form{
        width:350px;
        height: auto;
        margin:auto;
        padding:30px 10px;
        text-align: center;
        background: url("second.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-color: rgba(0,0,0,0.7);
        background-blend-mode: overlay;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.7);
        box-shadow: 0 0 10px rgba(0,0,0,0.7);
        transition: 1s;
      }
      .form-group{
        margin:20px 0px;
      }
      input[type="text"]{
        width: 100%;
        height: 35px;
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
        border-bottom: 1px solid #fff;
        color:#fff;
        padding-left: 10px;
        box-sizing: border-box;
        background-color: rgba(0,0,0,0.0);
      }
      input[type="password"]{
        width: 100%;
        height: 35px;
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
        border-bottom: 1px solid #fff;
        color:#fff;
        padding-left: 10px;
        box-sizing: border-box;
        background-color: rgba(0,0,0,0.0);
      }
      input[type="submit"]{
        width: 100%;
        height: 50px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        -ms-border-radius: 30px;
        -o-border-radius: 30px;
        border-radius: 30px;
        color:#fff;
        font-weight: bold;
        background-color: orange;
        border:0px;
        -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.5);
        box-shadow: 0 0 20px rgba(0,0,0,0.5);
      }
      form a{
        color:#fff;
        text-decoration: none;
      }
      .fa-lock{
        color:#fff;
      }
      input[type="text"]:focus{
        border-bottom-color: #07FD18
      }
      input[type="password"]:focus{
        border-bottom-color: #07FD18
      }
      input[type="submit"]:hover{
        cursor: pointer;
      }
      input[type="text"]:focus{
        outline: none;
      }
      input[type="password"]:focus{
        outline: none;
      }
      input[type="submit"]:focus{
        outline: none;
      }
    </style>
</head>
<body>
<div class="container">
    <form>
    <p><i class="fa fa-lock fa-4x"></i></p>
     <div class="form-group">
         <input type="text" name="" placeholder="Enter Name">
     </div><!-- close form-group -->
    <div class="form-group">
         <input type="text" name="" placeholder="Enter Email">
     </div><!-- close form-group -->
     <div class="form-group">
         <input type="password" name="" placeholder="Enter Password">
     </div><!-- close form-group -->
     <div class="form-group">
         <input type="text" name="" placeholder="Enter Address">
     </div><!-- close form-group -->
     <div class="form-group">
         <input type="submit" name="" value="Create An Account" >
     </div><!-- close form-group -->
     <div class="form-group">
         <a href="">Already have an account?</a>
     </div><!-- close form-group -->
     </form><!-- close form -->
    </div><!-- close container -->
</body>
</html>]
Now save you file and open file in the browser.
Watch video here

Conclusion

test code in your computer/laptop and if you have any issue just write you problem in comment area i will give the feedback and share this article with your friends thank you.

COMMENTS

Name

bootstrap,1,CSS,6,Example,3,HTML,6,login,1,mysql,3,PHP,5,
ltr
item
webtipstricks: Android Mobile Type CSS Form
Android Mobile Type CSS Form
CSS Form we will create in this article, we will use HTML and CSS for designing the Android design form.
https://4.bp.blogspot.com/-Fg9Zrbm0P7o/WbY62BvDvNI/AAAAAAAABUw/8Af926XHmHorV3k5W_EBHLYQgAQCYB9iACLcBGAs/s640/android%2Bdesign%2Bform%2Busing%2Bcss%2Band%2Bhtml.jpg
https://4.bp.blogspot.com/-Fg9Zrbm0P7o/WbY62BvDvNI/AAAAAAAABUw/8Af926XHmHorV3k5W_EBHLYQgAQCYB9iACLcBGAs/s72-c/android%2Bdesign%2Bform%2Busing%2Bcss%2Band%2Bhtml.jpg
webtipstricks
http://www.webtipstricks.com/2017/09/css-form.html
http://www.webtipstricks.com/
http://www.webtipstricks.com/
http://www.webtipstricks.com/2017/09/css-form.html
true
4027471107773963481
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy