How to create a structured looking form with text beside the input-fields, without using tables.
Here’s how to do it with CSS:
Example 1:
In this example, I’m going to simply create a standard form with no CSS:
HTML:
<body>
<form>
First name:
<input type=”text” name=”firstname”><br>
Last name:
<input type=”text” name=”lastname”>
</form>
</body>
It displays like this:
As you can see, the colons and the text fields are not aligned.
Now we’ll use some CSS to get it to look the way I want.
Example 2:
First, I create a class for the text. I’ll call it “fieldname” so I can easily remember it and it’s pretty self-evident what it’s purpose is.
Here’s the new code:
HTML:
<body>
<form>
<div class=”fieldname“>First name:</div>
<input name=”firstname” type=”text”>
<br>
<div class=”fieldname“>Last name:</div>
<input name=”lastname” type=”text”>
</form>
</body>
Now we use CSS to style the fieldname class. We float the text (fieldname) to the left, and align the text on the right, so the colons are aligned one above the other. Then let’s give it a decent width so all the text characters fit on one line, and we’ll add some margin between the text and the input-field, to make everything more visually appealing.
CSS:
.fieldname {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
Here’s what it looks like now:
Much more attractive! And all without using tables!
Questions?
Other articles you might like
-How your personal brand makes the difference
-Using images: Tips to improve your SEO rankings
-Use a customer thank-you page to avoid missed opportunities
About the author
I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.
I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.
I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.
I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.
‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.
Visit Image and Aspect to learn more about your web presence options
Diane M. Metcalf, M.S.
