HTML表单被封锁，无法输入任何文字 [英] HTML form blocked, cannot enter any text
本文介绍了HTML表单被封锁，无法输入任何文字的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
出于某种原因，我突然间无法将任何文本输入到html表单中。它工作得更早，现在它没有。我一直在使用HTML，CSS和PHP来写入数据库。任何想法的人？它发生在我之前，因为我将一些z值设置为-1或某些东西，但我已经修复了它，现在它再次发生。
当我通过表格标签时，我可以输入文本，但是当我将鼠标悬停在文本区域上时，不显示任何光标。
< form action =dashboard.phpmethod =post>
< div class =label>< span>日期< / span>< input type ='date'class =datefieldname ='date'/><<< ; / DIV>
< div class =label>< span>部门< / span>< input type =textclass =departmentname =deptvalue = />< / DIV>
< div class =label>< span>严重程度< / span>
< select name ='seve'class =selectfield1>
< option value =priority>选择< / option>
< option value =urgent>紧急< / option>
< option value =high>高< / option>
< option value =medium>中< / option>
< option value =low>低< / option>
< / select>
< / div>
< div class =label>< span>状态< / span>
< select name ='stat'class =selectfield2>
< option value =status>选择< / option>
< option value =progress>进行中< / option>
< option value =assigned>已分配< / option>
< option value =completed>已完成< / option>
< option value =延迟>延迟< / option>
< / select>
< / div>
< div class =label>< span>由< / span>< input type =datetime-localclass =duebyname =dueby> ;< / DIV>
< div class =label>< span>描述< / span>< textarea name =descclass =description>< / textarea>< / DIV>
< div>< span>& nbsp;< / span>< input type =submitname =submitvalue =Log Incident/>< DIV>
< / form>
和CSS
@import url（https://fonts.googleapis.com/css?family=Roboto:300）; / *这里我们从谷歌的API中导入一个字体，以便在我们的项目中使用它作为默认字体。 * /
.form_heading {
font-family：Roboto，sans-serif;
margin-bottom：25px;
font-size：25px;
padding-bottom：7px; / *这段CSS代码设计Log Incidents标题* /
}
.dash_style {
position：relative;
top：55px;
left：200px;
}
.dash_style div {
display：block;
margin：0px 0px 15px 0px; / *这段CSS代码决定所有框和它们的标签之间的间距。 * /
}
.dash_style div>跨度{
width：100px;
font-weight：bold;
float：left;
padding-top：;
padding-right：5px;
font-family：Roboto，sans-serif; / *这段CSS代码设计了标签，并决定这些盒子的距离是多远* /
}
.dash_style input.datefield {
width： 10％; / *这段CSS代码只是改变了数据字段框的宽度。 * /
}
.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;
概述：无; / *这段CSS代码通过他们的specidied类来选择不同的盒子，并给它们一个新的外观。 * /
}
.dash_style .description {
height：60px;
width：20％; / *这里我们决定事件描述文本区域的宽度和高度是多少* /
}
.dash_style input [type = submit]，
.dash_style input [type = button] {
border：none;
padding：8px 15px 8px 15px;
width：150px;
背景：＃336699;
颜色：#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; / *这块CSS代码设计Log Incident按钮* /
}
.dash_style input [type = submit]：hover，
.dash_style input [type = button]：hover {
背景：＃EA7B00;
颜色：#fff; / *此处创建Log Incident按钮的背景色和悬停效果* /
}
<您可以通过右键单击所需的元素并从 inspect element 从上下文菜单。
这会弹出Developer Tool应用程序，现在内置于Chrome，Firefox和Opera中（每个程序略有不同，例如，我更喜欢Chrome的开发工具）。
您将在元素选项卡上以及样式窗格。请注意，您可以通过实时添加/禁用CSS 进行试验！非常有用的工具。
阅读这篇文章，了解如何使用它，或者搜索YouTube视频：
https：//开发者。 chrome.com/devtools
您会注意到它在下面的Stack Code Snippet中正常工作。或许你网页上的其他内容会产生干扰 - 你很可能在z-index的正确轨道上。
@import url（https://fonts.googleapis.com/css?family=Roboto:300）; / *这里我们从谷歌的API中导入一个字体，以便在我们的项目中使用它作为默认字体。 * /。form_heading {font-family：Roboto，sans-serif; margin-bottom：25px; font-size：25px; padding-bottom：7px; / *这段CSS代码设计日志事件标题* /} dash_style {position：relative;顶部：55px; left：200px;}。dash_style div {display：block; margin：0px 0px 15px 0px; / *这段CSS代码决定所有框和它们的标签之间的间距。 * /}。dash_style div> span {width：100px; font-weight：bold;向左飘浮; padding-top：; padding-right：5px; font-family：Roboto，sans-serif; / *这块CSS代码设计了标签，并决定这些框将会离开多远* /}。 / *这段CSS代码只是改变了数据字段框的宽度。 * /}。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;填充：7px;概要：无; / *这段CSS代码通过他们的specidied类来选择不同的盒子，并给它们一个新的外观。 * /}。dash_style .description {height：60px;宽度：20％; / *这里我们决定事件描述文本区域的宽度和高度是多少* /}。 padding：8px 15px 8px 15px;宽度：150px;背景：＃336699;颜色：#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; / *这段CSS代码设计了Log Incident按钮* /} dash_style input [type = submit]：hover，.dash_style input [type = button]：hover {background：＃EA7B00;颜色：#fff; / *在这里创建Log Incident按钮的背景颜色和悬停效果* /}
< form action =dashboard.phpmethod =post> < div class =label>< span> Date< / div>< input type ='date'class =datefieldname ='date'/>< / div> < div class =label>< span> Department< / span>< input type =textclass =departmentname =deptvalue =/>< / div> < div class =label>< span>严重程度< / span> < select name ='seve'class =selectfield1> < option value =priority>选择< / option> < option value =urgent>紧急< / option> < option value =high>高< / option> < option value =medium>中< / option> < option value =low>低< / option> < /选择> < / DIV> < div class =label>< span>状态< / span> < select name ='stat'class =selectfield2> < option value =status>选择< / option> < option value =progress>进行中< / option> < option value =assigned>已分配< / option> < option value =completed>已完成< / option> < option value =延迟>延迟< / option> < /选择> < / DIV> < div class =label>< span>指定给< / span>< input type =textclass =assignedtoname =assivalue =/>< / div> ; < div class =label>< span> Due By< / span>< input type =datetime-localclass =duebyname =dueby>< / div> < div class =label>< span>描述< / span>< textarea name =descclass =description>< / textarea>< / div> < div>< span>& nbsp;< / span>< input type =submitname =submitvalue =Log Incident/>< / div>< / form> / code>
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> </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 */
}
解决方案
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> </span><input type="submit" name="submit" value="Log Incident" /></div>
</form>
这篇关于HTML表单被封锁，无法输入任何文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
