Far better form.
This commit is contained in:
parent
ef07b046f6
commit
61d9e9b909
10 changed files with 139 additions and 44 deletions
|
@ -5,13 +5,28 @@ no_entete: true
|
|||
menupriority: 4
|
||||
---
|
||||
<% content_for :bodyclass do %>std support<% end %>
|
||||
<% content_for :js do %>
|
||||
<script>
|
||||
$.fn.clearOnFocus = function() {
|
||||
return this.focus(function(){
|
||||
var v = $(this).val();
|
||||
$(this).val( v === this.defaultValue ? '' : v );
|
||||
}).blur(function(){
|
||||
var v = $(this).val();
|
||||
$(this).val( v.match(/^\s*$/) ? this.defaultValue : v );
|
||||
});
|
||||
};
|
||||
$('input[type=text]').clearOnFocus();
|
||||
$('textarea').clearOnFocus();
|
||||
</script>
|
||||
<% end %>
|
||||
|
||||
## A problem? A remark?
|
||||
|
||||
<form name="email" id="email" action="/contact" method="post">
|
||||
<input type="text" name="name" value="Your name" onfocus="this.value=''" style="display: block;width=20em"/>
|
||||
<input type="text" name="mail" value="Your email" onfocus="this.value=''" style="display: block; width=20em"/>
|
||||
<textarea name="body" id="bodytextarea" value="" onfocus="this.value=''" style="display: block; height: 10em; width: 30em;">Enter your comment here</textarea>
|
||||
<input type="text" name="name" value="Your Name"/>
|
||||
<input type="text" name="mail" value="Your email"/>
|
||||
<textarea name="body" id="bodytextarea" value="">Enter your comment here</textarea>
|
||||
<input type="submit" value="Send"/>
|
||||
</form>
|
||||
|
||||
|
|
|
@ -5,13 +5,28 @@ no_entete: true
|
|||
menupriority: 4
|
||||
---
|
||||
<% content_for :bodyclass do %>std support<% end %>
|
||||
<% content_for :js do %>
|
||||
<script>
|
||||
$.fn.clearOnFocus = function() {
|
||||
return this.focus(function(){
|
||||
var v = $(this).val();
|
||||
$(this).val( v === this.defaultValue ? '' : v );
|
||||
}).blur(function(){
|
||||
var v = $(this).val();
|
||||
$(this).val( v.match(/^\s*$/) ? this.defaultValue : v );
|
||||
});
|
||||
};
|
||||
$('input[type=text]').clearOnFocus();
|
||||
$('textarea').clearOnFocus();
|
||||
</script>
|
||||
<% end %>
|
||||
|
||||
## A problem? A remark?
|
||||
|
||||
<form name="email" id="email" action="/contact" method="post">
|
||||
<input type="text" name="name" value="Your name" onfocus="this.value=''" style="display: block;width=20em"/>
|
||||
<input type="text" name="mail" value="Your email" onfocus="this.value=''" style="display: block; width=20em"/>
|
||||
<textarea name="body" id="bodytextarea" value="" onfocus="this.value=''" style="display: block; height: 10em; width: 30em;">Enter your comment here</textarea>
|
||||
<input type="text" name="name" value="Your Name"/>
|
||||
<input type="text" name="mail" value="Your email"/>
|
||||
<textarea name="body" id="bodytextarea" value="">Enter your comment here</textarea>
|
||||
<input type="submit" value="Send"/>
|
||||
</form>
|
||||
|
||||
|
|
|
@ -6,13 +6,28 @@ no_entete: true
|
|||
menupriority: 4
|
||||
---
|
||||
<% content_for :bodyclass do %>std support<% end %>
|
||||
<% content_for :js do %>
|
||||
<script>
|
||||
$.fn.clearOnFocus = function() {
|
||||
return this.focus(function(){
|
||||
var v = $(this).val();
|
||||
$(this).val( v === this.defaultValue ? '' : v );
|
||||
}).blur(function(){
|
||||
var v = $(this).val();
|
||||
$(this).val( v.match(/^\s*$/) ? this.defaultValue : v );
|
||||
});
|
||||
};
|
||||
$('input[type=text]').clearOnFocus();
|
||||
$('textarea').clearOnFocus();
|
||||
</script>
|
||||
<% end %>
|
||||
|
||||
## A problem? A remark?
|
||||
|
||||
<form name="email" id="email" action="/contact" method="post">
|
||||
<input type="text" name="name" value="Your name" onfocus="this.value=''" style="display: block;width=20em"/>
|
||||
<input type="text" name="mail" value="Your email" onfocus="this.value=''" style="display: block; width=20em"/>
|
||||
<textarea name="body" id="bodytextarea" value="" onfocus="this.value=''" style="display: block; height: 10em; width: 30em;">Enter your comment here</textarea>
|
||||
<input type="text" name="name" value="Your Name"/>
|
||||
<input type="text" name="mail" value="Your email"/>
|
||||
<textarea name="body" id="bodytextarea" value="">Enter your comment here</textarea>
|
||||
<input type="submit" value="Send"/>
|
||||
</form>
|
||||
|
||||
|
|
|
@ -14,6 +14,10 @@
|
|||
<title type="html">Screenshots</title>
|
||||
<published>2011-05-05T09:27:11Z</published>
|
||||
<updated>2011-05-05T09:27:11Z</updated>
|
||||
<author>
|
||||
<name>Yann Esposito</name>
|
||||
<uri>yannesposito.com</uri>
|
||||
</author>
|
||||
<link href="http://ypassword.espozito.com/Scratch/en/blog/2011-05-05-Screenshots/" rel="alternate"/>
|
||||
<content type="html">
|
||||
<div class="intro">
|
||||
|
|
|
@ -58,9 +58,9 @@
|
|||
<h2 class="first" id="a-problem-a-remark">A problem? A remark?</h2>
|
||||
|
||||
<form name="email" id="email" action="/contact" method="post">
|
||||
<input type="text" name="name" value="Your name" onfocus="this.value=<code>" style="display: block;width=20em" />
|
||||
<input type="text" name="mail" value="Your email" onfocus="this.value=</code>" style="display: block; width=20em" />
|
||||
<textarea name="body" id="bodytextarea" value="" onfocus="this.value=''" style="display: block; height: 10em; width: 30em;">Enter your comment here</textarea>
|
||||
<input type="text" name="name" value="Your Name" />
|
||||
<input type="text" name="mail" value="Your email" />
|
||||
<textarea name="body" id="bodytextarea" value="">Enter your comment here</textarea>
|
||||
<input type="submit" value="Send" />
|
||||
</form>
|
||||
|
||||
|
@ -76,7 +76,7 @@
|
|||
</div>
|
||||
<footer>
|
||||
<ul class="article_metadata">
|
||||
<li>Modified: <time>07/12/2011</time></li>
|
||||
<li>Modified: <time>08/08/2011</time></li>
|
||||
</ul>
|
||||
</footer>
|
||||
</article>
|
||||
|
@ -106,6 +106,20 @@
|
|||
<script src="/js/plugins.js"></script>
|
||||
<script src="/js/script.js"></script>
|
||||
|
||||
<script>
|
||||
$.fn.clearOnFocus = function() {
|
||||
return this.focus(function(){
|
||||
var v = $(this).val();
|
||||
$(this).val( v === this.defaultValue ? '' : v );
|
||||
}).blur(function(){
|
||||
var v = $(this).val();
|
||||
$(this).val( v.match(/^\s*$/) ? this.defaultValue : v );
|
||||
});
|
||||
};
|
||||
$('input[type=text]').clearOnFocus();
|
||||
$('textarea').clearOnFocus();
|
||||
</script>
|
||||
|
||||
<!-- end scripts-->
|
||||
<!--[if lt IE 7 ]>
|
||||
<script src="/js/libs/dd_belatedpng.js"></script>
|
||||
|
|
|
@ -14,6 +14,10 @@
|
|||
<title type="html">Captures d'écran</title>
|
||||
<published>2011-05-05T09:27:11Z</published>
|
||||
<updated>2011-05-05T09:27:11Z</updated>
|
||||
<author>
|
||||
<name>Yann Esposito</name>
|
||||
<uri>yannesposito.com</uri>
|
||||
</author>
|
||||
<link href="http://ypassword.espozito.com/Scratch/fr/blog/2011-05-05-Screenshots/" rel="alternate"/>
|
||||
<content type="html">
|
||||
<div class="intro">
|
||||
|
|
|
@ -58,9 +58,9 @@
|
|||
<h2 class="first" id="a-problem-a-remark">A problem? A remark?</h2>
|
||||
|
||||
<form name="email" id="email" action="/contact" method="post">
|
||||
<input type="text" name="name" value="Your name" onfocus="this.value=<code>" style="display: block;width=20em" />
|
||||
<input type="text" name="mail" value="Your email" onfocus="this.value=</code>" style="display: block; width=20em" />
|
||||
<textarea name="body" id="bodytextarea" value="" onfocus="this.value=''" style="display: block; height: 10em; width: 30em;">Enter your comment here</textarea>
|
||||
<input type="text" name="name" value="Your Name" />
|
||||
<input type="text" name="mail" value="Your email" />
|
||||
<textarea name="body" id="bodytextarea" value="">Enter your comment here</textarea>
|
||||
<input type="submit" value="Send" />
|
||||
</form>
|
||||
|
||||
|
@ -76,7 +76,7 @@
|
|||
</div>
|
||||
<footer>
|
||||
<ul class="article_metadata">
|
||||
<li>modifié le : <time>12/07/2011</time></li>
|
||||
<li>modifié le : <time>08/08/2011</time></li>
|
||||
</ul>
|
||||
</footer>
|
||||
</article>
|
||||
|
@ -106,6 +106,20 @@
|
|||
<script src="/js/plugins.js"></script>
|
||||
<script src="/js/script.js"></script>
|
||||
|
||||
<script>
|
||||
$.fn.clearOnFocus = function() {
|
||||
return this.focus(function(){
|
||||
var v = $(this).val();
|
||||
$(this).val( v === this.defaultValue ? '' : v );
|
||||
}).blur(function(){
|
||||
var v = $(this).val();
|
||||
$(this).val( v.match(/^\s*$/) ? this.defaultValue : v );
|
||||
});
|
||||
};
|
||||
$('input[type=text]').clearOnFocus();
|
||||
$('textarea').clearOnFocus();
|
||||
</script>
|
||||
|
||||
<!-- end scripts-->
|
||||
<!--[if lt IE 7 ]>
|
||||
<script src="/js/libs/dd_belatedpng.js"></script>
|
||||
|
|
|
@ -1,36 +1,36 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84">
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>http://ypassword.espozito.com/Scratch/fr/blog/2011-05-05-Screenshots/</loc>
|
||||
<lastmod>2011-07-12</lastmod>
|
||||
</url>
|
||||
<url>
|
||||
<loc>http://ypassword.espozito.com/Scratch/en/getit/</loc>
|
||||
<lastmod>2011-08-08</lastmod>
|
||||
<lastmod>2011-07-24</lastmod>
|
||||
</url>
|
||||
<url>
|
||||
<loc>http://ypassword.espozito.com/Scratch/fr/blog/</loc>
|
||||
<lastmod>2011-08-08</lastmod>
|
||||
<lastmod>2011-07-27</lastmod>
|
||||
</url>
|
||||
<url>
|
||||
<loc>http://ypassword.espozito.com/Scratch/fr/getit/</loc>
|
||||
<lastmod>2011-08-08</lastmod>
|
||||
<lastmod>2011-07-24</lastmod>
|
||||
</url>
|
||||
<url>
|
||||
<loc>http://ypassword.espozito.com/Scratch/en/support/</loc>
|
||||
<lastmod>2011-08-08</lastmod>
|
||||
<lastmod>2011-08-09</lastmod>
|
||||
</url>
|
||||
<url>
|
||||
<loc>http://ypassword.espozito.com/Scratch/en/blog/feed/feed.xml</loc>
|
||||
<lastmod>2011-05-04</lastmod>
|
||||
<lastmod>2011-05-02</lastmod>
|
||||
</url>
|
||||
<url>
|
||||
<loc>http://ypassword.espozito.com/Scratch/fr/support/</loc>
|
||||
<lastmod>2011-08-08</lastmod>
|
||||
<lastmod>2011-08-09</lastmod>
|
||||
</url>
|
||||
<url>
|
||||
<loc>http://ypassword.espozito.com/Scratch/en/</loc>
|
||||
<lastmod>2011-08-08</lastmod>
|
||||
<lastmod>2011-07-27</lastmod>
|
||||
</url>
|
||||
<url>
|
||||
<loc>http://ypassword.espozito.com/Scratch/en/blog/2011-05-05-Screenshots/</loc>
|
||||
|
@ -38,18 +38,18 @@
|
|||
</url>
|
||||
<url>
|
||||
<loc>http://ypassword.espozito.com/Scratch/sitemap.xml</loc>
|
||||
<lastmod>2011-05-04</lastmod>
|
||||
<lastmod>2011-05-02</lastmod>
|
||||
</url>
|
||||
<url>
|
||||
<loc>http://ypassword.espozito.com/Scratch/fr/blog/feed/feed.xml</loc>
|
||||
<lastmod>2011-05-04</lastmod>
|
||||
<lastmod>2011-05-02</lastmod>
|
||||
</url>
|
||||
<url>
|
||||
<loc>http://ypassword.espozito.com/Scratch/en/blog/</loc>
|
||||
<lastmod>2011-08-08</lastmod>
|
||||
<lastmod>2011-07-27</lastmod>
|
||||
</url>
|
||||
<url>
|
||||
<loc>http://ypassword.espozito.com/Scratch/fr/</loc>
|
||||
<lastmod>2011-08-08</lastmod>
|
||||
<lastmod>2011-07-27</lastmod>
|
||||
</url>
|
||||
</urlset>
|
||||
|
|
|
@ -73,7 +73,6 @@ hgroup#maintitle {
|
|||
background-image: -webkit-linear-gradient(top, #60646c, #51555c);
|
||||
background-image: -moz-linear-gradient(top, #60646c, #51555c);
|
||||
background-image: -o-linear-gradient(top, #60646c, #51555c);
|
||||
background-image: -ms-linear-gradient(top, #60646c, #51555c);
|
||||
background-image: linear-gradient(top, #60646c, #51555c);
|
||||
}
|
||||
/* line 75, ../src/main.sass */
|
||||
|
@ -109,7 +108,6 @@ footer {
|
|||
background-image: -webkit-linear-gradient(top, #60646c, #51555c);
|
||||
background-image: -moz-linear-gradient(top, #60646c, #51555c);
|
||||
background-image: -o-linear-gradient(top, #60646c, #51555c);
|
||||
background-image: -ms-linear-gradient(top, #60646c, #51555c);
|
||||
background-image: linear-gradient(top, #60646c, #51555c);
|
||||
}
|
||||
/* line 96, ../src/main.sass */
|
||||
|
@ -729,7 +727,6 @@ body.support #main > article form {
|
|||
background-image: -webkit-linear-gradient(top, #60646c, #51555c);
|
||||
background-image: -moz-linear-gradient(top, #60646c, #51555c);
|
||||
background-image: -o-linear-gradient(top, #60646c, #51555c);
|
||||
background-image: -ms-linear-gradient(top, #60646c, #51555c);
|
||||
background-image: linear-gradient(top, #60646c, #51555c);
|
||||
}
|
||||
/* line 354, ../src/main.sass */
|
||||
|
@ -765,8 +762,11 @@ iframe {
|
|||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* line 369, ../src/main.sass */
|
||||
/* line 371, ../src/main.sass */
|
||||
input[type=text], textarea {
|
||||
display: block;
|
||||
width: 28em;
|
||||
font-size: 0.9em;
|
||||
-moz-box-shadow: #868b96 0 0 3px inset, #efeff4 0 0 3px;
|
||||
-webkit-box-shadow: #868b96 0 0 3px inset, #efeff4 0 0 3px;
|
||||
-o-box-shadow: #868b96 0 0 3px inset, #efeff4 0 0 3px;
|
||||
|
@ -784,16 +784,22 @@ input[type=text], textarea {
|
|||
margin: 1em 0;
|
||||
}
|
||||
|
||||
/* line 378, ../src/main.sass */
|
||||
/* line 382, ../src/main.sass */
|
||||
textarea {
|
||||
height: 17.305em;
|
||||
}
|
||||
|
||||
/* line 385, ../src/main.sass */
|
||||
input[type=submit], .bluebutton {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
padding: 1ex 3ex;
|
||||
margin: 1em 0;
|
||||
-moz-box-shadow: #868b96 0 0 3px, #efeff4 2px 0;
|
||||
-webkit-box-shadow: #868b96 0 0 3px, #efeff4 2px 0;
|
||||
-o-box-shadow: #868b96 0 0 3px, #efeff4 2px 0;
|
||||
box-shadow: #868b96 0 0 3px, #efeff4 2px 0;
|
||||
margin: 0.5em 0;
|
||||
-moz-box-shadow: #66aaff 0 1px 2px inset, #efeff4 2px 0;
|
||||
-webkit-box-shadow: #66aaff 0 1px 2px inset, #efeff4 2px 0;
|
||||
-o-box-shadow: #66aaff 0 1px 2px inset, #efeff4 2px 0;
|
||||
box-shadow: #66aaff 0 1px 2px inset, #efeff4 2px 0;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
|
@ -801,12 +807,12 @@ input[type=submit], .bluebutton {
|
|||
-khtml-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
text-shadow: 0 -1px #303237;
|
||||
border: solid 1px #66aaff;
|
||||
border: solid 3px #303237;
|
||||
color: #efeff4 !important;
|
||||
font-weight: bold;
|
||||
background: #4269a7;
|
||||
}
|
||||
/* line 390, ../src/main.sass */
|
||||
/* line 398, ../src/main.sass */
|
||||
input[type=submit]:hover, .bluebutton:hover {
|
||||
color: #efeff4;
|
||||
text-shadow: 0 0 1px #005588;
|
||||
|
|
|
@ -366,7 +366,12 @@ iframe
|
|||
+box-shadow(rgba(#000,.6) 0 0 15px)
|
||||
+border-radius()
|
||||
|
||||
$inputWidth: 28em
|
||||
|
||||
input[type=text], textarea
|
||||
display: block
|
||||
width: $inputWidth
|
||||
font-size: .9em
|
||||
+box-shadow($ycolor3 0 0 3px inset, $ycolorb 0 0 3px)
|
||||
+border-radius()
|
||||
border: solid 1px $ycolor3
|
||||
|
@ -374,16 +379,19 @@ input[type=text], textarea
|
|||
background: $ycolorb
|
||||
padding: 1ex
|
||||
margin: 1em 0
|
||||
textarea
|
||||
height: $inputWidth/1.618
|
||||
|
||||
input[type=submit],.bluebutton
|
||||
display: block
|
||||
text-align: center
|
||||
font-size: .9em
|
||||
padding: 1ex 3ex
|
||||
margin: 1em 0
|
||||
+box-shadow($ycolor3 0 0 3px, $ycolorb 2px 0)
|
||||
margin: .5em 0
|
||||
+box-shadow($higlightcolor-reflect 0 1px 2px inset, $ycolorb 2px 0)
|
||||
+border-radius()
|
||||
text-shadow: 0 -1px $ycolor7
|
||||
border: solid 1px $higlightcolor-reflect
|
||||
border: solid 3px $ycolor7
|
||||
color: $ycolorb !important
|
||||
font-weight: bold
|
||||
background: $higlightcolor
|
||||
|
|
Loading…
Reference in a new issue