asked on

how can I make input form look better ?

Hi ,
I have created an input form by Dw Cs4 in an Asp page,
There is some space between fields in browsers and the form looks diffuse, I have tried to set a Css with 0px margin and padding for the table and form but nothing changed
Is there any simple way to make the form more tighten?
Many thanks

rdivilbiss

Yes, take it out of the table and use pure CSS layout.

Do you have an example link?

I've attached an example of a pure CSS form layout which may help you get an idea where to start, but I and others are here to help with your specific layout.

Regards,
Rod

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>CSS Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005 Roderick Divilbiss">
<style>
<!--
/* basic styles */

* {
	margin: 0;
	padding: 0;
}

body {
	font: 12px/14px Arial, Helvetica, sans-serif;
	color: #000;
	width: 360px;
	margin: 20px auto;
	text-align: left;
}

h1 {
	font: bold 20px/21px Helvetica, Arial, sans-serif;
	margin: 10px 0px;
}

p {
	width: 360px;
	margin: 0px 0px 20px 0px;
}

ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	position: relative;
}

li {
	display:block;
	float:left;
	margin: 0px;
	padding: 0px;
}


/* form styles */

form {
	width:360px;  /* the box which contains the fieldsets */
	text-align:left;
}

fieldset {
	clear:left;   /* keeps the fieldsets stacking atop each other */
	padding:15px; /* the fieldset is a box around the fields. a little left padding is nice. */
	/* border:0; You can turn off the border if you wish */
}

legend {
	margin: 5px 0px 5px -10px; /* a little top & bottom margin to keep the fieldsets from touching */
	font-size:14px;
	line-height:16px;
	font-weight:bold;
}

form label {
	/* the label wraps the input filed and the example text and is a box.
	we apply sizing to this box to arrainge the fields as we wish in
	a grid. 
	*/
	display: block;
	width: 310px; /* maximum width of a field, we can make them smaller below */
	font-size: 12px;
	line-height: 14px;
	padding: 0px 0px 12px 0px;  /* make room for the example text */
	margin-bottom: 10px;  /* make room between rows */
}

form input {
	display: block;
	width:100%; /* make it the same size as the containing lable box */
}

form select {    /* we have no selects, textareas or checkboxes, but you would do similar to input */
	float: left;
	display: block;
}

/* specific to this form, e.g. size and arrange the fields as we wish */
#form-status {  /* a place to show messages from server side validation */
	float: left;
	width: 310px;
	font-weight:bold;
	font-size:16px;
}

#label-first, #label-last {
	float: left;
	width: 130px;
	padding:0px;
	margin-right: 10px;
}

#label-middle {
	float: left;
	width: 26px;
	padding:0px;
	margin-right: 10px;
}

#label-address {
	float: left;
	padding: 0px;
	width: 310px;
}

#label-city {
	float: left;
	padding: 0px;
	width: 140px;
	margin-right: 10px;
}

#label-state {
	float: left;
	width: 36px;
	padding:0px;
	margin-right: 10px;
}

#label-zipcode {
	float: left;
	padding: 0px;
	width: 110px;
	margin-right: 10px;
}

#label-email {
	float: left;
	padding: 0px;
	width: 310px;
}

#label-homephone, #label-workphone {
	float: left;
	padding: 0px;
	width: 150px;
	margin-right: 10px;
}

.xampl {
	float:left;
	display: block;
	color:#555555;
	font-size:10px;
}

#bSubmit {
	clear:left;
	width:auto; /* override the width 310px we set above for input(s) so it will auto size as normal */
}

.nocss {
	display:none;
}
/* page specific other than the form */

#content {
	left:20px;
}

