Php 我有一个联系人表单,它的css样式适合它赢得的移动设备';不要让我输入数据
所以我可以用桌面尺寸填写表格,但当我用手机尺寸(640、480和320)填写表格时,它不允许我这样做。我通过尝试发现了一些东西,恰好我的光标在我的Php 我有一个联系人表单,它的css样式适合它赢得的移动设备';不要让我输入数据,php,html,css,forms,Php,Html,Css,Forms,所以我可以用桌面尺寸填写表格,但当我用手机尺寸(640、480和320)填写表格时,它不允许我这样做。我通过尝试发现了一些东西,恰好我的光标在我的contactformdiv之外,它里面有表单。然后,它允许我输入除消息框之外的所有内容,除非我使用tab并且仍然在div之外。我觉得奇怪吗 页面底部是表单的位置,供您测试640、480和320的移动布局 这是联系方式 <form id="form1" action="<?php echo $_SERVER['PHP_SELF']; ?&
contactform
div之外,它里面有表单。然后,它允许我输入除消息框之外的所有内容,除非我使用tab并且仍然在div之外。我觉得奇怪吗
页面底部是表单的位置,供您测试640、480和320的移动布局
这是联系方式
<form id="form1" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<fieldset>
<p class="form">
<label for="name">Name</label>
<input type="text" name="name" id="name" size="30" />
</p>
<p class="form">
<label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</p>
<p class="form">
<label for="web">Website</label>
<input type="text" name="web" id="web" size="30" />
</p>
</fieldset>
<fieldset>
<p class="form">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</p>
</fieldset>
<p class="submit"><button name="submit" type="submit">Send</button></p>
</form>
你有没有试过调整你的浏览器大小,在PC上查看你的网站(我用的是FF),它会有各种各样的问题。Firebug还表示,您有15个错误和10个警告,在返回移动设备之前,可能值得先尝试修复这些错误和警告
这里有一个关于这些问题的简短视频:是的,我知道是这样,但你有谷歌浏览器或internet explorer吗?因为它在任何其他浏览器上都不会做那些疯狂的事情,而且这些错误都很小,没什么大不了的。它在chrome、Safari或我的移动设备上都不会做这些事情,所以我不知道它为什么要这样做。但是,我最初的问题是,由于我无法在移动设备上控制光标,所以必须将光标放在
contactform
div之外。我添加了一个视频来显示这些问题,以及为什么它可能会导致其他重叠问题等。如果您在桌面布局上查看我的网站,并将鼠标放在除我的鼠标外的任何框上bio(最上面的一个)你会注意到悬停时有一个小方框阴影。在我的移动风格中,我用display:none
关闭了它,我的表单不起作用,但当我在css中注释display:none
时,我的联系人表单起作用了。但我不想在手机上显示悬停,因为你没有真正的悬停
@media screen and (max-width:480px){
@media screen and (max-width:320px){
#form1{
padding-top:5px;
}
#form1 fieldset{
margin:0;
padding:0;
border:none;
float:left;
display:inline;
width:190px;
margin-left:15px;
}
#form1 legend{display:none;}
#form1 p{margin:.5em 0;}
#form1 label{display:block;}
#form1 input, #form1 textarea{
width:175px;
border:1px solid #B7B7B7;
background:#fff;
padding:3px;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
}
#form1 textarea{
height:120px;
width:175px;
overflow:auto;
}
#form1 p.submit{
clear:both;
padding:0 25px 5px 25px;
margin:0;
text-align:right;
}
#form1 button{
font-family:Trebuchet MS;
font-size:14px;
width:105px;
height:35px;
border:none;
background-color:#484749;
color:#fff;
border-radius:4px;
cursor:pointer;
text-align:center;
}