Jump to content


Photo
- - - - -

Creating a form bbcode-like parser in Dreamweaver


  • Please log in to reply
1 reply to this topic

#1 mgnus

mgnus

    Young Padawan

  • Members
  • Pip
  • 50 posts

Posted 28 May 2005 - 12:30 PM

Ok if your on this forum you've seen it. the bold button at the top of the place where you make a reply and the clickable smilies. Dreamweaver has a behavior function much like this where if you have a form like a forum, or a comment system it can be very useful. So lets start:

1.) Open up a new page in DreamWeaver or a old page with the for you want. for the sake of example i'll use a fake form with a name email and message
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<form name="form1" id="form1" method="post" action="">
  <p>Name:
    <input type="text" name="textfield" />
</p>
  <p>Email: 
    <input name="textarea" type="text" value="" />
</p>
  <p>Message:<br />
    <textarea name="textarea"></textarea>
</p>
  <p>
    <input type="submit" name="Submit" value="Submit" />
    <input type="reset" name="Reset" value="Reset" />
  </p>
    </form>
</body>
</html>
Thats your basic form. now, lets say for the sake of example B) that you want users to be able to make italicized text. well lets cover that next! first put the form into a table, and a section next to it. in the section next to it put a out of form button called I(like the button in the post reply or make new topic Code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

<table border="0">
  <tr>
    <td valign="top"><form name="form1" id="form1" method="post" action="">
  <p>Name:
    <input type="text" name="textfield" />
</p>
  <p>Email: 
    <input name="textarea" type="text" value="" />
</p>
  <p>Message:<br />
    <textarea name="textarea"></textarea>
</p>
  <p>
    <input type="submit" name="Submit" value="Submit" />
    <input type="reset" name="Reset" value="Reset" />
  </p>
    </form></td>
    <td valign="top"><input type="button" name="Button" style="font-style:italic;" value="I" /></td>
  </tr>
</table>
</body>
</html>
Now heres the fun part. Select the button you just made. (the "I" button) and in dreamweaver on the top menu goto window>behaviors.to your right a javascript behavior box will come up. click on the plus sign, and then to set text>set text of text field. a pop up will come up and at the top it says text feild to change it to third the text feild you want. I want mine to change in the message part, but i didn't change the names of my text fields, I do know its the third one, So I choose the third one and the it says text to replace, now what you type in here depends on your doctype, in the example i'm using xhtml 1.0 transitional, so i'll type
<em> </em>
and click ok. now in the behaviors the attribute you just made is divided into two things the first is what we need to worry about. it says on mouseover. That means that this effect will happen when you mouse over the italicize button. not good, because most ppl will mouse over that by accident, so click on that and change it to onclick. now save and test. when you click on the i button it makes italizcize tags on the form. Hope this tutorial helped you!!

pizel2life you can use this tut I feel bad about posting the warez site and using bad languae :lol: im going to write a few more tutorials yall can keep too later on like how to create a flash/quicktime detecter and a few other things.

#2 Apache

Apache

    P2L Jedi

  • Twodded Staff
  • PipPipPip
  • 778 posts
  • Location:London, UK

Posted 28 May 2005 - 02:32 PM

Theres just one problem is using this. When you click the button, ALL you text gets replaced.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users