PDA

View Full Version : Advanced xhtml form .........................

shelly121
08-02-2005, 10:27
hey ppl! can any1 help-created a xhtml form n it works n everythin, but iv forgotten hw to put a warnin in it,if they dont enter a field in, or they try and put a false email add?? here's my form so far, wud b glad for any help! please!

<form method="post" action="http://(this part is correct-bt nt shown)/cgi-bin/form2msg.pl" onsubmit="return dataValidation();" name="formvalidate" />
<input type="hidden" name="recipient" value="not showin this either">
<input type="hidden" name="subject" value="homepage comments" />
<input type="hidden" name="success" value="thank you for completing this Information" />
<input type="hidden" name="failure" value="sorry but your information could not be sent" />
<fieldset>
<legend>Personal information</legend>
<div class="fm-req" align="left">
First Name: <input type="text" name="YourName" />
</div>
<div class="fm-req">
<br />
Last Name: <input type="text" name="Name" />
</div>
</fieldset>
<fieldset>
<legend>Country </legend>
<div class="fm-opt">
<br />
<label for="fm-state">Country:</label>
<select id="fm-state" name="fm-state">
<option value="" selected="selected">Choose a country:</option>
<option value="UK">None</option>
<option value="UK">UK</option>
<option value="AL">America</option>
<option value="AK">France</option>
<option value="AL">Germany</option>
<option value="AK">Russia</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Contact information</legend>
<div class="fm-req">
<label for="fm-email">Email:</label>
<input id="fm-email" name="YourEmail" type="text" />
</div>
</fieldset>
<fieldset>
Did You like my Website?
<input type="radio" name="choice" value="1" /> Yes.
<input type="radio" name="choice" value="2" /> Not Sure.
<input type="radio" name="choice" value="2" /> No.
</fieldset>
<fieldset>
<div class="fm-opt">
<br />
<label for="fm-comments">Comments:</label>
<textarea name="fm-comments" cols="10" rows="3" id="fm-comments"></textarea>
</div>
</fieldset>
<center>
<div id="fm-submit" class="fm-req">
<input name="Submit" value="Submit" type="submit" />
<input name="Reset" value="Reset" type="reset" />
</div>
MsMonkey
08-02-2005, 10:52
hia
have you seen msmouse? she is meant 2 b on allday!luv yaz xXx
Skatiechik
08-02-2005, 11:13
I have no experience of creating forms, but if I came into your same problem I would probably search on the web for a form that does give a warning, if it isn't filled in correctly. The have a look at the page source, and copy the relevant bits I need.
JoeP
08-02-2005, 12:01
You're going to need some JavaScript that's fired by the events on the text boxes.

If you do a check on Google you'll almost certainly find something - otherwsie give me a shout.

Joe
shelly121
08-02-2005, 12:26
Originally posted by JoePritchard
You're going to need some JavaScript that's fired by the events on the text boxes..
Joe
yeh i got a javasvript,and i put the link to it in the <head> </head>tags on my form, and the actual javascript itself has:

function DataValidation()
{
if (document.formValidate.YourName.value == "") {
alert("Please enter your name!");
return false;
}
if ((document.formValidate.YourEmail.value == "" ||
document.formValidate.YourEmail.value.indexOf('@') == -1) || document.formValidate.YourEmail.value.indexOf('.') == -1)
{
alert("The e-mail entered is empty or invalid!");
return false;
}
return true;
}

so it shud be working, shudnt it?? ..but its not.
Captain_Scarlet
08-02-2005, 12:33
Personally I'd like to know what XHTML is all about, apparently, my web host said that by 01-May all HTML pages should be in XHTML or the world will come to an end...

I did a quick search on tinternet but didn't get anything easy to understand nor which had any relevance to what I'm doing ;)

Can anyone help ?
shelly121
08-02-2005, 12:36
Originally posted by Captain_Scarlet
Personally I'd like to know what XHTML is all about, apparently, my web host said that by 01-May all HTML pages should be in XHTML or the world will come to an end...

I did a quick search on tinternet but didn't get anything easy to understand nor which had any relevance to what I'm doing ;)

Can anyone help ?

its basically the same as html, except ALL tags have to be closed, and everthing has to be in lower-case. and its best if it validates with the validator.w3.org/ website, if you luk on this website it explains XHTML
Cyclone
08-02-2005, 12:43
you've already got a validate function linked to the submission of the form.
You can use that function to pop up a warning box with the message inside it telling them what they've missed.

Or another way to do it would be to write the error messages into the form, put them inside spans and hide them by default, then use the javascript to make them visible if they fail validation. That way is potentially better than popup boxes as the warning stays on screen and the user doesn't have to remember it.

You could also link functions to the onblur method of each field and do similar things in that if you wished.
sccsux
08-02-2005, 12:47
Originally posted by Captain_Scarlet
Personally I'd like to know what XHTML is all about, apparently, my web host said that by 01-May all HTML pages should be in XHTML or the world will come to an end...

I did a quick search on tinternet but didn't get anything easy to understand nor which had any relevance to what I'm doing ;)

Can anyone help ?


It's not all that new (been around since 2000).

