嗨,由于某种原因,我突然无法在html表单中输入任何文本。它以前工作过,现在不工作了。我一直在使用HTML、CSS和PHP编写数据库。有什么想法吗?我早些时候也遇到过这种情况,因为我把一些z值设置为-1或其他什么,但后来我解决了这个问题,现在不知怎么又发生了。
当我浏览表单时,我可以输入文本,但当我将鼠标悬停在文本区域上时,不会显示光标。
<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> </span><input type="submit" name="submit" value="Log Incident" /></div>
</form>
和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 */
}
您可以通过右键单击所需元素并从上下文菜单中选择inspect element
来自行解决此问题。
这将弹出开发者工具应用程序,该应用程序现在内置于Chrome、Firefox和Opera中(每一个都略有不同。例如,我更喜欢Chrome的开发工具)。
您将看到Elements
选项卡和Styles
窗格。请注意,您可以通过动态添加/禁用CSS进行实验非常有用的工具。
阅读这篇关于如何使用它的帖子,或者在YouTube上搜索视频:
https://developer.chrome.com/devtools
您会注意到,它在下面的堆栈代码段中运行良好。很可能,页面上的其他内容正在干扰您--并且您很可能使用z索引。
@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> </span><input type="submit" name="submit" value="Log Incident" /></div>
</form>