Make an <input type="text"> input-ready for input

Joined
Aug 16, 2022
Messages
52
Reaction score
2
Hi Everybody,

I have a text input on my form. Using the autofocus feature, this input is almost ready for input except that; the user must mouse-click inside the input box to activate their keyboard input.

HTML:
<div class="input-group">
    <span class="input-group-text"><i class="bi-person-fill" arial-hidden="true"></i>&nbsp;</span>
    <input type="text" class="form-control" placeholder="Enter Your User Name" id="uName" name="uName" required="required" autofocus>
 </div>

Visitors can not just go ahead and enter their information. Can I change that? What do I refer to?
 
Joined
Nov 13, 2020
Messages
302
Reaction score
38
This code works the way you want it in FF and chrome. You must have something further down that is robbing the autofocus from this <input>. Post all the code and we'll look for it.
 
Joined
Aug 16, 2022
Messages
52
Reaction score
2
This code works the way you want it in FF and chrome. You must have something further down that is robbing the autofocus from this <input>. Post all the code and we'll look for it.
Well, here is the full throttle HTML code:

HTML:
<?php
    session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="Login.php">
  <meta name="description" content="Joseph Paul Bruneau">
  <meta name="(jpaulb.com)">
  <meta name="dcterms.created" content="Thursday June 29-2023   8:00am AST">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <!-- Bootstrap Font Icon CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <!--Custom CSS & JS-->
    <link rel="stylesheet" href="../scripts/inputBox.css" type="text/css">
  <script src="../scripts/inputBox.js"></script>
  <!--Used to define the dimensions of PopUp boxes-->
    <style>
         body {
             font-size: 0.800rem;
            position: relative;
            left: 6.25rem;
            height: 8rem;
            width: 47.5rem;
        }
    </style>
    <title>Log-In</title>
</head>
    <body>
        <div class="container-sm">
            <div class="row " style="margin-top: 3.125rem">
                <div class="col-md-6 col-md-offset-3 form-container">
                    <h2>Log-In</h2>
                    <hr>
                    <form method="post" action="LogInHandler.php">
                   <div class="row">
                     <div class="col-sm-6 form-group">
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi-person-fill" arial-hidden="true"></i>&nbsp;</span>
                                        <input type="text" class="form-control" placeholder="Enter Your User Name" id="uName" name="uName" required="required" autofocus>
                         </div>
                     </div>
                            <div class="col-sm-6 form-group">
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi-key-fill" arial-hidden="true"></i>&nbsp;</span>
                                         <input type="password" class="form-control" placeholder="Enter Your Password" id="uPassword" name="uPassword" required="required">
                                </div>
                            </div>
                   </div>
                        <hr>
                        <div class="row">
                      <div class="col-sm-3  form-group mb-2">
                                <p style="text-align: left">
                            <input type="submit" class="submitbtn2" id="1" value="Clear"></input>
                                </p>
                    </div>
                      <div class="col-sm-3  form-group">
                                <p style="text-align: center">                                                                                                   <ol>
                            <input type="submit" class="submitbtn1" id="2" value="Submit"></input>
                                </p>
                    </div>
                      <div class="col-sm-3 form-group">
                                <p style="text-align: right">
                            <input type="submit" class="submitbtn2" id="3" value="Password?"></input>
                                </p>
                    </div>
                        </div>
          </form>
                </div>
         </div>
        </div>
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

The <input type="text" >autofocus line also looks at two CSS classes:

CSS:
.form-container input[type=text] {
    background-color: #F0F0F0  ;
    border-color: #000000;
    border-style=: groove;
    border-width: 0.125rem;
    border-radius: 0.250rem;
    border: 0.125rem solid;
}

.form-container input[type=text]:focus {
    background-color: #FFFF00;
    box-shadow: #339900 0.625rem 1.25rem 1.25rem -0.625rem;
    border-style: groove;
    border-width: 0.125rem;
    border-radius: 0.250rem;
    border: 0.125rem solid;
    font-family: Cabin SemiBold, sans-serif;
    font-weight: bold;
    font-size: normal;
}

However, although the input-box does change its' appearance, and the caret appears inside that box, a user cannot just start to enter their username without clicking the mouse button first.
 
Last edited:
Joined
Nov 13, 2020
Messages
302
Reaction score
38
It still works FF & Chrome.
It would be nice to move the background color when the focus is changed:
Code:
#uPassword:focus{
    background-color: #FFFF00;
}

try flushing your cache.
 
Joined
Jul 4, 2023
Messages
400
Reaction score
44
user must mouse-click inside the input box to activate their keyboard input.
or press TAB key on their keyboard ;)


I suggest a swap "type" from "submit" to "reset" for button
<input type="submit" class="submitbtn2" id="1" value="Clear"></input>
HTML:
<input type="reset" class="submitbtn2" id="1" value="Clear"></input>


