HTML form blocked, cannot enter any text

Question

Hi for some reason all of a sudden I am unable to enter any text into a html form. It worked earlier and now it doesn't. I've been using HTML, CSS and PHP to write to database. Any ideas anyone? It happened to me earlier because I set the some z value to -1 or something but i've since fixed that and now it's happened again somehow.

When I tab through the form I can enter text but when I hover over the text areas no cursor is shown.

<form action="dashboard.php" method="post">

    <div class="label"><span>Date </span><input type='date' class="datefield" name='date' /></div>

    <div class="label"><span>Department </span><input type="text" class="department" name="dept" value="" /></div>

    <div class="label"><span>Severity </span>
        <select name='seve' class="selectfield1">
                <option value="priority">Select</option>
                <option value="urgent">Urgent</option>
                <option value="high">High</option>
                <option value="medium">Medium</option>
                <option value="low">Low</option>
        </select>
    </div>

    <div class="label"><span>Status </span>
        <select name='stat' class="selectfield2">
                <option value="status">Select</option>
                <option value="progress">In progress</option>
                <option value="assigned">Assigned</option>
                <option value="completed">Completed</option>
                <option value="Delayed">Delayed</option> 
        </select>
    </div>

   <div class="label"><span>Assigned To </span><input type="text" class="assignedto" name="assi" value="" /></div>

    <div class="label"><span>Due By </span><input type="datetime-local" class="dueby" name="dueby"></div>

    <div class="label"><span>Description </span><textarea name="desc" class="description"></textarea></div>

    <div><span>&nbsp;</span><input type="submit" name="submit" value="Log Incident" /></div>
</form>

And the CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:300); /* Here we import a font from Google's API in order to use it in our project as the default font. */

.form_heading{

font-family: "Roboto", sans-serif;
margin-bottom: 25px;
font-size: 25px;
padding-bottom: 7px; /* This block of CSS code designs the "Log Incidents" heading */
}

.dash_style {

position: relative;
top: 55px;
left: 200px;
}
.dash_style div{
display: block;
margin: 0px 0px 15px 0px; /* This block of CSS code decides on the spacing between all the boxes and their labels. */
}
.dash_style div > span{
width: 100px;
font-weight: bold;
float: left;
padding-top: ;
padding-right: 5px;
font-family: "Roboto", sans-serif; /* This block of CSS code designs the labels and decided how far away the boxes will be  */
}


.dash_style input.datefield{
width: 10%; /* This block of CSS code just changes the width of the data field box. */

}

.dash_style input.department, 
.dash_style input.assignedto,
.dash_style .input-field3,

.dash_style .selectfield
.dash_style .selectfield2{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border: 1px solid #C2C2C2;
box-shadow: 1px 1px 4px #EBEBEB;
-moz-box-shadow: 1px 1px 4px #EBEBEB;
-webkit-box-shadow: 1px 1px 4px #EBEBEB;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
padding: 7px;
outline: none; /* This block of CSS code selects the different boxes by their specidied class and gives them a new look. */

}

.dash_style .description{
height:60px;
width: 20%; /* Here we decided how wide and tall the text area for the Incident Description will be */
}
.dash_style input[type=submit],
.dash_style input[type=button]{
border: none;
padding: 8px 15px 8px 15px;
width: 150px;
background: #336699;
color: #fff;
font-size: 15;
box-shadow: 1px 1px 4px #DADADA;
-moz-box-shadow: 1px 1px 4px #DADADA;
-webkit-box-shadow: 1px 1px 4px #DADADA;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px; /* This block of CSS code designs "Log Incident" button */
}
.dash_style input[type=submit]:hover,
.dash_style input[type=button]:hover{
background: #EA7B00;
color: #fff; /* The "Log Incident" button's background colour and hover effect are created here */

}

Answer 1

You can figure this out on your own by right-clicking on the desired element and choosing inspect element from the context menu.

