9 Replies - 863 Views - Last Post: 07 August 2009 - 08:44 AM

#1 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

Modifying Forms in CSS

Post icon  Posted 06 August 2009 - 10:42 AM

Is it possible to modify this generated code and create a stylesheet out of it. I've never done a form before and figured it might be quicker to modify an existy one but I've never used a stylesheet to markup a form is it possible for someone to give me a brief of example on modifying say 2 elements within this form just so I can see how it's done I've searched through several tutorials and most have them on a form built with divs this is clearly built with tables.

<form enctype="multipart/form-data" method="post" action="http://www.freedback.com/mail.php" accept-charset="UTF-8">
	<div>
		<input type="hidden" name="acctid" id="acctid" value="ufkow3grhh9iehjg" />
		<input type="hidden" name="formid" id="formid" value="644189" />
		<input type="hidden" name="required_vars" id="required_vars" value="name,field-0e94be58776f9bc,field-4244c215497fee5,field-d5197b42d49b81c,field-519f5dff31b7371,email,field-cddb5b2d039285e,field-8eb368ace59a8b8,field-2ea35ff9381a625,field-8117a9b16afb40e" />
	</div>
	<table cellspacing="5" cellpadding="5" border="0">
		<tr>
			<td valign="top">
				<strong>Name:</strong>
			</td>
			<td valign="top">
				<input type="text" name="name" id="name" size="40" value="" />
				
			</td>
		</tr>
		<tr>
			<td valign="top">
				<strong>Phone</strong>
			</td>
			<td valign="top">
				<input type="text" name="field-0e94be58776f9bc" id="field-0e94be58776f9bc" size="40" value="" />
				
			</td>
		</tr>
		<tr>
			<td valign="top">
				<strong>Address</strong>
			</td>
			<td valign="top">
				<input type="text" name="field-4244c215497fee5" id="field-4244c215497fee5" size="40" value="" />
				
			</td>
		</tr>
		<tr>
			<td valign="top">
				<strong>State</strong>
			</td>
			<td valign="top">
				<select name="field-d5197b42d49b81c" id="field-d5197b42d49b81c">
					<option value="AK">AK</option>
					<option value="AL">AL</option>
					<option value="AR">AR</option>
					<option value="AZ">AZ</option>
					<option value="CA">CA</option>
					<option value="CO">CO</option>
					<option value="CT">CT</option>
					<option value="DE">DE</option>
					<option value="FL">FL</option>
					<option value="GA">GA</option>
					<option value="HI">HI</option>
					<option value="IA">IA</option>
					<option value="ID">ID</option>
					<option value="IL">IL</option>
					<option value="IN">IN</option>
					<option value="KS">KS</option>
					<option value="KY">KY</option>
					<option value="LA">LA</option>
					<option value="MA">MA</option>
					<option value="MD">MD</option>
					<option value="ME">ME</option>
					<option value="MI">MI</option>
					<option value="MN">MN</option>
					<option value="MO">MO</option>
					<option value="MS">MS</option>
					<option value="MT">MT</option>
					<option value="NC">NC</option>
					<option value="ND">ND</option>
					<option value="NE">NE</option>
					<option value="NH">NH</option>
					<option value="NJ">NJ</option>
					<option value="NM">NM</option>
					<option value="NV">NV</option>
					<option value="NY">NY</option>
					<option value="OH">OH</option>
					<option value="OK">OK</option>
					<option value="OR">OR</option>
					<option value="PA">PA</option>
					<option value="RI">RI</option>
					<option value="SC">SC</option>
					<option value="SD">SD</option>
					<option value="TN">TN</option>
					<option value="TX">TX</option>
					<option value="UT">UT</option>
					<option value="VA">VA</option>
					<option value="VT">VT</option>
					<option value="WA">WA</option>
					<option value="WI">WI</option>
					<option value="WV">WV</option>
					<option value="WY">WY</option>
					<option value=""></option>
				</select>
				
			</td>
		</tr>
		<tr>
			<td valign="top">
				<strong>Zipcode</strong>
			</td>
			<td valign="top">
				<input type="text" name="field-519f5dff31b7371" id="field-519f5dff31b7371" size="40" value="" />
				
			</td>
		</tr>
		<tr>
			<td valign="top">
				<strong>Email Address:</strong>
			</td>
			<td valign="top">
				<input type="text" name="email" id="email" size="40" value="" />
				
			</td>
		</tr>
		<tr>
			<td valign="top">
				<strong>General Description Of Project</strong>
			</td>
			<td valign="top">
				<textarea name="field-cddb5b2d039285e" id="field-cddb5b2d039285e" rows="6" cols="40"></textarea>
				
			</td>
		</tr>
		<tr>
			<td valign="top">
				<strong>Style</strong>
			</td>
			<td valign="top">
				<input type="checkbox" name="field-8eb368ace59a8b8[]" id="field-8eb368ace59a8b8_0" value="Modern" /> Modern<br/>
				<input type="checkbox" name="field-8eb368ace59a8b8[]" id="field-8eb368ace59a8b8_1" value="Contemporary" /> Contemporary<br/>
				<input type="checkbox" name="field-8eb368ace59a8b8[]" id="field-8eb368ace59a8b8_2" value="Traditional" /> Traditional<br/>
				<input type="checkbox" name="field-8eb368ace59a8b8[]" id="field-8eb368ace59a8b8_3" value="Country" /> Country<br/>
				<input type="checkbox" name="field-8eb368ace59a8b8[]" id="field-8eb368ace59a8b8_4" value="Classical" /> Classical<br/>
				<input type="checkbox" name="field-8eb368ace59a8b8[]" id="field-8eb368ace59a8b8_5" value="Old World" /> Old World<br/>
				
			</td>
		</tr>
		<tr>
			<td valign="top">
				<strong>Estimated Budget</strong>
			</td>
			<td valign="top">
				<input type="text" name="field-2ea35ff9381a625" id="field-2ea35ff9381a625" size="40" value="" />
				
			</td>
		</tr>
		<tr>
			<td valign="top">
				<strong>Square Footage Of Project</strong>
			</td>
			<td valign="top">
				<input type="text" name="field-8117a9b16afb40e" id="field-8117a9b16afb40e" size="40" value="" />
				
			</td>
		</tr>
		<tr>
			<td valign="top">
				<strong>Location Of Project</strong>
			</td>
			<td valign="top">
				<input type="text" name="field-072069e04b9033d" id="field-072069e04b9033d" size="40" value="" />
				
			</td>
		</tr>
		<tr>
			<td colspan="2" align="center">
				<input type="submit" value=" Submit Form " />
			</td>
		</tr>
	</table>
