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.

Android Mobile Form using CSS

CSS is a web language, we use CSS for styling the HTML tags. In this today article, I will show you how to create an 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 the more beautiful form using  CSS and HTML language. First, we need to download the required tools for the this CSS Form design.
css form

1- First download HD quality image from the 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 the lock icon.
here is the demo
Index.html

[<!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>]
Watch video here


Conclusion

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

COMMENTS

BLOGGER: 1
Loading...
Name

ajax,1,HTML & CSS,11,PHP,6,
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://2.bp.blogspot.com/-9mJi5C6u1rU/WtONsv5WYLI/AAAAAAAABiQ/lBCg84sJn9AgMnhzL7uoVW-esbyvPQ3ngCLcBGAs/s640/android%2Bform%2Blayout.png
https://2.bp.blogspot.com/-9mJi5C6u1rU/WtONsv5WYLI/AAAAAAAABiQ/lBCg84sJn9AgMnhzL7uoVW-esbyvPQ3ngCLcBGAs/s72-c/android%2Bform%2Blayout.png
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