Text Feilds

ID:169923
 
Apr 12 2005, 12:06 pm
Without using htmllib, I want to create forms. Unfortunately, I don't know how to use Topic() to create text fields, and I also don't know how to set variables to the text feilds for easy Identification later. Can anyone help?
Apr 12 2005, 12:16 pm (Edited on Apr 12 2005, 12:21 pm)
The creation of the textfields involves HTML forms. When you submit a form or click a link client/Topic() gets called with all of the form fields (or link name) as its argument(s).

client/Topic() has two arguments you need to worry about, href, and href_list[], href is the full URL argument the browser sends. href_list[] is the same string parsed by params2list(). If you're gonna be using forms you'll need href_list[] more than href.


Okay, first we'll generate your form:
mob
    verb
        MyForm()
            usr << browse(\
            {"
            <form action=?>
            My name: <input type=text name=my_name>
            A comment: <input type=text name=comment>
            <input type=submit>
            </form>"})


<form action=?>
Basically means the form data will be sent to BYOND's default handler (if only using in Dream Seeker it's a better idea to use byond://? instead, but if using DMCGI you'll want just ?)

<input type=text name=my_name>
Creates a text input field tagged as "my_name".

Now, to see how to make Topic() work like we need it to.
client/Topic(href,href_list[])  //Make sure you have both defined.
    ..()
    if(href)  //Sanity check
        if(href_list["my_name"])
        //href_list's elements are tagged the same as your input fields.
            mob << "Your name is: [href_list["my_name"]]."
            if(href_list["comment"])
                mob << "Your comment is: [href_list["comment"]]."


That's it, good luck!
Apr 12 2005, 12:58 pm
Well, making a form requires basic knowledge of HTML and of CSS, which you can get at http://htmldog.com. Technically, it only requires HTML, but making any sort of web page without CSS is like stabbing yourself in the back.
Please read both chapters that htmldog has on forms before continuing on with this post. It would be preferable that you also learn some CSS, but it isn't completely essential to the comprehension of this post.

Due to the way BYOND works, to successfully pull the information submitted by the client out of the form, you need to know how to use associative lists, which you can read about at http://www.byondscape.com/ascape.dmb/LummoxJR.2002-0103/. Again, please read that before continuing on with this article.

Now, in DM, with the exception of DMCGI forms must use the following action and method:

{"<form action="byond://" method="get">"}


When the client submits the information, DM will pass a list through client/Topic()'s href_list argument in the following format:

href_list["[input_name]"] = "[value]"


Remember, whenever a hyperlink is clicked; whenever a form is submitted, client/Topic() is be called.

As an overview, I'll show you an example. Let's make a form that lets the player make a new name for himself.

var/name_form = {"
<html>
<head><style>
body{background-color:#000000;color:#ffffff;font-family:Tahoma;font-size:large;}
</style></head>


So far, we've just put in some CSS to make the page look decent. Notice the $lt;html> tag. That tag is required. The <style> tags, of course, are contained within the header.

var/name_form = {"
<html>
<head><style>
body{background-color:#000000;color:#ffffff;font-family:Tahoma;font-size:large;}
</style></head>
<body><form action="byond://" method="get">


We've now started the body, and we've started the form, using "byond://" as form action's value, and "get" as form method's value.

var/name_form = {"
<html>
<head><style>
body{background-color:#000000;color:#ffffff;font-family:Tahoma;font-size:large;}
</style></head>
<body><form action="byond://" method="get">
Name:
<input type="text" name="name">


Now, the form includes a little text box at which the player will be able to enter his name. This text box will work, but any truly good form has labels:

var/name_form = {"
<html>
<head><style>
body{background-color:#000000;color:#ffffff;font-family:Tahoma;font-size:large;}
</style></head>
<body><form action="byond://" method="get">
<label for="name">Name:</label>
<input type="text" name="name" id="name">


Now, if the player clicks on "Name", the text, his focus will be directed into the text box just as if he had clicked on the text box itself! Remember, label's for attribute is associated with input's id attribute, but neither have anything to do with input's name attribute. input's name attribute is responsible for processing the information that the player puts into the form. label for and input id have nothing to do with input name.

Now, let's put the form's submit button in and close the remaining HTML tags, finishing up our form:

var/name_form = {"
<html>
<head><style>
body{background-color:#000000;color:#ffffff;font-family:Tahoma;font-size:large;}
</style></head>
<body><form action="byond://" method="get">
<label for="name">Name:</label>
<input type="text" name="name" id="name">
<br><br>
<input type="submit">
</form>
</body></html>
"}


Our form is now finished, but right now, nothing will happen when the player submits it: the program is getting the information, but it hasn't been told what to do with it. To tell the program what to do, we use client/Topic():

client/Topic(href,href_list[])
    //Don't override client/Topic()!
    .=..()
    var/new_name = href_list["name"]
    //If the player typed something into
    //the text box.
    if(new_name)
        var/old_name = usr.name
        usr.name = new_name
        usr << "You have changed your name from [old_name] to [new_name]!"
Apr 12 2005, 1:02 pm
In response to Wizkidd0123
All that and you didn't remember to fix "feilds"?
Apr 14 2005, 8:17 am
Thanks alot you guys. That has really helped out. I have been trying to figure this out for quitesome time now.