Jump to content

Format form in table


SamohtVII
 Share

Recommended Posts

Ok so basically I have a table with a form in it and regardless of how much people may hate tables and how porrly coded this may be I need to format the submit button inside the table but nothing seems to work.

 

I have tried the usual like

#confirmation #confirm {}

table th #confirmation #confirm {}

 

and every combination between that. Can anyone shed some like on how to style the submit button.

 

Thanks

<th><form id="confirmation" name="myFormAll" method="post" action="confirm.php">     <input type="number" id="amount" name="amount" style="width:100px;" required min="0" /></th><th>      <input type="submit" value="Confirm" id="confirm" /></form></th>
Link to comment
Share on other sites

 

Why not just...

#confirm {}

 

Man if that works -.- brb

 

RE: Nah doesn't work. I don't know why. Any reason why it wouldn't :S

 

It is not like any table that I have used but Dave's suggestion does work.

<html><head><style>#confirm {  color:red;}</style></head><body><th><form id="confirmation" name="myFormAll" method="post" action="confirm.php">     <input type="number" id="amount" name="amount" style="width:100px;" required min="0" /></th><th>      <input type="submit" value="Confirm" id="confirm" /></form></th></body></html>
Edited by johncc
Link to comment
Share on other sites

Yes! using #confirm should work because you are targeting the element directly using its id ref.

 

Using invalid html as in #1 post, will produce from the browser its interpretation of correct layout of form, for example.

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">        </script>        <style type="text/css">            #confirm {color: red;}        </style>    </head>    <body>        <table><tr>                <th><form id="confirmation" name="myFormAll" method="post" action="confirm.php">                <input type="number" id="amount" name="amount" style="width:100px;" required min="0" /></form>        </th>        <th>            <input type="submit" value="Confirm" id="confirm" />        </th></tr></table></body></html>

which means

 

#confirmation #confirm {}

table th #confirmation #confirm {}

 

will have no effect because #confirm is outside #confirmation

Link to comment
Share on other sites

  • 2 weeks later...
Align the form controls with table<?xml version="1.0" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>  <title>Align the form controls with table</title></head><body><h2>Reply to seller</h2><p>Use the following form to respond to seller:</p><form action="" method="post" name="frmRespond"><table>  <tr>    <td><label for="emailTo">To</label></td>    <td><input type="text" name="txtTo" readonly="readonly" id="emailTo" size="25" value="Phone seller" /></td>  </tr>  <tr>    <td><label for="emailFrom">To</label></td>    <td><input type="text" name="txtFrom" id="emailFrom" size="25"  /></td>  </tr>  <tr>    <td><label for="emailSubject">Subject</label></td>    <td><input type="text" name="txtSubject" id="emailSubject"  size="60"  /></td>  </tr>  <tr>    <td><label for="emailBody">Body</label></td>    <td><textarea name="txtBody" id="emailBody"  cols="60" rows="12"> </textarea></td>  </tr></table><input type="submit" value="Send email" /></form></body></html>
Edited by Ingolme
Advertising
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...