我正在设计 HTML 表单，但我面临两个问题。 第一个问题是，当我在文本字段内单击时，值文本不会消失。
第二个是我想把表格显示在屏幕的左下角，就像你坐在电脑前，把鼠标拖到屏幕的左下角(用右手). The link for the form is given
表单代码:
<!DOCTYPE HTML>
<html>
<head>
<title>Facebook Add PHP Example</title>
<style type="text/css">
#formwrapper{
width:340px;
border:0;
background-color:#dce37f;
margin: 70px auto;
padding: 20px 0;
display:block;
}
#headdiv{
width:340px;
border:0;
margin: 10px 10px 10px 18.5px;
}
form {
display:block;
width:340px;
margin: 0 auto;
}
.text{
width: 275px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 18.5px;
}
.text:focus{
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
.fname{
display: inline;
width: 116px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 18.5px;
}
.fname:focus{
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
.lname{
display: inline;
width: 116px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 1px;
}
.lname:focus{
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
.gatadress{
display: inline;
width: 116px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 18.5px;
}
.gatadress:focus{
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
.postnr{
display: inline;
width: 116px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 1px;
}
.postnr:focus{
outline: none;
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
#Jag{
display: inline;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 22px;
}
.label{
padding:0px;
margin: 10px 10px 10px 0px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="formwrapper">
<div id="headdiv">
<img src="original_hembakat_besta_ll.png" />
</div>
<form id="demo-form" parsley-validate>
<input type="email" name="email" value= "E-Post*" parsley-trigger="change" required class="text" /><br/>
<input type="text" name="firstname" value= "Fornamn*" required size="18px" class="fname" />
<input type="text" name="lastname" value= "Efternamn*" required size="18px" class="lname" /><br/>
<input type="text" name="telephone" value= "Telefon*" required size="43px" class="text" /><br/>
<input type="text" name="gatuadress" value= "Gatuadress*" required size="43px" class="gatadress"/>
<input type="text" name="postnr" value= "Postnr*" required size="43px" class="postnr"/><br/>
<input type="text" name="postort" value= "Postort*" required size="43px" class="text" /><br/>
<input type="checkbox" id="Jag" value = "Jag godkänner villkoren" />
<label for = "jaggod" class="label">Jag godkanner <a href="https://a.pgtb.me/facebook/app/139383/renderi/#">villkoren</a></label><br/>
<input type="submit" value="Send" />
</form>
</div>
</body>
</html>
最佳答案
对于占位符，use placeholders ，比如:
<input type="text" placeholder="Your name" name="name">
虽然这被认为是糟糕的设计实践，因为您使表单的可用性取决于其中是否有数据 - 如果有人在其中放入垃圾，他们将无法找出该字段最初的用途，从用户体验的 Angular 来看，这是一个坏主意。此外，占位符在 IE<=9 中不起作用。
您可以使用 some simple Javascript 模拟一个简单的占位符，比如:
<input type="text" value="placeholder" onfocus="undoPlaceholder(this)">
和 JS:
function undoPlaceholder(e)
{
if(e.undone) return;
e.undone = true;
e.value = '';
}
关于HTML 表单字段和边距显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20893457/