How do you make a one-line text box have a choice box below it?

Discussion in 'HTML & Website Design' started by Jaguarjace, Oct 2, 2008.

0
  1. #1
    Hello I'm new to this,
    I am trying to find out how you can have a one-line textbox and when you click it a box appears below it with choices you can click to put into the box. This form is simular to the one you can find in Myspace because i'm working with a website like myspace. Please help! I only have 6 days left to get the service back online:(
     
    Jaguarjace, Oct 2, 2008 IP
  2. Jaguarjace

    Jaguarjace Guest

    Messages:
    52
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    This is the code without javascript:

    <html>

    <head>

    <style type="text/css">
    a. {text-decoration:none}
    div.choices {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid black;
    position: absolute;
    background-color: white;
    visibility: hidden;
    }
    div.choices div{
    cursor: default;
    padding: 0px 3px;
    }
    div.choices div.current {
    background-color: #3366cc;
    color: white;
    }
    </style>
    </head>
    <body link="#336699" vlink="#336699">
    <div style="position: absolute; top: 0; left: 0; width: 254; height: 71">
    <font face="Arial" size="1"><b>Status: </b></font><input type="text" name="Status" size="23" value="- is soo tired."><font face="Arial" size="1"><b>
    <a href="javascript:clear.Status()">Clear</a><br>Mood:&nbsp; </b></font><select name="Mood" size="1">
    <option value="0">(none)</option>
    <option value="90" selected>happy</option>
    <option value="55">sad</option>
    <option value="10">normal</option>
    <option value="157">calm</option>
    <option value="168">focused</option>
    <option value="169">loved</option>
    <option value="170">hated</option>
    <option value="93">full</option>
    <option value="96">weird</option>
    </select><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="submit" value="Done" name="B3" onclick="window.location('/aspx/08108910/mood_save.htm')";>
    <div class="choices">
    <div>is at home.</div>
    <div>is at work.</div>
    <div>is in class.</div>
    <div>is sleeping</div>
    <div>is eating.</div>
    <div>is taking a break.</div>
    <div>is studying.</div>
    <div>is in your extended network</div>
    </div>
    </div>

    Please help :(
     
    Jaguarjace, Oct 2, 2008 IP
  3. MikeHayes

    MikeHayes Peon

    Messages:
    95
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi,

    Here's a simple HTML solution.

    Hope it helps,

    MikeHayes


    <TABLE>
    <FORM ACTION="http://www.your-domain.com/cgi-bin/formmail.cgi"
    METHOD="post">
    <TABLE WIDTH="400" BORDER="3" CELLSPACING="5" BGCOLOR="#339933"
    BORDERCOLOR="yellow">
    <TR>
    <TD WIDTH="50%"><B>Your Name:</B></TD>
    <TD WIDTH="50%"><INPUT TYPE="text" NAME="fullname" MAXLENGTH="25"></TD>
    </TR>
    <TR>
    <TD WIDTH="50%"><B>Your E-Mail:</B></TD>
    <TD WIDTH="50%"><INPUT TYPE="text" NAME="email" MAXLENGTH="25"></TD>
    </TR>
    <TR>
    <TH COLSPAN="2">Please check the newsletters you'd like.</TD>
    </TR>
    <TR>
    <TH>Choice 1</TH>
    <TH><INPUT TYPE="checkbox" NAME="choice" VALUE="Choice 1"
    CHECKED></TH>
    </TR>
    <TR>
    <TH>Choice 2</TH>
    <TH><INPUT TYPE="checkbox" NAME="choice" VALUE="Choice 2"></TH>
    </TR>
    <TR>
    <TH>Choice 3</TH>
    <TH><INPUT TYPE="checkbox" NAME="choice" VALUE="Choice 3 "></TH>
    </TR>
    <TR>
    <TH>HTML Tips </TH>
    <TH><INPUT TYPE="checkbox" NAME="choice" VALUE="HTML Tips "></TH>
    </TR>
    <TR>
    <TH>Scripting</TH>
    <TH><INPUT TYPE="checkbox" NAME="choice" VALUE="Scripting"></TH>
    </TR>
    <TR>
    <TH>Elvis Monthly</TH>
    <TH><INPUT TYPE="checkbox" NAME="choice" VALUE="Elvis Monthly"></TH>
    </TR>
    <TR ALIGN="center">
    <TD WIDTH="50%"><INPUT TYPE="submit" VALUE="Subscribe Now!"></TD>
    <TD WIDTH="50%"> <INPUT TYPE="reset" VALUE="Clear form"></TD>
    </TR>
    <INPUT TYPE="hidden" NAME="recipient" VALUE="you@your-domain.com">
    <INPUT TYPE="hidden" NAME="subject" VALUE="Newsletter">
    <INPUT TYPE="hidden" NAME="required" VALUE="fullname,email">
    <INPUT TYPE="hidden" NAME="confirmation" VALUE="thanks.html">
    <INPUT TYPE="hidden" NAME="error_page" VALUE="whoops.html">
    <INPUT TYPE="hidden" NAME="ref" VALUE="code">
    </FORM >
    </TABLE>
     
    MikeHayes, Oct 3, 2008 IP
  4. Jaguarjace

    Jaguarjace Guest

    Messages:
    52
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Cool, this is very useful but here is a image of what i'm trying to do:
    [​IMG]
    I just used paint to put it together, just need some htm coding to make it real.
     
    Jaguarjace, Oct 3, 2008 IP
  5. Jaguarjace

    Jaguarjace Guest

    Messages:
    52
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    when you click in the textbox to change your status, it gives a list of other statuses you can choose. When you click one of the statuses, the box disappears and that choice is added into the textbox. I found a autosuggestion thing on google but it only gives suggestions to words like "A" and it gives a list of things with the letter A. My one is when you click the box, it comes up with all choices not things with a letter.
     
    Jaguarjace, Oct 3, 2008 IP