</form>
<br><center><font face="Arial, Helvetica" size="1"><b>
</b></font></center>




Is This A Good Question/Topic? 0
  • +

Replies To: Modifying Forms in CSS

#2 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 220
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Modifying Forms in CSS

Posted 06 August 2009 - 11:13 AM

Ok.

Example:
Attached Image


<style>

	.item {
		width: 200px;
		float: left;
		margin: 5px 10px;
		border: 1px dashed black;
		text-align: center;}		
	
	label {
		font-size: 1.3em;
	}
	
	.item label {
			font-size: 1em;
			margin: 5px auto;
			padding: 3px;}
			
	.field input[type=text] {
		background: #eee;
		font-size: 1.3em;
		text-transform: uppercase;
		border: none;
		width: 190px;
		margin: 5px auto;
	}
	
	small {
		font-size: .8em;}
</style>
<label>Please create an easier to remember name:</label>
<br/>
<small>Required</small>
<div class="field">
	  <input type="text" name="somethingEasierToRemember" id="somethingEasierToRemember" value="" />
</div>
<br/>

<!-- FLOATING ELEMENTS -->

<div class="item">
	<label>Please create an easier to remember name:</label>
	<br/>
	<small>Required</small>
	<div class="field">
		  <input type="text" name="somethingEasierToRemember" id="somethingEasierToRemember" value="" />
	</div>
</div>

