How to Add a Placeholder with HTML5 to Form Fields

Hello,

Now that HTML5 is becoming more and more compatible with web browsers, you should start thinking of adding placeholders to your form input fields. A placeholder is some text that is displayed when the form field hasn’t been clicked or has content in it. Here we have a picture of what a placeholder looks like in an input field:

placeholder

Keep reading to learn how to do it by yourself!

1. Declare we are going to use HTML5 in our site by adding the HTML5′s Doctype at the very start of your page, before the <html> tag:

<!DOCTYPE html>
<head>
...

2. To add a placeholder to a field, simply add the attribute placeholder to the field, with the regular syntax: attribute=”value”. So if we were to add a placeholder with the value Type something here.. to an input field, we would use the following code:

<input type='text' name='ourtext' placeholder='Type something here..'>

And there you go! Easy, huh? Go try it in your browser so you see how good and professional it looks. If you have any questions, article topic suggestions, please do not hesitate to contact me and I’ll do my best to assist you with anything.

Best Regards,

Richi

Owner of Juapo2Services

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , | Posted under Programming/Coding | RSS 2.0

Author Spotlight

Richi González

Richi González

I started programming when I was 12. I'm a Developer and have been working with the Clip-Bucket script since it came out. I became a Liaison between Arvixe and Clip-Bucket, so I am here to assist you with anything you need regarding Clip-Bucket or any particular computer-related subject you need. Best Regards, Richi

Leave a Reply

Your email address will not be published. Required fields are marked *


8 + 9 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>