Create Form

Hello,

I am creating a few forms for two web sites.
The forms will have a header which I would like to style with CSS.

My idea is to create the form as follows:

<div id = "form">
<h1>My Form</h1>
<ol>
<li>
<label for="name">Name<em>*</em></label>
<input id="name" />
</li>
<li>
<label for="name">Name<em>*</em></label>
<input id="name" />
</li>
</ol>
</div>

Is this the best way to do this?
The for header is usually some text.
However, sometimes, it also might be some 100% width bar with a
background color and having some text in it or maybe even an image.

Is this the best way to do it?

Could someone please send me sugestions?

Thanks,
Miguel

shapper wrote:

Hello,

I am creating a few forms for two web sites.
The forms will have a header which I would like to style with CSS.

My idea is to create the form as follows:

div id = "form"
h1>My Form</h1
ol
li
label for="name">Name<em>*</em></label
input id="name" /
/li
li
label for="name">Name<em>*</em></label
input id="name" /
/li
/ol
/div

Is this the best way to do this?
The for header is usually some text.
However, sometimes, it also might be some 100% width bar with a
background color and having some text in it or maybe even an image.

Is this the best way to do it?

Could someone please send me sugestions?

Create a sample page with your best shot, then give URL to page. What
you have above makes no sense at all. DIV with an ID of "form" is not a
FORM. Elements on the same page *cannot* have the same ID. So what your
code snippet does is confuse rather than illustrate your question.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On Dec 17, 4:43 pm, "Jonathan N. Little" <lws4... (AT) centralva (DOT) net>
wrote:

shapper wrote:
Hello,

I am creating a few forms for two web sites.
The forms will have a header which I would like to style with CSS.

My idea is to create the form as follows:

div id = "form"
h1>My Form</h1
ol
li
label for="name">Name<em>*</em></label
input id="name" /
/li
li
label for="name">Name<em>*</em></label
input id="name" /
/li
/ol
/div

Is this the best way to do this?
The for header is usually some text.
However, sometimes, it also might be some 100% width bar with a
background color and having some text in it or maybe even an image.

Is this the best way to do it?

Could someone please send me sugestions?

Create a sample page with your best shot, then give URL to page. What
you have above makes no sense at all. DIV with an ID of "form" is not a
FORM. Elements on the same page *cannot* have the same ID. So what your
code snippet does is confuse rather than illustrate your question.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

Sorry,

It was late at night when I posted this. Let me try to explain the
best I can.

I am creating a form structure that can be used in most forms I use
(Contact Form, Sign In Form, CMS, etc)

The structure I am using is described by the following example:

<div id="MyFormExample"
<h1>My Form Title</h1>
<fieldset>
<legend>Your Details</legend>
<ol>
<li>
<label for="name">Name</label>
<input id="name" />
</li>
<li>
<label for="address">Address</label>
<input id="address1" />
</li>
<li>
<label for="city">City</label>
<input id="city" />
</li>
</ol>
</fieldset>
<fieldset>
<!--Something more here -->
</fieldset>
</div>

In this moment I don't have the CSS because I am having one problem
with the tag structure.
Imagine that the form header should have a text, an image or even
something else.

Is the following a good approach?:

<div id="MyFormExample"
<div id="MyFormHeader" class="FormHeader">
<h1>My Form Title</h1>
<img src="angry.gif" alt="Angry" />
<p>Some more text</p>
</div>
<fieldset>
...

By having class = "FormHeader" I can style the Form Header:

div.FormHeader {background-image: url(header.gif);}
div.FormHeader h1 {color: grey}
div.FormHeader p {color: red}

This way I create a section (div) where I add all the tags that
compose the Form Header.
My main problem is if this makes any sense, when having only one tag:
<div id="MyFormExample"
<div id="MyFormHeader" class="FormHeader">
<h1>My Form Title</h1>
</div>
<fieldset>
...

This is where I am having most of my problems to decide.

I think the rest is ok ... at least it seems right after many reading.

I am using ASP.NET and I am creating a library which will include an
implementation of such a form.
This way I can define a few properties using classes and generate
forms at runtime.
I am just in the phase of studding the correct and best way to render
them.

Thanks,
Miguel

shapper wrote:

On Dec 17, 4:43 pm, "Jonathan N. Little" <lws4... (AT) centralva (DOT) net
wrote:
shapper wrote:
Hello,
I am creating a few forms for two web sites.
The forms will have a header which I would like to style with CSS.
My idea is to create the form as follows:
div id = "form"
h1>My Form</h1
ol
li
label for="name">Name<em>*</em></label
input id="name" /
/li
li
label for="name">Name<em>*</em></label
input id="name" /
/li
/ol
/div
Is this the best way to do this?
The for header is usually some text.
However, sometimes, it also might be some 100% width bar with a
background color and having some text in it or maybe even an image.
Is this the best way to do it?
Could someone please send me sugestions?
Create a sample page with your best shot, then give URL to page. What
you have above makes no sense at all. DIV with an ID of "form" is not a
FORM. Elements on the same page *cannot* have the same ID. So what your
code snippet does is confuse rather than illustrate your question.

<snip my signature>

Sorry,

It was late at night when I posted this. Let me try to explain the
best I can.

I am creating a form structure that can be used in most forms I use
(Contact Form, Sign In Form, CMS, etc)

The structure I am using is described by the following example:

div id="MyFormExample"
h1>My Form Title</h1
fieldset
legend>Your Details</legend
ol
li
label for="name">Name</label
input id="name" /
/li
li
label for="address">Address</label
input id="address1" /
/li
li
label for="city">City</label
input id="city" /
/li
/ol
/fieldset
fieldset
!--Something more here --
/fieldset
/div

In this moment I don't have the CSS because I am having one problem
with the tag structure.
Imagine that the form header should have a text, an image or even
something else.

Is the following a good approach?:

div id="MyFormExample"
div id="MyFormHeader" class="FormHeader"
h1>My Form Title</h1
img src="angry.gif" alt="Angry" /
p>Some more text</p
/div
fieldset
...

By having class = "FormHeader" I can style the Form Header:

div.FormHeader {background-image: url(header.gif);}
div.FormHeader h1 {color: grey}
div.FormHeader p {color: red}

This way I create a section (div) where I add all the tags that
compose the Form Header.
My main problem is if this makes any sense, when having only one tag:
div id="MyFormExample"
div id="MyFormHeader" class="FormHeader"
h1>My Form Title</h1
/div
fieldset
...

This is where I am having most of my problems to decide.

I think the rest is ok ... at least it seems right after many reading.

I am using ASP.NET and I am creating a library which will include an
implementation of such a form.
This way I can define a few properties using classes and generate
forms at runtime.
I am just in the phase of studding the correct and best way to render
them.

I will reiterate:
"Create a sample page with your best shot, then give URL to page."

Not sure of all your many IDs and CLASSES. You may not need them just a
couple of basics for container

div.oneType { ...}
div.oneType h2 { color: red; ... }
div.oneType p { ... }

div.anotherType { ...}
div.anotherType h2 { color: blue; ... }
div.anotherType p { ... }

The H2 within DIV "oneType" will be red whereas in "anotherType" they
will be blue. You don't need classes for each of those H2 to make them
different. I think that is what you are asking.



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com