issue with inputs inside a form

Question

1 PROBLEM.- I can't align the 2 inputs forms in the subheader

2 PROBLEM.- I need to show the words "register" and "login" again when you click outside the "subheader" except when you write something in the inputs

$(document).ready(function() {
    $('.register').click(function() {
        $('.register').hide();
 });
});
$(document).ready(function() {
    $('.registers').hide();
});
$(document).ready(function() {
    $('.register').click(function() {
        $('.registers').show();
 });
});

.subheader {
 background: #F3F3F3;
 margin: 0 auto;
 width: 100%;
 height: 30px;

}
.register p {
 display: inline-block;
 float: right;
 color: #179B75;
 font-size: 12px;
 padding: 0;
 padding-right: 8px;
}
.register {
 display: block;
 left: 75%;
 position: fixed;
 top: 5px;
 z-index: 10005;
 height: 30px;
}
.register>p>input {
 width: 100px;
 height: 20px;
 border: 1px solid #c8c8c8;
 font-family: FuturaLight;
 text-indent: 20px;
 font-size: 12px;
 float: right;
 display: none;
 color: #179B75;
}
.register>p>input:enabled{
 cursor: text;
}
.forms {
 width: 400px;
 height: 30px;
 display:inline-block;
 float:right;
}
.registers {
 width: 400px;
 height: 30px;
 display: inline-block;
 float:right;
}
.registerformsleft {
 width: 130px;
 height: 25px;
 display: inline-block;
 position: inherit;
 float: left;
}
.registerformsright {
 width: 130px;
 height: 25px;
 display: inline-block;
 position: inherit;
 float: right;
}
.register {
 cursor:pointer;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Prueba</title>
    <link rel="stylesheet" href="css/Principal.css"/>
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/jquery.bxslider.css" />
  </head>
  <body>
    <header>
          <div class="subheader">
            <div class="register">  
              <p>Login
              </p>
               <p>|</p>
              <p>Register</p>
            </div>
            <div class="forms">
              <form class="registers" action="demo_form.asp">
                <input class="registerformsleft" type="email" name="email" value="Email" placeholder="Format: algo@gmail.com" onfocus="if (this.value=='Email') this.value='';"><br>
                <input class="registerformsright" type="password" name="Password" size="10" value="Password" onfocus="if (this.value=='Password') this.value='';"><br>
                <input class="submit" type="submit" value="Submit">
              </form>
            </div> 
          </div>
    </header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="js/jquery.inputs.js"></script>
   </body>
</html>

score 0 · Answer 1 · answered Sep 10 '15 at 04:39

0

1 PROBLEM:

remove the br tag beetwen the two input fields and before the submit button and change your style like this:

.registerformsright {
    width: 130px;
    height: 25px;
    display: inline-block;
    position: inherit;
    margin-left: 5px;
}

answered Sep 10 '15 at 04:39

Dario

280
2
9

br tag? I don't have a br tag there – Kenny Amaro Sep 10 '15 at 04:48
at the end of the input tags – Dario Sep 10 '15 at 04:52
this one? – Kenny Amaro Sep 10 '15 at 04:53
I don't mean that line, that one is fine, but at the ent of the input tags (class="registerformsleft" and class="registerformsright") there are two br tag – Dario Sep 10 '15 at 04:54
the
at the end on this line and from the right one – Dario Sep 10 '15 at 04:56
OMG ... thanks a lot O.O I don't see this tags ... thanks – Kenny Amaro Sep 10 '15 at 04:56
do you know how to fix the second problem? – Kenny Amaro Sep 10 '15 at 04:57
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/89217/discussion-between-dario-and-kenny-amaro). – Dario Sep 10 '15 at 04:58

score 0 · Answer 2 · edited May 23 '17 at 12:22

1 PROBLEM:

Just remove the <br> tag between two input elements

2 PROBLEM:

$(document).ready(function() {
  $('.register').click(function() {
    $('.register').hide()
  });
  $('.registers').hide();
  $('.register').click(function() {
    $('.registers').show();
  });

  $(document).mouseup(function(e) {
    var container = $(".registers");
    var email = $('input[name = "email"]');
    var password = $('input[name = "Password"]');
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      if ((email.val() === email[0].defaultValue || !email.val()) && (password.val() === password[0].defaultValue || !password.val())) {
        container.hide();
        $('.register').show();
      }
    }
  });
});

.subheader {
  background: #F3F3F3;
  margin: 0 auto;
  width: 100%;
  height: 30px;
}
.register p {
  display: inline-block;
  float: right;
  color: #179B75;
  font-size: 12px;
  padding: 0;
  padding-right: 8px;
}
.register {
  display: block;
  left: 75%;
  position: fixed;
  top: 5px;
  z-index: 10005;
  height: 30px;
}
.register>p>input {
  width: 100px;
  height: 20px;
  border: 1px solid #c8c8c8;
  font-family: FuturaLight;
  text-indent: 20px;
  font-size: 12px;
  float: right;
  display: none;
  color: #179B75;
}
.register>p>input:enabled {
  cursor: text;
}
.forms {
  width: 400px;
  height: 30px;
  display: inline-block;
  float: right;
}
.registers {
  width: 400px;
  height: 30px;
  display: inline-block;
  float: right;
}
.registerformsleft {
  width: 130px;
  height: 25px;
  display: inline-block;
  position: inherit;
  float: left;
}
.registerformsright {
  width: 130px;
  height: 25px;
  display: inline-block;
  position: inherit;
  float: right;
}
.register {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="subheader">
    <div class="register">
      <p>Login
      </p>
      <p>|</p>
      <p>Register</p>
    </div>
    <div class="forms">
      <form class="registers" action="demo_form.asp">
        <input class="registerformsleft" type="email" name="email" value="Email" placeholder="Format: algo@gmail.com" onfocus="if (this.value=='Email') this.value='';">

        <input class="registerformsright" type="password" name="Password" size="10" value="Password" onfocus="if (this.value=='Password') this.value='';">
        <input class="submit" type="submit" value="Submit">
      </form>
    </div>
  </div>
</header>

Used THIS ANSWER for reference

score 0 · Answer 3 · answered Sep 10 '15 at 06:03

please try this one:

Css:

.subheader {
  background: #F3F3F3;
  margin: 0 auto;
  width: 100%;
  height: 30px;
}
.register p {
  display: inline-block;
  float: right;
  color: #179B75;
  font-size: 12px;
  padding: 0;
  padding-right: 8px;
}
.register {
  display: block;
  left: 75%;
  position: fixed;
  top: 5px;
  z-index: 10005;
  height: 30px;
}
.register>p>input {
  width: 100px;
  height: 20px;
  border: 1px solid #c8c8c8;
  font-family: FuturaLight;
  text-indent: 20px;
  font-size: 12px;
  float: right;
  display: none;
  color: #179B75;
}
.register>p>input:enabled {
  cursor: text;
}
.forms {
  width: 400px;
  height: 30px;
  display: inline-block;
  float: right;
}
.registers {
  width: 400px;
  height: 30px;
  display: inline-block;
  float: right;
}
.registerformsleft {
  width: 130px;
  height: 25px;
  display: inline-block;
  position: inherit;
  float: left;
}
.registerformsright {
    width: 130px;
    height: 25px;
    display: inline-block;
    position: inherit;
    margin-left: 5px;
}
.register {
  cursor: pointer;
}

DEMO

issue with inputs inside a form

3 Answers3