CODEWITHSUNDEEP
csshtml
user3592479
user3592479

Reputation: 695

How to make a HTML5 form responsive?

I have a form as in the below code ? how can i make it fit to the center of the screen and convert it to be responsive ?

HTML5 Code 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS3 Search Form</title>
<link href="css/cbdb-search-form.css" type="text/css" rel="stylesheet" media="screen" />
<style type="text/css">

body {
background: #999;
}
</style>
</head>
<body>
<form id="search-form">
<input type="email" />
<input type="submit" value="Login" /> 
</form>
</body>
</html>

CSS Code

/************************************ CSS 3 SEARCH BY ZEAOS ************************************/

#search-form {
background: #e1e1e1; /* Fallback color for non-css3 browsers */
width: 365px;

/* Gradients */
background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));
background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);

/* Rounded Corners */
border-radius: 17px; 
-webkit-border-radius: 17px;
-moz-border-radius: 17px;

/* Shadows */
box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); 
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
}

/*** TEXT BOX ***/
input[type="email"]{
background: #fafafa; /* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);

border: 0;
border-bottom: 1px solid #fff;
border-right: 1px solid rgba(255,255,255,.8);
font-size: 16px;
margin: 4px;
padding: 5px;
width: 250px;

/* Rounded Corners */
border-radius: 17px; 
-webkit-border-radius: 17px;
-moz-border-radius: 17px;

/* Shadows */
box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
}

/*** USER IS FOCUSED ON TEXT BOX ***/
input[type="text"]:focus{
outline: none;
background: #fff; /* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)),  color-stop(1, rgb(235,235,235)));
background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);
}

/*** SEARCH BUTTON ***/
input[type="submit"]{
background: #44921f;/* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)),   color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));
background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%,   rgb(62,135,28) 88%, rgb(49,114,21) 100%);

border: 0;
color: #eee;
cursor: pointer;
float: right;
font: 16px Arial, Helvetica, sans-serif;
font-weight: bold;
height: 30px;
margin: 4px 4px 0;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
width: 84px;
outline: none;

/* Rounded Corners */
border-radius: 30px; 
-webkit-border-radius: 30px;
-moz-border-radius: 30px;

/* Shadows */
box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
}
/*** SEARCH BUTTON HOVER ***/
input[type="submit"]:hover {
background: #4ea923; /* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)),      color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%,     rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}
input[type="submit"]:active {
background: #4ea923; /* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)),   
color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1,  rgb(54,120,22)));
background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%,         rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}

EDIT 1

This is a mobile web application . Users consists of both smart phones and oldest devices.

Upvotes: 1

Views: 10204

Answers (4)

Asha Devyani
Asha Devyani

Reputation: 21

First of all for making a responsive form or anything like that always give width in %age followed by giving media queries. You can use bootstrap for making your page even better. you can get bootstrap from getbootstrap.com/. The usage and implementation techniques are mentioned there

Upvotes: 1

rnrneverdies
rnrneverdies

Reputation: 15627

First at all

Remove HTML DOCTYPE or change it to <!DOCTYPE html>. HTML5 is not based on SGML, and therefore does not require a reference to a DTD.

To center Content

Wrap your form in a DIV 

<body>
<div class="modal">
<form id="search-form">
<input type="email" />
<input type="submit" value="Login" /> 
</form>
</div>
</body>

Then Apply this CSS to center on screen.

.modal {
   position: fixed;   
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

#search-form {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

To be Responsive Use CSS Media Query

Media Queries let you apply styles depending on conditions (screen size, screen type, etc) on the screen where you will see the page.

This is only a simple example. I recommend you read about CSS Media Queries.

In this case you set minimum width and height

@media ( max-width :320px) {
    .modal {
         min-width: 200px;
         min-height: 120px;
    }
}

@media ( min-width :321px) {
    .modal {
         min-width: 300px;
         min-height: 220px;
    }
}

@media ( min-width :640px) {
    .modal {
         min-width: 480px;
         min-height: 320px;
    }
}

@media ( min-width :1200px) {
    .modal {
         min-width: 700px;
         min-height: 400px;
    }
}

In the other Hand

Have you thought about using bootstrap?

Enjoy!

Upvotes: 4

Samuele Panarotto
Samuele Panarotto

Reputation: 277

To center, add 

width: 365px;
height:38px;

position:absolute;
top:50%;
margin-top:-19px;
left:50%;
margin-left:-182px;

in #search-form

for responsive, this could be a starting point:

    @media all and (max-width:480px) {

#search-form {
    width:100%;
    margin-left:-50%;
}

input[type="email"]{
    width:70%;
}

input[type="submit"]{
    width:20%;
}

}

Upvotes: 0

Luiggi
Luiggi

Reputation: 368

To center add position:relative to the body

Then you add these rules to the #form to your css:

#search-form{
  margin:auto;
  position:absolute;
  z-index: 30;
  top:0;
  bottom:0;
  left:0;
  right:0;
  width: 300px; /*variable*/
  height: 300px;  /*variable*/
        }

Upvotes: 0

Related Questions