Html Form Blocked, Cannot Enter Any Text

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. An

Solution 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_stylediv{
  display: block;
  margin: 0px0px15px0px; /* This block of CSS code decides on the spacing between all the boxes and their labels. */
}
.dash_stylediv > 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_styleinput.datefield{
  width: 10%; /* This block of CSS code just changes the width of the data field box. */

}

.dash_styleinput.department, 
.dash_styleinput.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: 1px1px4px#EBEBEB;
  -moz-box-shadow: 1px1px4px#EBEBEB;
  -webkit-box-shadow: 1px1px4px#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_styleinput[type=submit],
.dash_styleinput[type=button]{
  border: none;
  padding: 8px15px8px15px;
  width: 150px;
  background: #336699;
  color: #fff;
  font-size: 15;
  box-shadow: 1px1px4px#DADADA;
  -moz-box-shadow: 1px1px4px#DADADA;
  -webkit-box-shadow: 1px1px4px#DADADA;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px; /* This block of CSS code designs "Log Incident" button */
}
.dash_styleinput[type=submit]:hover,
.dash_styleinput[type=button]:hover{
  background: #EA7B00;
  color: #fff; /* The "Log Incident" button's background colour and hover effect are created here */

}

<formaction="dashboard.php"method="post"><divclass="label"><span>Date </span><inputtype='date'class="datefield"name='date' /></div><divclass="label"><span>Department </span><inputtype="text"class="department"name="dept"value="" /></div><divclass="label"><span>Severity </span><selectname='seve'class="selectfield1"><optionvalue="priority">Select</option><optionvalue="urgent">Urgent</option><optionvalue="high">High</option><optionvalue="medium">Medium</option><optionvalue="low">Low</option></select></div><divclass="label"><span>Status </span><selectname='stat'class="selectfield2"><optionvalue="status">Select</option><optionvalue="progress">In progress</option><optionvalue="assigned">Assigned</option><optionvalue="completed">Completed</option><optionvalue="Delayed">Delayed</option></select></div><divclass="label"><span>Assigned To </span><inputtype="text"class="assignedto"name="assi"value="" /></div><divclass="label"><span>Due By </span><inputtype="datetime-local"class="dueby"name="dueby"></div><divclass="label"><span>Description </span><textareaname="desc"class="description"></textarea></div><div><span>&nbsp;</span><inputtype="submit"name="submit"value="Log Incident" /></div></form>