Full details are available from the W³Consortium (http://www.w3.org/TR/xhtml1/) website.


It's re-work of the HTML to take into account of recent (2002 update) changes on the net..
Cyclone
08-02-2005, 12:52
Originally posted by shelly121
yeh i got a javasvript,and i put the link to it in the <head> </head>tags on my form, and the actual javascript itself has:


so it shud be working, shudnt it?? ..but its not.

your javascript has capitalisation that's incorrect. eg;

in your javascript
document.formValidate.YourName.value

but in your tags

name="formvalidate"
shelly121
08-02-2005, 12:55
Originally posted by Cyclone
you've already got a validate function linked to the submission of the form.
You can use that function to pop up a warning box with the message inside it telling them what they've missed.
..
i dont understand?? cud you clarify wot xhtml id have to enter in the form at all please?? shelly :confused:
Cyclone
08-02-2005, 13:02
Originally posted by shelly121
i dont understand?? cud you clarify wot xhtml id have to enter in the form at all please?? shelly :confused:

Sorry, I started my post before you'd posted the javascript to the site. You've got everything you need for validation, i think it's not working because of the capitalisation issue.
Captain_Scarlet
08-02-2005, 13:04
Originally posted by sccsux
It's not all that new (been around since 2000).

Full details are available from the W³Consortium (http://www.w3.org/TR/xhtml1/) website.


It's re-work of the HTML to take into account of recent (2002 update) changes on the net..
Ta, I'd already been there, W3C are the standard/convention setters so I occasionaly go there... I'm not too much advanced at how to create an XHTML...

Apart form repeating 'markup languages' a good 20 times... Nowt really tells what to do.
shelly121
08-02-2005, 13:06
Originally posted by Cyclone
your javascript has capitalisation that's incorrect. eg;

in your javascript
document.formValidate.YourName.value

but in your tags

name="formvalidate"
yippe, it works, thankz 4 takin the time 2 reply.
shelly121
08-02-2005, 13:10
Originally posted by Captain_Scarlet
Ta, I'd already been there, W3C are the standard/convention setters so I occasionaly go there... I'm not too much advanced at how to create an XHTML...

Apart form repeating 'markup languages' a good 20 times... Nowt really tells what to do.

heres sum websites that mite help-if ya wana learn a bit bout xhtml:
http://jessey.net/simon/xhtml_tutorial/
this is a tutorial for xhtml

http://www.w3.org/style/examples/011/firstcss
this is helpful for making cascading style sheets
Captain_Scarlet
08-02-2005, 13:21
Originally posted by shelly121
heres sum websites that mite help-if ya wana learn a bit bout xhtml:
http://jessey.net/simon/xhtml_tutorial/
this is a tutorial for xhtml

That's more like it !
Thanks !
adaline
08-02-2005, 14:36
I use xhtml and css combo that works in all the browsers (even text-only) and is AAA accesible, here is the code for the e-mail form on my site:
Code from www.v-a-l.co.uk/contact.php
<form action=":D" method="post">
<div class="row">
<div class="table_fix">&nbsp;</div>
<label class="name" for="name">Your Name</label>
<span class="in"><input class="text" type="text" name="name" id="name" value="... ..." title="Your Name" /></span>
<div class="table_fix">&nbsp;</div>
</div>
<div class="row">
<div class="table_fix">&nbsp;</div>
<label class="name" for="email">Your E-mail</label>
<span class="in"><input class="text" type="text" name="email" id="email" value="...@......." title="Your E-mail" /></span>
<div class="table_fix">&nbsp;</div>
</div>
<div class="row">
<div class="table_fix">&nbsp;</div>
<label class="name" for="message">Message</label>
<span class="in"><textarea class="text" cols="28" rows="5" name="message" id="message" title="Your Message">Hi Val,</textarea></span>
<div class="table_fix">&nbsp;</div>
</div>
<div class="row">
<div class="table_fix">&nbsp;</div>
<input class="name" type="reset" value="Reset" title="Reset Form" />
<span class="in"><input type="submit" value="Send &gt;&gt;" title="Send Message" /></span>
<div class="table_fix">&nbsp;</div>
</div>
</form>


As again I tested it and it works in IE, Opera, FireFox, Netscape, Lynx, Mozzila, conforms to xhtml 1.1 and bobby AAA. It doesent use JavaScript for validation, im assuming my visitors can fill it in correctly. CSS for "critical" parts above:
CSS code
.table_fix{
clear: both;
}
.row{
padding-top: 0px;
clear: both;
width: 380px;
}
.in{
float: left;
width: 200px;
text-align: left;
}
.name{
float: left;
width: 80px;
text-align: right;
padding-right: 5px;
}


Yo will need to alter css to fit your site but i think this way you have alot of control over whats going on :). Hope this helps!
Cyclone
08-02-2005, 14:43
making assumptions about users being sensible is not the recommended way forwards.

However javascript is also not ideal for validation as it can be disabled....

It's a hard world.

You can always do server side validation, but that means a round trip if they've made a mistake and costs bandwidth.

A combination of javascript and then server side validation is probably the best approach.
adaline
08-02-2005, 14:46
Lol, if they fill it in badly il just get their IP and "NET SEND" them some abuse :D