Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

better placeholder dummy texts to make them valuable for screenreader…

… users

…and to tie the room together…
  • Loading branch information...
commit 519e53d2f9c352e469668a13f725a8227e63177d 1 parent 5ac99c1
Dirk Ginader authored
Showing with 30 additions and 30 deletions.
  1. +10 −10 index-chromeish.html
  2. +10 −10 index-modernizr.html
  3. +10 −10 index.html
View
20 index-chromeish.html
@@ -34,19 +34,19 @@
<h2>Form Elements with explicit labels (using id and for)</h2>
<form>
<label for="firstname">Firstname:</label>
- <input placeholder="e.g. Your Firstname" type="text" name="firstname" id="firstname">
+ <input placeholder="e.g. Jeff" type="text" name="firstname" id="firstname">
<br>
<label for="lastname">Lastname:</label>
- <input placeholder="e.g. Your Lastname" type="text" name="lastname" id="lastname">
+ <input placeholder="e.g. Lebowski" type="text" name="lastname" id="lastname">
<br>
<label for="street">Street:</label>
- <input placeholder="e.g. Your street and quite some extra text so it doesn't fit inside of the field" type="text" name="street" id="street">
+ <input placeholder="e.g. 1000 main str and quite some extra text so it doesn't fit inside of the field" type="text" name="street" id="street">
<br>
<label for="password">password:</label>
- <input placeholder="e.g. your puppy" type="password" name="password" id="password">
+ <input placeholder="e.g. the Dude" type="password" name="password" id="password">
<br>
<label for="message">Message:</label>
- <textarea placeholder="e.g. Your Message to me and quite some extra text so it doesn't fit in one row" name="message" id="message" rows="2"></textarea>
+ <textarea placeholder="e.g. Well, sir, it's this rug I had. It really tied the room together." name="message" id="message" rows="2"></textarea>
<br>
<input type="submit" value="send">
</form>
@@ -72,23 +72,23 @@
<h2>Form Elements with implicit labels (wrapping the form element into the label)</h2>
<form class="implicit">
<label>Firstname:
- <input placeholder="e.g. Your Firstname" type="text" name="firstname">
+ <input placeholder="e.g. Jeff" type="text" name="firstname">
</label>
<br>
<label>Lastname:
- <input placeholder="e.g. Your Lastname" type="text" name="lastname">
+ <input placeholder="e.g. Lebowski" type="text" name="lastname">
</label>
<br>
<label>Street:
- <input placeholder="e.g. Your street and quite some extra text so it doesn't fit inside of the field" type="text" name="street">
+ <input placeholder="e.g. 1000 main str and quite some extra text so it doesn't fit inside of the field" type="text" name="street">
</label>
<br>
<label>password:
- <input placeholder="e.g. your puppy" type="password" name="password">
+ <input placeholder="e.g. the Dude" type="password" name="password">
</label>
<br>
<label>Message:
- <textarea placeholder="e.g. Your Message to me and quite some extra text so it doesn't fit in one row" name="message" rows="2"></textarea>
+ <textarea placeholder="e.g. Well, sir, it's this rug I had. It really tied the room together." name="message" rows="2"></textarea>
</label>
<br>
<input type="submit" value="send">
View
20 index-modernizr.html
@@ -31,19 +31,19 @@
<h2>Form Elements with explicit labels (using id and for)</h2>
<form>
<label for="firstname">Firstname:</label>
- <input placeholder="e.g. Your Firstname" type="text" name="firstname" id="firstname">
+ <input placeholder="e.g. Jeff" type="text" name="firstname" id="firstname">
<br>
<label for="lastname">Lastname:</label>
- <input placeholder="e.g. Your Lastname" type="text" name="lastname" id="lastname">
+ <input placeholder="e.g. Lebowski" type="text" name="lastname" id="lastname">
<br>
<label for="street">Street:</label>
- <input placeholder="e.g. Your street and quite some extra text so it doesn't fit inside of the field" type="text" name="street" id="street">
+ <input placeholder="e.g. 1000 main str and quite some extra text so it doesn't fit inside of the field" type="text" name="street" id="street">
<br>
<label for="password">password:</label>
- <input placeholder="e.g. your puppy" type="password" name="password" id="password">
+ <input placeholder="e.g. the Dude" type="password" name="password" id="password">
<br>
<label for="message">Message:</label>
- <textarea placeholder="e.g. Your Message to me and quite some extra text so it doesn't fit in one row" name="message" id="message" rows="2"></textarea>
+ <textarea placeholder="e.g. Well, sir, it's this rug I had. It really tied the room together." name="message" id="message" rows="2"></textarea>
<br>
<input type="submit" value="send">
</form>
@@ -69,23 +69,23 @@
<h2>Form Elements with implicit labels (wrapping the form element into the label)</h2>
<form class="implicit">
<label>Firstname:
- <input placeholder="e.g. Your Firstname" type="text" name="firstname">
+ <input placeholder="e.g. Jeff" type="text" name="firstname">
</label>
<br>
<label>Lastname:
- <input placeholder="e.g. Your Lastname" type="text" name="lastname">
+ <input placeholder="e.g. Lebowski" type="text" name="lastname">
</label>
<br>
<label>Street:
- <input placeholder="e.g. Your street and quite some extra text so it doesn't fit inside of the field" type="text" name="street">
+ <input placeholder="e.g. 1000 main str and quite some extra text so it doesn't fit inside of the field" type="text" name="street">
</label>
<br>
<label>password:
- <input placeholder="e.g. your puppy" type="password" name="password">
+ <input placeholder="e.g. the Dude" type="password" name="password">
</label>
<br>
<label>Message:
- <textarea placeholder="e.g. Your Message to me and quite some extra text so it doesn't fit in one row" name="message" rows="2"></textarea>
+ <textarea placeholder="e.g. Well, sir, it's this rug I had. It really tied the room together." name="message" rows="2"></textarea>
</label>
<br>
<input type="submit" value="send">
View
20 index.html
@@ -34,19 +34,19 @@
<h2>Form Elements with explicit labels (using id and for)</h2>
<form>
<label for="firstname">Firstname:</label>
- <input placeholder="e.g. Your Firstname" type="text" name="firstname" id="firstname">
+ <input placeholder="e.g. Jeff" type="text" name="firstname" id="firstname">
<br>
<label for="lastname">Lastname:</label>
- <input placeholder="e.g. Your Lastname" type="text" name="lastname" id="lastname">
+ <input placeholder="e.g. Lebowski" type="text" name="lastname" id="lastname">
<br>
<label for="street">Street:</label>
- <input placeholder="e.g. Your street and quite some extra text so it doesn't fit inside of the field" type="text" name="street" id="street">
+ <input placeholder="e.g. 1000 main str and quite some extra text so it doesn't fit inside of the field" type="text" name="street" id="street">
<br>
<label for="password">password:</label>
- <input placeholder="e.g. your puppy" type="password" name="password" id="password">
+ <input placeholder="e.g. the Dude" type="password" name="password" id="password">
<br>
<label for="message">Message:</label>
- <textarea placeholder="e.g. Your Message to me and quite some extra text so it doesn't fit in one row" name="message" id="message" rows="2"></textarea>
+ <textarea placeholder="e.g. Well, sir, it's this rug I had. It really tied the room together." name="message" id="message" rows="2"></textarea>
<br>
<input type="submit" value="send">
</form>
@@ -72,23 +72,23 @@
<h2>Form Elements with implicit labels (wrapping the form element into the label)</h2>
<form class="implicit">
<label>Firstname:
- <input placeholder="e.g. Your Firstname" type="text" name="firstname">
+ <input placeholder="e.g. Jeff" type="text" name="firstname">
</label>
<br>
<label>Lastname:
- <input placeholder="e.g. Your Lastname" type="text" name="lastname">
+ <input placeholder="e.g. Lebowski" type="text" name="lastname">
</label>
<br>
<label>Street:
- <input placeholder="e.g. Your street and quite some extra text so it doesn't fit inside of the field" type="text" name="street">
+ <input placeholder="e.g. 1000 main str and quite some extra text so it doesn't fit inside of the field" type="text" name="street">
</label>
<br>
<label>password:
- <input placeholder="e.g. your puppy" type="password" name="password">
+ <input placeholder="e.g. the Dude" type="password" name="password">
</label>
<br>
<label>Message:
- <textarea placeholder="e.g. Your Message to me and quite some extra text so it doesn't fit in one row" name="message" rows="2"></textarea>
+ <textarea placeholder="e.g. Well, sir, it's this rug I had. It really tied the room together." name="message" rows="2"></textarea>
</label>
<br>
<input type="submit" value="send">
Please sign in to comment.
Something went wrong with that request. Please try again.