.reqsym {
	font-weight:bold;
	margin:0 2px 0 2px;
}
-->
</style>
</head>
<body>
<div id="content">
  <div id="form-status">Enter Information (* = required field)</div>
  <form action="null.html" method="post">
    <fieldset>
      <legend>Name & Address</legend>
      <ul>
        <li><label id="label-first">First Name <span class="reqsym">*</span><input name="first" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">John</span></label></li>
        <li><label id="label-middle">MI <span class="reqsym"></span><input name="middle" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">Q</span></label></li>
        <li><label id="label-last">Last Name <span class="reqsym">*</span><input name="last" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">Public</span></label></li>
        <li><label id="label-address">Address <span class="reqsym">*</span><input name="address" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">1234 E Any St</span></label></li>
        <li><label id="label-city">City <span class="reqsym">*</span><input name="city" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">Hometown</span></label></li>
        <li><label id="label-state">ST <span class="reqsym">*</span><input name="state" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">AL</span></label></li>
        <li><label id="label-zipcode">Zip Code <span class="reqsym">*</span><input name="zipcode" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">99999-9999</span></label></li>
      </ul>
    </fieldset>  
    <fieldset>
      <legend>Contact Information</legend>
      <ul>  
        <li><label id="label-email">E-Mail Address <span class="reqsym">*</span><input name="email" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">john.public@domain.com</span></label></li>
        <li><label id="label-homephone">Home Phone <span class="reqsym"></span><input name="homephone" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">999-999-99999</span></label></li>
        <li><label id="label-workphone">Work Phone <span class="reqsym"></span><input name="workphone" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">999-999-99999</span></label></li>
        <li><input type="submit" id="bSubmit" name="bSubmit" value="Submit"></li>
      </ul>  
    </fieldset>
  </form>
</div>
</body>
</html>

Open in new window

saltechsystems

I would say make sure that you are specifying a style for both the form field and the title. Also text size of your title or form filed can make it look strange. If you post the html, I can tell you the exact issue.

Jason C. Levine

We would need to see a link or the complete source code to be sure, but you probably need to zero out the table cells, not the table itself.

saltechsystems

There are two things that you can do:

If you are looking to reduce the spacing between each field, you will have to edit label-first for line 101 and 108 and reduce the margin.

If you are looking to reduce the spacing between the lines, you can alter line 80 for form label style.

I hope this helps!

rdivilbiss

@saltechsystems, that code is not the question author's. It was an example of a pure CSS form not using a table layout.

The author is using a table layout and as I'm sure you know, the table cells can grow in ways that are not desirable, leading to the problem the author posted: "some space between fields."

It certainly isn't impossible to find a solution using table layout, (as jason1178 has offered to help with,) but it is also true that the W3C recommended not to use tables for layout in 1999, so I thought it best to show an example of how a form can be layed out without a table and offer to help the author learn to make his form layout look the way desired without using tables.

I chose that example because it covers the common issue of having different number and sizes of form fields on the various rows of the form. It may have absolutely no resemblance to what the author is trying to accomplish.

Making suggestions based on that code is not relevant to the author's problem.

Regards,
Rod

khaleghi

ASKER

Hi
thanks everyone for help
I am not really familiar with codes and my website is not in English
how ever I have pasted the codes here
the form name is form1 , it located on line 111 and the css is on line 84
hopefully it can help
thanks again

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<!--#include file="Connections/NBconnect.asp" -->
<%
// *** Edit Operations: declare variables

// set the form action variable
var MM_editAction = Request.ServerVariables("SCRIPT_NAME");
if (Request.QueryString) {
  MM_editAction += "?" + Server.HTMLEncode(Request.QueryString);
}

// boolean to abort record edit
var MM_abortEdit = false;
%>
<%
if (String(Request("MM_insert")) == "form1") {
  if (!MM_abortEdit) {
    // execute the insert
	
    var MM_editCmd = Server.CreateObject ("ADODB.Command");
    MM_editCmd.ActiveConnection = MM_NBconnect_STRING;
    MM_editCmd.CommandText = "INSERT INTO dbo.Login (Name, Surename, Relation, email, Tel, Username, Password) VALUES (?, ?, ?, ?, ?, ?, ?)";
    MM_editCmd.Prepared = true;
    MM_editCmd.Parameters.Append(MM_editCmd.CreateParameter("param1", 202, 1, 10, Request.Form("Name"))); // adVarWChar
    MM_editCmd.Parameters.Append(MM_editCmd.CreateParameter("param2", 202, 1, 15, Request.Form("Surename"))); // adVarWChar
    MM_editCmd.Parameters.Append(MM_editCmd.CreateParameter("param3", 202, 1, 15, Request.Form("Relation"))); // adVarWChar
    MM_editCmd.Parameters.Append(MM_editCmd.CreateParameter("param4", 201, 1, 25, Request.Form("email"))); // adLongVarChar
    MM_editCmd.Parameters.Append(MM_editCmd.CreateParameter("param5", 5, 1, -1, (String(Request.Form("Tel")) != "undefined" && String(Request.Form("Tel")) != "") ? Request.Form("Tel") : null)); // adDouble
    MM_editCmd.Parameters.Append(MM_editCmd.CreateParameter("param6", 201, 1, 15, Request.Form("Username"))); // adLongVarChar
    MM_editCmd.Parameters.Append(MM_editCmd.CreateParameter("param7", 201, 1, 8, Request.Form("Password"))); // adLongVarChar
    MM_editCmd.Execute();
    MM_editCmd.ActiveConnection.Close();

    // append the query string to the redirect URL
    var MM_editRedirectUrl = "index.asp";
    if (MM_editRedirectUrl && Request.QueryString && Request.QueryString.Count > 0) {
      MM_editRedirectUrl += ((MM_editRedirectUrl.indexOf('?') == -1) ? "?" : "&") + Request.QueryString;
    }
    Response.Redirect(MM_editRedirectUrl)
  }
}
%>
<%
var Recordset1_cmd = Server.CreateObject ("ADODB.Command");
Recordset1_cmd.ActiveConnection = MM_NBconnect_STRING;
Recordset1_cmd.CommandText = "SELECT * FROM dbo.Login";
Recordset1_cmd.Prepared = true;

var Recordset1 = Recordset1_cmd.Execute();
var Recordset1_numRows = 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Narjes Banoo</title>
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background-color: #FFF;
	background-image: url(image/bg3.jpg);
	background-repeat: repeat-x;
}
.oneColElsCtr #container {
	width: 850px;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	background-image: url(image/Bg10.png);
	background-repeat: no-repeat;
}
.oneColElsCtr #mainContent {
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body,td,th {
	font-family: Georgia, Times New Roman, Times, serif;
}
.Form1 {
	margin-bottom: 0px;
	margin-top: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
	margin: 0px;
	padding: 0px;
}
-->
</style>
<link href="Nastaliq.css" rel="stylesheet" type="text/css" />
</head>

<body class="oneColElsCtr">

<div id="container">
  <div id="mainContent">
    <table width="810" border="0" cellpadding="0" cellspacing="0" class="Form1">
      <tr>
        <td height="15" align="center" valign="middle">&nbsp;</td>
      </tr>
      <tr>
        <td height="150" align="center" valign="middle">&nbsp;</td>
      </tr>
      <tr>
        <td align="center" valign="middle"><p><img src="image/Text1.png" width="538" height="79" alt="¿¿¿¿ ¿¿¿ ¿¿¿ ¿¿ ¿¿ ¿¿¿¿ ¿ ¿¿¿ ¿¿¿ ¿¿ ¿¿ ¿¿¿¿ ¿¿¿¿¿ ¿ ¿¿¿¿¿¿¿ ¿¿¿¿¿¿¿¿ ¿¿ ¿¿¿ " /></p></td>
      </tr>
      <tr class="Form1">
        <td nowrap="nowrap" class="Form1"> &nbsp;
          <form action="<%=MM_editAction%>" method="POST" name="form1" class="Form1" id="form1">
            <table width="463" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr valign="baseline">
                <td width="224" valign="middle" class="Form1"><input type="text" name="Name" value="" size="32" /></td>
                <td width="183" align="right" valign="middle" nowrap="nowrap" class="Form1"><p><img src="image/Text2.png" width="41" height="48" alt="¿¿¿" /></p></td>
              </tr>
              <tr valign="baseline">
                <td valign="middle" class="Form1"><input type="text" name="Surename" value="" size="32" /></td>
                <td align="right" valign="middle" nowrap="nowrap" class="Form1"><p><img src="image/Text3.png" width="90" height="52" alt="¿¿¿ ¿¿¿¿¿¿¿¿" /></p></td>
              </tr>
              <tr valign="baseline">
                <td valign="middle" class="Form1"><input type="text" name="Relation" value="" size="32" /></td>
                <td align="right" valign="middle" nowrap="nowrap" class="Form1"><p><img src="image/Text4.png" width="135" height="43" alt="¿¿¿¿¿ ¿¿¿ ¿¿ ¿¿¿¿ ¿¿¿¿" /></p></td>
              </tr>
              <tr valign="baseline">
                <td valign="middle" class="Form1"><input type="text" name="email" value="" size="32" /></td>
                <td align="right" valign="middle" nowrap="nowrap" class="Form1"><p><img src="image/Text5.png" width="105" height="50" alt="¿¿¿ ¿¿¿¿¿¿¿¿¿" /></p></td>
              </tr>
              <tr valign="baseline">
                <td valign="middle" class="Form1"><input name="Tel" type="text" class="Form1" value="" size="32" /></td>
                <td align="right" valign="middle" nowrap="nowrap" class="Form1"><p><img src="image/Text6.png" width="82" height="40" alt="¿¿¿¿¿ ¿¿¿¿" /></p></td>
              </tr>
              <tr valign="baseline">
                <td valign="middle" class="Form1"><input type="text" name="Username" value="" size="32" /></td>
                <td align="right" valign="middle" nowrap="nowrap" class="Form1"><p><img src="image/Text7.png" width="96" height="44" alt="¿¿¿¿¿ ¿¿¿¿¿¿" /></p></td>
              </tr>
              <tr valign="baseline">
                <td valign="middle" class="Form1"><input type="password" name="Password" value="" size="32" /></td>
                <td align="right" valign="middle" nowrap="nowrap" class="Form1"><p><img src="image/Text8.png" width="66" height="40" alt="¿¿¿ ¿¿¿¿" /></p></td>
              </tr>
              <tr valign="baseline">
                <td valign="middle" class="Form1"><input type="submit" class="SmallNastaliq" value="¿¿¿ ¿¿¿¿ ¿¿" /></td>
                <td align="right" valign="middle" nowrap="nowrap" class="Form1"><p>&nbsp;</p></td>
              </tr>
            </table>
            <input type="hidden" name="MM_insert" value="form1" />
          </form>
        <p>&nbsp;</p></td>
      </tr>
      <tr>