Writing "id" as a single number is not good programming practice
<input type="submit" class="submitbtn2" id="1" value="Clear">
<input type="submit" class="submitbtn1" id="2" value="Submit">
<input type="submit" class="submitbtn2" id="3" value="Password?">

in this case it's better to use e.g.
login-btn-1, login-btn-2 , ...
login-btn_1, login-btn_2 , ...




In HTML, the <input> element is a void element, which means it doesn't require a closing tag </input>
<input type="submit" class="submitbtn2" id="1" value="Clear"></input>
 
Last edited:
Joined
Jul 4, 2023
Messages
400
Reaction score
44
It would be nice to move the background color when the focus is changed:
@jPaulB according suggested above, using a comma you can create a "list" of items for which you can use the same css code e.g.

CSS:
.form-container input[type=text],
.form-container input[type=password] {
  background-color: #F0F0F0;
  border-color: #000000;
  border-style: groove;
  border-width: 0.125rem;
  border-radius: 0.250rem;
  border: 0.125rem solid;
  transition: all 100ms;
}
.form-container input[type=text]:focus,
.form-container input[type=password]:focus {
  background-color: #FFFF00;
  box-shadow: #339900 0.625rem 1.25rem 1.25rem -0.625rem;
  font-family: Cabin SemiBold, sans-serif;
  font-weight: bold;
  font-size: normal;
}

or just use class "form-control"
<input type="text" class="form-control" placeholder="Enter Your User Name" ...>

CSS:
.form-container .form-control {
  background-color: #F0F0F0;
  border-color: #000000;
  border-style: groove;
  border-width: 0.125rem;
  border-radius: 0.250rem;
  border: 0.125rem solid;
  transition: all 100ms;
}
.form-container .form-control:focus {
  background-color: #FFFF00;
  box-shadow: #339900 0.625rem 1.25rem 1.25rem -0.625rem;
  font-family: Cabin SemiBold, sans-serif;
  font-weight: bold;
  font-size: normal;
}
 
Joined
Jul 4, 2023
Messages
400
Reaction score
44
Visitors can not just go ahead and enter their information
Finally you can use javascript to get this effect e.g.

HTML:
<body>
    ...
  
  
  
    <script>
        window.onload = () => {
            document.querySelector('form input').focus();
        };
    </script>
</body>

or

HTML:
<body>
    ...
  
  
  
    <script>
        window.onload = () => {
            document.querySelector('form input#uName').focus();
        };
    </script>
</body>
 
Joined
Aug 16, 2022
Messages
52
Reaction score
2
Hi VBScript,

Thank you again for your reply. You have given me a lot of your time through this forum on several questions. Your responses have always given me more than I asked for, and always peak my imagination and curiosity.

The JavaScript option is interesting. How would I incorporate that into a button statement?


HTML:
<div class="col-sm-4">
    <p style="text-align: left">
        <input type="reset" value="Clear">
    </p>
</div>
 
Joined
Jul 4, 2023
Messages
400
Reaction score
44
How would I incorporate that into a button statement?
;)

HTML:
<style>
  input,
  button {
    display: block;
  }
  input + input,
  input ~ button {
    margin-top: .5rem;
  }
</style>

<form>
  <input type="text" name="field1" value="">
  <input type="text" name="field2" value="">
  <button type="reset">Clear</button>
</form>

even like that :cool:

HTML:
<style>
  input,
  button {
    display: block;
  }
  input + input,
  input ~ button {
    margin-top: .5rem;
  }
</style>

<form>
  <input type="text" name="field1" value="">
  <input type="text" name="field2" value="">
  <button type="button" onclick="this.parentNode.reset()">Clear</button>
</form>

or 😇

HTML:
<style>
  input,
  button {
    display: block;
  }
  input + input,
  input ~ button {
    margin-top: .5rem;
  }
</style>

<form id="myForm">
  <input type="text" name="field1" value="">
  <input type="text" name="field2" value="">
  <button type="button" onclick="myForm.reset()">Clear</button>
</form>

HTML:
<style>
  form * {
    box-sizing: border-box;
  }
  input {
    display: block;
    width: 12rem;
  }
  input + input,
  input ~ button {
    margin-top: .5rem;
  }
  button {
    width: 3.8rem;
  }
  button + button {
    margin-left: 4rem;
  }
</style>

<form>
  <input type="text" name="field1" value="">
  <input type="text" name="field2" value="">
  <button type="reset">Clear</button>
  <button>Submit</button><!-- <button type="submit">Submit</button> -->
</form>
 
Last edited:

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,829
Messages
2,569,737
Members
45,521
Latest member
maryb

Latest Threads

Top