7 replies [Last post]
Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 11 weeks 3 days ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

Hello

How may I get the gaps on these form fields to be equally spaced, please?

pic

I have tried to improve the look of the form since I took that screenshot a day ago - the submit button looks a bit better and I have added rounded corners to the form fields, but I can't seem to equally space the fields themselves.

The page itself is here:

page

Many thanks.

//mod edit: Links fixed. ~gt

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 6 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi Bluenose, I can't get to

Hi Bluenose,
I can't get to your contact page at the moment, there is a vb error:

Microsoft VBScript compilation error '800a03f9'
 
Expected 'Then'
 
/contact.asp, line 86
 
If errorCount = 0
-----------------^

Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 11 weeks 3 days ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

Hello Tony Thank you for your

Hello Tony

Thank you for your reply.

I'll correct that and post back!

Cheers

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 39 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Trying again from memory

I had problems posting my answer (prior to asp fail; why don't you dump that silliness? It's obsolete and leads to bad html coding practices).

Trying to remember what I wrote before. Delete the * {margin: 0; padding: 0;} rule set. It doesn't help anything and it can cause problems. See Global resets considered harmful for a general discussion of resets.

You have set various P elements in the form to different top/bottom padding. This is the primary cause of your issue. Further, IIRC, there are different margins also. Remove all margin and padding properties from those P elements.

That should get you back to square one. You can then change the spacing by changing the top/bottom margins. The default margins are 1em. Make it larger to increase the space and smaller to reduce it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 11 weeks 3 days ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

Hello I have now corrected

Hello

I have now corrected the ASP error:

My original question concerned how to equally space out the form fields as, eventually, any error messages to the user (such as 'please type in a valid email address') will go above that particular field probably in red type.

Such error messages could appear in a box above 'Contact Me', and I still may do that; either way, the space between the name, email, and message form fields still look uneven, and that is what I was hoping could be corrected.

Thank you.

Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 11 weeks 3 days ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

Hello gary That looks a lot

Hello gary

That looks a lot better now, thank you: Form

If I decided to place a box in that space under 'Message' in order to display any user errors (such as 'Please type your name' where the user has forgotten to do so), is it possible in CSS not to display such a box unless there is an error. In other words, a hidden box unless there is an error?

That seems a better alternative than having to display error messages above the form fields.

Thank for any advice and for all your help.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 39 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

See html5 forms

I haven't worked with html5 form controls enough to give advice. I suggest you read MDN's Forms in html, and play around with the utility of plain html markup. Otherwise, I think you'll be limited by the need for client side scripting (Javascript). You absolutely must have server side validation of user-submitted data, so client side error checking is really only bells and whistles.

See also my really old form example of html4/xhtml1.1 with css2, Form layout.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

VeeraM
VeeraM's picture
Offline
Enthusiast
bangalore
Last seen: 4 years 7 weeks ago
bangalore
Timezone: GMT+5.5
Joined: 2014-09-22
Posts: 59
Points: 59

Spacing between form fields

Hi,the spacing to equal level in this types to an height are not mentioned and used to text-align they have used from Paragraph p tag not style functions are mentioned it.