|
-
Oct 12th, 2005, 06:56 AM
#1
Thread Starter
Frenzied Member
 [RESOLVED] CSS Tableless Form
I'm trying to make a feedback form using CSS instead of tables.
It works fine with a label and an input box. i.e. just 2 columns
I come unstuck when I try to add an extra box on the right to make 3 columns. (<DIV ID="help">)
I can't seem to align it correctly or size it correctly.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Test CSS Form</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<STYLE TYPE="text/css">
<!--
#FormInterest label,#FormInterest input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
#FormInterest label {
text-align: left;
width: 200px;
padding-right: 20px;
}
#FormInterest br {
clear: left;
}
#FormInterest form {
border : 1px solid #000;
padding : 5px;
background-color : #ffc;
}
#help{
width: 150px;
float: right;
border : 1px solid #000;
padding : 5px;
background-color : white;
}
-->
</STYLE>
</HEAD>
<BODY>
<P CLASS="smltxt"> > <B>Register your interest</B></P>
<P>Please use the comments box to provide your views or to register an interest in being kept informed of developments.</P>
<DIV ID="FormInterest">
<FORM METHOD="POST" ACTION="/cgi-bin/genform.pl">
<INPUT TYPE="HIDDEN" NAME="form_owner" VALUE="[email protected]">
<INPUT TYPE="hidden" NAME="form_subject" VALUE="Interest Form">
<BR>
<LABEL FOR="name">Name</LABEL>
<INPUT NAME="name" ID="name"><BR>
<LABEL FOR="company">Organisation</LABEL>
<INPUT NAME="company" ID="company"><BR>
<LABEL FOR="email">E-mail / Telephone</LABEL>
<INPUT NAME="email" ID="email"><BR>
<LABEL FOR="interest">Interest Area</LABEL>
<SELECT NAME="interest" SIZE="1" ID="interest">
<OPTION VALUE="Communications">Communications</OPTION>
<OPTION VALUE="Healthcare">Healthcare</OPTION>
<OPTION VALUE="Electronics">Electronics</OPTION>
<OPTION VALUE="Instrumentation">Instrumentation</OPTION>
<OPTION VALUE="Sensing">Sensing</OPTION>
<OPTION VALUE="Process control">Process control</OPTION>
<OPTION VALUE="Defence">Defence</OPTION>
<OPTION VALUE="Security">Security</OPTION>
<OPTION VALUE="Energy">Energy</OPTION>
<OPTION VALUE="Transport">Transport</OPTION>
<OPTION VALUE="Other">Other</OPTION>
</SELECT><BR>
<LABEL FOR="companyinterest">Organisation Interest Area</LABEL>
<SELECT NAME="companyinterest" SIZE="1" ID="companyinterest">
<OPTION VALUE="Communications">Communications</OPTION>
<OPTION VALUE="Healthcare">Healthcare</OPTION>
<OPTION VALUE="Electronics">Electronics</OPTION>
<OPTION VALUE="Instrumentation">Instrumentation</OPTION>
<OPTION VALUE="Sensing">Sensing</OPTION>
<OPTION VALUE="Process control">Process control</OPTION>
<OPTION VALUE="Defence">Defence</OPTION>
<OPTION VALUE="Security">Security</OPTION>
<OPTION VALUE="Energy">Energy</OPTION>
<OPTION VALUE="Transport">Transport</OPTION>
<OPTION VALUE="Other">Other</OPTION>
</SELECT><BR>
<H1>Objectives</H1> <LABEL FOR="outcome">What is the desired outcome? </LABEL> <TEXTAREA NAME="outcome" ROWS="6" COLS="42" ID="outcome"></TEXTAREA>
<DIV ID="help">
In the Objectives box please identify your new requirements and what you would like as the outcome of the work, that is, what might be physically produced or what might be achieved.
</DIV><BR>
<H1>Impact</H1> <LABEL FOR="important">Why is it important?</LABEL> <TEXTAREA NAME="important" ROWS="6" COLS="42" ID="important"></TEXTAREA><BR>
<LABEL FOR="benefit">What is the benefit to UK and who would benefit from this work?</LABEL> <TEXTAREA NAME="benefit" ROWS="6" COLS="42" ID="benefit"></TEXTAREA><BR>
<LABEL FOR="collaborations">Collaboration Options</LABEL>
<SELECT NAME="collaborations" SIZE="1" ID="collaborations">
<OPTION VALUE="Yes">Yes</OPTION>
<OPTION VALUE="No">No</OPTION>
<OPTION VALUE="Maybe">Maybe</OPTION>
<OPTION VALUE="No Comment">No Comment</OPTION>
</SELECT><BR>
<INPUT TYPE="SUBMIT" VALUE="Submit Interest" NAME="Submit1" ID="Submit1">
<INPUT TYPE="RESET" NAME="Reset1" VALUE="Clear Form" ID="Reset1"><BR>
</FORM>
</DIV> </BODY>
</HTML>
Last edited by agmorgan; Oct 12th, 2005 at 07:44 AM.
-
Oct 12th, 2005, 07:54 PM
#2
Hyperactive Member
-
Oct 12th, 2005, 11:58 PM
#3
Frenzied Member
Re: CSS Tableless Form
agmorgan:
Personally I would get rid of the box.
I thnk something like this would look much better:
-----------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Test CSS Form</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<STYLE TYPE="text/css">
<!--
#FormInterest label,#FormInterest input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
#FormInterest label {
text-align: left;
width: 200px;
padding-right: 20px;
}
#FormInterest br {
clear: left;
}
#FormInterest form {
border : 1px solid #000;
padding : 5px;
background-color : #ffc;
}
#help{
width: 150px;
float: right;
border : 1px solid #000;
padding : 5px;
background-color : white;
}
-->
</STYLE>
</HEAD>
<BODY>
<P CLASS="smltxt"><B><H1>Register your interest</H1></B></P>
<P><B>Please use the comment boxes below to provide your views or to register<BR>an
interest in being kept informed of new developments.<B></P>
<DIV ID="FormInterest">
<FORM METHOD="POST" ACTION="/cgi-bin/genform.pl">
<INPUT TYPE="HIDDEN" NAME="form_owner"
VALUE="[email protected]">
<INPUT TYPE="hidden" NAME="form_subject" VALUE="Interest Form">
<BR>
<LABEL FOR="name">Name</LABEL>
<INPUT NAME="name" ID="name"><BR>
<LABEL FOR="company">Organisation</LABEL>
<INPUT NAME="company" ID="company"><BR>
<LABEL FOR="email">E-mail / Telephone</LABEL>
<INPUT NAME="email" ID="email"><BR>
<LABEL FOR="interest">Interest Area</LABEL>
<SELECT NAME="interest" SIZE="1" ID="interest">
<OPTION
VALUE="Communications">Communications</OPTION>
<OPTION VALUE="Healthcare">Healthcare</OPTION>
<OPTION VALUE="Electronics">Electronics</OPTION>
<OPTION VALUE="Instrumentation">Instrumentation</OPTION>
<OPTION VALUE="Sensing">Sensing</OPTION>
<OPTION VALUE="Process control">Process control</OPTION>
<OPTION VALUE="Defence">Defence</OPTION>
<OPTION VALUE="Security">Security</OPTION>
<OPTION VALUE="Energy">Energy</OPTION>
<OPTION VALUE="Transport">Transport</OPTION>
<OPTION VALUE="Other">Other</OPTION>
</SELECT><BR>
<LABEL FOR="companyinterest">Organisation Interest Area</LABEL>
<SELECT NAME="companyinterest" SIZE="1" ID="companyinterest">
<OPTION
VALUE="Communications">Communications</OPTION>
<OPTION VALUE="Healthcare">Healthcare</OPTION>
<OPTION VALUE="Electronics">Electronics</OPTION>
<OPTION VALUE="Instrumentation">Instrumentation</OPTION>
<OPTION VALUE="Sensing">Sensing</OPTION>
<OPTION VALUE="Process control">Process control</OPTION>
<OPTION VALUE="Defence">Defence</OPTION>
<OPTION VALUE="Security">Security</OPTION>
<OPTION VALUE="Energy">Energy</OPTION>
<OPTION VALUE="Transport">Transport</OPTION>
<OPTION VALUE="Other">Other</OPTION>
</SELECT><BR>
<H2>Objectives:</H2> <LABEL FOR="outcome">Please identify your new
requirements and the<BR>desired outcome? (What might be physically<BR> produced or what
might<BR>be achieved.)
</LABEL> <TEXTAREA NAME="outcome" ROWS="6" COLS="42"
ID="outcome"></TEXTAREA><BR><BR>
<H2>Impact:</H2> <LABEL FOR="important">Why is it
important?</LABEL> <TEXTAREA NAME="important" ROWS="6" COLS="42"
ID="important"></TEXTAREA><BR><BR><BR><BR>
<LABEL FOR="benefit">What is the benefit to UK and who would benefit
from this work?</LABEL> <TEXTAREA NAME="benefit" ROWS="6" COLS="42"
ID="benefit"></TEXTAREA><BR><BR><BR>
<LABEL FOR="collaborations">Collaboration Options</LABEL>
<SELECT NAME="collaborations" SIZE="1" ID="collaborations">
<OPTION VALUE="Yes">Yes</OPTION>
<OPTION VALUE="No">No</OPTION>
<OPTION VALUE="Maybe">Maybe</OPTION>
<OPTION VALUE="No Comment">No Comment</OPTION>
</SELECT><BR><BR><BR>
<INPUT TYPE="SUBMIT" VALUE="Submit Interest" NAME="Submit1"
ID="Submit1">
<INPUT TYPE="RESET" NAME="Reset1" VALUE="Clear Form"
ID="Reset1"><BR><BR><BR>
</FORM>
</DIV> </BODY>
</HTML>
-----------------------------------------------------------
I think I would also center my "Submit" and "Clear" buttons?
It is your form, so you are free to have it as you wish.
-
Oct 13th, 2005, 10:51 AM
#4
Thread Starter
Frenzied Member
Re: CSS Tableless Form
Yeah I need to think about classes or something to align the Submit/Clear Buttons.
I reckon you are right about getting rid of the box on the right too.
I'm thinking about brackets or highlighting it under the input box in a separate box.
Thanks for the input
-
Oct 14th, 2005, 08:16 AM
#5
Thread Starter
Frenzied Member
Re: CSS Tableless Form
OK. I have changed the boxes slightly, but I can't seem to align the Submit/Clear button in the centre.
I think the fact that it is in the float div is preventing it.
Any ideas?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Test CSS Form</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<STYLE TYPE="text/css">
<!--
#FormInterest label,#FormInterest input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
#FormInterest label {
text-align: left;
width: 200px;
padding-right: 20px;
}
#FormInterest br {
clear: left;
}
#FormInterest form {
border : 1px solid #000;
padding : 5px;
background-color : #ffc;
}
p.help{
border : 1px solid #000;
padding : 5px;
background-color : white;
}
-->
</STYLE>
</HEAD>
<BODY>
<H1>Register your interest</H1>
<P><B>Please use the comment boxes below to provide your views or to register<BR>
an interest in being kept informed of new developments.<B></B></B></P>
<DIV ID="FormInterest">
<FORM METHOD="POST" ACTION="/cgi-bin/genform.pl">
<INPUT TYPE="HIDDEN" NAME="form_owner" VALUE="[email protected]">
<INPUT TYPE="hidden" NAME="form_subject" VALUE="Interest Form"> <BR>
<BR>
<LABEL FOR="name">Name</LABEL>
<INPUT NAME="name" ID="name"><BR>
<LABEL FOR="company">Organisation</LABEL>
<INPUT NAME="company" ID="company"><BR>
<LABEL FOR="email">E-mail / Telephone</LABEL>
<INPUT NAME="email" ID="email"><BR>
<LABEL FOR="interest">Interest Area</LABEL>
<SELECT NAME="interest" SIZE="1" ID="interest">
<OPTION VALUE="Communications">Communications</OPTION>
<OPTION VALUE="Healthcare">Healthcare</OPTION>
<OPTION VALUE="Electronics">Electronics</OPTION>
<OPTION VALUE="Instrumentation">Instrumentation</OPTION>
<OPTION VALUE="Sensing">Sensing</OPTION>
<OPTION VALUE="Process control">Process control</OPTION>
<OPTION VALUE="Defence">Defence</OPTION>
<OPTION VALUE="Security">Security</OPTION>
<OPTION VALUE="Energy">Energy</OPTION>
<OPTION VALUE="Transport">Transport</OPTION>
<OPTION VALUE="Other">Other</OPTION>
</SELECT><BR>
<LABEL FOR="companyinterest">Organisation Interest Area</LABEL>
<SELECT NAME="companyinterest" SIZE="1" ID="companyinterest">
<OPTION VALUE="Communications">Communications</OPTION>
<OPTION VALUE="Healthcare">Healthcare</OPTION>
<OPTION VALUE="Electronics">Electronics</OPTION>
<OPTION VALUE="Instrumentation">Instrumentation</OPTION>
<OPTION VALUE="Sensing">Sensing</OPTION>
<OPTION VALUE="Process control">Process control</OPTION>
<OPTION VALUE="Defence">Defence</OPTION>
<OPTION VALUE="Security">Security</OPTION>
<OPTION VALUE="Energy">Energy</OPTION>
<OPTION VALUE="Transport">Transport</OPTION>
<OPTION VALUE="Other">Other</OPTION>
</SELECT><BR>
<H1>Objectives</H1> <LABEL FOR="outcome">What is the desired outcome? </LABEL> <TEXTAREA NAME="outcome" ROWS="6" COLS="42" ID="outcome"></TEXTAREA>
<P CLASS="help">What might be physically be produced or what might be achieved. </P><BR>
<H1>Impact</H1> <LABEL FOR="important">Why is it important?</LABEL> <TEXTAREA NAME="important" ROWS="6" COLS="42" ID="important"></TEXTAREA>
<P CLASS="help">Use the first Impact box to say why the work you propose is important. </P><BR>
<LABEL FOR="benefit">What is the benefit to UK and who would benefit from this work?</LABEL> <TEXTAREA NAME="benefit" ROWS="6" COLS="42" ID="benefit"></TEXTAREA>
<P CLASS="help">Use the second Impact box to list the benefits of your proposal, such as quality of life benefits. Also state how the benefit will be realised and by whom. </P><BR>
<LABEL FOR="collaborations">Collaboration Options</LABEL>
<SELECT NAME="collaborations" SIZE="1" ID="collaborations">
<OPTION VALUE="Yes">Yes</OPTION>
<OPTION VALUE="No">No</OPTION>
<OPTION VALUE="Maybe">Maybe</OPTION>
<OPTION VALUE="No Comment">No Comment</OPTION>
</SELECT>
<P CLASS="help">Please identify whether you and your organisation would be willing to collaborate with us. </P><BR>
<INPUT TYPE="SUBMIT" VALUE="Submit Interest" NAME="Submit1" ID="Submit1">
<INPUT TYPE="RESET" NAME="Reset1" VALUE="Clear Form" ID="Reset1"><BR>
</FORM>
</DIV> </BODY>
</HTML>
-
Oct 26th, 2005, 11:43 AM
#6
Thread Starter
Frenzied Member
Re: CSS Tableless Form
OK I've trimmed it down a bit.
Can anyone work out how to align the submit buttons to the center?
And for some reason in IE6 they overflow the form border 
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Interest</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<STYLE TYPE="text/css">
<!--
#Interest label,#Interest input {
display: block;
width: 200px;
float: left;
margin-bottom: 10px;
}
#Interest label {
text-align: left;
width: 150px;
padding-right: 20px;
font-weight: bold;
}
#Interest br {
clear: left;
}
#Interest form {
border : 1px solid #000;
padding : 5px;
}
-->
</STYLE>
</HEAD>
<BODY>
<DIV ID="Interest">
<FORM METHOD="POST" ACTION="/cgi-bin/form.pl">
<INPUT TYPE="HIDDEN" NAME="form_owner" VALUE="[email protected]"> <BR>
<LABEL FOR="name">Name</LABEL>
<INPUT NAME="name" ID="name"><BR>
<LABEL FOR="company">Organisation</LABEL>
<INPUT NAME="company" ID="company"><BR>
<LABEL FOR="email">E-mail address </LABEL>
<INPUT NAME="email" ID="email"><BR>
<LABEL FOR="phone">Telephone no. </LABEL>
<INPUT NAME="phone" ID="phone"><BR>
<LABEL FOR="outcome">Comment(s) </LABEL> <TEXTAREA NAME="outcome" ROWS="10" COLS="60" ID="outcome"></TEXTAREA> <BR>
<INPUT TYPE="SUBMIT" VALUE="Submit Interest" NAME="Submit1" ID="Submit1">
<INPUT TYPE="RESET" NAME="Reset1" VALUE="Clear Form" ID="Reset1"><BR>
</FORM>
</DIV>
</BODY>
</HTML>
-
Oct 31st, 2005, 11:08 AM
#7
Thread Starter
Frenzied Member
Re: CSS Tableless Form
Well it probably isn't the correct way to do it, but it worked.
I added a blank label before the submit button and it aligned fine!
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote