I'd like to have an input box in the middle of a paragraph, with the label in smaller text underneath it. Kind of like:
Hello [________________], This is to inform you
(Customer Name)
that the [____________] you ordered is no longer
(Item Name)
available.
I thought it would be pretty easy to do, but my brain doesn't appear to be working today. Is it possible to do this with just CSS, and in a simple enough manner that it can be adapted to different forms easily?
Nothing spectacularly simple comes to my mind.
My alternative would be to set the default input values to "Customer Name" and "Item Name" respectively. With a dash of JavaScript, you can automatically clear the input when the user gives it focus. An extra sprinkle will refill the input with "Customer Name" and "Item Name" if the input is left empty when the user blurs it.
Warning: I have little idea about JavaScript and its cross-browser compatibility issues. For example, I think getElementsByClassName is not implemented in some versions of IE. Take this code as an example of what I mean rather than production code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Inline form</title>
<script type="text/javascript">
var valueHints = []
window.onload = function() {
var inputs = document.getElementsByClassName("value-hint");
for (var i = 0; i < inputs.length; ++i) {
valueHints[inputs[i].id] = inputs[i].value;
inputs[i].onfocus = function() {
if (valueHints[this.id] == this.value) {
this.value = "";
}
}
inputs[i].onblur = function() {
if (this.value == "") {
this.value = valueHints[this.id];
}
}
}
}
</script>
<style type="text/css">
.value-hint {
color:#999999;
}
</style>
</head>
<body>
<p>Hello <input class="value-hint" id="customer" type="text" value="Customer Name"></span>, This is to inform you that the <input class="value-hint" id="item" type="text" value="Item Name"> you ordered is no longer available.</p>
</body>
</html>
This is what i did, it is not perfect but show you a way to go.
<html>
<head>
<style>
.input {
position: relative;
display: inline-block;
height: 1.8em;
}
.input label {
display: block;
font-size: 60%;
font-weight: bold;
position: absolute;
text-align: center;
width: 100%;
}
input {
border: none;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<form action="" method="post">
Hello
<div class="input">
<input type="text" name="customer" id="customer" />
<label for="customer">(Customer name)</label>
</div>,
this is to inform you that the
<div class="input">
<input type="text" name="item" id="item" />
<label for="item">(Item name)</label>
</div>,
you order is no longer available.
</form>
</body>
</html>