Warning: curl_setopt(): CURLOPT_FOLLOWLOCATION cannot be activated when an open_basedir is set in /www/htdocs/w006633a/projekte/doctypehtml.net/www/lib/Curl.php on line 98
<!DOCTYPE html> <html lang="en"> <head> <title> View-Source </title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1"> <meta charset="utf-8"> <script src="http://doctypehtml.net/sh_main.min.js" type="text/javascript"> </script> <script src="http://doctypehtml.net/lang/sh_html.min.js" type="text/javascript"> </script> <script src="http://doctypehtml.net/lang/sh_javascript.min.js" type="text/javascript"> </script> <script src="http://doctypehtml.net/lang/sh_css.min.js" type="text/javascript"> </script> <style type="text/css"> body { background: white; } </style> <link href="http://doctypehtml.net/syntax.css" rel="stylesheet" type="text/css"> </head> <body onload="sh_highlightDocument();"> <pre id="source" class="sh_html" style="white-space: pre-wrap;"> <br><b>Warning</b>: curl_setopt(): CURLOPT_FOLLOWLOCATION cannot be activated when an open_basedir is set in <b>/www/htdocs/w006633a/projekte/doctypehtml.net/www/lib/Curl.php</b> on line <b>98</b><br>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1"&gt; &lt;title&gt; HTML5 input types + required attribute – doctypehtml.net – doctypehtml.net &lt;/title&gt; &lt;base href="<a href="http://doctypehtml.net/?url=http://doctypehtml.net/">http://doctypehtml.net/</a>"&gt; &lt;link rel="stylesheet" href="<a href="http://doctypehtml.net/?url=http://doctypehtml.net/assets/css/layout.css">http://doctypehtml.net/assets/css/layout.css</a>" type="text/css"&gt; &lt;link rel="stylesheet" href="<a href= "http://doctypehtml.net/?url=http://doctypehtml.net/assets/css/mobile.css">http://doctypehtml.net/assets/css/mobile.css</a>" type="text/css" media="screen and (max-width: 780px)"&gt; &lt;link href="http://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet" type="text/css"&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"&gt; &lt;/script&gt; &lt;script src="<a href="http://doctypehtml.net/?url=http://doctypehtml.net/assets/js/jquery.DOMWindow.js">http://doctypehtml.net/assets/js/jquery.DOMWindow.js</a>" type="text/javascript"&gt; &lt;/script&gt;&lt;!--[if lt IE 9]&gt;&lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;&lt;![endif]--&gt; &lt;script src="http://maps.google.com/maps/api/js?sensor=true&amp;amp;key=ABQIAAAApI58w98iPWfY3kRwSUeY8xQ68YkQG_qXsZ3UoXoMI3aQuc_oDxRhXW-0yaqFDptD-MysiRffOXJ_vg" type="text/javascript"&gt; &lt;/script&gt; &lt;script src="http://code.google.com/apis/gears/gears_init.js" type="text/javascript"&gt; &lt;/script&gt; &lt;script src="http://better-geolocation-api.googlecode.com/files/geolocation.js" type="text/javascript"&gt; &lt;/script&gt; &lt;link href="<a href= "http://doctypehtml.net/?url=http://doctypehtml.net/html5/input-types-required-attribute//css/geolocation.css">http://doctypehtml.net/html5/input-types-required-attribute//css/geolocation.css</a>" rel="stylesheet" type="text/css"&gt; &lt;/head&gt; &lt;body&gt; &lt;a href="http://github.com/manuelbieh/doctypehtml.net"&gt;&lt;img style="position: absolute; top: 0; right: 0; border: 0;" src= "https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"&gt;&lt;/a&gt; &lt;div id="wrapper"&gt; &lt;h1&gt; &lt;a href="/"&gt;&amp;lt;!DOCTYPEhtml.net&amp;gt;&lt;br&gt; HTML5/CSS3 Demos + Experiments&lt;/a&gt; &lt;/h1&gt; &lt;h2&gt; Input types + required attribute &lt;/h2&gt; &lt;p&gt; Try to submit the form without filling the fields. You should get a notice to fill out the fields properly. Placeholders and validation completely works without JavaScript. &lt;b&gt;Keep in mind:&lt;/b&gt; using the &lt;code&gt;required&lt;/code&gt; attribute is client side validation only! Never forget to also validate your form on server side. &lt;/p&gt; &lt;form method="post" action=""&gt; &lt;p&gt; &lt;input type="email" name="email" placeholder="Your email address" required="required"&gt; &lt;/p&gt; &lt;p&gt; &lt;input type="url" name="url" placeholder="Your URL" required="required"&gt; &lt;/p&gt; &lt;p&gt; &lt;input type="submit"&gt; &lt;/p&gt; &lt;/form&gt; &lt;p&gt; Note: Both Opera (11.11) and Safari (5.0.4) show the &lt;code&gt;placeholder&lt;/code&gt; attribute but don't care about the &lt;code&gt;required&lt;/code&gt; attribute and let you send the form even if the fields aren't filled. IE9 ignores both. &lt;/p&gt; &lt;/div&gt;&lt;br style="clear: both;"&gt; &lt;div&gt; &lt;a href="<a href= "http://doctypehtml.net/?url=http://doctypehtml.net/index.html">http://doctypehtml.net/index.html</a>"&gt;Overview&lt;/a&gt; – All examples are lovingly handcrafted by &lt;a href="http://www.twitter.com/ManuelBieh"&gt;@ManuelBieh&lt;/a&gt; | &lt;a href= "http://www.manuel-bieh.de/en/"&gt;http://www.manuel-bieh.de&lt;/a&gt;. Inspired by &lt;a href="http://www.html5demos.com"&gt;html5demos.com&lt;/a&gt; from the great &lt;a href= "http://www.twitter.com/rem"&gt;@rem&lt;/a&gt; | &lt;a href="<a href= "http://doctypehtml.net/?url=http://doctypehtml.net/viewsource/index.php?url=http://doctypehtml.net/html5/input-types-required-attribute/">http://doctypehtml.net/viewsource/index.php?url=http://doctypehtml.net/html5/input-types-required-attribute/</a>" class="viewsource"&gt;view source&lt;/a&gt; | &lt;iframe src="http://platform.twitter.com/widgets/tweet_button.html?url=http://doctypehtml.net/&amp;amp;via=manuelbieh" style= "vertical-align: middle; width: 110px; height: 21px; overflow: hidden; border: 0;"&gt;&lt;/iframe&gt; &lt;iframe src= "http://www.facebook.com/plugins/like.php?href=http://doctypehtml.net/&amp;amp;send=false&amp;amp;layout=button_count&amp;amp;width=130&amp;amp;show_faces=false&amp;amp;action=recommend&amp;amp;colorscheme=light&amp;amp;font&amp;amp;height=21" style="vertical-align: middle; border:none; overflow:hidden; width:130px; height:21px; overflow: hidden; border: 0;"&gt;&lt;/iframe&gt; &lt;div class="g-plusone" data-size="medium" data-count="true"&gt;&lt;/div&gt; &lt;/div&gt;&lt;script type="text/javascript"&gt; $('.viewsource').openDOMWindow({ height:'90%', width:'90%', positionType:'absolute', positionTop:50, eventType:'click', positionLeft:'5%', windowSource:'iframe', windowPadding:0, loader:1, // loaderImagePath:'animationProcessing.gif', loaderHeight:16, loaderWidth:17 }); &lt;/script&gt;&lt;script type="text/javascript"&gt; var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-16083973-9']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); &lt;/script&gt;&lt;script type="text/javascript" src="https://apis.google.com/js/plusone.js"&gt; &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </pre> </body> </html>