Jump to content
jocar6562

Its forms post w3c validation to html 4/5

Recommended Posts

Hi

I have been putting in forms post in websites for a long time just started in the last few weeks to have a go at mobile website building using 3 of the w3c templates. which are terrific but one don't want to play. Its the form post I looked and tried many different ways to make the form work but its split with a div in removing the div the post works fine and looks good on website but not on mobile. I have put in a block form without the div of a different design post box which validates html4 but does not look as good, I want to keep the original post form in. Put the website through html tidy up which takes the <form/> and moves it to just after the action post. It validates to html4 but the form does not post.below is the offending scrip.

<form action="mail99.php" method="POST">

<input type="text" value="Name" onfocus="this.value='';" onblur="if (this.value == '') {this.value = 'Name';}"> <div class="clear"> </div>

</div>

<div class="your-single">

<i class="email"> </i>

<input type="text" value="E-mail" onfocus="this.value='';" onblur="if (this.value == '') {this.value = 'E-mail';}">

<div class="clear"> </div>

</div>

<div class="your-single">

<i class="website"> </i>

<input type="text" value="Website" onfocus="this.value='';" onblur="if (this.value == '') {this.value = 'Website';}">

<div class="clear"> </div>

</div>

</div>

<div class="grid-single-in">

<textarea name="message" cols="77" rows="5" value=" " onfocus="this.value='';" onblur="if (this.value == '') {this.value = 'Message';}">Message</textarea>

<input type="submit" value="SENT MESSAGE"> </form>

 

I put one form block in which worked fine but it totally alters the shape on mobile view.

Would be pleased if any one could solve this problem keeping the div in place and being validated to HTML4/5

 

Thank you for your time a picture below

lost-in-space.jpg

Edited by jocar6562

Share this post


Link to post
Share on other sites

Your code has mismatched tags and needs to be properly indented. Be sure to use code blocks on the form to represent code.

 

I don't know exactly what your intention is, but I've rewritten your code to be valid:

<form action="mail99.php" method="POST">

  <input type="text" value="Name" onfocus="this.value='';" onblur="if (this.value == '') {this.value = 'Name';}">
  <div class="clear"> </div>

  <div class="your-single">
    <i class="email"> </i>
    <input type="text" value="E-mail" onfocus="this.value='';" onblur="if (this.value == '') {this.value = 'E-mail';}">                                                                                                                    
    <div class="clear"> </div>
  </div>

  <div class="your-single">
    <i class="website"> </i>
    <input type="text" value="Website" onfocus="this.value='';" onblur="if (this.value == '') {this.value = 'Website';}">                                                                                                                               
    <div class="clear"> </div>
  </div>

  <div class="grid-single-in">
    <textarea name="message" cols="77" rows="5" value=" " onfocus="this.value='';" onblur="if (this.value == '') {this.value = 'Message';}">Message</textarea>
  </div>

  <input type="submit" value="SENT MESSAGE">
</form>

This code looks really old. You could do without the onfocus and onblur attributes if you used the placeholder attribute.

Share this post


Link to post
Share on other sites

Hi

thank you for time the code pulled the website of of shape. I spent a lot of time on this so just using a basic post form and deal with the style css later using your suggestion of placeholder .The onfocus and onblur attributes have been around a long time.

 

<form action="mail99.php" method="POST">
<input type="text" name="name" class="email" placeholder="Name" required="">
<input type="text" name="email" class="email" placeholder="email" required="">
<input type="text" name="website" class="email" placeholder="Website" required="">
<textarea name="message" class="email" placeholder="Message" required="" </textarea>
<input type="submit" value="Send" >
</form>
Again than you for your time.
With mobiles and ipads and computer you've got to think 3 ways
johnc
Edited by jocar6562

Share this post


Link to post
Share on other sites

I give up on these forms a simple yes okay alter the css/js puts the rest of the website out sink, but I think you need to built one page in with all the css and js to match that one page it should work but at the end of the day its a lot of work just for one contact form It was easier to build a link to a single page with a contact form in. These contact forms integrated with style very difficult for me to get right. 2 pictures of the contact form page one validated the other one that's will not go through validation looks bad. I am not asking for help with this I will have a think about the forms later. This is one of these temp plates from w3c for mobile.page2.jpg One above not validated

 

one below validated. Looks easy to put right in the split screen view you see and put it right but after publishing it shows up as below

page1.jpg

Thanking every one their time JohnC

Edited by jocar6562

Share this post


Link to post
Share on other sites

Looks to me that the form layout is broken because of misplaced tags with classes to apply correct styling.

yes you are right . I am going to leave this page without the form in thank you for your reply johnc

Share this post


Link to post
Share on other sites

This template has many many errors and warnings in but after correcting the script I got it validated to HTML4 at w3c validation service I would not of done this without ref to w3c shools tutorial . The css style sheet has 106 errors in it with 6200 lines of ccs its I think its an off the shelf ccs matches everything. The contact form is terrific on computer and mobile phone or cell phone it has no boxes. Below a picture of the post form have to put in some security in the php yet.

some temp plates you use are good and some I think are just very badly put together

 

 

contact-form.jpgJohnc

Edited by jocar6562

Share this post


Link to post
Share on other sites

I don't think "W3layotus" is affiliated in any way with the W3C.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...