<div class="item">
	<label>Please create an easier to remember name:</label>
	<br/>
	<small>Required</small>
	<div class="field">
		  <input type="text" name="somethingEasierToRemember" id="somethingEasierToRemember" value="" />
	</div>
</div>


Was This Post Helpful? 0
  • +
  • -

#3 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

Re: Modifying Forms in CSS

Posted 06 August 2009 - 11:27 AM

I was wondering if you can style the existing form not make up an entirely new one I can do that myself
Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 220
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Modifying Forms in CSS

Posted 06 August 2009 - 01:21 PM

Sure, but you said that you saw ones with divs and stuff. But ok.


table td input[type=text] {
	background: #eee;
		font-size: 1.3em;
		text-transform: uppercase;
		border: none;
		width: 190px;
		margin: 5px auto;
}

table td label {
	   font-size: 1em;
	   margin: 5px auto;
	   padding: 3px;
}

 small {
		font-size: .8em;}

table td {
		border-bottom: 1px dashed #ccc;
		 padding: 5px;
}




Let me know if you were meaning something else, as I may have mistaken again.
Was This Post Helpful? 1
  • +
  • -

#5 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Modifying Forms in CSS

Posted 06 August 2009 - 01:59 PM

Then do it yourself, DIC requires you to show some good effort before asking for help, we won't do your homework for you... Learn CSS and if you don't have the time then hire someone to do it for you!

View Posttscott, on 6 Aug, 2009 - 08:27 PM, said:

I was wondering if you can style the existing form not make up an entirely new one I can do that myself

Was This Post Helpful? 1
  • +
  • -

#6 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

Re: Modifying Forms in CSS

Posted 06 August 2009 - 04:50 PM

View PostWimpy, on 6 Aug, 2009 - 12:59 PM, said:

Then do it yourself, DIC requires you to show some good effort before asking for help, we won't do your homework for you... Learn CSS and if you don't have the time then hire someone to do it for you!

View Posttscott, on 6 Aug, 2009 - 08:27 PM, said:

I was wondering if you can style the existing form not make up an entirely new one I can do that myself


I've obviously already looked if you read my initial post you would see I was unable to locate any css stylesheets with full coding on table forms next time read a post before you decide to ramble the bs coc to me
Was This Post Helpful? 0
  • +
  • -

#7 neit  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 187
  • Joined: 13-February 09

Re: Modifying Forms in CSS

Posted 06 August 2009 - 06:29 PM

You style the elements like any other element

Any of the elements in the code can be styled as pointed by greg in post 4
with the table and input boxes
Was This Post Helpful? 0
  • +
  • -

#8 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 220
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Modifying Forms in CSS

Posted 06 August 2009 - 08:56 PM

Quote

next time read a post before you decide to ramble the bs coc to me


Whoa, whoa - DIC likes to play nice boys - well most of the time anyways.

@tscott - don't take it personally it is just your inflections from the post after I created the form with the divs did seem kind of arrogant, and wimpy was just sticking up for my work.

I just wrote it off as forum goggles, where the tone can't be perceived - in the same manner that you should have taken wimpy's.

So - everyone just think a second before they post, wimpy - thanks.

And tscott - next time just say thanks, but that's not what I meant...

That post was probably pointless, so sorry if you read it and it feels that way, I wanted to say something but once again I'm tired and posting bull crap.

This post has been edited by gregwhitworth: 06 August 2009 - 08:57 PM

Was This Post Helpful? 0
  • +
  • -

#9 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

Re: Modifying Forms in CSS

Posted 06 August 2009 - 11:35 PM

greg I appreciate you taking the time to help :) thanks I thanked u in ur next post :)
Was This Post Helpful? 0
  • +
  • -

#10 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 220
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Modifying Forms in CSS

Posted 07 August 2009 - 08:44 AM

I know, and I appreciated that - I was just pointing out why wimpy reacted the way he did.

As a rule I don't take posts in a rude or attacking manner until:

1. They include profanity or strong language
2. They do more than one post attacking me in some form

Mainly because you could be in a bad attitude when you read it so the post can sound attacking when the author didn't mean it that way it all.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1