Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ryan B.
3,236 PointsWhat is the best approach for styling a <form>?
I don't have a lot of experience let alone much experience with forms. My profile site has a lot of work and styling that needs to be done. My form which can be found in the footer is very elementary in style. Any suggestions how I can make this look more professional?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="biopage.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="BioPage.js"></script>
<title>Bio-Resume</title>
</head>
<body>
<div>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Meet-Ups</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div>
<header class="first">
<img src="IMG_0659.jpg" class="img-profile">
<h2 class="contactinfo">Ryan J. Bilello</h2>
<h3 class="contactinfo">Programmer</h3>
<h4 class="contactinfo">Tampa, Fl.</h4>
</header>
</div>
<div>
<h1 id="myBackground">About</h1>
<p id="twoPara">
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"<br><br>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC<br><br>
</p><br><br>
</div>
<div>
<h1 id="Achievements">Personal Development</h1>
<p class="logoPara">Click on logo for more information.</p><br><br>
<div id="group1">
<h3>TreeHouse</h3>
<a href="https://teamtreehouse.com/ryanbilello" ><img src="treehouse%202.png" class="logo"></a><br><br>
<h3>Bootstrap Project</h3>
<a href="#"><img src="bootstrap%20.jpeg" class="logo"></a><br><br>
</div>
<div id="group2">
<h3>Codeschool </h3>
<a href="https://www.codeschool.com/account/prizes"><img src="codeschool2.png" class="logo"></a><br><br>
<h3>Code Academy </h3>
<a href="https://www.codecademy.com/users/NoleCode/achievements"><img src="codeacademyFinal.png" class="logo"></a><br><br>
</div>
</div>
<footer class="final">
<div >
<fieldset>
<form action="demo_form.asp" class="form"><br>
First: <input type="text" name="FirstName" ><br>
Last: <input type="text" name="LastName" ><br><br>
Email: <input type="text" name="Email"><br><br>
Subject:<input type="text"><br><br>
Ask:<br><textarea id="comment" name="user_comment"></textarea><br><br>
<input type="submit" value="Submit">
</form>
</fieldset>
</div>
<ul>
<li><a href="http://www.facebook.com"><img src="facebook.png" class="socialBottom"></a></li>
<li><a href="http://www.twitter.com"><img src="twitter-logo-2012-new.png" class="socialBottom"></a></li>
<li><a href="http://www.linkedin.com"><img src="LinkedIn-Logo.png" class="socialBottom"></a></li>
<p class="copyright">© 2015 RyanBilello.com<p>
</ul>
</footer>
</body>
</html>
.logo{
width: 250px;
height: 250px;
margin: 0 auto;
display: inline;
}
.first{
border-bottom: solid thin;
background-image: url(chicago.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.img-profile{
display: block;
width: 18%;
height: 18%;
border-radius: 25px;
margin: auto;
padding-top: 75px;
}
.contactinfo{
text-align: center;
line-height: 10px;
color: white;
}
.logoPara{
text-align: center;
font-style: italic;
font-size: 20px;
}
.nav {
font-size: 30px;
text-align: center;
margin-bottom: 25px;
}
.final{
clear: both;
border-top: solid thin;
text-align: center;
}
.socialBottom{
display: inline;
width: 50px;
height: 50px;
padding: 25px;
margin-top: 20px;
text-align: center;
}
.form{
margin:25px;
padding:25px;
}
.copyright{
text-align: center;
font-size: 15px;
}
#myBackground{
text-align: center;
}
#twoPara{
display: inline-block;
margin-left: 25%;
margin-right: 25%;
font-size: 20px;
}
#Achievements{
text-align: center;
}
/* #logo, group1 & group2 are affecting one another. Try and figure out why.*/
#group1{
float: right;
padding-top:5%;
padding-right:25%;
}
#group2{
float: left;
padding-top:5%;
padding-left: 25%;
}
h3{
text-align: center;
}
/* The li a and a:hover control nav*/
li {
display:inline;
padding: 35px;
}
a {
text-decoration: none;
font-size: 35px;
color:black;
}
a:hover{
color: coral;
}
2 Answers
Sam Baines
4,315 PointsHey Ryan - I've taken some time to practice myself at styling forms and took your code and put it into this CodePen. Have a little look over it and maybe it will help you with styling your own form (I changed your html a bit to make it easier to read imo).
The approach I took was to use a tool like CodePen which live updates and allows you iterate constantly - I then looked through this page on the MDN and took the general styling css elements from this. I also used this as a guide with the inspect element developer tool in my browser.
This is a basic approach and one that works I think - the next step is to look around the web for forms you like and work out how they styled them like it. Hope this helps.
Justin Kraft
26,327 PointsOne additional thing you could use is the html label tag for each input text. This helps contain the text for each field.
To obtain a more professional look, you may want to view other forms on well know websites then draw a simple wireframe. Once this is complete its left to writing the CSS.
These are very simple, straightforward pieces of advice. The real outcome isllis achieved through trial and tribulation.
Ryan B.
3,236 PointsRyan B.
3,236 PointsWow! Thanks for taking the time to help, it looks great. I never used codepen but I hear a lot of good things about it. Im going to take some time and go through line by line. I will let you know how it works out. Thanks again Sam!