Please login or register.

Login with username, password and session length
Advanced search  

News:

Latest sNews - sNews 1.7 - with its own forums - for discussion and user mods.

Author Topic: A fully dynamic and functional contact form written in HTML5 and CSS3  (Read 2367 times)

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web

nukpana

  • Hero Member
  • *****
  • Karma: 71
  • Posts: 663
Re: A fully dynamic and functional contact form written in HTML5 and CSS3
« Reply #1 on: March 23, 2011, 03:31:00 PM »

And how is this written in HTML5?
Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Where is the CSS3? lol
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: A fully dynamic and functional contact form written in HTML5 and CSS3
« Reply #2 on: March 23, 2011, 03:41:11 PM »

Lol too.
I should have posted it in the "Funny story" section.  ;)
Not a good code: no CSS3 properties, no HTML5 form... I was wondering if the AJAX and the PHP codes were good enough to ajaxify our forms.  ???

nukpana

  • Hero Member
  • *****
  • Karma: 71
  • Posts: 663
Re: A fully dynamic and functional contact form written in HTML5 and CSS3
« Reply #3 on: March 23, 2011, 07:09:02 PM »

The article appears to have been taken down.... bad info huh....
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: A fully dynamic and functional contact form written in HTML5 and CSS3
« Reply #4 on: March 23, 2011, 07:40:30 PM »

Should we just delete this whole thread now?  ;D
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

nukpana

  • Hero Member
  • *****
  • Karma: 71
  • Posts: 663
Re: A fully dynamic and functional contact form written in HTML5 and CSS3
« Reply #5 on: March 24, 2011, 12:40:46 AM »

Sure, I don't see why not.  I do want to note that I am trying out the HTML 5 form tags for the first time.  Just in FF 4 & Chrome 9, some of the cooler functionality isn't implemented well without too much JS overriding - ie Date picker (Chrome), Number/Range(FF Number, Range for both), Datalist(Chrome).

My beginning tests were using a Wufoo HTML5 demo, Dive Into HTML5, and Mozilla docs for HTML5 Forms.  I stopped because nothing else (at the moment) seemed ground shattering (that works atm), but as stated, I am just now looking at this...
Code: [Select]
<body>
<header>
<h1>A Contact Form</h1>
<h2>Written in HTML5, CSS3, and PHP5</h2>
</header>
<section>
<form action="contact.php" method="post">

<label>Your Name</label>
<input
type="name"
name="name"
placeholder="Because 'Hi Blank', doesn't sound right..."
required
>

<label>Your Email</label>
<input
type="email"
name="email"
placeholder="How else will I get back to you?"
required
>

<label>Your Phone Number</label>
<input
type="tel"
name="tel"
>

<label>URL of Project</label>
<input
type="url"
name="url"
>

<label>Your Message</label>
<textarea
name="message"
placeholder="Some detail about your project, please."
></textarea>

<!-- Not Implemented
Quick test on FF 4 & Chrome 9 using code from http://wufoo.com/html5/demo/

// Chrome didn't parse this correctly, even with a jQuery UI override
<label>Estimated Completion Date</label>
<input
type="date"
name="date"
>

// I don't recall, but FF didn't parse this correctly, but Chrome did, just not as I anticipated.
<label>Estimated Project Budget <em>(in USD)</em></label>
<input
type="range"
name="budget"
min=1000
max=100000
value=1000
>

// Chrome didn't parse this correctly, but FF 4 did. 
<label>Project Coordinator</label>
<input
list="coordinator"
name="coordinator"
>
<datalist id="coordinator">
<option value="You">
<option value="Me">
<option value="Santa Claus">
</datalist>
-->
<input type="submit" value="Submit">

</form>
</section>
<script>
</script>
</body>
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: A fully dynamic and functional contact form written in HTML5 and CSS3
« Reply #6 on: March 24, 2011, 10:43:41 AM »

Yeap... HTML5 is still a draft and most browsers are yet not compliant to the specs (maybe Opera do the best).

Talking about #CSS3 this is a nice solution to some kinda liteboxes.

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: A fully dynamic and functional contact form written in HTML5 and CSS3
« Reply #7 on: March 24, 2011, 11:17:28 AM »

Yeap... HTML5 is still a draft and most browsers are yet not compliant to the specs (maybe Opera do the best).[/url].

Latest Opera looks nice in terms of features. I haven't tried it yet because it wasn't doing well earlier with the basic HTML5 stuff - even in versions they claimed had good HTML5 support. But they all (FF, Webkit/Safari/Chrome, Opera) do well in different areas. Webkit is the best in presentational areas, not so good in other areas (html5 forms being one).
Question - does input type="search" (including attribs like placeholder and results) work in FF or Opera (or IE9) yet?
Does attrib "required" work in any (publicly released) browser yet?

@Jason - Have you looked at HTML5 Boilerplate? Might have stuff that works.
« Last Edit: March 24, 2011, 11:21:12 AM by Fred K (agentsmith) »
Logged

nukpana

  • Hero Member
  • *****
  • Karma: 71
  • Posts: 663
Re: A fully dynamic and functional contact form written in HTML5 and CSS3
« Reply #8 on: March 24, 2011, 01:28:20 PM »

Required works for Chrome 9 & FF4. 
Logged