jocar6562 Posted June 16, 2016 Share Posted June 16, 2016 (edited) 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 Edited June 16, 2016 by jocar6562 Link to comment Share on other sites More sharing options...
Ingolme Posted June 16, 2016 Share Posted June 16, 2016 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. Link to comment Share on other sites More sharing options...
jocar6562 Posted June 17, 2016 Author Share Posted June 17, 2016 (edited) 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 June 18, 2016 by jocar6562 Link to comment Share on other sites More sharing options...
jocar6562 Posted June 18, 2016 Author Share Posted June 18, 2016 (edited) 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. 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 Thanking every one their time JohnC Edited June 18, 2016 by jocar6562 Link to comment Share on other sites More sharing options...
dsonesuk Posted June 18, 2016 Share Posted June 18, 2016 Looks to me that the form layout is broken because of misplaced tags with classes to apply correct styling. Link to comment Share on other sites More sharing options...
jocar6562 Posted June 18, 2016 Author Share Posted June 18, 2016 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 Link to comment Share on other sites More sharing options...
jocar6562 Posted June 18, 2016 Author Share Posted June 18, 2016 (edited) 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 Johnc Edited June 21, 2016 by jocar6562 Link to comment Share on other sites More sharing options...
Ingolme Posted June 18, 2016 Share Posted June 18, 2016 I don't think "W3layotus" is affiliated in any way with the W3C. Link to comment Share on other sites More sharing options...
jocar6562 Posted June 21, 2016 Author Share Posted June 21, 2016 I don't think "W3layotus" is affiliated in any way with the W3C. sorry you are right I've edited post Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now