This will pop-up the Developer Tools app, now built into Chrome, Firefox and Opera (slightly different in each one. I, for example, prefer Chrome's Dev Tools).

You will be looking on the Elements tab, and at the Styles pane. Note that you can experiment by adding/disabling CSS on the fly! Incredibly useful tool.

Read this post about how to use it, or search YouTube for a video:

https://developer.chrome.com/devtools

---

You will notice that it works fine in the below Stack Code Snippet. Probably, something else on your page is interfering -- and you are likely on the right track with the z-index.

@import url(https://fonts.googleapis.com/css?family=Roboto:300); /* Here we import a font from Google's API in order to use it in our project as the default font. */

.form_heading{

  font-family: "Roboto", sans-serif;
  margin-bottom: 25px;
  font-size: 25px;
  padding-bottom: 7px; /* This block of CSS code designs the "Log Incidents" heading */
}

.dash_style {

  position: relative;
  top: 55px;
  left: 200px;
}
.dash_style div{
  display: block;
  margin: 0px 0px 15px 0px; /* This block of CSS code decides on the spacing between all the boxes and their labels. */
}
.dash_style div > span{
  width: 100px;
  font-weight: bold;
  float: left;
  padding-top: ;
  padding-right: 5px;
  font-family: "Roboto", sans-serif; /* This block of CSS code designs the labels and decided how far away the boxes will be  */
}


.dash_style input.datefield{
  width: 10%; /* This block of CSS code just changes the width of the data field box. */

}

.dash_style input.department, 
.dash_style input.assignedto,
.dash_style .input-field3,

.dash_style .selectfield
.dash_style .selectfield2{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border: 1px solid #C2C2C2;
  box-shadow: 1px 1px 4px #EBEBEB;
  -moz-box-shadow: 1px 1px 4px #EBEBEB;
  -webkit-box-shadow: 1px 1px 4px #EBEBEB;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  padding: 7px;
  outline: none; /* This block of CSS code selects the different boxes by their specidied class and gives them a new look. */

}

.dash_style .description{
  height:60px;
  width: 20%; /* Here we decided how wide and tall the text area for the Incident Description will be */
}
.dash_style input[type=submit],
.dash_style input[type=button]{
  border: none;
  padding: 8px 15px 8px 15px;
  width: 150px;
  background: #336699;
  color: #fff;
  font-size: 15;
  box-shadow: 1px 1px 4px #DADADA;
  -moz-box-shadow: 1px 1px 4px #DADADA;
  -webkit-box-shadow: 1px 1px 4px #DADADA;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px; /* This block of CSS code designs "Log Incident" button */
}
.dash_style input[type=submit]:hover,
.dash_style input[type=button]:hover{
  background: #EA7B00;
  color: #fff; /* The "Log Incident" button's background colour and hover effect are created here */

}

<form action="dashboard.php" method="post">

  <div class="label"><span>Date </span><input type='date' class="datefield" name='date' /></div>

  <div class="label"><span>Department </span><input type="text" class="department" name="dept" value="" /></div>

  <div class="label"><span>Severity </span>
    <select name='seve' class="selectfield1">
      <option value="priority">Select</option>
      <option value="urgent">Urgent</option>
      <option value="high">High</option>
      <option value="medium">Medium</option>
      <option value="low">Low</option>
    </select>
  </div>

  <div class="label"><span>Status </span>
    <select name='stat' class="selectfield2">
      <option value="status">Select</option>
      <option value="progress">In progress</option>
      <option value="assigned">Assigned</option>
      <option value="completed">Completed</option>
      <option value="Delayed">Delayed</option> 
    </select>
  </div>

  <div class="label"><span>Assigned To </span><input type="text" class="assignedto" name="assi" value="" /></div>

  <div class="label"><span>Due By </span><input type="datetime-local" class="dueby" name="dueby"></div>

  <div class="label"><span>Description </span><textarea name="desc" class="description"></textarea></div>

  <div><span>&nbsp;</span><input type="submit" name="submit" value="Log Incident" /></div>
</form>