From 0e0ff7e2ed243f78227734bfe802be35e09fe863 Mon Sep 17 00:00:00 2001 From: Masataka Yakura Date: Sat, 3 Mar 2012 01:17:11 +0900 Subject: [PATCH] forms: update Firefox screenshots. --- forms.html | 12 ++++++------ i/location-bar-empty-focused.png | Bin 968 -> 3270 bytes i/location-bar-empty-unfocused.png | Bin 1361 -> 3734 bytes 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/forms.html b/forms.html index 83f5133..dab5da6 100644 --- a/forms.html +++ b/forms.html @@ -28,23 +28,23 @@

Placeholder Text

IEFirefoxSafariChromeOperaiPhoneAndroid -10.0+3.7+4.0+4.0+11.0+4.0+2.1+ +10.0+4.0+4.0+4.0+11.0+4.0+2.1+ -

The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. Placeholder text is displayed inside the input field as long as the field is empty. As soon as you click on (or tab to) the input field and type in, the placeholder text disappears. +

The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. Placeholder text is displayed inside the input field as long as the field is empty. When you click on (or tab to) the input field and start typing, the placeholder text disappears. -

You’ve probably seen placeholder text before. For example, Mozilla Firefox includes placeholder text in the location bar that reads “Search Bookmarks and History”: +

You’ve probably seen placeholder text before. For example, Mozilla Firefox includes placeholder text in the location bar that reads “Go to a Website”: -

location bar with placeholder text +

location bar with placeholder text

When you click on (or tab to) the location bar, the placeholder text disappears: -

location bar with cursor and no placeholder text +

location bar with cursor and no placeholder text

Here’s how you can include placeholder text in your own web forms:

<form>
-  <input name="q" placeholder="Search Bookmarks and History">
+  <input name="q" placeholder="Go to a Website">
   <input type="submit" value="Search">
 </form>
diff --git a/i/location-bar-empty-focused.png b/i/location-bar-empty-focused.png index 1ad3cd20061ff55d3096ad860f65e08aea046a33..0e8816e0a63a7c513c84f0cd564bb69924562e85 100644 GIT binary patch literal 3270 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 Ef{ryt*8l(j literal 968 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 AlmGw# literal 1361 zcmV-X1+MyuP)=Ej z??AIbQvK2?6n-ieix(FclgZ@UtL^E(*6a2DQBy60W`xA=Py(sdYP`@Nr}h+S@Pz)J zS^^O`{V;i5TV=cDgdfPLGr8np;Rgn9{2b6bVV|uM8O52R>&93ncmcF72%Drxwm6 z#K5D)M$bk*$Rq+1@zQ{X=g#wv>?^@CB*O&9*}^Vto(l|*-!5I|AXy zeBvQNk{95J&5+z60R%6@73eaJ#jlmCL~wv16A2<%YS57zFi^&$OK9L(ru||-c*kxL z<wuL!arw)jO)013BX!iU3H#~%5Q`ul}b@234(yG!{PAy`ug_v zmVh}uJ!Nbn)Mzw_4RWI{)RDSV5K1p5vRLUd3vdw};o}HwsF^F#A5C0?XwgR?L;yIl z2Iz&M1}zK_uaZ|!TL!e}H8T_tUm;3CyVXLB=9m0!~248zI@) z*r0E}2}!+PkA;LliiSjjf>jLz0tP{NOTs}mq0RR36eyvKS;IsiG6oW%Kt$}cUkoTR zpX@G|B4wjct@NBFk-!^su)E*}a9S{17Eb2cZf$SxP(tYSdJM^UJZ4CI-{(CT3ABU@ z?89a1LLH+a!K1|!mJNao)Y{)XK7;lZCkI8HXVi43R~Ma8Z^?f#(q(P(+pm5)%i