Question

我正在设计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>

Answer 1

对于占位符，use placeholders，如：

<input type="text" placeholder="Your name" name="name">

这被认为是糟糕的设计实践，因为你使表单的可用性取决于那里是否有数据 - 如果有人在其中放入垃圾，他们无法找出该字段最初的用途，从用户体验的角度来看，这是一个坏主意（tm）。此外，占位符在IE＆lt; = 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 = '';
}

Answer 2

使用'placeholder'属性可以解决这两个问题中的第一个问题。使用它代替'value'：

<input type="text" name="telephone" placeholder="Telefon*" required size="43px" class="text" />

我不明白第二个问题是什么。

Answer 3

要在单击框中时文本实际上消失，并在单击时重新显示，请使用以下命令：

<input type="text" name="telephone" placeholder="Telefon*" onfocus="this.placeholder = ''" onblur="this.placeholder='Telefon*'" required size="43px" class="text" />

就第二个问题而言，我也很困惑。

在这里摆弄：http://jsfiddle.net/J6kHa/

Answer 4

对于右下角的放置表单，请将此样式用于表单包装器

#formwrapper {
width: 340px;
border: 0;
background-color: #dce37f;
position: absolute;
bottom: 0;
right: 0;
}

HTML表单字段和边距显示

4 个答案: