Member Avatar for JohnnyBravo7234

I am currently working on a form in dreamweaver i i ran into a block.

on myan forms online now there's a text feild and in that feild it tells you what to input in that feild and when you click inside the feild the text that was inside it is deleted and you are left with a clear feild to type. i can't figure out how to have the text automatically deleted.

any help will be greatly appreciated, even if it's just to tell me that it can't be done in dreamweaver.

Thank You

  • 3 Contributors
  • 2 Replies
  • 213 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by bkendall

Dani AI

Generated

Short version: use the HTML5 placeholder attribute for the hint text, and add a tiny JavaScript fallback for older browsers so the hint clears on focus and isn’t submitted as a real value. This is the script-driven effect was pointing to, and it keeps things simple while you follow ’s advice to focus on labels, form method, and validation first.

Example (HTML + small fallback):

<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Your full name" />

<script>
(function(){
  var test = document.createElement('input');
  if ('placeholder' in test) return; // browser supports placeholder
  var els = document.querySelectorAll('input[placeholder], textarea[placeholder]');
  for (var i = 0; i < els.length; i++) {
    (function(el){
      var ph = el.getAttribute('placeholder');
      if (!el.value) el.value = ph;
      el.addEventListener('focus', function(){
        if (this.value === ph) this.value = '';
      }, false);
      el.addEventListener('blur', function(){
        if (this.value === '') this.value = ph;
      }, false);
      var form = el.form;
      if (form && !form._phHandler) {
        form._phHandler = true;
        form.addEventListener('submit', function(){
          var inputs = this.querySelectorAll('[placeholder]');
          for (var j = 0; j < inputs.length; j++) {
            if (inputs[j].value === inputs[j].getAttribute('placeholder')) {
              inputs[j].value = '';
            }
          }
        }, false);
      }
    })(els[i]);
  }
})();
</script>

Notes and quick tips: keep a visible <label> (don’t rely only on placeholder text) for accessibility and clarity; always validate on the server as well as client-side; preview changes in a real browser (Dreamweaver’s Design view won’t always reflect scripts). If you’re just starting, follow ’s suggestion: get the form semantics and validation working first, then add these small JS niceties as progressive enhancement.

Recommended Answers

All 2 Replies

Member Avatar for rus

That form is most likely using JavaScript to make the code disappear. I don't think this is a native function of Dreamweaver.

Member Avatar for bkendall

It can certainly be done, but probablly not in a drop and drag fashion through dreamweaver or a dreamweaver plugin.

I think something more important to consider is that if this is your first form, fancy javascript is something to worry down the road a bit. I would concentrate on form methods and understanding some basic validation.

Once you have a few under your belt then certainly look into javascript or perhaps flash forms to get the effects your after.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.