<td align="center" valign="top"><p><img src="image/Text9.png" width="190" height="62" alt="¿¿¿¿ ¿¿ ¿¿ ¿¿¿¿ ¿¿¿ ¿¿¿ ¿¿¿¿¿¿¿ " /></p>
  <p><img src="image/Text10.png" width="509" height="76" alt="¿¿¿¿¿¿¿ ¿¿ ¿¿¿ ¿¿ ¿¿ ¿¿¿ ¿¿ ¿¿¿¿¿ ¿ ¿¿¿ ¿¿ ¿¿¿¿ ¿¿¿ ¿¿¿¿¿¿ ¿¿¿¿¿¿ ¿¿ ¿¿¿¿¿¿ ¿¿¿¿ ¿¿¿¿ ¿¿¿¿¿¿" /></p>
  <p><img src="image/Text11.png" width="53" height="77" alt="¿¿¿¿¿¿" /></p></td>
      </tr>
      <tr>
        <td height="100">&nbsp;</td>
      </tr>
    </table>
    <h1>&nbsp;</h1>
  <!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>
<%
Recordset1.Close();
%>
<%
Recordset1.Close();
%>

Open in new window

rdivilbiss

Is the undesired space above and below the form fields or to the right of the form fields?
form1.jpg

khaleghi

ASKER

yes the space above and under each field
but the space that we can see in this view is fine because the reason is the height of images on the right column
the problem is , while you see the form in browser spaces become more than it and the form height is different in different browsers

rdivilbiss

Do you have a public link?

SaigonJeff

I noticed that you have applied the .form1 class to each row in the table as well as the entire table itself. Try removing them from the individual rows.

Also, there is a great little CSS Form Designer Extension for Dreamweaver. It's free and it can help get you started.

http://www.dmxzone.com/go?16830

Check it out...

Good luck

khaleghi

ASKER

dear rdivilbiss
sorry what's public link?

khaleghi

ASKER

this is the page
http://www.narjesbanoo.com/Register.asp

rdivilbiss

How about this? http://www.rodsdot.com/ee/q_25095968A.htm
Narjes.jpg

khaleghi

ASKER

Hello
Sorry for late reply, I was in a trouble for a while
Dear rdivilbiss
yes this is what I need , how did you do that?
I am trying to understand something from your page codes but I'm not enough familiar with codes
Thanks

ASKER CERTIFIED SOLUTION

rdivilbiss

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

khaleghi

ASKER

Thanks
I rebuilt the page and there isn't any additional space
I don't know how silly I spent 1 month on such a problem