March 21, 2012
css form- input/textarea styling & positioning.. code & image included
Question by AMC
I’m new to web design, so please forgive if this is super simple- I’ve tried everything I know and can’t quite seem to get this right.
I’ve put together a contact form using html & css. Ideally, I’d like to have a 1px line extending from each label to use as an input guide. This line should be level with the bottom of the label. I’d also like a series of lines extending vertically in the text area to allow for extra writing space.
Currently, the input lines for Name and Email aren’t showing, and there is only one line at the very bottom of the textarea for Message.
Here’s the code I’m working with:
<div id="contact-form">
<div id="invite">
<h1>Let's Talk.</h1>
<div class="postinfo">
<h2>Have you got a project needing an eye for detail and a creative touch? I'd love to hear from you.</h2>
</div><!-- end postinfo -->
</div><!-- end invite -->
<form>
<label for="user">Name:</label>
<input type="text" name="user" value="" /><br />
<label for="emailaddress">Email:</label>
<input type="text" name="emailaddress" value="" /><br />
<label for="comments">Message:</label>
<textarea name="comments"></textarea><br />
<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
</form>
</div><!-- end contact -->
#contact-form {
float: left;
margin-left: 300px;
margin-top: 310px;
}
#invite .postinfo {
list-style-type: none;
width: 150px;
}
label {
float: left;
font-family: dalle;
font-size: 160%;
letter-spacing: 2px;
text-transform: uppercase;
margin-left: 200px;
margin-top: -105px;
width: 120px;
}
input, textarea {
border-style: none;
border-bottom: 1px solid #202020;
margin-bottom: 5px;
margin-left: 300px;
margin-top: -105px;
width: 245px;
}
textarea {
width: 250px;
height: 150px;
}
#submitbutton {
background: none;
border-style: none;
font-family: Georgia,
Constantia,
"Lucida Bright",
"Bitstream Vera Serif",
"Liberation Serif",
serif;
margin-left: 173px;
margin-top: 5px;
width: 90px;
}
br {
clear: left;
}
Ideal outcome: