HTML Form Layouts
w3hello.com logo
HTML Basics
What is HTML
Introduction to HTML
HTML Introduction, What is HTML
What is XHTML
What is Attributes in HTML
HTML Formatting
Bold and Italics in HTML
HTML Heading
HTML Elements
HTML Standard Fonts
XHTML vs HTML
HTML DOCTYPE
HTML Forms
HTML Head
HTML Comments
HTML Form
HTML Table
HTML Input Types
HTML Image Links
HTML Text Links
HTML Colors
HTML Title
HTML Paragraphs
HTML Frames
HTML Anchor
DOCTYPE html
HTML Charset
HTML URL Encoding
HTML Backgrounds
HTML Image
HTML Text Formatting
HTML Tables
HTML Basic
HTML Color Names
HTML Input Attributes
HTML Meta
HTML Paragraph
HTML Images
Why use XHTML
HTML global attribute spellcheck
Styling the HTML5 Tags
HTML Computer Code Elements
HTML Layout
HTML Entities
HTML Headings
HTML Symbols
XHTML Tips and Tricks
HTML Form Layouts
HTML Table Vs Div Based Layouts
HTML Drag and Drop
HTML Unordered List | HTML Bulleted List
Discuss XHTML
HTTP Status Codes - List of Standard Server Response Codes
HTML global attribute dir
HTML Attributes
HTML Form Elements
HTML Iframes
500+ HTML Color Names
HTML SVG
HTML tables - cell alignment, colours, images
HTML Lists
HTML YouTube Videos
How to create a basic html template
HTML Google Maps
HTML Quick Guide
XHTML Quick Guide
Spinners and Sliders in HTML 5
HTML Blocks
HTML Layouts
MIME Media Types
HTML Reference: Special Characters
HTML Exercises
HTML global attribute lang
Getting Started with Tags in HTML and HTML5
HTML Block and Inline Elements
XHTML Introduction
Working with HTML Head Elements
XHTML Useful Resources
Adding captions to images in HTML
HTML 5 Video and Audio
Execute HTML Online
HTML Overview
HTML Video
XHTML Doctypes
HTML 5 Form Elements
учебное руководств HTML
HTML5 Tables
HTML Multimedia
HTML Audio
HTML global attribute data-*
A simple one column layout with HTML5
HTML global attribute contenteditable
HTML global attribute accesskey
HTML Email Links
HTML Ordered, Unordered, and Definition Lists
HTML Style Sheet
HTML Styles
XHTML Summary
HTML global attribute draggable
HTML Character Encodings
HTML Basics
Previous : XHTML Tips and Tricks Next : HTML Table Vs Div Based Layouts

HTML Form Layouts


Laying out your HTML Forms

Aligning form elements can be very tricky. You might think CSS would make life easier, but it doesn't. You can use the CSS position property with the values static, relative, absolute, and fixed. But even then, after long hours of frustration, you'd find that not all browsers render your form correctly.

To position form elements, then, a Table is often used. Take a look at the web page we've created called form_layout.html. This is in the extra_files/layouts folder that came with this book. (If you haven't got the extra files yet, the download location is here, under the heading Web Design - New Course : Download the Extra Files needed for this course (You don't need the downloads for the old course.)

When you open up the above page, you'll see a form that looks like this:

An example of a HTML form layout

The form elements are nicely lined up on the left, and the right (except for the last name text box).

Open up the HTML code for the page and you'll see this:

The HTML for a form layout

The TABLE tags are the ones to concentrate on. We've used COLSPAN a lot, here, to get the layout we wanted. We've also added CSS style with class name like "R1C1". (This just means Row 1, Column1.)

Essentially, though, we had a table that had 4 columns and 5 rows. To get the Email row we have two TD tags inside a pair of TR tags. The first TD is just the text "EMAIL", with some styling applied. The second one uses COLSPAN=3. If we didn't do this then the email text box would be squashed into the second cell of the second row. So we "SPAN" this cell across 3 columns. The rest of the table uses the same COLSPAN manipulation.

The Stylesheet for the HTML is called form_layout_1.css. Take a look at the CSS code and see if you can figure out what's going on (it's in the extra_files/css folder. It might help to make a copy of this file, and the experiment with it by changing the values to see what happens.

For some more ideas and help with your form design, these pages are worth a look:

http://designshack.co.uk/articles/10-css-form

Previous : XHTML Tips and Tricks Next : HTML Table Vs Div Based Layouts
© Copyright 2018 W3Hello Publishing Limited. All rights reserved.
Contact us | Sitemap